Menu

"use client";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Menu, MenuPopup, MenuSeparator, MenuCheckboxItem, MenuTrigger } from "@/components/ui/component";
export default function MenuWithCheckboxDemo() {
  const [showStatus, setShowStatus] = useState(true);
  const [showPanel, setShowPanel] = useState(false);
  const [showActivity, setShowActivity] = useState(false);
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-black p-8">
      <Menu>
        <MenuTrigger render={<Button variant="outline">View</Button>} />
        <MenuPopup>
          <MenuCheckboxItem checked={showStatus} onCheckedChange={(v) => setShowStatus(!!v)}>Status Bar</MenuCheckboxItem>
          <MenuCheckboxItem checked={showPanel} onCheckedChange={(v) => setShowPanel(!!v)}>Activity Bar</MenuCheckboxItem>
          <MenuCheckboxItem checked={showActivity} onCheckedChange={(v) => setShowActivity(!!v)}>Panel</MenuCheckboxItem>
        </MenuPopup>
      </Menu>
    </div>
  );
}