Skip to content

Commit 61566e1

Browse files
pphatdevpphatdev
committed
feat: implement Windows command dropdown menu with search and options
1 parent 767429b commit 61566e1

2 files changed

Lines changed: 120 additions & 48 deletions

File tree

‎app/desktop/windows-command.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { FilesIcon, UserCircle } from "lucide-react"
2+
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "@/components/ui/command"
3+
import { Dialog, DialogContent, DialogDescription, DialogTitle } from "@/components/ui/dialog"
4+
import { GithubIcon } from "@/components/icons/github";
5+
import { VisualStudioCodeIcon } from "@/components/icons/vscode";
6+
interface WindowsCommandProps {
7+
open: boolean;
8+
onOpenChange: (open: boolean) => void;
9+
}
10+
11+
export function WindowsCommand({ open, onOpenChange }: WindowsCommandProps) {
12+
return (
13+
<Dialog open={open} onOpenChange={onOpenChange}>
14+
<DialogContent className="overflow-hidden p-0">
15+
<DialogTitle className="hidden">Open Window</DialogTitle>
16+
<DialogDescription className="hidden"> Open the command menu to quickly navigate and execute commands.</DialogDescription>
17+
<Command className="**:[[cmdk-group-heading]]:px-2 font-sans **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 **:[[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
18+
<CommandInput placeholder="Type a command or search..." />
19+
<CommandList>
20+
<CommandEmpty>No results found.</CommandEmpty>
21+
<CommandGroup heading="Suggestions">
22+
<CommandItem>
23+
<GithubIcon />
24+
<span>Github</span>
25+
</CommandItem>
26+
<CommandItem>
27+
<VisualStudioCodeIcon />
28+
<span>VS Code</span>
29+
</CommandItem>
30+
</CommandGroup>
31+
<CommandSeparator />
32+
<CommandGroup heading="About Me">
33+
<CommandItem>
34+
<UserCircle />
35+
<span>Profile</span>
36+
<CommandShortcut>⌘P</CommandShortcut>
37+
</CommandItem>
38+
<CommandItem>
39+
<FilesIcon />
40+
<span>Cover Letter</span>
41+
<CommandShortcut>⌘C</CommandShortcut>
42+
</CommandItem>
43+
</CommandGroup>
44+
</CommandList>
45+
</Command>
46+
</DialogContent>
47+
</Dialog>
48+
)
49+
}

‎app/desktop/windows.tsx‎

Lines changed: 71 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,72 @@
1-
import { FilesIcon, UserCircle } from "lucide-react"
2-
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "@/components/ui/command"
3-
import { Dialog, DialogContent, DialogDescription, DialogTitle } from "@/components/ui/dialog"
4-
import { GithubIcon } from "@/components/icons/github";
5-
import { VisualStudioCodeIcon } from "@/components/icons/vscode";
6-
interface WindowsProps {
7-
open: boolean;
8-
onOpenChange: (open: boolean) => void;
9-
}
10-
11-
export function Windows({ open, onOpenChange }: WindowsProps) {
1+
import { WindowsIcon } from "@/components/icons/windows";
2+
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
3+
import { SkeletonCard } from '../../components/ui/skeleton-card';
4+
import { Input } from "@/components/ui/input";
5+
import { PowerIcon } from "lucide-react";
6+
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
7+
import { appConfig } from "@/configs/app";
8+
import { useRouter } from "next/navigation";
9+
10+
export default function Windows() {
11+
12+
const router = useRouter();
13+
const logout = () => {
14+
setTimeout(() => { router.push('/'); }, 1000);
15+
}
16+
1217
return (
13-
<Dialog open={open} onOpenChange={onOpenChange}>
14-
<DialogContent className="overflow-hidden p-0">
15-
<DialogTitle className="hidden">Open Window</DialogTitle>
16-
<DialogDescription className="hidden"> Open the command menu to quickly navigate and execute commands.</DialogDescription>
17-
<Command className="**:[[cmdk-group-heading]]:px-2 font-sans **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 **:[[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
18-
<CommandInput placeholder="Type a command or search..." />
19-
<CommandList>
20-
<CommandEmpty>No results found.</CommandEmpty>
21-
<CommandGroup heading="Suggestions">
22-
<CommandItem>
23-
<GithubIcon />
24-
<span>Github</span>
25-
</CommandItem>
26-
<CommandItem>
27-
<VisualStudioCodeIcon />
28-
<span>VS Code</span>
29-
</CommandItem>
30-
</CommandGroup>
31-
<CommandSeparator />
32-
<CommandGroup heading="About Me">
33-
<CommandItem>
34-
<UserCircle />
35-
<span>Profile</span>
36-
<CommandShortcut>⌘P</CommandShortcut>
37-
</CommandItem>
38-
<CommandItem>
39-
<FilesIcon />
40-
<span>Cover Letter</span>
41-
<CommandShortcut>⌘C</CommandShortcut>
42-
</CommandItem>
43-
</CommandGroup>
44-
</CommandList>
45-
</Command>
46-
</DialogContent>
47-
</Dialog>
48-
)
49-
}
18+
<DropdownMenu>
19+
<DropdownMenuTrigger asChild>
20+
<button type="button" className="relative flex cursor-pointer items-center justify-center size-9 rounded-lg hover:bg-white hover:shadow-lg duration-400 shadow-black/10 transition-colors">
21+
<WindowsIcon className="size-7 text-gray-600" />
22+
</button>
23+
</DropdownMenuTrigger>
24+
<DropdownMenuContent side="top" align="center" className="w-xl rounded-t-3xl p-0 mb-2">
25+
26+
<div className="p-4 mt-2">
27+
<Input type="search" placeholder="Search..." />
28+
</div>
29+
30+
<div className="flex gap-0 h-96">
31+
<div className="w-40 shrink-0 overflow-y-auto overflow-x-hidden h-full p-2">
32+
<DropdownMenuItem onClick={() => console.log('Settings clicked')}>
33+
⚙️ Settings
34+
</DropdownMenuItem>
35+
<DropdownMenuItem onClick={() => console.log('File Explorer clicked')}>
36+
📁 File Explorer
37+
</DropdownMenuItem>
38+
<DropdownMenuSeparator />
39+
<DropdownMenuItem onClick={() => console.log('Power Options clicked')}>
40+
⚡ Power Options
41+
</DropdownMenuItem>
42+
<DropdownMenuItem onClick={() => console.log('Sign out clicked')}>
43+
👤 Sign out
44+
</DropdownMenuItem>
45+
</div>
46+
47+
<div className="w-full grid sm:grid-cols-3 gap-3 overflow-y-auto p-3">
48+
<SkeletonCard />
49+
<SkeletonCard />
50+
<SkeletonCard />
51+
</div>
52+
</div>
53+
54+
<div className="px-4 py-2 border-t flex gap-5 justify-between items-center">
55+
<DropdownMenuItem className="px-2" onClick={() => console.log('Sign out clicked')}>
56+
<div className="flex gap-2 items-center">
57+
<Avatar>
58+
<AvatarImage src="/profile.png" />
59+
<AvatarFallback>SL</AvatarFallback>
60+
</Avatar>
61+
<div className="text-sm font-medium font-sans">{appConfig.name}</div>
62+
</div>
63+
</DropdownMenuItem>
64+
65+
<DropdownMenuItem className="p-2" onClick={logout}>
66+
<PowerIcon className="size-4.5 text-foreground/60" />
67+
</DropdownMenuItem>
68+
</div>
69+
</DropdownMenuContent>
70+
</DropdownMenu>
71+
);
72+
}

0 commit comments

Comments
 (0)