fix image issues

shawnmclean · Dec 17, 2024 · b015410 · b015410
1 parent 28afee3
commit b015410
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 17 deletions.
diff --git a/apps/sovoli.com/src/app/(dashboard)/dashboard/page.tsx b/apps/sovoli.com/src/app/(dashboard)/dashboard/page.tsx
@@ -1,10 +1,9 @@
 import type { SelectKnowledgeSchema } from "@sovoli/db/schema";
 import type { Metadata } from "next";
 import { cache } from "react";
-import NextImage from "next/image";
+import Image from "next/image";
 import Link from "next/link";
 import { MediaAssetHost } from "@sovoli/db/schema";
-import { Image } from "@sovoli/ui/components/ui/image";
 import { TimeAgo } from "@sovoli/ui/components/ui/time-ago";
 
 import supabaseLoader from "~/loaders/supabaseImageLoader";
@@ -92,7 +91,6 @@ function KnowledgeImage({ knowledge }: { knowledge: SelectKnowledgeSchema }) {
   if (images?.[0]) {
     return (
       <Image
-        as={NextImage}
         src={images[0].src}
         alt={images[0].alt}
         className="h-full w-full object-cover"

diff --git a/apps/sovoli.com/src/app/[username]/(profile)/shelves/components/ShelfList.tsx b/apps/sovoli.com/src/app/[username]/(profile)/shelves/components/ShelfList.tsx
@@ -1,8 +1,7 @@
-import NextImage from "next/image";
+import Image from "next/image";
 import Link from "next/link";
 import { auth } from "@sovoli/auth";
 import { Card, CardBody, CardFooter } from "@sovoli/ui/components/ui/card";
-import { Image } from "@sovoli/ui/components/ui/image";
 import { LibraryBigIcon } from "lucide-react";
 
 import type { GetKnowledges } from "~/services/knowledge/getKnowledges";
@@ -37,7 +36,6 @@ async function ShelfListItem({ shelf }: { shelf: ShelfItem }) {
         <Link href={shelf.url} className="flex h-full w-full">
           {shelf.MediaAssets[0]?.path ? (
             <Image
-              as={NextImage}
               src={`${shelf.MediaAssets[0].bucket}/${shelf.MediaAssets[0].path}`}
               alt={shelf.title ?? "Shelf cover"}
               fill

diff --git a/apps/sovoli.com/src/app/[username]/[slug]/components/Gallery.tsx b/apps/sovoli.com/src/app/[username]/[slug]/components/Gallery.tsx
@@ -1,14 +1,13 @@
 "use client";
 
-import NextImage from "next/image";
+import Image from "next/image";
 import {
   Carousel,
   CarouselContent,
   CarouselItem,
   CarouselNext,
   CarouselPrevious,
 } from "@sovoli/ui/components/ui/carousel";
-import { Image } from "@sovoli/ui/components/ui/image";
 
 import supabaseLoader from "~/loaders/supabaseImageLoader";
 
@@ -21,14 +20,15 @@ export function Gallery({ images }: GalleryProps) {
 
   if (images.length === 1 && images[0]) {
     return (
-      <Image
-        src={images[0].src}
-        alt={images[0].alt || "Image"}
-        className="object-cover"
-        fill
-        as={NextImage}
-        loader={supabaseLoader}
-      />
+      <div style={{ position: "relative", width: "100%", height: "500px" }}>
+        <Image
+          src={images[0].src}
+          alt={images[0].alt || "Image"}
+          className="object-contain"
+          fill
+          loader={supabaseLoader}
+        />
+      </div>
     );
   }
   return (
@@ -40,8 +40,9 @@ export function Gallery({ images }: GalleryProps) {
               src={image.src}
               alt={image.alt || "Image"}
               className="h-auto max-h-[600px] w-auto object-contain"
+              width={16}
+              height={9}
               fill
-              as={NextImage}
               loader={supabaseLoader}
             />
           </CarouselItem>