saved remove all

locales/de.json

@@ -26,7 +26,8 @@
     "Saved": {
         "saved_items": "Gemerkte Projekte",
         "remove": "entfernen",
-        "save": "merken"
+        "save": "merken",
+        "remove_all": "Alle entfernen"
     },
     "Landing": {
         "udk_berlin": "UdK Berlin",

locales/en.json

@@ -26,7 +26,8 @@
     "Saved": {
         "saved_items": "Saved Projects",
         "remove": "remove",
-        "save": "save"
+        "save": "save",
+        "remove_all": "Remove All"
     },
     "Landing": {
         "udk_berlin": "UdK Berlin",

src/app/[locale]/locations/[[...slug]]/components/place.server.tsx

@@ -2,6 +2,8 @@ import { Link } from '@/navigation';
 import Floorplan from './floorplan/index.server';
 import Subnavigation from './subnavigation/index.server';
 import { LocationItem } from '@/types/types';
+import Cross from '@/components/icons/cross';
+import SmoothButton from '@/components/smoothButton';
 
 type PlaceProps = {
   location: LocationItem;
@@ -13,13 +15,17 @@ export default async function Place({ location }: PlaceProps) {
       <div className="bg-transparent pointer-events-none hidden h-[50dvh] sm:block">
         .
       </div>
-      <div className="sm:min-h-place pointer-events-auto relative max-h-fit min-h-[400px] w-full items-start rounded-md bg-secondary sm:grid sm:grid-cols-2">
+      <div className="pointer-events-auto relative max-h-fit min-h-[400px] w-full items-start rounded-md border-t-2  border-primary bg-secondary sm:grid sm:min-h-place sm:grid-cols-2">
         <Subnavigation location={location} />
         {location.levels?.length > 0 && <Floorplan location={location} />}
         <Link href="/locations" scroll={true}>
-          <div className="absolute right-2 top-0 rotate-45 text-xl text-primary hover:text-highlight">
-            +
-          </div>
+          <SmoothButton
+            className="absolute right-2 top-0 fill-secondary p-2"
+            top
+            color="primary"
+          >
+            <Cross color="secondary" className="rotate-45" />
+          </SmoothButton>
         </Link>
       </div>
     </div>

src/app/[locale]/saved/page.tsx

@@ -9,6 +9,7 @@ export const revalidate = 0; // revalidate the data at most every hour
 
 export default async function SavedPage() {
   const items = await getGraphQLItems();
+
   return (
     <main className="flex min-h-screen flex-col items-center justify-between p-0">
       <Saved items={items} />

src/app/[locale]/saved/saved.client.tsx

@@ -5,6 +5,8 @@ import { Item } from '@/types/item';
 import ProjectCard from '@/components/project/card.server';
 import { useUIStore } from '@/lib/uiStore';
 import { useStore } from 'zustand';
+import JumpToTop from '@/components/jumpToTop';
+import SavedHeader from './savedheader';
 
 export type SavedProps = {
   items: Item[];
@@ -13,12 +15,8 @@ export type SavedProps = {
 export default function Saved({ items }: SavedProps) {
   const savedItems = useStore(useUIStore, (state) => state.savedItems);
   const t = useTranslations('Saved');
-
   return (
     <div className="w-full">
-      <div className="w-full p-gutter-sm text-left text-lg">
-        {t('saved_items')}
-      </div>
       <SavedContainer>
         {items
           .filter((item) => savedItems.includes(item.id))
@@ -32,8 +30,12 @@ export default function Saved({ items }: SavedProps) {
 
 function SavedContainer({ children }: ReactNodeProps) {
   return (
-    <div className="col-span-1 h-full columns-1 gap-0 bg-secondary xs:col-span-2 xs:columns-2 md:col-span-5 md:columns-5">
-      {children}
+    <div className="z-50 -ml-[1px] h-content max-h-content min-h-content overflow-y-scroll bg-primary">
+      <SavedHeader />
+      <div className="grid max-h-fit min-h-content w-full columns-5 items-start justify-start gap-border bg-primary px-border md:grid-cols-4">
+        {children}
+      </div>
+      <JumpToTop />
     </div>
   );
 }

src/app/[locale]/saved/savedheader.tsx

@@ -0,0 +1,26 @@
+'use client';
+import { useTranslations } from 'next-intl';
+import { useUIStore } from '@/lib/uiStore';
+import { useStore } from 'zustand';
+import Cross from '@/components/icons/cross';
+
+export default function SavedHeader(props: any) {
+  const savedItems = useStore(useUIStore, (state) => state.savedItems);
+  const removeAll = useStore(useUIStore, (state) => state.removeAll);
+  const t = useTranslations('Saved');
+
+  return (
+    <div className="flex h-content-header w-full items-center justify-between rounded-md border-border border-t-0 border-primary bg-secondary text-left text-lg">
+      <span className="p-gutter-sm">{t('saved_items')}</span>
+      {savedItems?.length ? (
+        <button
+          className="flex rounded-md border-l-border border-primary  p-gutter-sm"
+          onClick={removeAll}
+        >
+          <span className="pr-4">{t('remove_all')} </span>
+          <Cross className="h-[30px] rotate-45" />
+        </button>
+      ) : null}
+    </div>
+  );
+}

src/components/modal/modal.tsx

@@ -4,7 +4,8 @@ import { type ElementRef, useEffect, useRef, useCallback } from 'react';
 import { usePathname, useRouter } from '@/navigation';
 import cx from 'classnames';
 import { createPortal } from 'react-dom';
-import SmoothButton from "@/components/smoothButton";
+import SmoothButton from '@/components/smoothButton';
+import Cross from '../icons/cross';
 
 export default function Modal({ children }: { children: React.ReactNode }) {
   const router = useRouter();
@@ -26,14 +27,15 @@ export default function Modal({ children }: { children: React.ReactNode }) {
     <div className="fixed bottom-0 left-0 z-50">
       <dialog
         ref={dialogRef}
-        className={cx('h-modal fixed bottom-0 left-0 z-50 w-1/3', margin)}
+        className={cx(
+          'animate-showModal fixed bottom-0 left-0 z-50 h-modal w-1/3',
+          margin,
+        )}
         onClose={onDismiss}
       >
-        <div className="absolute right-0 top-0 p-8 text-primary">
+        <div className="absolute right-0 top-0 border-r-2 border-primary p-8 text-primary">
           <SmoothButton onClick={onDismiss} top>
-            <div className="rotate-45 text-lg text-primary hover:text-black">
-              +
-            </div>
+            <Cross className="w-gridcell h-gridcell rotate-45 p-2" />
           </SmoothButton>
         </div>
         {children}

src/lib/uiStore.ts

@@ -7,6 +7,7 @@ export type UIStore = {
   menuOpen: boolean;
   saveItem: (data: Item['id']) => void;
   removeItem: (data: Item['id']) => void;
+  removeAll: () => void;
   setMenuOpen: () => void;
 };
 
@@ -28,10 +29,15 @@ export const useUIStore = create<UIStore>()(
           savedItems: state.savedItems.filter((item) => item != data),
         }));
       },
+      removeAll: () => {
+        set(() => ({
+          savedItems: [],
+        }));
+      },
     }),
     {
       name: 'UIStore',
-        partialize: (state) => ({ savedItems: state.savedItems }),
+      partialize: (state) => ({ savedItems: state.savedItems }),
     },
   ),
 );

tailwind.config.ts

@@ -37,7 +37,7 @@ const config: Config = {
         '30px',
         {
           letterSpacing: '1',
-          lineHeight: '1',
+          lineHeight: '1.33',
         },
       ],
       md: [
@@ -171,7 +171,8 @@ const config: Config = {
       animation: {
         bounceLeft: `bounceLeft 1s infinite`,
         bounceRight: `bounceRight 1s infinite`,
-        height: `max-height 0.25s ease-in`,
+        showModal: `showModal 1s ease normal`,
+        hideModal: `hideModal 1s ease normal`,
       },
       keyframes: {
         bounceLeft: {
@@ -202,6 +203,19 @@ const config: Config = {
             animationTimingFunction: 'cubic-bezier(0.8,0,1,1)',
           },
         },
+        showModal: {
+          from: {
+            transform: 'translateY(200%)',
+          },
+          to: {
+            transform: 'translateY(0%)',
+          },
+        },
+        hideModal: {
+          to: {
+            transform: 'translateY(100%)',
+          },
+        },
       },
     },
   },