44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import { motion } from 'motion/react';
|
|
|
|
import { Button } from '@workspace/ui/components/ui/button';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuLabel,
|
|
DropdownMenuRadioGroup,
|
|
DropdownMenuRadioItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from '@/registry/radix/dropdown-menu';
|
|
|
|
export const RadixDropdownMenuRadioGroupDemo = () => {
|
|
const [position, setPosition] = React.useState('bottom');
|
|
|
|
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>Panel Position</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
|
|
<DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
|
|
<DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
|
|
<DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
|
|
</DropdownMenuRadioGroup>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
};
|