rm:next/image comp & feat:preload-images

programming-with-ia · programming-with-ia · commit ee7d8a8d200e · 2024-12-28T01:27:06.000+05:00
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/_components/this-pc.tsx b/src/app/_components/this-pc.tsx
@@ -6,7 +6,8 @@ import {
     AccordionTrigger,
 } from "@/components/ui/accordion";
 import { cn } from "@/lib/utils";
-import Image from "next/image";
+// import Image from "next/image";
+import { ExplorerIcons } from "@/lib/images";
 type ThisPCItemProps = {
     icon: string;
     label?: string;
@@ -69,12 +70,12 @@ function ThisPcFolderItem(props: Omit<ThisPCItemProps, "childern">) {
 }
 
 const FoldersItems = [
-    { icon: "/icons/folder-desktop.png", label: "Desktop" },
-    // { icon: "/icons/folder-documents.png", label: "Documents" },
-    // { icon: "/icons/folder-downloads.png", label: "Downloads" },
-    { icon: "/icons/folder-music.png", label: "Music" },
-    { icon: "/icons/folder-pictures.png", label: "Pictures" },
-    { icon: "/icons/folder-videos.png", label: "Videos" },
+    { icon: ExplorerIcons.FolderDesktop, label: "Desktop" },
+    // { icon: ExplorerIcons.FolderDocuments, label: "Documents" },
+    // { icon: ExplorerIcons.FolderDownloads, label: "Downloads" },
+    { icon: ExplorerIcons.FolderMusic, label: "Music" },
+    { icon: ExplorerIcons.FolderPictures, label: "Pictures" },
+    { icon: ExplorerIcons.FolderVideos, label: "Videos" },
 ];
 
 function ThisPC() {
@@ -103,19 +104,19 @@ function ThisPC() {
                         fill="58.7%"
                         space="408.1 GB free of 988 GB"
                         label="Local Disk (C:)"
-                        icon="/icons/windows-drive.png"
+                        icon={ExplorerIcons.WindowsDrive}
                     />
                     <ThisPcDriveItem
                         fill="73.7%"
                         space="498.8 GB free of 1895 GB"
                         label="Local Disk (D:)"
-                        icon="/icons/drive.png"
+                        icon={ExplorerIcons.Drive}
                     />
                     <ThisPcDriveItem
                         fill="24.1%"
                         space="2816.7 GB free of 3712 GB"
                         label="Local Disk (E:)"
-                        icon="/icons/drive.png"
+                        icon={ExplorerIcons.Drive}
                     />
                 </AccordionContent>
             </AccordionItem>
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -35,6 +35,7 @@ import { doubleClick } from "@/lib/utils";
 import Construction from "@/icons/construction";
 import FullScreenBtn from "@/components/desktop/full-screen-item";
 import useIsSignedIn from "@/hooks/useIsSignedIn";
+import { DesktopIcons } from "@/lib/images";
 
 function Page() {
     //* need this
@@ -54,14 +55,14 @@ function Page() {
                     }}
                 >
                     <ExplorerDesktopItem
-                        icon="/icons/pc.ico"
+                        icon={DesktopIcons.PC}
                         name="This PC"
                         explorerTab="this-pc"
                     />
                     <Explorer />
                     <CalculatorItem />
                     <DesktopItem
-                        icon="/icons/chrome.png"
+                        icon={DesktopIcons.Chrome}
                         name="Chrome"
                         className="gap-2"
                         isShortcut
@@ -81,7 +82,7 @@ function Page() {
                         }}
                     />
                     <DesktopItem
-                        icon="/icons/vscode.png"
+                        icon={DesktopIcons.Vscode}
                         name="VS Code"
                         isShortcut
                         smallIcon
@@ -102,7 +103,7 @@ function Page() {
                         win={{ child: <YouTubeEmbed />, id: "youtube" }}
                     /> */}
                     {/* <DesktopItem icon="/icons/game.ico" name="Game" isShortcut smallIcon className="gap-2" win={{child: <Iframe src="https://g.poppigames.com/pp/purble-place/" />, id: "friv-game"}} /> */}
-                    {/* <DesktopItem icon="/icons/vscode.png" name="Tic Tac Toe" isShortcut smallIcon className="gap-2" win={{child: <Iframe src="https://www.onlinegames.io/games/2021/unity2/tic-tac-toe/index.html" />, id: "tic-tac-toe"}} /> */}
+                    {/* <DesktopItem icon={DesktopIcons.Vscode} name="Tic Tac Toe" isShortcut smallIcon className="gap-2" win={{child: <Iframe src="https://www.onlinegames.io/games/2021/unity2/tic-tac-toe/index.html" />, id: "tic-tac-toe"}} /> */}
                     <DesktopItem
                         icon="/icons/motoX3.jpg"
                         name="Moto X3M"
diff --git a/src/components/TaskBar/button.tsx b/src/components/TaskBar/button.tsx
@@ -32,7 +32,7 @@ const TaskBarButton = React.forwardRef<HTMLButtonElement, TaskBarButtonProps>(
                 {...p}
             >
                 {src && (
-                    <Image
+                    <img
                         className={cn(
                             "transition-transform duration-200 animate-in fade-in-0 zoom-in-0 group-active:scale-[.8]",
                             imgClassName,
diff --git a/src/components/TaskBar/index.tsx b/src/components/TaskBar/index.tsx
@@ -9,6 +9,7 @@ import SegoeIcon from "../segoe-ui-icon";
 import { cn } from "@/lib/utils";
 import { Component } from "../component";
 import useOnlineStatus from "@/hooks/useOnline";
+import { DesktopIcons } from "@/lib/images";
 
 function TaskBar() {
     return (
@@ -127,7 +128,7 @@ function StartButton() {
                             Pinned <GroupHeaderButton label="All apps" />
                         </div>
                         <div className="flex flex-1 flex-wrap content-start justify-start">
-                            <PinnedItem img="/icons/folder.png" title="Name" />
+                            <PinnedItem img={DesktopIcons.Folder} title="Name" />
                             <PinnedItem
                                 img="/icons/projects.png"
                                 title="Projects"
@@ -183,12 +184,12 @@ function StartButton() {
                                 date="Recently added"
                             />
                             <RecommendItem
-                                img="/icons/folder.png"
+                                img={DesktopIcons.Folder}
                                 title="Github"
                                 date="1h ago"
                             />
                             <RecommendItem
-                                img="/icons/folder.png"
+                                img={DesktopIcons.Folder}
                                 title="Github"
                                 date="2h ago"
                             />
diff --git a/src/components/desktop/desktop-item.tsx b/src/components/desktop/desktop-item.tsx
@@ -1,11 +1,12 @@
 "use client";
 import { clsx, cn } from "@/lib/utils";
-import Image from "next/image";
+// import Image from "next/image";
 import React from "react";
 import { type DraggableWindowProps } from "../drag-window";
 import dynamic from "next/dynamic";
 import { useWinState } from "@/hooks/useWinState";
 import { DesktopItemContextMenuEmittor } from "@/lib/emittors";
+import { DesktopIcons } from "@/lib/images";
 const DraggableWindowBase = dynamic(() =>
     import("../drag-window").then((all) => all.DraggableWindowBase),
 );
@@ -73,11 +74,11 @@ export function DesktopItemBase({
                         smallIcon ? "size-10" : "size-11",
                     )}
                 >
-                    <Image src={icon} alt={name} width={45} height={45} />
+                    <img src={icon} alt={name} width={45} height={45} />
                     {isShortcut && (
-                        <Image
+                        <img
                             className="absolute bottom-0 left-0 size-8"
-                            src="/icons/shortcut.png"
+                            src={DesktopIcons.Shortcut}
                             alt=""
                             width={32}
                             height={32}
diff --git a/src/components/desktop/explorer-desktop-item.tsx b/src/components/desktop/explorer-desktop-item.tsx
@@ -3,11 +3,12 @@ import { DesktopItemBase } from "./desktop-item";
 import { explorerTabEmittor } from "@/components/desktop/explorer/emittors";
 import type { explorerTabsType } from "@/components/desktop/explorer/explorer";
 import { doubleClick } from "@/lib/utils";
+import { DesktopIcons } from "@/lib/images";
 
 function ExplorerDesktopItem({
     name,
     explorerTab,
-    icon = "/icons/folder.png",
+    icon = DesktopIcons.Folder,
 }: {
     icon?: string;
     name: string;
diff --git a/src/components/desktop/explorer/_components/explorer-items.tsx b/src/components/desktop/explorer/_components/explorer-items.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable @next/next/no-img-element */
 import { Component } from "@/components/component";
+import { DesktopIcons } from "@/lib/images";
 import { cn } from "@/lib/utils";
 import React from "react";
 type ExplorerItemProps = {
@@ -38,7 +39,7 @@ export function LargeItem({
                 {isShortcut && (
                     <img
                         className="absolute bottom-1 left-2 size-8"
-                        src="/icons/shortcut.png"
+                        src={DesktopIcons.Shortcut}
                         alt=""
                         width={32}
                         height={32}
diff --git a/src/components/desktop/explorer/explorer.tsx b/src/components/desktop/explorer/explorer.tsx
@@ -6,7 +6,7 @@ import {
     ResizablePanel,
     ResizablePanelGroup,
 } from "@/components/ui/resizable";
-import Image from "next/image";
+// import Image from "next/image";
 import Link from "next/link";
 import { Slot } from "@radix-ui/react-slot";
 import clsx from "clsx";
@@ -20,35 +20,39 @@ import { explorerTabEmittor } from "./emittors";
 import SegoeIcon from "@/components/segoe-ui-icon";
 import { ExplorerItems } from "./_components/explorer-items";
 import { doubleClick } from "@/lib/utils";
+import { DesktopIcons, ExplorerIcons, GH_PublicTree } from "@/lib/images";
+import { prefetchImages } from "@/lib/preload-images";
 
-const skills = [
-    // use images from GitHub repo
-    { icon: "js.png", label: "JavaScript" },
-    { icon: "mongodb.png", label: "MongoDB" },
-    { icon: "mui.png", label: "Material UI" },
-    { icon: "mysql.png", label: "MySQL" },
-    { icon: "next.png", label: "Next.js" },
-    { icon: "node.png", label: "Node.js" },
-    { icon: "postgresql.png", label: "PostgreSQL" },
-    { icon: "prisma.png", label: "Prisma" },
-    { icon: "react.png", label: "React" },
-    { icon: "reactnative.png", label: "React Native" },
-    { icon: "reactquery.png", label: "React Query" },
-    { icon: "redux.png", label: "Redux" },
-    { icon: "stripe.png", label: "Stripe" },
-    { icon: "tailwind.png", label: "Tailwind CSS" },
-    { icon: "tauri.png", label: "Tauri" },
-    { icon: "ts.png", label: "TypeScript" },
-    { icon: "css.png", label: "CSS" },
-    { icon: "docker.png", label: "Docker" },
-    { icon: "express.png", label: "Express" },
-    { icon: "figma.png", label: "Figma" },
-    { icon: "firebase.png", label: "Firebase" },
-    { icon: "framer.png", label: "Framer Motion" },
-    { icon: "go.png", label: "Go" },
-    { icon: "graphql.png", label: "GraphQL" },
-    { icon: "html.png", label: "HTML" },
-];
+// use images from GitHub repo
+const skills = (
+    [
+        { icon: "/skills/js.png", label: "JavaScript" },
+        { icon: "/skills/mongodb.png", label: "MongoDB" },
+        { icon: "/skills/mui.png", label: "Material UI" },
+        { icon: "/skills/mysql.png", label: "MySQL" },
+        { icon: "/skills/next.png", label: "Next.js" },
+        { icon: "/skills/node.png", label: "Node.js" },
+        { icon: "/skills/postgresql.png", label: "PostgreSQL" },
+        { icon: "/skills/prisma.png", label: "Prisma" },
+        { icon: "/skills/react.png", label: "React" },
+        { icon: "/skills/reactnative.png", label: "React Native" },
+        { icon: "/skills/reactquery.png", label: "React Query" },
+        { icon: "/skills/redux.png", label: "Redux" },
+        { icon: "/skills/stripe.png", label: "Stripe" },
+        { icon: "/skills/tailwind.png", label: "Tailwind CSS" },
+        { icon: "/skills/tauri.png", label: "Tauri" },
+        { icon: "/skills/ts.png", label: "TypeScript" },
+        { icon: "/skills/css.png", label: "CSS" },
+        { icon: "/skills/docker.png", label: "Docker" },
+        { icon: "/skills/express.png", label: "Express" },
+        { icon: "/skills/figma.png", label: "Figma" },
+        { icon: "/skills/firebase.png", label: "Firebase" },
+        { icon: "/skills/framer.png", label: "Framer Motion" },
+        { icon: "/skills/go.png", label: "Go" },
+        { icon: "/skills/graphql.png", label: "GraphQL" },
+        { icon: "/skills/html.png", label: "HTML" },
+    ] as const
+).map((s) => ({ label: s.label, icon: `${GH_PublicTree}${s.icon}` }));
 
 const tabs: Array<
     {
@@ -70,13 +74,13 @@ const tabs: Array<
     {
         title: "This PC",
         id: "this-pc",
-        img: "/icons/pc.ico",
+        img: DesktopIcons.PC,
         tab: ThisPC,
     },
     {
         title: "About Me",
         id: "about-me",
-        img: "/icons/user-folder.png",
+        img: ExplorerIcons.UserFolder,
         tab: AboutTab,
     },
     {
@@ -121,7 +125,7 @@ function AboutTab() {
     return (
         <>
             <ExplorerItems.Large
-                icon="/icons/user-folder.png"
+                icon={ExplorerIcons.UserFolder}
                 label="Info"
                 onDoubleClick={() => explorerTabEmittor.emit("about-info")}
             />
@@ -141,7 +145,7 @@ function AboutTab() {
                 onDoubleClick={() =>
                     window.open("https://www.github.com", "_blank")
                 }
-                icon="/icons/github-icon.png"
+                icon={DesktopIcons.GithubIcon}
                 label="Github"
                 isShortcut
             />
@@ -166,12 +170,7 @@ function SkillsTab() {
                 <ExplorerItems.Large
                     className="gap-1"
                     label={skill.label}
-                    icon={
-                        skill.icon.startsWith("/") ||
-                        skill.icon.startsWith("http")
-                            ? skill.icon
-                            : `https://github.com/programming-with-ia/windows-11/raw/8298a01ffae8ad280ee74e18b20e841524be8845/public/skills/${skill.icon}`
-                    }
+                    icon={skill.icon}
                     key={idx}
                 />
             ))}
@@ -193,8 +192,8 @@ export function ExplorerTitleBar({ controls }: { controls: React.ReactNode }) {
                     data-explorer-tab
                     className="relative inline-flex min-w-60 items-center gap-2.5 bg-foreground/5 pl-2.5 text-xs"
                 >
-                    <Image
-                        src={"/icons/explorer.png"}
+                    <img
+                        src={DesktopIcons.Explorer}
                         className="size-4"
                         alt=""
                         width={16}
@@ -242,6 +241,10 @@ export function ExplorerMain() {
     );
     const CurrentTab = explorerTabMapped[CurrentTabKey ?? "about-me"];
 
+    useEffect(() => {
+        prefetchImages(skills.map((skill) => skill.icon));
+    }, []);
+
     return (
         <>
             <div className="pointer-events-none flex select-none justify-between border-b border-foreground/10 px-5 py-3">
@@ -284,7 +287,7 @@ export function ExplorerMain() {
                                     (typeof item.img == "string" ? (
                                         <span>
                                             {
-                                                <Image
+                                                <img
                                                     src={item.img}
                                                     alt={item.title}
                                                     width={16}
diff --git a/src/components/desktop/explorer/index.tsx b/src/components/desktop/explorer/index.tsx
@@ -3,6 +3,7 @@ import React, { useState } from "react";
 // import Explorer from './explorer';
 import dynamic from "next/dynamic";
 import { useWinState } from "@/hooks/useWinState";
+import { DesktopIcons } from "@/lib/images";
 const ExplorerWindow = dynamic(() =>
     import("./explorer").then((a) => a.ExplorerMain),
 );
@@ -21,7 +22,7 @@ function ExplorerItem() {
                 onDoubleClick={() => setIsWinShow(true)}
                 smallIcon
                 className="gap-1.5"
-                icon="/icons/explorer.png"
+                icon={DesktopIcons.Explorer}
                 name="File Explorer"
                 id="explorer-desktop-item"
                 {...(isWinShow
diff --git a/src/components/desktop/full-screen-item.tsx b/src/components/desktop/full-screen-item.tsx
@@ -1,5 +1,6 @@
 "use client";
 import DesktopItem from "@/components/desktop/desktop-item";
+import { DesktopIcons } from "@/lib/images";
 import { cn } from "@/lib/utils";
 import type { CompoProps } from "@/types/types";
 import React, { useEffect, useState } from "react";
@@ -53,8 +54,8 @@ function FullScreenBtn({
                 key={isFullScreen ? 1 : 0}
                 icon={
                     isFullScreen
-                        ? "/icons/exit-full-screen.png"
-                        : "/icons/full-screen.png"
+                        ? DesktopIcons.ExitFullScreen
+                        : DesktopIcons.FullScreen
                 }
                 name={isFullScreen ? "Exit Full Screen" : "Full Screen"}
                 isShortcut
diff --git a/src/components/lock-screen.tsx b/src/components/lock-screen.tsx
diff --git a/src/lib/images.ts b/src/lib/images.ts
diff --git a/src/lib/preload-images.ts b/src/lib/preload-images.ts
diff --git a/src/lib/utils.ts b/src/lib/utils.ts

Original file line number	Diff line number	Diff line change
`@@ -32,7 +32,7 @@ const TaskBarButton = React.forwardRef<HTMLButtonElement, TaskBarButtonProps>(`
`32`	`32`	`{...p}`
`33`	`33`	`>`
`34`	`34`	`{src && (`
`35`		`- <Image`
	`35`	`+ <img`
`36`	`36`	`className={cn(`
`37`	`37`	`"transition-transform duration-200 animate-in fade-in-0 zoom-in-0 group-active:scale-[.8]",`
`38`	`38`	`imgClassName,`