add icons

.

Update shortcut.png

Author: programming-with-ia

public/icons/chrome.png

@@ -69,12 +69,12 @@ function ThisPcFolderItem(props: Omit<ThisPCItemProps, "childern">) {
 }
 
 const FoldersItems = [
-    { icon: "/icons/folder-desktop.ico", label: "Desktop" },
-    // { icon: "/icons/folder-documents.ico", label: "Documents" },
-    // { icon: "/icons/folder-downloads.ico", label: "Downloads" },
-    { icon: "/icons/folder-music.ico", label: "Music" },
-    { icon: "/icons/folder-pictures.ico", label: "Pictures" },
-    { icon: "/icons/folder-videos.ico", label: "Videos" },
+    { 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" },
 ];
 
 function ThisPC() {
@@ -103,19 +103,19 @@ function ThisPC() {
                         fill="58.7%"
                         space="408.1 GB free of 988 GB"
                         label="Local Disk (C:)"
-                        icon="/icons/windows-drive.ico"
+                        icon="/icons/windows-drive.png"
                     />
                     <ThisPcDriveItem
                         fill="73.7%"
                         space="498.8 GB free of 1895 GB"
                         label="Local Disk (D:)"
-                        icon="/icons/drive.ico"
+                        icon="/icons/drive.png"
                     />
                     <ThisPcDriveItem
                         fill="24.1%"
                         space="2816.7 GB free of 3712 GB"
                         label="Local Disk (E:)"
-                        icon="/icons/drive.ico"
+                        icon="/icons/drive.png"
                     />
                 </AccordionContent>
             </AccordionItem>

public/icons/colorgradient.png

@@ -5,7 +5,7 @@ import TaskBar from "@/components/TaskBar";
 import React, { useEffect } from "react";
 import Explorer from "@/components/desktop/explorer";
 import Iframe from "@/components/iframe";
-import YouTubeEmbed from "@/components/youtube";
+// import YouTubeEmbed from "@/components/youtube";
 import CalculatorItem from "@/components/lazy-items/calculator-item";
 import ExplorerDesktopItem from "@/components/desktop/explorer-desktop-item";
 import { Component } from "@/components/component";
@@ -61,7 +61,7 @@ function Page() {
                     <Explorer />
                     <CalculatorItem />
                     <DesktopItem
-                        icon="/icons/chrome.ico"
+                        icon="/icons/chrome.png"
                         name="Chrome"
                         className="gap-2"
                         isShortcut
@@ -81,7 +81,7 @@ function Page() {
                         }}
                     />
                     <DesktopItem
-                        icon="/icons/vscode.ico"
+                        icon="/icons/vscode.png"
                         name="VS Code"
                         isShortcut
                         smallIcon
@@ -93,16 +93,16 @@ function Page() {
                             id: "vs-code",
                         }}
                     />
-                    <DesktopItem
+                    {/* <DesktopItem
                         icon="/icons/youtube.ico"
                         name="Youtube"
                         isShortcut
                         smallIcon
                         className="gap-2"
                         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.ico" 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/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="/icons/motoX3.jpg"
                         name="Moto X3M"

public/icons/drive.png

@@ -127,7 +127,7 @@ function StartButton() {
                             Pinned <GroupHeaderButton label="All apps" />
                         </div>
                         <div className="flex flex-1 flex-wrap content-start justify-start">
-                            <PinnedItem img="/icons/folder.ico" title="Name" />
+                            <PinnedItem img="/icons/folder.png" title="Name" />
                             <PinnedItem
                                 img="/icons/projects.png"
                                 title="Projects"
@@ -183,12 +183,12 @@ function StartButton() {
                                 date="Recently added"
                             />
                             <RecommendItem
-                                img="/icons/folder.ico"
+                                img="/icons/folder.png"
                                 title="Github"
                                 date="1h ago"
                             />
                             <RecommendItem
-                                img="/icons/folder.ico"
+                                img="/icons/folder.png"
                                 title="Github"
                                 date="2h ago"
                             />

public/icons/exit-full-screen.png

@@ -77,7 +77,7 @@ export function DesktopItemBase({
                     {isShortcut && (
                         <Image
                             className="absolute bottom-0 left-0 size-8"
-                            src="/icons/shortcut.ico"
+                            src="/icons/shortcut.png"
                             alt=""
                             width={32}
                             height={32}

public/icons/explorer.ico

@@ -7,7 +7,7 @@ import { doubleClick } from "@/lib/utils";
 function ExplorerDesktopItem({
     name,
     explorerTab,
-    icon = "/icons/folder.ico",
+    icon = "/icons/folder.png",
 }: {
     icon?: string;
     name: string;

public/icons/explorer.png

@@ -31,21 +31,21 @@ export function LargeItem({
         >
             <Component As={isShortcut ? "div" : 0} className="relative">
                 <img
-                    className="aspect-square object-contain"
+                    className="aspect-square object-contain w-24"
                     src={icon}
                     alt={label + " icon"}
                 />
                 {isShortcut && (
                     <img
                         className="absolute bottom-1 left-2 size-8"
-                        src="/icons/shortcut.ico"
+                        src="/icons/shortcut.png"
                         alt=""
                         width={32}
                         height={32}
                     />
                 )}
             </Component>
-            <span className="line-clamp-4">{label}</span>
+            <span className="line-clamp-4 mt-auto">{label}</span>
         </button>
     );
 }

public/icons/folder-desktop.png

@@ -22,31 +22,32 @@ import { ExplorerItems } from "./_components/explorer-items";
 import { doubleClick } from "@/lib/utils";
 
 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" },
+    // 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" },
 ];
 
 const tabs: Array<
@@ -75,7 +76,7 @@ const tabs: Array<
     {
         title: "About Me",
         id: "about-me",
-        img: "/icons/user-folder.ico",
+        img: "/icons/user-folder.png",
         tab: AboutTab,
     },
     {
@@ -120,7 +121,7 @@ function AboutTab() {
     return (
         <>
             <ExplorerItems.Large
-                icon="/icons/user-folder.ico"
+                icon="/icons/user-folder.png"
                 label="Info"
                 onDoubleClick={() => explorerTabEmittor.emit("about-info")}
             />
@@ -140,7 +141,7 @@ function AboutTab() {
                 onDoubleClick={() =>
                     window.open("https://www.github.com", "_blank")
                 }
-                icon="/icons/github-icon.ico"
+                icon="/icons/github-icon.png"
                 label="Github"
                 isShortcut
             />
@@ -165,7 +166,12 @@ function SkillsTab() {
                 <ExplorerItems.Large
                     className="gap-1"
                     label={skill.label}
-                    icon={skill.icon}
+                    icon={
+                        skill.icon.startsWith("/") ||
+                        skill.icon.startsWith("http")
+                            ? skill.icon
+                            : `https://github.com/programming-with-ia/windows-11/raw/8298a01ffae8ad280ee74e18b20e841524be8845/public/skills/${skill.icon}`
+                    }
                     key={idx}
                 />
             ))}
@@ -188,7 +194,7 @@ export function ExplorerTitleBar({ controls }: { controls: React.ReactNode }) {
                     className="relative inline-flex min-w-60 items-center gap-2.5 bg-foreground/5 pl-2.5 text-xs"
                 >
                     <Image
-                        src={"/icons/explorer.ico"}
+                        src={"/icons/explorer.png"}
                         className="size-4"
                         alt=""
                         width={16}

public/icons/folder-documents.png

@@ -21,7 +21,7 @@ function ExplorerItem() {
                 onDoubleClick={() => setIsWinShow(true)}
                 smallIcon
                 className="gap-1.5"
-                icon="/icons/explorer.ico"
+                icon="/icons/explorer.png"
                 name="File Explorer"
                 id="explorer-desktop-item"
                 {...(isWinShow

public/icons/folder-downloads.png

@@ -53,8 +53,8 @@ function FullScreenBtn({
                 key={isFullScreen ? 1 : 0}
                 icon={
                     isFullScreen
-                        ? "/icons/exit-full-screen.ico"
-                        : "/icons/full-screen.ico"
+                        ? "/icons/exit-full-screen.png"
+                        : "/icons/full-screen.png"
                 }
                 name={isFullScreen ? "Exit Full Screen" : "Full Screen"}
                 isShortcut

public/icons/folder-music.png

@@ -0,0 +1,14 @@
+export function TailwindIndicator() {
+    if (process.env.NODE_ENV === "production") return null;
+
+    return (
+        <div className="fixed bottom-1 left-1 z-[100] flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white">
+            <div className="block sm:hidden">xs</div>
+            <div className="hidden sm:block md:hidden">sm</div>
+            <div className="hidden md:block lg:hidden">md</div>
+            <div className="hidden lg:block xl:hidden">lg</div>
+            <div className="hidden xl:block 2xl:hidden">xl</div>
+            <div className="hidden 2xl:block">2xl</div>
+        </div>
+    );
+}