Fix photos

src/components/Photo.astro

@@ -1,25 +0,0 @@
----
-import { Image } from "astro:assets";
-
-interface Props {
-  photo: any;
-  width?: number;
-  height?: number;
-  class?: string;
-}
-
-const { photo, width, height, class: className } = Astro.props;
----
-
-<Image
-  src={photo}
-  alt=""
-  {width}
-  {height}
-  densities={[1, 2]}
-  quality="mid"
-  class={"object-contain rounded " + (className ?? "")}
-  decoding="sync"
-  loading="eager"
-  transition:name={photo.src}
-/>

src/pages/photography/[photo].astro

@@ -1,5 +1,6 @@
 ---
 import type { GetStaticPaths } from "astro";
+import { Image } from "astro:assets";
 import { getFileNameFromPath } from "./index.astro";
 import RootLayout from "@layouts/RootLayout.astro";
 import Photo from "@components/Photo.astro";
@@ -27,6 +28,13 @@ const { photo } = Astro.props;
     history.back()
     "
   >
-    <Photo photo={photo.default} height={1000} class="w-auto h-full" />
+    <Image
+      src={photo.default}
+      alt=""
+      height={2000}
+      quality="high"
+      class="object-contain rounded w-auto h-full"
+      transition:name={photo.default.src}
+    />
   </div>
 </RootLayout>

src/pages/photography/index.astro

@@ -4,7 +4,6 @@ import ContainerLayout from "@layouts/ContainerLayout.astro";
 import BaseLayout from "@layouts/BaseLayout.astro";
 import TextContentLayout from "@layouts/TextContentLayout.astro";
 import { Image } from "astro:assets";
-import Photo from "@components/Photo.astro";
 
 const photos = await Astro.glob("../../assets/photos/*");
 
@@ -48,7 +47,14 @@ export const getFileNameFromPath = (path: string) => {
           class="flex w-full py-2 duration-100 hover:-translate-y-1 rounded-lg"
         >
           <div class="bg-gray-200 rounded">
-            <Photo photo={photo.default} width={400} />
+            <Image
+              src={photo.default}
+              alt=""
+              width={1000}
+              quality="mid"
+              class="object-contain rounded"
+              transition:name={photo.default.src}
+            />
           </div>
         </a>
       ))