Feat/gallery

src/App.tsx

@@ -10,6 +10,7 @@ import {
   Text,
   Image,
   Contact,
+  Photos,
 } from '#windows';
 
 gsap.registerPlugin(Draggable);
@@ -29,6 +30,7 @@ const App = () => {
       <Image />
       <Contact />
 
+      <Photos />
       <Home />
     </main>
   );

src/windows/Photos.tsx

@@ -0,0 +1,63 @@
+import { Mail, Search } from 'lucide-react';
+
+import { WindowControls } from '#components';
+import WindowWrapper from '#hoc/WindowWrapper';
+import useWindowStore from '#store/window';
+import { GALLERY, PHOTOS_LINKS } from '#constants';
+
+const Photos = () => {
+  const { openWindow } = useWindowStore();
+
+  return (
+    <>
+      <div id="window-header">
+        <WindowControls target="photos" />
+
+        <div className="w-full flex justify-end items-center gap-3 text-gray-500">
+          <Mail className="icon" />
+          <Search className="icon" />
+        </div>
+      </div>
+
+      <div className="flex w-full">
+        <div className="sidebar">
+          <h2>Photos</h2>
+
+          <ul>
+            {PHOTOS_LINKS.map(({ id, icon, title }) => (
+              <li key={id}>
+                <img src={icon} alt={title} />
+                <p>{title}</p>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className="gallery">
+          <ul>
+            {GALLERY.map(({ id, img }) => (
+              <li
+                key={id}
+                onClick={() =>
+                  openWindow('imgfile', {
+                    id,
+                    name: 'Gallery image',
+                    icon: '/images/image.png',
+                    kind: 'file',
+                    fileType: 'img',
+                    imageUrl: img,
+                  })
+                }
+              >
+                <img src={img} alt={`Gallery image ${id}`} />
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </>
+  );
+};
+
+const PhotosWindow = WindowWrapper(Photos, 'photos');
+export default PhotosWindow;

src/windows/Resume.tsx

@@ -5,10 +5,8 @@ import { Page, Document, pdfjs } from 'react-pdf';
 
 import 'react-pdf/dist/Page/AnnotationLayer.css';
 import 'react-pdf/dist/Page/TextLayer.css';
-pdfjs.GlobalWorkerOptions.workerSrc = new URL(
-  'pdfjs-dist/build/pdf.worker.min.mjs',
-  import.meta.url,
-).toString();
+
+pdfjs.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
 
 const Resume = () => {
   return (

src/windows/index.ts

@@ -5,5 +5,6 @@ import Finder from '#windows/Finder';
 import Text from '#windows/Text';
 import Image from './Image';
 import Contact from './Contact';
+import Photos from './Photos';
 
-export { Terminal, Safari, Resume, Finder, Text, Image, Contact };
+export { Terminal, Safari, Resume, Finder, Text, Image, Contact, Photos };