'use client'; import * as React from 'react'; import * as ScrollArea from '@radix-ui/react-scroll-area'; import { RiAddCircleLine, RiArrowDownLine, RiArrowLeftSLine, RiArrowRightSLine, RiArrowUpLine, RiCalendarLine, RiFileTextLine, RiGroup2Line, RiHome5Line, RiSearch2Line, RiTimeLine, } from '@remixicon/react'; import * as Avatar from './components/ui/avatar'; import * as Button from './components/ui/button'; import * as CommandMenu from './components/ui/command-menu'; import * as CompactButton from './components/ui/compact-button'; import * as Kbd from './components/ui/kbd'; import { cn } from './utils/cn'; const ScrollbarVertical = React.forwardRef< React.ComponentRef, React.ComponentPropsWithoutRef >(({ className, ...rest }, ref) => { return ( ); }); ScrollbarVertical.displayName = 'ScrollbarVertical'; export default function BlockCommandMenu() { const [open, setOpen] = React.useState(true); const [activeFilter, setActiveFilter] = React.useState(0); const filterOptions = [ 'All', 'Training', 'Interview', 'Design task', 'Review', 'Onboarding', ]; const meetings = [ { name: 'James B.', time: '9 AM', duration: '30 min', avatar: 'https://alignui.com/images/avatar/illustration/james.png', }, { name: 'Sophia W.', time: '10 AM', duration: '30 min', avatar: 'https://alignui.com/images/avatar/illustration/sophia.png', }, { name: 'Arthur T.', time: '11 AM', duration: '30 min', avatar: 'https://alignui.com/images/avatar/illustration/arthur.png', }, { name: 'Ravi P.', time: '12 PM', duration: '30 min', avatar: 'https://alignui.com/images/avatar/illustration/ravi.png', }, ]; const quickActions = [ { title: 'Dashboard page', icon: RiHome5Line, }, { title: 'Team page', icon: RiGroup2Line, }, { title: 'Payroll page', icon: RiFileTextLine, }, { title: 'Create new position', icon: RiCalendarLine, }, { title: 'View attendance report', icon: RiAddCircleLine, }, { title: 'Schedule meeting', icon: RiTimeLine, }, ]; return ( <> setOpen(true)} > Open Command Menu

{/* Search Input */}

⌘K

{/* Filter Options */}

{filterOptions.map((filter, index) => ( setActiveFilter(index)} className='px-2.5 py-1' > {filter} ))}

{/* Main Content */}

{/* Recent Meetings */}

Recent meetings {' '} (8)

} >

{meetings.map((meeting) => (

{meeting.name}

{meeting.time} {' '} -{' '} {meeting.duration}

Detail

))}

{/* Quick Actions */} Quick actions{' '} (6) } >

{quickActions.map((action) => (

{action.title}

))}

{/* Footer */}

Use to navigate

Type / for commands

); }