Merge pull request #16 from IgorD-lab/feat/home

added desktop folders and their functionalities

Author: IgorD-lab

src/App.tsx

@@ -1,7 +1,7 @@
 import gsap from 'gsap';
 import { Draggable } from 'gsap/Draggable';
 
-import { Navbar, Welcome, Dock } from '#components';
+import { Navbar, Welcome, Dock, Home } from '#components';
 import {
   Terminal,
   Safari,
@@ -28,6 +28,8 @@ const App = () => {
       <Text />
       <Image />
       <Contact />
+
+      <Home />
     </main>
   );
 };

src/components/Home.tsx

@@ -0,0 +1,39 @@
+import { locations } from '#constants';
+import clsx from 'clsx';
+import { useGSAP } from '@gsap/react';
+import { Draggable } from 'gsap/Draggable';
+import useWindowStore from '#store/window';
+import useLocationStore from '#store/location';
+import { FinderItem } from '#types';
+
+const projects = (locations.work?.children as FinderItem[]) ?? [];
+const Home = () => {
+  const { setActiveLocation } = useLocationStore();
+  const { openWindow } = useWindowStore();
+
+  const handleOpenProjectFinder = (project: FinderItem) => {
+    setActiveLocation(project);
+    openWindow('finder');
+  };
+  useGSAP(() => {
+    Draggable.create('.folder');
+  }, []);
+  return (
+    <section id="home">
+      <ul>
+        {projects.map((project) => (
+          <li
+            key={project.id}
+            className={clsx('group folder', project.windowPosition)}
+            onClick={() => handleOpenProjectFinder(project)}
+          >
+            <img src="/images/folder.png" alt={project.name} />
+            <p>{project.name}</p>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+};
+
+export default Home;

src/components/index.ts

@@ -3,5 +3,6 @@ import Navbar from '#components/Navbar';
 import Welcome from '#components/Welcome';
 import Dock from '#components/Dock';
 import WindowControls from './WindowControls';
+import Home from './Home';
 
-export { Navbar, Welcome, Dock, WindowControls };
+export { Navbar, Welcome, Dock, WindowControls, Home };