diff --git a/package-lock.json b/package-lock.json
index 2ad9562..e06652e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,8 @@
"next": "14.1.0",
"react": "^18",
"react-dom": "^18",
- "react-loader-spinner": "^6.1.6"
+ "react-loader-spinner": "^6.1.6",
+ "react-simple-star-rating": "^5.1.7"
},
"devDependencies": {
"@testing-library/jest-dom": "^6.3.0",
@@ -8778,6 +8779,18 @@
}
}
},
+ "node_modules/react-simple-star-rating": {
+ "version": "5.1.7",
+ "resolved": "https://registry.npmjs.org/react-simple-star-rating/-/react-simple-star-rating-5.1.7.tgz",
+ "integrity": "sha512-NTFkW8W3uwvI82Fv7JW5i7gmDjEZKxJmj+Z9vn+BjYIXT6ILdnU9qnSUP2cWrWN/WAUlue81f9SgM4CQcenltQ==",
+ "engines": {
+ "node": ">=14"
+ },
+ "peerDependencies": {
+ "react": ">=18.0.0",
+ "react-dom": ">=18.0.0"
+ }
+ },
"node_modules/react-style-singleton": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
diff --git a/package.json b/package.json
index da624f3..66b13bb 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,8 @@
"next": "14.1.0",
"react": "^18",
"react-dom": "^18",
- "react-loader-spinner": "^6.1.6"
+ "react-loader-spinner": "^6.1.6",
+ "react-simple-star-rating": "^5.1.7"
},
"devDependencies": {
"@testing-library/jest-dom": "^6.3.0",
diff --git a/src/app/books/components/BookComponent.tsx b/src/app/books/components/BookComponent.tsx
new file mode 100644
index 0000000..2677933
--- /dev/null
+++ b/src/app/books/components/BookComponent.tsx
@@ -0,0 +1,140 @@
+'use client'
+import { useWindowSize } from '@/app/hooks/useWindowSize'
+import { Box, Card, Flex, Inset, Link, Text } from '@radix-ui/themes'
+import Image from 'next/image'
+import NextLink from 'next/link'
+import React from 'react'
+import { Rating } from 'react-simple-star-rating'
+
+export default function BookComponent({ book }: { book: any }) {
+ const windowSize = useWindowSize()
+
+ if (windowSize.width <= 768) {
+ return (
+
+
+
+
+
+
+
+
+
+ )
+ }
+
+ return (
+
+
+
+
+
+
+
+
+ {book.title}
+
+
+ {book.author_name}
+
+
+
+ Published by: {book.editions?.docs?.[0]?.publisher?.[0]},{' '}
+
+
+ {book.editions?.docs?.[0]?.publish_date?.[0]} -{' '}
+
+
+ {book.editions?.docs?.[0]?.language?.[0].toUpperCase()}
+
+
+ {book.editions?.docs?.[0]?.isbn && (
+
+ ISBN:
+ {book.editions?.docs?.[0]?.isbn?.map(
+ (isbn: string, key: any) => {
+ return (
+
+
+
+ {isbn}
+
+ {' '}
+
+ )
+ }
+ )}
+
+ )}
+ {book.ratings_average && (
+
+
+
+ )}
+
+
+
+
+ )
+}
diff --git a/src/app/books/components/BooksContent.tsx b/src/app/books/components/BooksContent.tsx
index 895c628..9909679 100644
--- a/src/app/books/components/BooksContent.tsx
+++ b/src/app/books/components/BooksContent.tsx
@@ -2,21 +2,19 @@
import { useSearchProvider } from '@/app/providers/SearchProvider'
import React from 'react'
import Loading from './Loading'
-import { Box, Text } from '@radix-ui/themes'
+import { Box } from '@radix-ui/themes'
+import BooksList from './BooksList'
+import BooksHeader from './BooksHeader'
export default function BooksContent() {
- const { lastSearch, loading } = useSearchProvider()
+ const { lastSearch, loading, searchResult } = useSearchProvider()
return (
- <>
- {loading ? (
-
- ) : (
-
-
- You searched for: {lastSearch}
-
-
- )}
- >
+
+ {loading && }
+ <>
+ {!loading && lastSearch && }
+ {!loading && searchResult && }
+ >
+
)
}
diff --git a/src/app/books/components/BooksHeader.tsx b/src/app/books/components/BooksHeader.tsx
new file mode 100644
index 0000000..67b2e15
--- /dev/null
+++ b/src/app/books/components/BooksHeader.tsx
@@ -0,0 +1,12 @@
+import { Box, Text } from '@radix-ui/themes'
+import React from 'react'
+
+export default function BooksHeader({ lastSearch }: { lastSearch: string }) {
+ return (
+
+
+ You searched for: {lastSearch}
+
+
+ )
+}
diff --git a/src/app/books/components/BooksList.tsx b/src/app/books/components/BooksList.tsx
new file mode 100644
index 0000000..480432c
--- /dev/null
+++ b/src/app/books/components/BooksList.tsx
@@ -0,0 +1,33 @@
+'use client'
+import { useWindowSize } from '@/app/hooks/useWindowSize'
+import { Box, Card, Flex } from '@radix-ui/themes'
+import React, { Suspense, lazy } from 'react'
+
+const BookComponent = lazy(() => import('./BookComponent'))
+
+export default function BooksList({ books }: { books: Array