Merge pull request #14 from IgorD-lab/feat/img-viewer

implemented image file (window) viewer

Author: IgorD-lab

src/App.tsx

@@ -2,7 +2,7 @@ import gsap from 'gsap';
 import { Draggable } from 'gsap/Draggable';
 
 import { Navbar, Welcome, Dock } from '#components';
-import { Terminal, Safari, Resume, Finder, Text } from '#windows';
+import { Terminal, Safari, Resume, Finder, Text, Image } from '#windows';
 
 gsap.registerPlugin(Draggable);
 
@@ -18,6 +18,7 @@ const App = () => {
       <Resume />
       <Finder />
       <Text />
+      <Image />
     </main>
   );
 };

src/windows/Image.tsx

@@ -0,0 +1,37 @@
+import { WindowControls } from '#components';
+import WindowWrapper from '#hoc/WindowWrapper';
+import useWindowStore from '#store/window';
+
+const ImageWindowContent = () => {
+  const { windows } = useWindowStore();
+
+  const data = windows.imgfile?.data;
+
+  if (!data) return null;
+
+  const { name, imageUrl } = data;
+
+  return (
+    <>
+      <div id="window-header">
+        <WindowControls target="imgfile" />
+        <h2>{name}</h2>
+      </div>
+
+      <div className="p-5 bg-white">
+        {imageUrl ? (
+          <div className="w-full">
+            <img
+              src={imageUrl}
+              alt={name}
+              className="w-full h-auto max-h-[70vh] object-contain rounded"
+            />
+          </div>
+        ) : null}
+      </div>
+    </>
+  );
+};
+
+const ImageWindow = WindowWrapper(ImageWindowContent, 'imgfile');
+export default ImageWindow;

src/windows/Text.tsx

@@ -3,7 +3,7 @@ import WindowWrapper from '#hoc/WindowWrapper';
 import useWindowStore from '#store/window';
 import { FinderItem } from '#types';
 
-const Text = () => {
+const TextWindowContent = () => {
   const { windows } = useWindowStore();
 
   // Directly access the data stored for this window
@@ -43,5 +43,5 @@ const Text = () => {
   );
 };
 
-const TextWindow = WindowWrapper(Text, 'txtfile');
+const TextWindow = WindowWrapper(TextWindowContent, 'txtfile');
 export default TextWindow;

src/windows/index.ts

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