From 88e755c99b51a479867a02bdb0c308f2083ce4d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Henrik=20Str=C3=B8m-Andersen?= Date: Sun, 13 Sep 2026 03:35:15 +0200 Subject: [PATCH 01/10] feat: reset list styles --- src/index.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/index.css b/src/index.css index 94ac235..08ff405 100644 --- a/src/index.css +++ b/src/index.css @@ -12,6 +12,11 @@ box-sizing: border-box; } +ul, +ol { + list-style: none; +} + #root { display: flex; flex-direction: column; From 6efe2aeb22f4b47e5b950c16f6799a785bc73fde Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Henrik=20Str=C3=B8m-Andersen?= Date: Sun, 13 Sep 2026 03:37:15 +0200 Subject: [PATCH 02/10] feat: add Book type and mock book data --- src/components/BookGrid/mockData.ts | 53 +++++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 src/components/BookGrid/mockData.ts diff --git a/src/components/BookGrid/mockData.ts b/src/components/BookGrid/mockData.ts new file mode 100644 index 0000000..521eeb5 --- /dev/null +++ b/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" + }, + +]; From 07058407bbd7e6e16ddab400df22acf1c6e8b871 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Henrik=20Str=C3=B8m-Andersen?= Date: Sun, 13 Sep 2026 03:38:23 +0200 Subject: [PATCH 03/10] feat: add BookGrid component --- src/components/BookGrid/BookGrid.tsx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 src/components/BookGrid/BookGrid.tsx diff --git a/src/components/BookGrid/BookGrid.tsx b/src/components/BookGrid/BookGrid.tsx new file mode 100644 index 0000000..9e9384b --- /dev/null +++ b/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 ( +
    + {mockBooks.map((book) => ( +
  • + +
    • + ))} +
+ ); +} + +export default BookGrid; From ddcf556b392f66d191ca2986df09d2951a7b9947 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Henrik=20Str=C3=B8m-Andersen?= Date: Sun, 13 Sep 2026 03:38:49 +0200 Subject: [PATCH 04/10] feat: add BookCard component --- src/components/BookCard/BookCard.tsx | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 src/components/BookCard/BookCard.tsx diff --git a/src/components/BookCard/BookCard.tsx b/src/components/BookCard/BookCard.tsx new file mode 100644 index 0000000..6a9f3e8 --- /dev/null +++ b/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 ( +
+ + {`Book +
+

{book.title}

+

{book.author}

+

{book.publishedYear}

+
+
+ ); +} + +export default BookCard; From 82fea75db4a2a354843e01209f19812edcfccd86 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Henrik=20Str=C3=B8m-Andersen?= Date: Sun, 13 Sep 2026 03:40:30 +0200 Subject: [PATCH 05/10] feat: add grid layout and styling --- src/components/BookCard/BookCard.module.css | 44 +++++++++++++++++++++ src/components/BookGrid/BookGrid.module.css | 21 ++++++++++ 2 files changed, 65 insertions(+) create mode 100644 src/components/BookCard/BookCard.module.css create mode 100644 src/components/BookGrid/BookGrid.module.css diff --git a/src/components/BookCard/BookCard.module.css b/src/components/BookCard/BookCard.module.css new file mode 100644 index 0000000..2742767 --- /dev/null +++ b/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; +} diff --git a/src/components/BookGrid/BookGrid.module.css b/src/components/BookGrid/BookGrid.module.css new file mode 100644 index 0000000..6a66f7d --- /dev/null +++ b/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; + } +} \ No newline at end of file From e739dbf4907ac5d3c5d7adfe4eea36c7e30be84f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Henrik=20Str=C3=B8m-Andersen?= Date: Sun, 13 Sep 2026 03:41:07 +0200 Subject: [PATCH 06/10] feat: render BookGrid in App --- src/App.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/App.tsx b/src/App.tsx index 8a47004..1c7ad06 100644 --- a/src/App.tsx +++ b/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 ( <>
-
+
+ +