Fusion UI

Overview

MenuListBase is the item all menus are made of: context menus, selects, the command menu and side menus. Its props change size, look and interactivity.

"use client";

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

export const MenuListBaseExample = () => (
  <div
    style={{
      width: "100%",
      border: "1px solid lightgray",
      borderRadius: "var(--border-radius--35)",
    }}>
    <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"]} />
        </>
      }
      onClick={() => console.log("Clicked")}
    />
  </div>
);

States

"use client";

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

export const MenuListBaseStatesExample = () => {
  const [selected, setSelected] = useState(true);
  return (
    <div
      style={{
        width: "100%",
        border: "1px solid lightgray",
        borderRadius: "var(--border-radius--35)",
      }}>
      <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"]} />
          </>
        }
      />
      <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"]} />
          </>
        }
        state={"active"}
      />
      <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={selected}
        onSelectedChange={setSelected}
      />
      <MenuListBase
        label={"Menu List Base"}
        image={"https://i.pravatar.cc/300"}
        subtitle={"Subtitle"}
        labelPrefix={<IconEmotionHappy />}
        labelSuffix={
          <>
            <IconArticle />
            <Tag tagStyle={"critical"} emphasis={"high"} icon={<IconShield />}>
              Tag 123
            </Tag>
          </>
        }
        backSlot={
          <>
            <Tag tagStyle={"critical"} emphasis={"high"} icon={<IconShield />}>
              Tag 123
            </Tag>
            <Hotkey hotkey={["action", "c"]} />
          </>
        }
        state={"danger"}
      />
    </div>
  );
};

Variants

Selected: false, false, true, false

"use client";

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

export const MenuListBaseVariantsExample = () => {
  const [selected, setSelected] = useState<boolean[]>([false, false, true, false]);

  const handleSelectedChange = (index: number) => (value: boolean) => {
    setSelected(prev => prev.map((item, i) => (i === index ? value : item)));
  };

  return (
    <>
      <div
        style={{
          width: "300px",
          border: "1px solid lightgray",
          borderRadius: "var(--border-radius--35)",
        }}>
        <MenuListBase
          label={"Copy"}
          labelPrefix={<IconFileCopy />}
          backSlot={<Hotkey hotkey={["action", "c"]} />}
        />
        <MenuListBase
          label={"Paste"}
          alignLabelPrefix={true}
          backSlot={<Hotkey hotkey={["action", "v"]} />}
          state={"active"}
        />
        <MenuListBase
          label={"Delete"}
          labelPrefix={<IconDeleteBin5 />}
          backSlot={<Hotkey hotkey={["action", "X"]} />}
          state={"danger"}
        />
        <MenuListBase label={"More"} showChevron={true} labelPrefix={<IconArticle />} />
      </div>
      <br />
      <div
        style={{
          width: "300px",
          border: "1px solid lightgray",
          borderRadius: "var(--border-radius--35)",
        }}>
        <MenuListBase
          label={"Show Title"}
          backSlot={<Hotkey hotkey={["action", "c"]} />}
          hasCheckbox={true}
          selected={selected[0]}
          onSelectedChange={handleSelectedChange(0)}
        />
        <MenuListBase
          label={"Show Content"}
          backSlot={<Hotkey hotkey={["action", "v"]} />}
          state={"active"}
          hasCheckbox={true}
          selected={selected[1]}
          onSelectedChange={handleSelectedChange(1)}
        />
        <MenuListBase
          label={"Show Footer"}
          backSlot={<Hotkey hotkey={["action", "v"]} />}
          hasCheckbox={true}
          selected={selected[2]}
          onSelectedChange={handleSelectedChange(2)}
        />
        <MenuListBase
          label={"Show All"}
          backSlot={<Hotkey hotkey={["action", "X"]} />}
          state={"danger"}
          hasCheckbox={true}
          selected={selected[3]}
          onSelectedChange={handleSelectedChange(3)}
        />
      </div>
      <br />
      Selected: {selected.join(", ")}
    </>
  );
};