From 83b06a8176a75e93a77b2e1a7433466bf4baa6a3 Mon Sep 17 00:00:00 2001
From: Aaron Yarborough <3855819+AaronJY@users.noreply.github.com>
Date: Sun, 30 Mar 2025 17:38:28 +0100
Subject: [PATCH] feat: add ratings to book list

---
 package-lock.json                                 | 10 +++++-----
 package.json                                      |  2 +-
 src/components/BookListItem/BookListItem.jsx      | 15 +++++++++++++--
 .../BookListItem/BookListItem.module.css          | 15 +++++++++++++++
 4 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 34e215c..3ad2f0c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "www-aaronjy-me",
-  "version": "1.7.0.0",
+  "version": "1.7.3.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "www-aaronjy-me",
-      "version": "1.7.0.0",
+      "version": "1.7.3.0",
       "dependencies": {
         "@highlightjs/cdn-assets": "^11.11.1",
         "date-fns": "^4.1.0",
@@ -9193,9 +9193,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001667",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001667.tgz",
-      "integrity": "sha512-7LTwJjcRkzKFmtqGsibMeuXmvFDfZq/nzIjnmgCGzKKRVzjD72selLDK1oPF/Oxzmt4fNcPvTDvGqSDG4tCALw==",
+      "version": "1.0.30001707",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001707.tgz",
+      "integrity": "sha512-3qtRjw/HQSMlDWf+X79N206fepf4SOOU6SQLMaq/0KkZLmSjPxAkBOQQ+FxbHKfHmYLZFfdWsO3KA90ceHPSnw==",
       "funding": [
         {
           "type": "opencollective",
diff --git a/package.json b/package.json
index ebeaf1d..a9299ee 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "www-aaronjy-me",
-  "version": "1.7.2.3",
+  "version": "1.7.3.0",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/src/components/BookListItem/BookListItem.jsx b/src/components/BookListItem/BookListItem.jsx
index cb38036..be56715 100644
--- a/src/components/BookListItem/BookListItem.jsx
+++ b/src/components/BookListItem/BookListItem.jsx
@@ -9,7 +9,8 @@ export default function BookListItem ({ href, title, author, stars, readDate, ur
           className={style.thumb} style={{
             backgroundImage: `url(${thumbnailUrl ?? '/img/book-placeholder.jpg'})`
           }}
-        />
+        ><div className={style.rating}><Star />&nbsp;{stars}</div>
+        </div>
       </Link>
       <div>
         <h2 className={style.heading}>
@@ -17,8 +18,18 @@ export default function BookListItem ({ href, title, author, stars, readDate, ur
         </h2>
         <p className={style.author}>{author}</p>
         <p>{tags}</p>
-        {/* <p>{stars}/5</p> */}
       </div>
     </div>
   )
 }
+
+function Star () {
+  return (
+    <svg
+      style={{
+        fill: 'currentColor'
+      }} height='15' width='15' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 47.94 47.94' xmlSpace='preserve'
+    ><path d='m26.285 2.486 5.407 10.956a2.58 2.58 0 0 0 1.944 1.412l12.091 1.757c2.118.308 2.963 2.91 1.431 4.403l-8.749 8.528a2.582 2.582 0 0 0-.742 2.285l2.065 12.042c.362 2.109-1.852 3.717-3.746 2.722l-10.814-5.685a2.585 2.585 0 0 0-2.403 0l-10.814 5.685c-1.894.996-4.108-.613-3.746-2.722l2.065-12.042a2.582 2.582 0 0 0-.742-2.285L.783 21.014c-1.532-1.494-.687-4.096 1.431-4.403l12.091-1.757a2.58 2.58 0 0 0 1.944-1.412l5.407-10.956c.946-1.919 3.682-1.919 4.629 0z' />
+    </svg>
+  )
+}
diff --git a/src/components/BookListItem/BookListItem.module.css b/src/components/BookListItem/BookListItem.module.css
index a845fe8..e5ad8d3 100644
--- a/src/components/BookListItem/BookListItem.module.css
+++ b/src/components/BookListItem/BookListItem.module.css
@@ -23,4 +23,19 @@
   background-repeat: no-repeat;
   background-size: cover;
   border-radius: 6px;
+  position: relative;
+}
+
+.rating {
+  position: absolute;
+  right: 0.5rem;
+  bottom: 0.5rem;
+  background-color: var(--lt-color-gray-900);
+  padding: 0.25rem 0.5rem;
+  color: var(--lt-color-gray-100);
+  border-radius: 0.25rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  pointer-events: none;
 }
\ No newline at end of file