Update default missing cover art to closely match Apple Books

every-day-things · May 16, 2024 · bfc14cd · bfc14cd
1 parent 515e779
commit bfc14cd
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 19 deletions.
diff --git a/src/components/atoms/BookCover.module.css b/src/components/atoms/BookCover.module.css
@@ -17,17 +17,6 @@
 	position: relative;
 }
 
-.coverPlaceholder {
-	width: 120px;
-	height: 200px;
-	display: flex;
-	flex-direction: row;
-	font: 4em sans-serif;
-	word-wrap: break-word;
-	overflow-wrap: break-word;
-	overflow: hidden;
-}
-
 .img {
 	max-width: 100%;
 	max-height: 240px;
@@ -48,4 +37,4 @@
 
 .authors {
 	text-align: center;
-}
+}
diff --git a/src/components/atoms/BookCover.tsx b/src/components/atoms/BookCover.tsx
@@ -1,8 +1,8 @@
 import { shortenToChars } from "$lib/domain/book";
 import { LibraryBook } from "@/bindings";
-import { Image } from "@mantine/core";
+import { Image, Text } from "@mantine/core";
 import { HTMLAttributes } from "react";
-import styles from "./BookCover.module.css";
+import { formatAuthorList } from "@/lib/authors";
 
 export const BookCover = ({
 	book,
@@ -23,15 +23,30 @@ export const BookCover = ({
 
 	return (
 		<div
-			className={styles.coverPlaceholder}
 			{...props}
 			style={{
-				backgroundColor: `#${Math.floor(Math.random() * 16777215).toString(
-					16,
-				)}`,
+				width: "150px",
+				height: "200px",
+				background: "linear-gradient(#555, #111)",
+				backgroundColor: "#555",
+				padding: "0.5rem",
 			}}
 		>
-			{shortenToChars(book.title, 50)}
+			<div
+				style={{
+					border: "2px solid #888",
+					height: "100%",
+					display: "flex",
+					flexDirection: "column",
+					alignContent: "center",
+					justifyContent: "space-between",
+					textAlign: "center",
+					padding: "0.5rem",
+				}}
+			>
+				<Text size="sm">{shortenToChars(book.title, 50)}</Text>
+				<Text size="sm">{formatAuthorList(book.author_list)}</Text>
+			</div>
 		</div>
 	);
 };