Skip to content

Commit 58090a8

Browse files
pphatdevpphatdev
committed
feat: refactor HomePage component to enhance context menu functionality and streamline imports
1 parent 2ac8283 commit 58090a8

File tree

1 file changed

+80
-55
lines changed

1 file changed

+80
-55
lines changed

‎app/desktop/page.tsx‎

Lines changed: 80 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,101 @@
11
'use client'
22

3-
import { GithubIcon } from "@/components/icons/github";
4-
import { SearchIcon } from "@/components/icons/search";
5-
import { VisualStudioCodeIcon } from "@/components/icons/vscode";
6-
import { WindowsIcon } from "@/components/icons/windows";
7-
import { cn } from "@/lib/utils";
3+
import { useEffect } from "react";
84
import Image from "next/image";
9-
import { Windows } from "./windows";
10-
import { useEffect, useState } from "react";
5+
import Windows from "./windows";
6+
import Search from "./search";
7+
import Github from "./github";
8+
import VisualStudioCode from "./vs-code";
9+
import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "@/components/ui/context-menu";
1110

1211
export default function HomePage() {
13-
const [openWindows, setOpenWindows] = useState(false);
14-
15-
// Ctrl + k show setOpenWindows(true)
1612
useEffect(() => {
17-
const handleKeyDown = (e: KeyboardEvent) => {
18-
if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'k') {
19-
e.preventDefault();
20-
setOpenWindows(true);
13+
const enterFullscreen = async () => {
14+
try {
15+
if (document.documentElement.requestFullscreen) {
16+
await document.documentElement.requestFullscreen();
17+
}
18+
} catch (error) {
19+
console.log('Fullscreen request failed:', error);
2120
}
2221
};
23-
window.addEventListener('keydown', handleKeyDown);
24-
return () => window.removeEventListener('keydown', handleKeyDown);
22+
23+
enterFullscreen();
2524
}, []);
2625

27-
const menuItems = [
28-
{
29-
name: 'Windows',
30-
href: '#',
31-
icon: WindowsIcon,
32-
className: '',
33-
onClick: () => console.log("Open Window"),
34-
},
35-
{
36-
name: 'Search',
37-
href: '#',
38-
icon: SearchIcon,
39-
className: 'text-gray-500 size-6',
40-
onClick: () => console.log('Search clicked'),
41-
},
42-
{
43-
name: 'GitHub',
44-
href: '#',
45-
icon: GithubIcon,
46-
className: 'text-gray-600 size-7',
47-
onClick: () => console.log('GitHub clicked'),
48-
},
49-
{
50-
name: 'VS Code',
51-
href: '#',
52-
icon: VisualStudioCodeIcon,
53-
className: 'text-blue-500 size-7 mt-0.5',
54-
onClick: () => console.log('VS Code clicked'),
55-
},
56-
];
26+
const menu = [
27+
{ element: <Search /> },
28+
{ element: <Windows /> },
29+
{ element: <Github /> },
30+
{ element: <VisualStudioCode /> },
31+
]
5732

5833
return (
59-
<main className="min-h-screen relative bg-linear-to-b from-amber-50 to-amber-100 text-center">
60-
<Image src="/angkor-wat-cambodia.jpg" alt="Background" fill className="absolute pointer-events-none inset-0 object-cover" />
34+
<main className="min-h-screen relative">
35+
<Image src="/angkor-wat-cambodia.jpg" alt="Background" fill className="absolute pointer-events-none -z-1 inset-0 object-cover" />
6136

37+
<ContextMenu>
38+
<ContextMenuTrigger className="h-full absolute inset-0 w-full"></ContextMenuTrigger>
39+
<ContextMenuContent className="w-52">
40+
<ContextMenuSub>
41+
<ContextMenuSubTrigger inset>View</ContextMenuSubTrigger>
42+
<ContextMenuSubContent className="w-44">
43+
<ContextMenuCheckboxItem checked>Large icons</ContextMenuCheckboxItem>
44+
<ContextMenuCheckboxItem>Medium icons</ContextMenuCheckboxItem>
45+
<ContextMenuCheckboxItem>Small icons</ContextMenuCheckboxItem>
46+
<ContextMenuSeparator />
47+
<ContextMenuCheckboxItem>Auto arrange icons</ContextMenuCheckboxItem>
48+
<ContextMenuCheckboxItem>Align icons to grid</ContextMenuCheckboxItem>
49+
<ContextMenuSeparator />
50+
<ContextMenuCheckboxItem>Show desktop icons</ContextMenuCheckboxItem>
51+
</ContextMenuSubContent>
52+
</ContextMenuSub>
53+
<ContextMenuSub>
54+
<ContextMenuSubTrigger inset>Sort by</ContextMenuSubTrigger>
55+
<ContextMenuSubContent className="w-32">
56+
<ContextMenuRadioGroup value="name">
57+
<ContextMenuRadioItem value="name">Name</ContextMenuRadioItem>
58+
<ContextMenuRadioItem value="size">Size</ContextMenuRadioItem>
59+
<ContextMenuRadioItem value="type">Item type</ContextMenuRadioItem>
60+
<ContextMenuRadioItem value="modified">Date modified</ContextMenuRadioItem>
61+
</ContextMenuRadioGroup>
62+
</ContextMenuSubContent>
63+
</ContextMenuSub>
64+
<ContextMenuItem inset>
65+
Refresh
66+
<ContextMenuShortcut>F5</ContextMenuShortcut>
67+
</ContextMenuItem>
68+
<ContextMenuSeparator />
69+
<ContextMenuItem inset disabled>
70+
Paste
71+
<ContextMenuShortcut>Ctrl+V</ContextMenuShortcut>
72+
</ContextMenuItem>
73+
<ContextMenuItem inset disabled>
74+
Paste shortcut
75+
</ContextMenuItem>
76+
<ContextMenuSeparator />
77+
<ContextMenuSub>
78+
<ContextMenuSubTrigger inset>New</ContextMenuSubTrigger>
79+
<ContextMenuSubContent className="w-44">
80+
<ContextMenuItem>Folder</ContextMenuItem>
81+
<ContextMenuItem>Shortcut</ContextMenuItem>
82+
<ContextMenuSeparator />
83+
<ContextMenuItem>Text Document</ContextMenuItem>
84+
<ContextMenuItem>Bitmap Image</ContextMenuItem>
85+
</ContextMenuSubContent>
86+
</ContextMenuSub>
87+
<ContextMenuSeparator />
88+
<ContextMenuItem inset>Display settings</ContextMenuItem>
89+
<ContextMenuItem inset>Personalize</ContextMenuItem>
90+
</ContextMenuContent>
91+
</ContextMenu>
6292
<footer className="fixed bottom-0 inset-x-0 border-t backdrop-blur-sm border-black/5 bg-white/90">
6393
<ul className="flex w-full max-w-3xl mx-auto justify-center py-1.5 gap-1">
64-
{menuItems.map((item) => (
65-
<li key={item.name}>
66-
<button type="button" onClick={item.onClick} 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">
67-
<item.icon className={cn('size-7 text-gray-600', item.className )} />
68-
</button>
69-
</li>
94+
{menu.map((item, index) => (
95+
<li key={index}> {item.element} </li>
7096
))}
7197
</ul>
7298
</footer>
73-
<Windows open={openWindows} onOpenChange={setOpenWindows} />
7499
</main>
75100
);
76101
}

0 commit comments

Comments
 (0)