Command

"use client";import {	CalculatorIcon,	CalendarIcon,	CreditCardIcon,	SettingsIcon,	SmileIcon,	UserIcon,} from "lucide-react";
import {	Command,	CommandEmpty,	CommandGroup,	CommandInput,	CommandItem,	CommandList,	CommandSeparator,	CommandShortcut,} from "@/components/ui/command";
export function CommandDemo() {	return (		<Command>			<CommandInput placeholder="Type a command or search..." />			<CommandList>				<CommandEmpty>No results found.</CommandEmpty>				<CommandGroup heading="Suggestions">					<CommandItem>						<CalendarIcon />						<span>Calendar</span>					</CommandItem>					<CommandItem>						<SmileIcon />						<span>Search Emoji</span>					</CommandItem>					<CommandItem disabled>						<CalculatorIcon />						<span>Calculator</span>					</CommandItem>				</CommandGroup>				<CommandSeparator />				<CommandGroup heading="Settings">					<CommandItem>						<UserIcon />						<span>Profile</span>						<CommandShortcut>⌘P</CommandShortcut>					</CommandItem>					<CommandItem>						<CreditCardIcon />						<span>Billing</span>						<CommandShortcut>⌘B</CommandShortcut>					</CommandItem>					<CommandItem>						<SettingsIcon />						<span>Settings</span>						<CommandShortcut>⌘S</CommandShortcut>					</CommandItem>				</CommandGroup>			</CommandList>		</Command>	);}

"use client";
import {	CalculatorIcon,	CalendarIcon,	CreditCardIcon,	SettingsIcon,	SmileIcon,	UserIcon,} from "lucide-react";import * as React from "react";
import { Button } from "@/components/ui/button";import {	Command,	CommandDialog,	CommandEmpty,	CommandGroup,	CommandInput,	CommandItem,	CommandList,	CommandSeparator,	CommandShortcut,} from "@/components/ui/command";
export function CommandBasic() {	const [open, setOpen] = React.useState(false);
	return (		<div className="flex flex-col gap-4">			<Button onClick={() => setOpen(true)} variant="outline" className="w-fit">				Open Menu			</Button>			<CommandDialog open={open} onOpenChange={setOpen}>				<Command>					<CommandInput placeholder="Type a command or search..." />					<CommandList>						<CommandEmpty>No results found.</CommandEmpty>						<CommandGroup heading="Suggestions">							<CommandItem>								<CalendarIcon />								<span>Calendar</span>							</CommandItem>							<CommandItem>								<SmileIcon />								<span>Search Emoji</span>							</CommandItem>							<CommandItem disabled>								<CalculatorIcon />								<span>Calculator</span>							</CommandItem>						</CommandGroup>						<CommandSeparator />						<CommandGroup heading="Settings">							<CommandItem>								<UserIcon />								<span>Profile</span>								<CommandShortcut>⌘P</CommandShortcut>							</CommandItem>							<CommandItem>								<CreditCardIcon />								<span>Billing</span>								<CommandShortcut>⌘B</CommandShortcut>							</CommandItem>							<CommandItem>								<SettingsIcon />								<span>Settings</span>								<CommandShortcut>⌘S</CommandShortcut>							</CommandItem>						</CommandGroup>					</CommandList>				</Command>			</CommandDialog>		</div>	);}

"use client";
import { CreditCardIcon, SettingsIcon, UserIcon } from "lucide-react";import * as React from "react";
import { Button } from "@/components/ui/button";import {	Command,	CommandDialog,	CommandEmpty,	CommandGroup,	CommandInput,	CommandItem,	CommandList,	CommandShortcut,} from "@/components/ui/command";
export function CommandShortcuts() {	const [open, setOpen] = React.useState(false);
	return (		<div className="flex flex-col gap-4">			<Button onClick={() => setOpen(true)} variant="outline" className="w-fit">				Open Menu			</Button>			<CommandDialog open={open} onOpenChange={setOpen}>				<Command>					<CommandInput placeholder="Type a command or search..." />					<CommandList>						<CommandEmpty>No results found.</CommandEmpty>						<CommandGroup heading="Settings">							<CommandItem>								<UserIcon />								<span>Profile</span>								<CommandShortcut>⌘P</CommandShortcut>							</CommandItem>							<CommandItem>								<CreditCardIcon />								<span>Billing</span>								<CommandShortcut>⌘B</CommandShortcut>							</CommandItem>							<CommandItem>								<SettingsIcon />								<span>Settings</span>								<CommandShortcut>⌘S</CommandShortcut>							</CommandItem>						</CommandGroup>					</CommandList>				</Command>			</CommandDialog>		</div>	);}

"use client";
import {	CalculatorIcon,	CalendarIcon,	CreditCardIcon,	SettingsIcon,	SmileIcon,	UserIcon,} from "lucide-react";import * as React from "react";
import { Button } from "@/components/ui/button";import {	Command,	CommandDialog,	CommandEmpty,	CommandGroup,	CommandInput,	CommandItem,	CommandList,	CommandSeparator,	CommandShortcut,} from "@/components/ui/command";
export function CommandGroups() {	const [open, setOpen] = React.useState(false);
	return (		<div className="flex flex-col gap-4">			<Button onClick={() => setOpen(true)} variant="outline" className="w-fit">				Open Menu			</Button>			<CommandDialog open={open} onOpenChange={setOpen}>				<Command>					<CommandInput placeholder="Type a command or search..." />					<CommandList>						<CommandEmpty>No results found.</CommandEmpty>						<CommandGroup heading="Suggestions">							<CommandItem>								<CalendarIcon />								<span>Calendar</span>							</CommandItem>							<CommandItem>								<SmileIcon />								<span>Search Emoji</span>							</CommandItem>							<CommandItem>								<CalculatorIcon />								<span>Calculator</span>							</CommandItem>						</CommandGroup>						<CommandSeparator />						<CommandGroup heading="Settings">							<CommandItem>								<UserIcon />								<span>Profile</span>								<CommandShortcut>⌘P</CommandShortcut>							</CommandItem>							<CommandItem>								<CreditCardIcon />								<span>Billing</span>								<CommandShortcut>⌘B</CommandShortcut>							</CommandItem>							<CommandItem>								<SettingsIcon />								<span>Settings</span>								<CommandShortcut>⌘S</CommandShortcut>							</CommandItem>						</CommandGroup>					</CommandList>				</Command>			</CommandDialog>		</div>	);}

"use client";
import {	BellIcon,	CalculatorIcon,	CalendarIcon,	ClipboardPasteIcon,	CodeIcon,	CopyIcon,	CreditCardIcon,	FileTextIcon,	FolderIcon,	FolderPlusIcon,	HelpCircleIcon,	HomeIcon,	ImageIcon,	InboxIcon,	LayoutGridIcon,	ListIcon,	PlusIcon,	ScissorsIcon,	SettingsIcon,	Trash2Icon,	UserIcon,	ZoomInIcon,	ZoomOutIcon,} from "lucide-react";import * as React from "react";
import { Button } from "@/components/ui/button";import {	Command,	CommandDialog,	CommandEmpty,	CommandGroup,	CommandInput,	CommandItem,	CommandList,	CommandSeparator,	CommandShortcut,} from "@/components/ui/command";
export function CommandManyItems() {	const [open, setOpen] = React.useState(false);
	return (		<div className="flex flex-col gap-4">			<Button onClick={() => setOpen(true)} variant="outline" className="w-fit">				Open Menu			</Button>			<CommandDialog open={open} onOpenChange={setOpen}>				<Command>					<CommandInput placeholder="Type a command or search..." />					<CommandList>						<CommandEmpty>No results found.</CommandEmpty>						<CommandGroup heading="Navigation">							<CommandItem>								<HomeIcon />								<span>Home</span>								<CommandShortcut>⌘H</CommandShortcut>							</CommandItem>							<CommandItem>								<InboxIcon />								<span>Inbox</span>								<CommandShortcut>⌘I</CommandShortcut>							</CommandItem>							<CommandItem>								<FileTextIcon />								<span>Documents</span>								<CommandShortcut>⌘D</CommandShortcut>							</CommandItem>							<CommandItem>								<FolderIcon />								<span>Folders</span>								<CommandShortcut>⌘F</CommandShortcut>							</CommandItem>						</CommandGroup>						<CommandSeparator />						<CommandGroup heading="Actions">							<CommandItem>								<PlusIcon />								<span>New File</span>								<CommandShortcut>⌘N</CommandShortcut>							</CommandItem>							<CommandItem>								<FolderPlusIcon />								<span>New Folder</span>								<CommandShortcut>⇧⌘N</CommandShortcut>							</CommandItem>							<CommandItem>								<CopyIcon />								<span>Copy</span>								<CommandShortcut>⌘C</CommandShortcut>							</CommandItem>							<CommandItem>								<ScissorsIcon />								<span>Cut</span>								<CommandShortcut>⌘X</CommandShortcut>							</CommandItem>							<CommandItem>								<ClipboardPasteIcon />								<span>Paste</span>								<CommandShortcut>⌘V</CommandShortcut>							</CommandItem>							<CommandItem>								<Trash2Icon />								<span>Delete</span>								<CommandShortcut>⌫</CommandShortcut>							</CommandItem>						</CommandGroup>						<CommandSeparator />						<CommandGroup heading="View">							<CommandItem>								<LayoutGridIcon />								<span>Grid View</span>							</CommandItem>							<CommandItem>								<ListIcon />								<span>List View</span>							</CommandItem>							<CommandItem>								<ZoomInIcon />								<span>Zoom In</span>								<CommandShortcut>⌘+</CommandShortcut>							</CommandItem>							<CommandItem>								<ZoomOutIcon />								<span>Zoom Out</span>								<CommandShortcut>⌘-</CommandShortcut>							</CommandItem>						</CommandGroup>						<CommandSeparator />						<CommandGroup heading="Account">							<CommandItem>								<UserIcon />								<span>Profile</span>								<CommandShortcut>⌘P</CommandShortcut>							</CommandItem>							<CommandItem>								<CreditCardIcon />								<span>Billing</span>								<CommandShortcut>⌘B</CommandShortcut>							</CommandItem>							<CommandItem>								<SettingsIcon />								<span>Settings</span>								<CommandShortcut>⌘S</CommandShortcut>							</CommandItem>							<CommandItem>								<BellIcon />								<span>Notifications</span>							</CommandItem>							<CommandItem>								<HelpCircleIcon />								<span>Help &amp; Support</span>							</CommandItem>						</CommandGroup>						<CommandSeparator />						<CommandGroup heading="Tools">							<CommandItem>								<CalculatorIcon />								<span>Calculator</span>							</CommandItem>							<CommandItem>								<CalendarIcon />								<span>Calendar</span>							</CommandItem>							<CommandItem>								<ImageIcon />								<span>Image Editor</span>							</CommandItem>							<CommandItem>								<CodeIcon />								<span>Code Editor</span>							</CommandItem>						</CommandGroup>					</CommandList>				</Command>			</CommandDialog>		</div>	);}

"use client";
import * as React from "react";
import { Button } from "@/components/ui/button";import {	Command,	CommandDialog,	CommandEmpty,	CommandGroup,	CommandInput,	CommandItem,	CommandList,} from "@/components/ui/command";
export function CommandOverlayVariant() {	const [openOpaque, setOpenOpaque] = React.useState(false);	const [openBlur, setOpenBlur] = React.useState(false);	const [openTransparent, setOpenTransparent] = React.useState(false);
	return (		<div className="flex flex-wrap gap-2">			<Button				onClick={() => setOpenOpaque(true)}				variant="outline"				className="w-fit"			>				Opaque			</Button>			<Button				onClick={() => setOpenBlur(true)}				variant="outline"				className="w-fit"			>				Blur			</Button>			<Button				onClick={() => setOpenTransparent(true)}				variant="outline"				className="w-fit"			>				Transparent			</Button>			<CommandDialog				open={openOpaque}				onOpenChange={setOpenOpaque}				overlayVariant="opaque"			>				<Command>					<CommandInput placeholder="Type a command or search..." />					<CommandList>						<CommandEmpty>No results found.</CommandEmpty>						<CommandGroup heading="Suggestions">							<CommandItem>Calendar</CommandItem>							<CommandItem>Search Emoji</CommandItem>							<CommandItem>Calculator</CommandItem>						</CommandGroup>					</CommandList>				</Command>			</CommandDialog>			<CommandDialog				open={openBlur}				onOpenChange={setOpenBlur}				overlayVariant="blur"			>				<Command>					<CommandInput placeholder="Type a command or search..." />					<CommandList>						<CommandEmpty>No results found.</CommandEmpty>						<CommandGroup heading="Suggestions">							<CommandItem>Calendar</CommandItem>							<CommandItem>Search Emoji</CommandItem>							<CommandItem>Calculator</CommandItem>						</CommandGroup>					</CommandList>				</Command>			</CommandDialog>			<CommandDialog				open={openTransparent}				onOpenChange={setOpenTransparent}				overlayVariant="transparent"			>				<Command>					<CommandInput placeholder="Type a command or search..." />					<CommandList>						<CommandEmpty>No results found.</CommandEmpty>						<CommandGroup heading="Suggestions">							<CommandItem>Calendar</CommandItem>							<CommandItem>Search Emoji</CommandItem>							<CommandItem>Calculator</CommandItem>						</CommandGroup>					</CommandList>				</Command>			</CommandDialog>		</div>	);}

"use client";import {	CalculatorIcon,	CalendarIcon,	CreditCardIcon,	SettingsIcon,	SmileIcon,	UserIcon,} from "lucide-react";
import {	type Translations,	useTranslation,} from "@/components/language-selector";import {	Command,	CommandEmpty,	CommandGroup,	CommandInput,	CommandItem,	CommandList,	CommandSeparator,	CommandShortcut,} from "@/components/ui/command";
const translations: Translations = {	en: {		dir: "ltr",		values: {			placeholder: "Type a command or search...",			empty: "No results found.",			suggestions: "Suggestions",			calendar: "Calendar",			searchEmoji: "Search Emoji",			calculator: "Calculator",			settings: "Settings",			profile: "Profile",			billing: "Billing",		},	},	ar: {		dir: "rtl",		values: {			placeholder: "اكتب أمرًا أو ابحث...",			empty: "لم يتم العثور على نتائج.",			suggestions: "اقتراحات",			calendar: "التقويم",			searchEmoji: "البحث عن الرموز التعبيرية",			calculator: "الآلة الحاسبة",			settings: "الإعدادات",			profile: "الملف الشخصي",			billing: "الفوترة",		},	},	he: {		dir: "rtl",		values: {			placeholder: "הקלד פקודה או חפש...",			empty: "לא נמצאו תוצאות.",			suggestions: "הצעות",			calendar: "לוח שנה",			searchEmoji: "חפש אמוג'י",			calculator: "מחשבון",			settings: "הגדרות",			profile: "פרופיל",			billing: "חיוב",		},	},};
export function CommandRtl() {	const { dir, language, t } = useTranslation(translations, "ar");
	return (		<div className="w-full" lang={language} dir={dir}>			<Command>				<CommandInput placeholder={t.placeholder} />				<CommandList>					<CommandEmpty>{t.empty}</CommandEmpty>					<CommandGroup heading={t.suggestions}>						<CommandItem>							<CalendarIcon />							<span>{t.calendar}</span>						</CommandItem>						<CommandItem>							<SmileIcon />							<span>{t.searchEmoji}</span>						</CommandItem>						<CommandItem disabled>							<CalculatorIcon />							<span>{t.calculator}</span>						</CommandItem>					</CommandGroup>					<CommandSeparator />					<CommandGroup heading={t.settings}>						<CommandItem>							<UserIcon />							<span>{t.profile}</span>							<CommandShortcut>⌘P</CommandShortcut>						</CommandItem>						<CommandItem>							<CreditCardIcon />							<span>{t.billing}</span>							<CommandShortcut>⌘B</CommandShortcut>						</CommandItem>						<CommandItem>							<SettingsIcon />							<span>{t.settings}</span>							<CommandShortcut>⌘S</CommandShortcut>						</CommandItem>					</CommandGroup>				</CommandList>			</Command>		</div>	);}