From da835189c579a386b142fafea0b88dd769c434e7 Mon Sep 17 00:00:00 2001 From: RaviAnand Mohabir Date: Tue, 27 Aug 2024 23:46:06 +0200 Subject: [PATCH] feat: :sparkles: display menu item tags --- src/api/menu.ts | 4 +- .../[locale]/menu/category-tab-content.tsx | 46 ++++++------------- .../[locale]/menu/menu-item-image.tsx | 34 ++++++++++++++ .../[locale]/menu/menu-item-tag.tsx | 41 +++++++++++++++++ 4 files changed, 90 insertions(+), 35 deletions(-) create mode 100644 src/app/(frontend)/[locale]/menu/menu-item-image.tsx create mode 100644 src/app/(frontend)/[locale]/menu/menu-item-tag.tsx diff --git a/src/api/menu.ts b/src/api/menu.ts index cc37d91..c10c2aa 100644 --- a/src/api/menu.ts +++ b/src/api/menu.ts @@ -8,7 +8,7 @@ export const getMenuCategories = async ( return payload.find({ collection: "menu-category", pagination: false, ...opts }); }; -export const getMenuItems = async (opts: Omit, "collection">) => { +export const getMenuItems = async (opts: Omit, "collection" | "depth">) => { const payload = await getPayload(); - return payload.find({ collection: "menu-item", ...opts }); + return payload.find({ collection: "menu-item", depth: 1, ...opts }); }; diff --git a/src/app/(frontend)/[locale]/menu/category-tab-content.tsx b/src/app/(frontend)/[locale]/menu/category-tab-content.tsx index 50d6c39..d174df7 100644 --- a/src/app/(frontend)/[locale]/menu/category-tab-content.tsx +++ b/src/app/(frontend)/[locale]/menu/category-tab-content.tsx @@ -1,11 +1,9 @@ -import { Box, HStack, Stack } from "@styled-system/jsx"; +import { HStack, Stack } from "@styled-system/jsx"; +import type { Media, MenuItemTag as MenuItemTagT } from "@/payload-types"; -import { HoverCard } from "@/components/ui/hover-card"; -import { IconButton } from "@/components/ui/icon-button"; -import Image from "next/image"; -import { Image as ImageIcon } from "lucide-react"; import { Locale } from "@/i18n/settings"; -import { Media } from "@/payload-types"; +import MenuItemImage from "@/app/(frontend)/[locale]/menu/menu-item-image"; +import MenuItemTag from "./menu-item-tag"; import RichText from "@/components/rich-text"; import { TabContentBaseProps } from "@ark-ui/react"; import { Tabs } from "@/components/ui/tabs"; @@ -30,45 +28,27 @@ export default async function CategoryTabContent({ {menuItems.docs.map((mi) => ( - + {mi.name} - {mi.image && ( - - - - - - - - - - - - - {(mi.image - - - - - )} + + {mi.tags?.map((tag) => ( + + ))} + + {mi.image && } {mi.description && ( )} - + {mi.variants.map((v) => ( {formatToCHF(v.price!)} {v.title} ))} - + ))} diff --git a/src/app/(frontend)/[locale]/menu/menu-item-image.tsx b/src/app/(frontend)/[locale]/menu/menu-item-image.tsx new file mode 100644 index 0000000..0f4133d --- /dev/null +++ b/src/app/(frontend)/[locale]/menu/menu-item-image.tsx @@ -0,0 +1,34 @@ +import { Box } from "@styled-system/jsx"; +import { HoverCard } from "@ark-ui/react"; +import { IconButton } from "@/components/ui/icon-button"; +import Image from "next/image"; +import { ImageIcon } from "lucide-react"; +import { Media } from "@/payload-types"; +import { css } from "@styled-system/css"; + +export default function MenuItemImage({ image }: { image: Media }) { + return ( + + + + + + + + + + + + + {(image + + + + + ); +} diff --git a/src/app/(frontend)/[locale]/menu/menu-item-tag.tsx b/src/app/(frontend)/[locale]/menu/menu-item-tag.tsx new file mode 100644 index 0000000..255b63a --- /dev/null +++ b/src/app/(frontend)/[locale]/menu/menu-item-tag.tsx @@ -0,0 +1,41 @@ +import { Box, HStack, Stack } from "@styled-system/jsx"; +import { Media, MenuItemTag } from "@/payload-types"; + +import { HoverCard } from "@/components/ui/hover-card"; +import { IconButton } from "@/components/ui/icon-button"; +import Image from "next/image"; +import { Image as ImageIcon } from "lucide-react"; +import { Locale } from "@/i18n/settings"; +import MenuItemImage from "@/app/(frontend)/[locale]/menu/menu-item-image"; +import RichText from "@/components/rich-text"; +import { TabContentBaseProps } from "@ark-ui/react"; +import { Tabs } from "@/components/ui/tabs"; +import { Text } from "@/components/ui/text"; +import { css } from "@styled-system/css"; +import { formatToCHF } from "@/utils/formatters"; +import { getMenuItems } from "@/api"; + +export default function MenuItemTag({ tag }: { tag: MenuItemTag }) { + return ( + + + + {(tag as MenuItemTag).name} + + + + + + + + {(tag as MenuItemTag).description !== undefined && ( + + )} + + + + ); +}