'use client'; import * as React from 'react'; import * as ScrollArea from '@radix-ui/react-scroll-area'; import { RiArrowRightSLine, RiGlobalLine, RiMailLine, RiMap2Line, RiSearch2Line, RiSuitcaseLine, } 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'; const userDetailItems = [ { icon: , label: 'Location', key: 'location', }, { icon: , label: 'Specialty', key: 'specialty', }, { icon: , label: 'Email Address', key: 'email', }, { icon: , label: 'Languages', key: 'languages', }, ] as const; export default function BlockCommandMenu() { const [open, setOpen] = React.useState(false); const [activeUser, setActiveUser] = React.useState('Sophia Williams'); const users = [ { name: 'James Brown', avatar: 'https://alignui.com/images/avatar/memoji/james.png', color: 'gray' as const, role: 'Product Designer', location: 'London, UK', specialty: 'UI/UX, Product Design, Prototyping', email: 'james@alignui.com', languages: 'English, French', }, { name: 'Sophia Williams', avatar: 'https://alignui.com/images/avatar/memoji/sophia.png', color: 'yellow' as const, role: 'Marketing Manager', location: 'Berlin, Germany', specialty: 'Marketing, SEO, Team Leader', email: 'sophia@alignui.com', languages: 'English, German, Spanish', }, { name: 'Arthur Taylor', avatar: 'https://alignui.com/images/avatar/memoji/arthur.png', color: 'blue' as const, role: 'Frontend Developer', location: 'Paris, France', specialty: 'React, TypeScript, UI Development', email: 'arthur@alignui.com', languages: 'English, French', }, { name: 'Emma Wright', avatar: 'https://alignui.com/images/avatar/memoji/emma.png', color: 'sky' as const, role: 'Content Strategist', location: 'New York, USA', specialty: 'Content Writing, SEO, Social Media', email: 'emma@alignui.com', languages: 'English, Spanish', }, { name: 'Matthew Johnson', avatar: 'https://alignui.com/images/avatar/memoji/matthew.png', color: 'purple' as const, role: 'Backend Developer', location: 'Amsterdam, Netherlands', specialty: 'Node.js, Python, Database Design', email: 'matthew@alignui.com', languages: 'English, Dutch', }, { name: 'Laura Perez', avatar: 'https://alignui.com/images/avatar/memoji/laura.png', color: 'red' as const, role: 'UX Researcher', location: 'Barcelona, Spain', specialty: 'User Research, Analytics, A/B Testing', email: 'laura@alignui.com', languages: 'English, Spanish, Catalan', }, ]; return ( <> setOpen(true)} > Open Command Menu

{/* Search Bar */}

⌘K

{/* Main Content */}

{/* Sidebar and Content Container */}

{/* Left Sidebar */}

{users.map((user) => (

setActiveUser(user.name)} className={cn( 'w-[200px] flex-shrink-0 md:w-auto', 'flex cursor-pointer items-center justify-between gap-2.5 rounded-lg px-2.5 py-2', 'group/cmd-item relative', 'transition-all duration-200 ease-out', activeUser === user.name ? 'bg-bg-weak-50' : 'hover:bg-bg-weak-50', )} >

{user.name}

))}

{/* Right Content */}

{activeUser && (

{/* Top - Avatar and Name */}

{(() => { const user = users.find((u) => u.name === activeUser); return ( <>

{activeUser} { users.find((u) => u.name === activeUser) ?.role }

); })()}

Message

{/* Details */}

{userDetailItems.map((item) => (

{item.icon}

{item.label} { users.find((u) => u.name === activeUser)?.[ item.key ] }

))}

)}

); }