|
|
@ -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 { 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 RichText from "@/components/rich-text";
|
|
|
|
import { TabContentBaseProps } from "@ark-ui/react";
|
|
|
|
import { TabContentBaseProps } from "@ark-ui/react";
|
|
|
|
import { Tabs } from "@/components/ui/tabs";
|
|
|
|
import { Tabs } from "@/components/ui/tabs";
|
|
|
@ -30,45 +28,27 @@ export default async function CategoryTabContent({
|
|
|
|
{menuItems.docs.map((mi) => (
|
|
|
|
{menuItems.docs.map((mi) => (
|
|
|
|
<HStack key={mi.id} alignItems="start">
|
|
|
|
<HStack key={mi.id} alignItems="start">
|
|
|
|
<Stack marginRight="auto">
|
|
|
|
<Stack marginRight="auto">
|
|
|
|
<HStack>
|
|
|
|
<HStack alignItems="start">
|
|
|
|
<Text>{mi.name}</Text>
|
|
|
|
<Text>{mi.name}</Text>
|
|
|
|
{mi.image && (
|
|
|
|
<HStack flexWrap="wrap">
|
|
|
|
<HoverCard.Root>
|
|
|
|
{mi.tags?.map((tag) => (
|
|
|
|
<HoverCard.Trigger asChild>
|
|
|
|
<MenuItemTag key={(tag as MenuItemTagT).id} tag={tag as MenuItemTagT} />
|
|
|
|
<IconButton variant="ghost">
|
|
|
|
))}
|
|
|
|
<ImageIcon />
|
|
|
|
</HStack>
|
|
|
|
</IconButton>
|
|
|
|
{mi.image && <MenuItemImage image={mi.image as Media} />}
|
|
|
|
</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>
|
|
|
|
</HStack>
|
|
|
|
{mi.description && (
|
|
|
|
{mi.description && (
|
|
|
|
<RichText content={mi.description} className={css({ color: "fg.muted" })} />
|
|
|
|
<RichText content={mi.description} className={css({ color: "fg.muted" })} />
|
|
|
|
)}
|
|
|
|
)}
|
|
|
|
</Stack>
|
|
|
|
</Stack>
|
|
|
|
<HStack justify="end">
|
|
|
|
<Stack css={{ sm: { justifyContent: "end", flexDir: "row" } }}>
|
|
|
|
{mi.variants.map((v) => (
|
|
|
|
{mi.variants.map((v) => (
|
|
|
|
<Stack key={v.id} align="end">
|
|
|
|
<Stack key={v.id} align="end">
|
|
|
|
<Text>{formatToCHF(v.price!)}</Text>
|
|
|
|
<Text>{formatToCHF(v.price!)}</Text>
|
|
|
|
<Text color="fg.muted">{v.title}</Text>
|
|
|
|
<Text color="fg.muted">{v.title}</Text>
|
|
|
|
</Stack>
|
|
|
|
</Stack>
|
|
|
|
))}
|
|
|
|
))}
|
|
|
|
</HStack>
|
|
|
|
</Stack>
|
|
|
|
</HStack>
|
|
|
|
</HStack>
|
|
|
|
))}
|
|
|
|
))}
|
|
|
|
</Stack>
|
|
|
|
</Stack>
|
|
|
|