Menu Group

"use client";

import React from "react";
import {
  Hotkey,
  IconArticle,
  IconEmotionHappy,
  IconShield,
  MenuGroup,
  MenuListBase,
  Tag,
} from "@brynlabs/fusion-ui";

export const MenuGroupExample = () => (
  <div style={{width: "100%", border: "1px solid lightgray"}}>
    <MenuGroup title={"Menu Group Title"}>
      <MenuListBase
        label={"Menu List Base"}
        image={"https://i.pravatar.cc/300"}
        subtitle={"Subtitle"}
        showChevron={true}
        labelPrefix={<IconEmotionHappy />}
        labelSuffix={
          <>
            <IconArticle />
            <Tag icon={<IconShield />}>Tag 123</Tag>
          </>
        }
        backSlot={
          <>
            <Tag icon={<IconShield />}>Tag 123</Tag>
            <Hotkey hotkey={["action", "c"]} />
          </>
        }
        hasCheckbox={true}
        selected={true}
      />
      <MenuListBase
        label={"Menu List Base"}
        image={"https://i.pravatar.cc/300"}
        subtitle={"Subtitle"}
        showChevron={true}
        labelPrefix={<IconEmotionHappy />}
        labelSuffix={
          <>
            <IconArticle />
            <Tag icon={<IconShield />}>Tag 123</Tag>
          </>
        }
        backSlot={
          <>
            <Tag icon={<IconShield />}>Tag 123</Tag>
            <Hotkey hotkey={["action", "c"]} />
          </>
        }
        hasCheckbox={true}
        selected={true}
      />
    </MenuGroup>
  </div>
);

"use client";

import React from "react";
import {Hotkey, IconDeleteBin5, MenuGroup, MenuListBase} from "@brynlabs/fusion-ui";

export const MenuGroupContextExample = () => (
  <div
    style={{width: "40%", border: "1px solid lightgray", borderRadius: "var(--border-radius--35)"}}>
    <MenuGroup title={"Options"} hasSeparator={true}>
      <MenuListBase label={"Copy"} backSlot={<Hotkey hotkey={["action", "c"]} />} />
      <MenuListBase
        label={"Paste"}
        backSlot={<Hotkey hotkey={["action", "v"]} />}
        state={"active"}
      />
      <MenuListBase label={"More"} showChevron={true} />
    </MenuGroup>
    <MenuGroup title={"Delete Options"}>
      <MenuListBase label={"Delete Item"} />
      <MenuListBase
        label={"Delete"}
        labelPrefix={<IconDeleteBin5 />}
        backSlot={<Hotkey hotkey={["action", "X"]} />}
        state={"danger"}
      />
    </MenuGroup>
  </div>
);