62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import { motion } from 'motion/react';
|
|
|
|
import { Button } from '@workspace/ui/components/ui/button';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuCheckboxItem,
|
|
DropdownMenuContent,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
DropdownMenuCheckboxItemProps,
|
|
} from '@/registry/radix/dropdown-menu';
|
|
|
|
type Checked = DropdownMenuCheckboxItemProps['checked'];
|
|
|
|
export const RadixDropdownMenuCheckboxesDemo = () => {
|
|
const [showStatusBar, setShowStatusBar] = React.useState<Checked>(true);
|
|
const [showActivityBar, setShowActivityBar] = React.useState<Checked>(false);
|
|
const [showPanel, setShowPanel] = React.useState<Checked>(false);
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="outline" asChild>
|
|
<motion.button
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
>
|
|
Open
|
|
</motion.button>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent className="w-56">
|
|
<DropdownMenuLabel>Appearance</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuCheckboxItem
|
|
checked={showStatusBar}
|
|
onCheckedChange={setShowStatusBar}
|
|
>
|
|
Status Bar
|
|
</DropdownMenuCheckboxItem>
|
|
<DropdownMenuCheckboxItem
|
|
checked={showActivityBar}
|
|
onCheckedChange={setShowActivityBar}
|
|
disabled
|
|
>
|
|
Activity Bar
|
|
</DropdownMenuCheckboxItem>
|
|
<DropdownMenuCheckboxItem
|
|
checked={showPanel}
|
|
onCheckedChange={setShowPanel}
|
|
>
|
|
Panel
|
|
</DropdownMenuCheckboxItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
};
|