feat: add book grid components displaying book cards

src/App.tsx

@@ -1,11 +1,14 @@
 import { Header } from './components/Header/Header.tsx';
 import { Footer } from './components/Footer/Footer.tsx';
+import { BookGrid } from './components/BookGrid/BookGrid.tsx';
 
 function App() {
   return (
     <>
       <Header />
-      <main className="main"></main>
+      <main>
+        <BookGrid />
+      </main>
       <Footer />
     </>
   );

src/components/BookCard/BookCard.module.css

@@ -0,0 +1,44 @@
+.bookCard {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background-color: white;
+    border-radius: var(--border-radius);
+    border: 1px solid var(--border-color);
+    padding: 24px;
+}
+
+.favoriteButton {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    background-color: white;
+    color: var(--theme-color);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
+    width: 32px;
+    height: 32px;
+    font-size: 1.5rem;
+    cursor: pointer;
+
+    &:hover {
+        border: 1px solid var(--theme-color);
+    }
+}
+
+.coverImage {
+    width: 100%;
+    padding: 12px 24px;
+    object-fit: contain;
+}
+
+.info {
+    margin-top: 16px;
+    font-size: 0.90rem;
+}
+
+.title {
+    margin-bottom: 8px;
+    font-size: 1rem;
+}

src/components/BookCard/BookCard.tsx

@@ -0,0 +1,22 @@
+import type { Book } from '../BookGrid/mockData';
+import styles from './BookCard.module.css';
+
+interface BookCardProps {
+    book: Book;
+}
+
+function BookCard({ book }: BookCardProps) {
+    return (
+        <article className={styles.bookCard}>
+            <button className={styles.favoriteButton}>+</button>
+            <img src={book.coverImage} alt={`Book cover of ${book.title}`} className={styles.coverImage}/>
+            <section className={styles.info}>
+                <h3 className={styles.title}>{book.title}</h3>
+                <p className={styles.author}>{book.author}</p>
+                <p>{book.publishedYear}</p>
+            </section>
+        </article>
+    );
+}
+
+export { BookCard };

src/components/BookGrid/BookGrid.module.css

@@ -0,0 +1,21 @@
+.bookGrid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 16px;
+    justify-content: center;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 40px 40px;
+
+    @media only screen and (max-width: 1200px) {
+        grid-template-columns: repeat(3, 1fr);
+    }
+
+    @media only screen and (max-width: 1000px) {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media only screen and (max-width: 600px) {
+        grid-template-columns: 1fr;
+    }
+}

src/components/BookGrid/BookGrid.tsx

@@ -0,0 +1,17 @@
+import { BookCard } from "../BookCard/BookCard";
+import { mockBooks } from "./mockData";
+import styles from './BookGrid.module.css';
+
+function BookGrid() {
+    return (
+        <ul className={styles.bookGrid}>
+            {mockBooks.map((book) => (
+                <li key={book.id}>
+                    <BookCard book={book} />
+                </li>
+            ))}
+        </ul>
+    );
+}
+
+export { BookGrid };

src/components/BookGrid/mockData.ts

@@ -0,0 +1,53 @@
+export interface Book {
+    id: number;
+    title: string;
+    author: string;
+    publishedYear: string;
+    coverImage: string;
+}
+
+export const mockBooks: Book[] = [
+    {
+        id: 1,
+        title: "Maskiner som tenker: Algoritmenes hemmeligheter og veien til kunstig intelligens",
+        author: "Inga Strümke",
+        publishedYear: "2023",
+        coverImage: "https://covers.openlibrary.org/b/id/14604820-L.jpg"
+    },
+    {
+        id: 2,
+        title: "Maskiner som tenker: Algoritmenes hemmeligheter og veien til kunstig intelligens",
+        author: "Inga Strümke",
+        publishedYear: "2023",
+        coverImage: "https://covers.openlibrary.org/b/id/14604820-L.jpg"
+    },
+    {
+        id: 3,
+        title: "Maskiner som tenker: Algoritmenes hemmeligheter og veien til kunstig intelligens",
+        author: "Inga Strümke",
+        publishedYear: "2023",
+        coverImage: "https://covers.openlibrary.org/b/id/14604820-L.jpg"
+    },
+    {
+        id: 4,
+        title: "Maskiner som tenker: Algoritmenes hemmeligheter og veien til kunstig intelligens",
+        author: "Inga Strümke",
+        publishedYear: "2023",
+        coverImage: "https://covers.openlibrary.org/b/id/14604820-L.jpg"
+    },
+    {
+        id: 5,
+        title: "Maskiner som tenker: Algoritmenes hemmeligheter og veien til kunstig intelligens",
+        author: "Inga Strümke",
+        publishedYear: "2023",
+        coverImage: "https://covers.openlibrary.org/b/id/14604820-L.jpg"
+    },
+    {
+        id: 6,
+        title: "Maskiner som tenker: Algoritmenes hemmeligheter og veien til kunstig intelligens",
+        author: "Inga Strümke",
+        publishedYear: "2023",
+        coverImage: "https://covers.openlibrary.org/b/id/14604820-L.jpg"
+    },
+
+];

src/index.css

@@ -12,6 +12,11 @@
   box-sizing: border-box;
 }
 
+ul,
+ol {
+  list-style: none;
+}
+
 #root {
   display: flex;
   flex-direction: column;
@@ -20,6 +25,6 @@
   font-family: "Open Sans", sans-serif;
 }
 
-.main {
+main {
   flex: 1;
 }