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

import { asset, Avatar } from '@blitzkit/core';
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 { useLocale } from '../../hooks/useLocale';
import type { MaybeSkeletonComponentProps } from '../../types/maybeSkeletonComponentProps';

type GalleryCardProps = MaybeSkeletonComponentProps<{
  avatar: Avatar;
}>;

export function GalleryCard(props: GalleryCardProps) {
  const src = asset(
    `gallery/avatars/${!props.skeleton && `${props.avatar.id}${props.avatar.extension}`}`,
  );
  const card = useRef<HTMLDivElement>(null);
  const { unwrap } = useLocale();

  useIntersection(() => props.skeleton && props.onIntersection?.(), card, {
    disabled: !props.skeleton || props.onIntersection === undefined,
  });

  const content = (
    <Flex
      direction="column"
      align="center"
      width="6rem"
      gap="1"
      ref={card}
      style={{ cursor: 'pointer' }}
    >
      {props.skeleton && (
        <>
          <Skeleton width="100%" height="4.57rem" />
          <Skeleton width="100%" height="1em" />
        </>
      )}

      {!props.skeleton && (
        <>
          <img
            style={{
              width: '4rem',
              height: '4.57rem',
              // aspect ratio 7 / 8
              objectFit: 'cover',
            }}
            src={src}
            alt={unwrap(props.avatar.name)}
          />

          <Text size="1" align="center" style={{ maxWidth: '100%' }}>
            {unwrap(props.avatar.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" justify="center" mt="3">
          <img src={src} alt={unwrap(props.avatar.name)} />
        </Flex>

        <Flex justify="center" mt="4">
          <Dialog.Title align="center" style={{ maxWidth: '10rem' }}>
            {unwrap(props.avatar.name)}
          </Dialog.Title>
        </Flex>
      </Dialog.Content>
    </Dialog.Root>
  );
}