Something went wrong. Try again.
This repository has no description
Something went wrong. Try again.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495"use client";
import Image from "next/image";import Link from "next/link";import { useState } from "react";
const LibraryClient = ({ did, incompleteBooks, rankedBooks }) => { let maxRating = -Infinity; let minRating = Infinity;
rankedBooks.forEach((book) => { maxRating = Math.max(book.averageRating, maxRating); minRating = Math.min(book.averageRating, minRating); });
rankedBooks = rankedBooks .map((book) => ({ ...book, normalizedRating: (100 * (book.averageRating - minRating)) / (maxRating - minRating) })) .map((book) => ({ ...book, hrsToRead: (275 * book.pageCount) / 60 / 250 })) .map((book) => ({ ...book, eph: book.normalizedRating / book.hrsToRead }));
rankedBooks.sort((a, b) => b.eph - a.eph);
console.log(rankedBooks);
const [displayedBooks, setDisplayedBooks] = useState(rankedBooks); const [showRankedBooks, setShowRankedBooks] = useState(true);
return ( <div className="grid grid-rows-10 row-span-9"> <div className="gap-4 grid grid-cols-2 row-span-1 transition-all"> <button className={`col-span-1 flex items-center justify-center text-2xl rounded-t-2xl ${ showRankedBooks ? "bg-emerald-900 text-amber-100 transform translate-y-1" : "bg-emerald-900/80 text-amber-100/80" }`} onClick={() => { setShowRankedBooks(true); setDisplayedBooks(rankedBooks); }} > Ranked Books </button> <button className={`col-span-1 flex items-center justify-center text-2xl rounded-t-2xl ${ !showRankedBooks ? "bg-emerald-900 text-amber-100 transform translate-y-1" : "bg-emerald-900/80 text-amber-100/80" }`} onClick={() => { setShowRankedBooks(false); setDisplayedBooks(incompleteBooks); }} > Books with Missing Data </button> </div> <div className={`auto-rows-min bg-emerald-900 gap-4 grid grid-cols-5 overflow-y-scroll p-4 rounded-b-xl row-span-9`} > {displayedBooks?.map((book) => { return ( <Link href={`/book/${book.hiveID.slice(3)}`} key={book.hiveID} > <div className="aspect-2/3 overflow-hidden relative rounded-2xl hover:scale-105 transition-transform"> <Image alt={`Book cover for ${book.title} by ${book.authors}`} className="object-cover" fill src={`/api/blob?cid=${book.coverRef}&did=${did}`} /> </div> </Link> ); })} </div> </div> );};
export default LibraryClient;