feat: remove popover if tag doesn't have description

main
RaviAnand Mohabir 2 months ago
parent da835189c5
commit 6a01af0c92

@ -1,26 +1,24 @@
import { Box, HStack, Stack } from "@styled-system/jsx"; import type { MenuItemTag } from "@/payload-types";
import { Media, MenuItemTag } from "@/payload-types"; import { Box } from "@styled-system/jsx";
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 RichText from "@/components/rich-text";
import { TabContentBaseProps } from "@ark-ui/react"; import { HoverCard } from "@/components/ui/hover-card";
import { Tabs } from "@/components/ui/tabs";
import { Text } from "@/components/ui/text";
import { css } from "@styled-system/css"; import { css } from "@styled-system/css";
import { formatToCHF } from "@/utils/formatters";
import { getMenuItems } from "@/api";
export default function MenuItemTag({ tag }: { tag: MenuItemTag }) { export default function MenuItemTag({ tag }: { tag: MenuItemTag }) {
if (!tag.description) {
return (
<Box bg="accent.a8" color="white" fontSize="xs" borderRadius="md" p={1}>
{tag.name}
</Box>
);
}
return ( return (
<HoverCard.Root> <HoverCard.Root>
<HoverCard.Trigger asChild> <HoverCard.Trigger asChild>
<Box bg="accent.a8" color="white" fontSize="xs" borderRadius="md" p={1}> <Box bg="accent.a8" color="white" fontSize="xs" borderRadius="md" p={1}>
{(tag as MenuItemTag).name} {tag.name}
</Box> </Box>
</HoverCard.Trigger> </HoverCard.Trigger>
<HoverCard.Positioner> <HoverCard.Positioner>
@ -28,12 +26,7 @@ export default function MenuItemTag({ tag }: { tag: MenuItemTag }) {
<HoverCard.Arrow> <HoverCard.Arrow>
<HoverCard.ArrowTip /> <HoverCard.ArrowTip />
</HoverCard.Arrow> </HoverCard.Arrow>
{(tag as MenuItemTag).description !== undefined && ( <RichText content={tag.description} className={css({ fontSize: "sm" })} />
<RichText
content={(tag as MenuItemTag).description}
className={css({ fontSize: "sm" })}
/>
)}
</HoverCard.Content> </HoverCard.Content>
</HoverCard.Positioner> </HoverCard.Positioner>
</HoverCard.Root> </HoverCard.Root>

Loading…
Cancel
Save