feat: ✨ display menu item tags

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<Options<"menu-item">, "collection">) => {
+export const getMenuItems = async (opts: Omit<Options<"menu-item">, "collection" | "depth">) => {
   const payload = await getPayload();
-  return payload.find({ collection: "menu-item", ...opts });
+  return payload.find({ collection: "menu-item", depth: 1, ...opts });
 };

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) => (
           <HStack key={mi.id} alignItems="start">
             <Stack marginRight="auto">
-              <HStack>
+              <HStack alignItems="start">
                 <Text>{mi.name}</Text>
-                {mi.image && (
-                  <HoverCard.Root>
-                    <HoverCard.Trigger asChild>
-                      <IconButton variant="ghost">
-                        <ImageIcon />
-                      </IconButton>
-                    </HoverCard.Trigger>
-                    <HoverCard.Positioner>
-                      <HoverCard.Content>
-                        <HoverCard.Arrow>
-                          <HoverCard.ArrowTip />
-                        </HoverCard.Arrow>
-                        <Box w={250} h={150} position="relative">
-                          <Image
-                            src={(mi.image as Media).url!}
-                            alt={(mi.image as Media).alt ?? ""}
-                            className={css({ objectFit: "cover" })}
-                            fill
-                          />
-                        </Box>
-                      </HoverCard.Content>
-                    </HoverCard.Positioner>
-                  </HoverCard.Root>
-                )}
+                <HStack flexWrap="wrap">
+                  {mi.tags?.map((tag) => (
+                    <MenuItemTag key={(tag as MenuItemTagT).id} tag={tag as MenuItemTagT} />
+                  ))}
+                </HStack>
+                {mi.image && <MenuItemImage image={mi.image as Media} />}
               </HStack>
               {mi.description && (
                 <RichText content={mi.description} className={css({ color: "fg.muted" })} />
               )}
             </Stack>
-            <HStack justify="end">
+            <Stack css={{ sm: { justifyContent: "end", flexDir: "row" } }}>
               {mi.variants.map((v) => (
                 <Stack key={v.id} align="end">
                   <Text>{formatToCHF(v.price!)}</Text>
                   <Text color="fg.muted">{v.title}</Text>
                 </Stack>
               ))}
-            </HStack>
+            </Stack>
           </HStack>
         ))}
       </Stack>

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 (
+    <HoverCard.Root>
+      <HoverCard.Trigger asChild>
+        <IconButton variant="ghost">
+          <ImageIcon />
+        </IconButton>
+      </HoverCard.Trigger>
+      <HoverCard.Positioner>
+        <HoverCard.Content>
+          <HoverCard.Arrow>
+            <HoverCard.ArrowTip />
+          </HoverCard.Arrow>
+          <Box w={250} h={150} position="relative">
+            <Image
+              src={(image as Media).url!}
+              alt={(image as Media).alt ?? ""}
+              className={css({ objectFit: "cover" })}
+              fill
+            />
+          </Box>
+        </HoverCard.Content>
+      </HoverCard.Positioner>
+    </HoverCard.Root>
+  );
+}

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 (
+    <HoverCard.Root>
+      <HoverCard.Trigger asChild>
+        <Box bg="accent.a8" color="white" fontSize="xs" borderRadius="md" p={1}>
+          {(tag as MenuItemTag).name}
+        </Box>
+      </HoverCard.Trigger>
+      <HoverCard.Positioner>
+        <HoverCard.Content p={2} pb={0.5}>
+          <HoverCard.Arrow>
+            <HoverCard.ArrowTip />
+          </HoverCard.Arrow>
+          {(tag as MenuItemTag).description !== undefined && (
+            <RichText
+              content={(tag as MenuItemTag).description}
+              className={css({ fontSize: "sm" })}
+            />
+          )}
+        </HoverCard.Content>
+      </HoverCard.Positioner>
+    </HoverCard.Root>
+  );
+}