-
Notifications
You must be signed in to change notification settings - Fork 19
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #75 from Rasesh2005/main
Added buy Button and Added recommendation page with dummy data
- Loading branch information
Showing
14 changed files
with
385 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| import { notFound } from "next/navigation"; | ||
| import { Star } from "lucide-react"; | ||
| import { book_data } from "../book_data"; | ||
| import { Card, CardContent } from "@/components/ui/card"; | ||
| import { Badge } from "@/components/ui/badge"; | ||
| import { Separator } from "@/components/ui/separator"; | ||
|
|
||
| export default function BookDetailPage({ params }: { params: { id: string } }) { | ||
| const bookIndex = Number.parseInt(params.id); | ||
| const book = book_data[bookIndex]; | ||
|
|
||
| if (!book) { | ||
| notFound(); | ||
| } | ||
|
|
||
| const averageRating = | ||
| book.reviews.reduce((acc, review) => acc + review.rating, 0) / | ||
| book.reviews.length; | ||
|
|
||
| return ( | ||
| <div className="min-h-screen pt-24 px-4 sm:px-6 lg:px-8"> | ||
| <Card className="w-full max-w-none p-6 min-h-[500px]"> | ||
| <div className="grid md:grid-cols-[300px_1fr] gap-8"> | ||
| <div className="space-y-4"> | ||
| <img | ||
| src={book.imgURL || "/placeholder.svg"} | ||
| alt={book.title} | ||
| className="w-full rounded-lg shadow-lg" | ||
| width={300} | ||
| height={450} | ||
| /> | ||
| </div> | ||
|
|
||
| <CardContent className="space-y-6 p-0"> | ||
| <div> | ||
| <h1 className="text-4xl font-bold mb-2">{book.title}</h1> | ||
| <p className="text-xl text-muted-foreground"> | ||
| Author(s) : {book.author} | ||
| </p> | ||
| </div> | ||
|
|
||
| <div className="flex items-center gap-4"> | ||
| <div className="flex"> | ||
| {[1, 2, 3, 4, 5].map((star) => ( | ||
| <Star | ||
| key={star} | ||
| className={`w-5 h-5 ${ | ||
| star <= averageRating | ||
| ? "fill-primary text-primary" | ||
| : "fill-muted text-muted-foreground" | ||
| }`} | ||
| /> | ||
| ))} | ||
| </div> | ||
| <span className="text-2xl font-semibold"> | ||
| {averageRating.toFixed(2)} | ||
| </span> | ||
| <Badge variant="secondary">{book.genre}</Badge> | ||
| </div> | ||
|
|
||
| <p className="mt-4 text-muted-foreground">{book.description}</p> | ||
|
|
||
| <Separator /> | ||
|
|
||
| <div className="space-y-4"> | ||
| <h2 className="text-2xl font-semibold">Reviews</h2> | ||
| {book.reviews.map((review, idx) => ( | ||
| <div key={idx} className="space-y-2"> | ||
| <div className="flex items-center gap-2"> | ||
| <div className="flex"> | ||
| {[1, 2, 3, 4, 5].map((star) => ( | ||
| <Star | ||
| key={star} | ||
| className={`w-4 h-4 ${ | ||
| star <= review.rating | ||
| ? "fill-primary text-primary" | ||
| : "fill-muted text-muted-foreground" | ||
| }`} | ||
| /> | ||
| ))} | ||
| </div> | ||
| <span className="font-medium">{review.reviewer}</span> | ||
| </div> | ||
| <p className="text-muted-foreground">{review.comment}</p> | ||
| {idx !== book.reviews.length - 1 && <Separator />} | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </CardContent> | ||
| </div> | ||
| </Card> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| export const book_data = [ | ||
| { | ||
| title: "Echoes of Life: The Autobiography of Archana Mehrotra", | ||
| author: "Archana Mehrotra", | ||
| genre: "Autobiography", | ||
| description: `Archana Mehrotra, a proud resident of Lucknow, comes from a legacy of fragrance artisans, inherited from her distinguished Khattri family. As the President of the International Khattri Mahasabha Group (IKMG), she plays a vital role in connecting the global Khattri community, and was recently honored with the prestigious Khattri Ratna Award. | ||
| Her journey is a blend of rich family heritage, personal achievements, and global connections. With a passion for continuous learning, she has earned a post-graduate degree in Digital Marketing and is currently studying French. | ||
| Archana's life is filled with vibrant experiences—from volunteering for differently-abled children to supporting her son through his challenges. Her story reflects resilience, gratitude, and a relentless drive to make a meaningful impact.`, | ||
| reviews: [ | ||
| { | ||
| reviewer: "John Doe", | ||
| comment: "A classic tale of love and loss.", | ||
| rating: 5, | ||
| }, | ||
| { | ||
| reviewer: "John Doe", | ||
| comment: "A classic tale of love and loss.", | ||
| rating: 4, | ||
| }, | ||
| { | ||
| reviewer: "John Doe", | ||
| comment: "A classic tale of love and loss.", | ||
| rating: 5, | ||
| }, | ||
| ], | ||
| imgURL: "https://m.media-amazon.com/images/I/710angGC0vL._AC_UY436_QL65_.jpg", | ||
| }, | ||
| ]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import React, { FunctionComponent } from "react"; | ||
| import { Metadata } from "next"; | ||
| import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../components/ui/tabs"; | ||
| import { book_data } from "./book_data"; | ||
| import BookCard from "../../components/BookCard"; | ||
|
|
||
| export const metadata: Metadata = { | ||
| referrer: "origin-when-cross-origin", | ||
| title: { | ||
| default: "Book Recommendations | E-Summit'25 IIT BHU", | ||
| template: "%s | Book Recommendations | E-Summit'25 IIT BHU", | ||
| }, | ||
| }; | ||
|
|
||
| const RecommendationsPage: FunctionComponent = () => { | ||
| return ( | ||
| <section> | ||
| <div className="pt-24 w-full min-h-screen flex flex-col items-center"> | ||
| <h1 className="text-6xl m-4 font-semibold">Book Recommendations</h1> | ||
| <div className="flex flex-wrap justify-center"> | ||
| {book_data.map((book, index) => ( | ||
| <BookCard | ||
| title={book.title} | ||
| author={book.author} | ||
| imgURL={book.imgURL} | ||
| reviews={book.reviews} | ||
| index={index} // Passing the index prop | ||
| key={index} | ||
| /> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </section> | ||
| ); | ||
| }; | ||
|
|
||
| export default RecommendationsPage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import type React from "react"; | ||
| import Link from "next/link"; | ||
| import { Card, CardContent } from "./ui/card"; | ||
|
|
||
| interface Review { | ||
| reviewer: string; | ||
| comment: string; | ||
| rating: number; | ||
| } | ||
|
|
||
| interface BookCardProps { | ||
| title: string; | ||
| author: string; | ||
| imgURL: string; | ||
| reviews: Review[]; | ||
| index: number; | ||
| } | ||
|
|
||
| const BookCard: React.FC<BookCardProps> = ({ | ||
| title, | ||
| author, | ||
| imgURL, | ||
| reviews, | ||
| index, | ||
| }) => { | ||
| return ( | ||
| <Card className="m-2 w-64"> | ||
| <CardContent className="p-4"> | ||
| <img | ||
| src={imgURL || "/placeholder.svg"} | ||
| alt={title} | ||
| className="w-full h-full object-cover rounded mb-4" | ||
| /> | ||
| <Link href={`/recommendations/${index}`}> | ||
| <h2 className="text-xl font-bold hover:underline">{title}</h2> | ||
| </Link> | ||
| <p className="text-muted-foreground">by {author}</p> | ||
|
|
||
|
|
||
| </CardContent> | ||
| </Card> | ||
| ); | ||
| }; | ||
|
|
||
| export default BookCard; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| "use client"; | ||
|
|
||
| import * as React from "react"; | ||
| import * as SeparatorPrimitive from "@radix-ui/react-separator"; | ||
|
|
||
| import { cn } from "@/lib/utils"; | ||
|
|
||
| const Separator = React.forwardRef< | ||
| React.ElementRef<typeof SeparatorPrimitive.Root>, | ||
| React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> | ||
| >( | ||
| ( | ||
| { className, orientation = "horizontal", decorative = true, ...props }, | ||
| ref | ||
| ) => ( | ||
| <SeparatorPrimitive.Root | ||
| ref={ref} | ||
| decorative={decorative} | ||
| orientation={orientation} | ||
| className={cn( | ||
| "shrink-0 bg-border", | ||
| orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| ) | ||
| ); | ||
| Separator.displayName = SeparatorPrimitive.Root.displayName; | ||
|
|
||
| export { Separator }; |
Oops, something went wrong.