Menu

"use client"

import { Button } from "@/components/ui/preskok-ui/button"
import {
  Menu,
  MenuContent,
  MenuItem,
  MenuLabel,
  MenuSeparator,
  MenuSubMenu,
} from "@/components/ui/preskok-ui/menu"

export function MenuPreskokDemo() {
  return (
    <Menu>
      <Button intent="outline">Open</Button>
      <MenuContent popover={{ placement: "bottom" }}>
        <MenuItem>
          <MenuLabel>Dashboard</MenuLabel>
        </MenuItem>
        <MenuItem>
          <MenuLabel>Reports</MenuLabel>
        </MenuItem>
        <MenuSeparator />
        <MenuSubMenu>
          <MenuItem>
            <MenuLabel>Settings</MenuLabel>
          </MenuItem>
          <MenuContent>
            <MenuItem>
              <MenuLabel>General</MenuLabel>
            </MenuItem>
            <MenuItem>
              <MenuLabel>Security</MenuLabel>
            </MenuItem>
            <MenuSeparator />
            <MenuSubMenu>
              <MenuItem>
                <MenuLabel>Privacy</MenuLabel>
              </MenuItem>
              <MenuContent>
                <MenuItem>
                  <MenuLabel>Data Sharing</MenuLabel>
                </MenuItem>
                <MenuItem>
                  <MenuLabel>Cookies</MenuLabel>
                </MenuItem>
                <MenuSeparator />
                <MenuSubMenu>
                  <MenuItem>
                    <MenuLabel>Advanced</MenuLabel>
                  </MenuItem>
                  <MenuContent>
                    <MenuItem>
                      <MenuLabel>Encryption</MenuLabel>
                    </MenuItem>
                    <MenuItem>
                      <MenuLabel>Access Logs</MenuLabel>
                    </MenuItem>
                    <MenuItem>
                      <MenuLabel>API Keys</MenuLabel>
                    </MenuItem>
                  </MenuContent>
                </MenuSubMenu>
              </MenuContent>
            </MenuSubMenu>
          </MenuContent>
        </MenuSubMenu>
        <MenuItem>
          <MenuLabel>Help</MenuLabel>
        </MenuItem>
      </MenuContent>
    </Menu>
  )
}

"use client"

import { Button } from "@/components/ui/preskok-ui/button"
import {
  Menu,
  MenuContent,
  MenuItem,
  MenuLabel,
  MenuSeparator,
  MenuSubMenu,
} from "@/components/ui/preskok-ui/menu"

export function MenuSubmenuDemo() {
  return (
    <Menu>
      <Button intent="outline">Open</Button>
      <MenuContent popover={{ placement: "bottom" }}>
        <MenuItem>
          <MenuLabel>Add Vehicle</MenuLabel>
        </MenuItem>
        <MenuSubMenu>
          <MenuItem>
            <MenuLabel>Service</MenuLabel>
          </MenuItem>
          <MenuContent>
            <MenuItem>
              <MenuLabel>Schedule Maintenance</MenuLabel>
            </MenuItem>
            <MenuItem>
              <MenuLabel>Check Recall Status</MenuLabel>
            </MenuItem>
            <MenuSeparator />
            <MenuSubMenu>
              <MenuItem>
                <MenuLabel>Roadside Assistance</MenuLabel>
              </MenuItem>
              <MenuContent>
                <MenuItem>
                  <MenuLabel>Request Tow Truck</MenuLabel>
                </MenuItem>
                <MenuItem>
                  <MenuLabel>Battery Jump Start</MenuLabel>
                </MenuItem>
              </MenuContent>
            </MenuSubMenu>
          </MenuContent>
        </MenuSubMenu>
        <MenuSeparator />
        <MenuItem>
          <MenuLabel>Retire Vehicle</MenuLabel>
        </MenuItem>
      </MenuContent>
    </Menu>
  )
}

"use client"

import { Button } from "@/components/ui/preskok-ui/button"
import {
  Menu,
  MenuContent,
  MenuDescription,
  MenuItem,
  MenuLabel,
  MenuSeparator,
} from "@/components/ui/preskok-ui/menu"

export function MenuDescriptionDemo() {
  return (
    <Menu>
      <Button intent="outline">Open</Button>
      <MenuContent className="min-w-72" popover={{ placement: "bottom" }}>
        <MenuItem id="new-listing">
          <MenuLabel>New Listing</MenuLabel>
          <MenuDescription>
            Add a vehicle to the dealership inventory.
          </MenuDescription>
        </MenuItem>
        <MenuItem id="book-test-drive">
          <MenuLabel>Book Test Drive</MenuLabel>
          <MenuDescription>
            Reserve a time slot and assign a sales advisor.
          </MenuDescription>
        </MenuItem>
        <MenuSeparator />
        <MenuItem id="mark-sold">
          <MenuLabel>Mark as Sold</MenuLabel>
          <MenuDescription>
            Move the vehicle from available to completed sales.
          </MenuDescription>
        </MenuItem>
      </MenuContent>
    </Menu>
  )
}

"use client"

import { useState } from "react"
import type { Selection } from "react-aria-components"

import { Button } from "@/components/ui/preskok-ui/button"
import {
  Menu,
  MenuContent,
  MenuItem,
  MenuLabel,
} from "@/components/ui/preskok-ui/menu"

export function MenuMultipleDemo() {
  const [selected, setSelected] = useState<Selection>(new Set(["laneAssist"]))

  return (
    <Menu>
      <Button intent="outline">Open</Button>
      <MenuContent
        popover={{ placement: "bottom" }}
        selectionMode="multiple"
        selectedKeys={selected}
        onSelectionChange={setSelected}
        items={items}
      >
        {(item) => (
          <MenuItem id={item.slug} textValue={item.name}>
            <MenuLabel>{item.name}</MenuLabel>
          </MenuItem>
        )}
      </MenuContent>
    </Menu>
  )
}

const items = [
  {
    name: "Lane Assist",
    slug: "laneAssist",
  },
  {
    name: "Adaptive Cruise Control",
    slug: "adaptiveCruise",
  },
  {
    name: "Blind-Spot Monitoring",
    slug: "blindSpot",
  },
  {
    name: "360 Camera",
    slug: "camera360",
  },
  {
    name: "Heated Seats",
    slug: "heatedSeats",
  },
  {
    name: "Wireless CarPlay",
    slug: "wirelessCarPlay",
  },
  {
    name: "Panoramic Roof",
    slug: "panoramicRoof",
  },
]