astro-personal-website/src/pages/photography/[photo].astro

---
import type { GetStaticPaths } from "astro";
import { Image } from "astro:assets";
import { getFileNameFromPath } from "./index.astro";
import RootLayout from "@layouts/RootLayout.astro";

export const getStaticPaths = (async () => {
  const photos = await Astro.glob("../../assets/photos/*");

  return photos.map((photo: any) => ({
    params: {
      photo: getFileNameFromPath(photo.default.src),
    },
    props: {
      photo,
    },
  }));
}) satisfies GetStaticPaths;

const { photo } = Astro.props;
---

<RootLayout title="Photo" hideScrollbar themeColor="#111827">
  <div
    class="fixed flex h-[100svh] w-full cursor-pointer justify-center bg-gray-900"
    onclick="
    history.back()
    "
  >
    <Image
      src={photo.default}
      alt=""
      height={2000}
      quality="high"
      class="h-full w-auto rounded object-contain"
      transition:name={photo.default.src}
    />
  </div>
</RootLayout>