baileykane.co
this repo has no description
www.baileykane.co/
Use Next/Image to optimize image performance
+6
-5
components/pageContent/books/BookCard.tsx
+6
-5
components/pageContent/books/BookCard.tsx
···
2
2
3
3
import type Book from "@/types/Book";
4
4
import { useState } from "react";
5
+
import Image from "next/image";
5
6
6
7
export default function BookCard({ book }: { book: Book }): React.ReactElement {
7
8
const [imageError, setImageError] = useState(false);
···
21
22
className="rounded-md w-72 mx-auto sm:w-auto sm:mx-0"
22
23
>
23
24
<div className="p-2 rounded-md border-2 bg-stone-50 dark:bg-stone-800 border-stone-400 hover:border-stone-500 dark:border-stone-600 shadow-md hover:shadow-xl transition-all">
24
-
<div className="shadow-md rounded-xs w-full aspect-book outline-solid outline-1 dark:outline-stone-400">
25
-
<img
25
+
<div className="relative shadow-md rounded-xs w-full aspect-book outline-solid outline-1 dark:outline-stone-400">
26
+
<Image
26
27
// OpenLibrary Covers API:https://openlibrary.org/dev/docs/api/covers
27
28
src={`https://covers.openlibrary.org/b/isbn/${book.isbn}-M.jpg?default=false`}
29
+
fill={true}
30
+
objectFit="cover"
28
31
alt={`The cover of ${book.title}, by ${book.author}.`}
29
32
loading="lazy"
30
33
onError={() => setImageError(true)}
31
-
className={`w-full rounded-xs aspect-book ${
32
-
imageError && "hidden"
33
-
}`}
34
+
className={`w-full rounded-xs ${imageError && "hidden"}`}
34
35
/>
35
36
{imageError && (
36
37
<div className="rounded-xs h-full bg-stone-200 dark:bg-stone-700 flex items-center justify-center">