Add dialog image component

shiro · Apr 5, 2024 · a29767d · a29767d
1 parent 211ab99
commit a29767d
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 41 deletions.
diff --git a/src/DialogImage.tsx b/src/DialogImage.tsx
@@ -0,0 +1,49 @@
+import { Dialog } from "@kobalte/core";
+import cn from "classnames";
+import { Component, JSX } from "solid-js";
+
+interface Props {
+  children?: JSX.Element;
+  style?: JSX.CSSProperties;
+  class?: string;
+  image: Component<any>;
+  thumbnail: Component<any>;
+  alt: string;
+}
+
+const DialogImage: Component<Props> = (props) => {
+  const { children, class: $class, alt, ...rest } = $destructure(props);
+
+  return (
+    <div class={cn($class, "relative overflow-hidden")} {...rest}>
+      <Dialog.Root>
+        <Dialog.Trigger class="block">
+          <props.thumbnail
+            class={cn("absolute left-0 top-0 h-full w-full object-cover")}
+            alt={alt}
+          />
+        </Dialog.Trigger>
+        <Dialog.Portal>
+          <Dialog.Overlay
+            class="fixed inset-0 z-50 cursor-pointer"
+            style={{ background: "rgba(0, 0, 0, 0.5)" }}
+          />
+          <div class="fixed inset-0 z-50 flex items-center justify-center">
+            <Dialog.Content class="flex max-h-[90vh] max-w-[90vw] items-center justify-center">
+              <Dialog.CloseButton>
+                <props.image
+                  class={cn(
+                    "max-h-[90vh]  max-w-[90vw] overflow-hidden object-contain"
+                  )}
+                  alt={alt}
+                />
+              </Dialog.CloseButton>
+            </Dialog.Content>
+          </div>
+        </Dialog.Portal>
+      </Dialog.Root>
+    </div>
+  );
+};
+
+export default DialogImage;
diff --git a/src/GallerySite.tsx b/src/GallerySite.tsx
@@ -1,18 +1,18 @@
-import { Dialog } from "@kobalte/core";
 import { css } from "@linaria/core";
 import cn from "classnames";
-import { JSX } from "solid-js";
+import { JSX, Component } from "solid-js";
+import DialogImage from "~/DialogImage";
 import { breakpoint, breakpointUntil } from "~/style/commonStyle";
 
-const images = Object.values(
+const images: Component[] = Object.values(
   import.meta.glob("@assets/gallery/*.jpg", {
     query: "?lazy",
     import: "default",
     eager: true,
   })
 );
 
-const thumbnails = Object.values(
+const thumbnails: Component[] = Object.values(
   import.meta.glob("@assets/gallery/*.jpg", {
     query: "?lazy&size=400x400",
     import: "default",
@@ -29,47 +29,20 @@ const GallerySite: Component<Props> = (props) => {
     <div class={cn(_GallerySite, "ultra-wide")}>
       <div class={Grid}>
         <For each={images}>
-          {(Image, idx) => <Card Image={Image} Thumbnail={thumbnails[idx()]} />}
+          {(image, idx) => (
+            <DialogImage
+              class={cn(card, "h-0 w-full pt-[100%]")}
+              alt="gallery picture"
+              image={image}
+              thumbnail={thumbnails[idx()]}
+            />
+          )}
         </For>
       </div>
     </div>
   );
 };
 
-const Card: Component<any> = (props: any) => {
-  // const { Image } = $destructure(props);
-  return (
-    <div class={cn(card, "relative h-0 w-full overflow-hidden pt-[100%]")}>
-      <Dialog.Root>
-        <Dialog.Trigger class="block">
-          <props.Thumbnail
-            class={cn("absolute left-0 top-0 h-full w-full object-cover")}
-            alt="Gallery picture"
-          />
-        </Dialog.Trigger>
-        <Dialog.Portal>
-          <Dialog.Overlay
-            class="fixed inset-0 z-50 cursor-pointer"
-            style={{ background: "rgba(0, 0, 0, 0.5)" }}
-          />
-          <div class="fixed inset-0 z-50 flex items-center justify-center">
-            <Dialog.Content class="flex max-h-[90vh] max-w-[90vw] items-center justify-center">
-              <Dialog.CloseButton>
-                <props.Image
-                  class={cn(
-                    "max-h-[90vh]  max-w-[90vw] overflow-hidden object-contain"
-                  )}
-                  alt="Gallery picture"
-                />
-              </Dialog.CloseButton>
-            </Dialog.Content>
-          </div>
-        </Dialog.Portal>
-      </Dialog.Root>
-    </div>
-  );
-};
-
 const _GallerySite = css``;
 
 const Grid = css`

diff --git a/src/about/ProjectsSection.tsx b/src/about/ProjectsSection.tsx
@@ -17,6 +17,7 @@ import ProjectImageFujipodWeb2 from "@assets/about/project-fujipod-web-2.jpg?laz
 import ProjectThumbnailFujipodWeb2 from "@assets/about/project-fujipod-web-2.jpg?lazy&size=300x";
 import ProjectImageFujipodWeb3 from "@assets/about/project-fujipod-web-3.jpg?lazy";
 import ProjectThumbnailFujipodWeb3 from "@assets/about/project-fujipod-web-3.jpg?lazy&size=300x";
+import DialogImage from "~/DialogImage";
 
 interface Props {
   style?: JSX.CSSProperties;
@@ -93,8 +94,15 @@ const Project: Component<any> = (props: any) => {
       </div>
       <div class="flex gap-4">
         <For each={images}>
-          {(Image, idx) => (
-            <PreviewImage Image={Image} Thumbnail={thumbnails[idx()]} />
+          {(image, idx) => (
+            <DialogImage
+              class={cn(
+                ImageStyle,
+                "h-32 w-[30%] max-w-60 rounded border-2 border-colors-primary-800 object-cover xs:w-[50%]"
+              )}
+              image={image}
+              thumbnail={thumbnails[idx()]}
+            />
           )}
         </For>
       </div>