feat: popup

packages/website/src/components/Gallery/Card.tsx

@@ -1,4 +1,12 @@
-import { Flex, Skeleton, Text } from '@radix-ui/themes';
+import { Cross1Icon, DownloadIcon } from '@radix-ui/react-icons';
+import {
+  Dialog,
+  Flex,
+  IconButton,
+  Link,
+  Skeleton,
+  Text,
+} from '@radix-ui/themes';
 import { useRef } from 'react';
 import { useIntersection } from '../../hooks/useIntersection';
 import type { MaybeSkeletonComponentProps } from '../../types/maybeSkeletonComponentProps';
@@ -9,14 +17,22 @@ type GalleryCardProps = MaybeSkeletonComponentProps<{
 }>;
 
 export function GalleryCard(props: GalleryCardProps) {
+  const src = `/api/gallery/${!props.skeleton && props.id}.webp`;
   const card = useRef<HTMLDivElement>(null);
 
   useIntersection(() => props.skeleton && props.onIntersection?.(), card, {
     disabled: !props.skeleton || props.onIntersection === undefined,
   });
 
-  return (
+  const content = (
-    <Flex direction="column" align="center" width="6rem" gap="1" ref={card}>
+    <Flex
+      direction="column"
+      align="center"
+      width="6rem"
+      gap="1"
+      ref={card}
+      style={{ cursor: 'pointer' }}
+    >
       {props.skeleton && (
         <>
           <Skeleton width="100%" height="4.57rem" />
@@ -33,14 +49,52 @@ export function GalleryCard(props: GalleryCardProps) {
               // aspect ratio 7 / 8
               objectFit: 'cover',
             }}
-            src={`/api/gallery/${props.id}.webp`}
+            src={src}
+            alt={props.name}
           />
 
-          <Text align="center" style={{ maxWidth: '100%' }}>
+          <Text size="1" align="center" style={{ maxWidth: '100%' }}>
             {props.name}
           </Text>
         </>
       )}
     </Flex>
   );
+
+  if (props.skeleton) return content;
+
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger>{content}</Dialog.Trigger>
+
+      <Dialog.Content
+        onOpenAutoFocus={(event) => event.preventDefault()}
+        width="fit-content"
+      >
+        <Flex position="absolute" top="3" right="3" gap="3">
+          <Link download href={src}>
+            <IconButton variant="ghost">
+              <DownloadIcon />
+            </IconButton>
+          </Link>
+
+          <Dialog.Close>
+            <IconButton variant="ghost">
+              <Cross1Icon />
+            </IconButton>
+          </Dialog.Close>
+        </Flex>
+
+        <Flex px="4">
+          <img src={src} alt={props.name} />
+        </Flex>
+
+        <Flex justify="center" mt="4">
+          <Dialog.Title align="center" style={{ maxWidth: '10rem' }}>
+            {props.name}
+          </Dialog.Title>
+        </Flex>
+      </Dialog.Content>
+    </Dialog.Root>
+  );
 }

packages/website/src/pages/tools/gallery/_index.tsx

@@ -1,5 +1,6 @@
 import { GalleryList, type Avatar } from '../../../components/Gallery/List';
 import { GallerySearch } from '../../../components/Gallery/Search';
+import { PageWrapper } from '../../../components/PageWrapper';
 import { GalleryEphemeral } from '../../../stores/galleryEphemeral';
 
 interface PageProps {
@@ -8,9 +9,11 @@ interface PageProps {
 
 export function Page({ avatars }: PageProps) {
   return (
-    <GalleryEphemeral.Provider>
+    <PageWrapper color="gold">
-      <GallerySearch />
+      <GalleryEphemeral.Provider>
-      <GalleryList avatars={avatars} />
+        <GallerySearch />
-    </GalleryEphemeral.Provider>
+        <GalleryList avatars={avatars} />
+      </GalleryEphemeral.Provider>
+    </PageWrapper>
   );
 }

packages/website/src/pages/tools/gallery/index.astro

@@ -1,6 +1,5 @@
 ---
 import type { Avatar } from '../../../components/Gallery/List';
-import { PageWrapper } from '../../../components/PageWrapper';
 import { galleryTool } from '../../../constants/tools';
 import { fetchGlossary } from '../../../core/blitz/fetchGlossary';
 import ToolLayout from '../../../layouts/ToolLayout.astro';
@@ -22,7 +21,5 @@ const avatars = Object.entries(glossary)
 ---
 
 <ToolLayout tool={galleryTool}>
-  <PageWrapper color="gold">
+  <Page {avatars} client:load />
-    <Page {avatars} client:load />
-  </PageWrapper>
 </ToolLayout>