From cf0b30464b47784861d8983d7573ea0f7088db2f Mon Sep 17 00:00:00 2001
From: nCode <91209834+Ncode-93@users.noreply.github.com>
Date: Mon, 10 Feb 2025 03:04:27 +0530
Subject: [PATCH] Add book cover image (#3161)

Co-authored-by: Nimish <bhardwajnimish93@gmail.com>
Co-authored-by: Ayres Vitor <gitkey@virtuaires.com.br>
---
 src/components/BookItem.astro    | 81 ++++++++++++++++++++++++++++++++
 src/content/docs/learn/index.mdx | 23 +++++++--
 2 files changed, 101 insertions(+), 3 deletions(-)
 create mode 100644 src/components/BookItem.astro

diff --git a/src/components/BookItem.astro b/src/components/BookItem.astro
new file mode 100644
index 0000000000..85c788082a
--- /dev/null
+++ b/src/components/BookItem.astro
@@ -0,0 +1,81 @@
+---
+import { Image } from 'astro:assets';
+
+const { image, alt = 'Book Cover', title, author, links = [] } = Astro.props;
+
+interface Props {
+  image: ImageMetadata;
+  alt?: string;
+  title: string;
+  author: string;
+  links?: Array<{
+    preText: string;
+    url: string;
+    text: string;
+  }>;
+}
+---
+
+<div class="not-content">
+  <div class="wrapper flex">
+    <div class="image-wrapper">
+      <Image src={image} alt={alt} class="image" />
+    </div>
+    <div class="content-wrapper flex">
+      <h3 class="title">{title}</h3>
+      <p class="author">by {author}</p>
+      <div class="links-wrapper flex">
+        {
+          links.map((link) => (
+            <p>
+              {link.preText} <a href={link.url}>{link.text}</a>
+            </p>
+          ))
+        }
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .flex {
+    display: flex;
+  }
+  .wrapper {
+    flex-direction: row;
+    align-items: center;
+    gap: 1.5rem;
+    width: 100%;
+  }
+
+  .image {
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .image-wrapper {
+    display: block;
+  }
+
+  .content-wrapper {
+    flex-direction: column;
+    flex: 1;
+    gap: 0.75rem;
+  }
+
+  .links-wrapper {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .title {
+    font-size: 1.25rem;
+    font-weight: bold;
+    margin: 0;
+  }
+
+  .author {
+    font-size: 1rem;
+    margin: 0;
+  }
+</style>
diff --git a/src/content/docs/learn/index.mdx b/src/content/docs/learn/index.mdx
index 5268409d7f..cfe0444ffc 100644
--- a/src/content/docs/learn/index.mdx
+++ b/src/content/docs/learn/index.mdx
@@ -7,6 +7,8 @@ sidebar:
 
 import { Card, CardGrid, LinkCard } from '@astrojs/starlight/components';
 import AwesomeTauri from '@components/AwesomeTauri.astro';
+import BookItem from '@components/BookItem.astro';
+import RoseRustBook from '@assets/learn/community/HTML_CSS_JavaScript_and_Rust_for_Beginners_A_Guide_to_Application_Development_with_Tauri.png';
 
 The Learning category is intended to provide end-to-end learning experiences on a Tauri related topic.
 
@@ -48,9 +50,24 @@ This section contains learning resources created by the Community that are not h
 
 ### Books
 
-- **HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri** by James Alexander Rose
-  - Paperback on Amazon: https://www.amazon.com/dp/B0DR6KZVVW
-  - Free PDF version: [direct download](/assets/learn/community/HTML_CSS_JavaScript_and_Rust_for_Beginners_A_Guide_to_Application_Development_with_Tauri.pdf) (PDF 4MB)
+<BookItem
+  image={RoseRustBook}
+  title="HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri"
+  alt="HTML, CSS, JavaScript, and Rust for Beginners Book Cover"
+  author="James Alexander Rose"
+  links={[
+    {
+      preText: 'Paperback on Amazon:',
+      text: 'Buy Here',
+      url: 'https://www.amazon.com/dp/B0DR6KZVVW',
+    },
+    {
+      preText: 'Free PDF version:',
+      text: 'Download (PDF 4MB)',
+      url: '/assets/learn/community/HTML_CSS_JavaScript_and_Rust_for_Beginners_A_Guide_to_Application_Development_with_Tauri.pdf',
+    },
+  ]}
+/>
 
 ### Guides & Tutorials