diff --git a/locales/de.json b/locales/de.json index 7b402fc..1392cda 100644 --- a/locales/de.json +++ b/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", diff --git a/locales/en.json b/locales/en.json index 295cab8..f422dff 100644 --- a/locales/en.json +++ b/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", diff --git a/src/app/[locale]/locations/[[...slug]]/components/place.server.tsx b/src/app/[locale]/locations/[[...slug]]/components/place.server.tsx index d4d5a60..5c605da 100644 --- a/src/app/[locale]/locations/[[...slug]]/components/place.server.tsx +++ b/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) {
.
-
+
{location.levels?.length > 0 && } -
- + -
+ + +
diff --git a/src/app/[locale]/saved/page.tsx b/src/app/[locale]/saved/page.tsx index 065d199..9d58ad2 100644 --- a/src/app/[locale]/saved/page.tsx +++ b/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 (
diff --git a/src/app/[locale]/saved/saved.client.tsx b/src/app/[locale]/saved/saved.client.tsx index 8d0463a..94fb603 100644 --- a/src/app/[locale]/saved/saved.client.tsx +++ b/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 (
-
- {t('saved_items')} -
{items .filter((item) => savedItems.includes(item.id)) @@ -32,8 +30,12 @@ export default function Saved({ items }: SavedProps) { function SavedContainer({ children }: ReactNodeProps) { return ( -
- {children} +
+ +
+ {children} +
+
); } diff --git a/src/app/[locale]/saved/savedheader.tsx b/src/app/[locale]/saved/savedheader.tsx new file mode 100644 index 0000000..0ed151f --- /dev/null +++ b/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 ( +
+ {t('saved_items')} + {savedItems?.length ? ( + + ) : null} +
+ ); +} diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx index 3e05bfc..53033dd 100644 --- a/src/components/modal/modal.tsx +++ b/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 }) {
-
+
-
- + -
+
{children} diff --git a/src/lib/uiStore.ts b/src/lib/uiStore.ts index b10296b..e38f3e8 100644 --- a/src/lib/uiStore.ts +++ b/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()( savedItems: state.savedItems.filter((item) => item != data), })); }, + removeAll: () => { + set(() => ({ + savedItems: [], + })); + }, }), { name: 'UIStore', - partialize: (state) => ({ savedItems: state.savedItems }), + partialize: (state) => ({ savedItems: state.savedItems }), }, ), ); diff --git a/tailwind.config.ts b/tailwind.config.ts index 4207124..11db0f9 100644 --- a/tailwind.config.ts +++ b/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%)', + }, + }, }, }, },