Untitled
unknown
plain_text
a month ago
2.8 kB
3
Indexable
import { useState } from "react"; import { Input } from "@/components/ui/input"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Star } from "lucide-react"; import { motion } from "framer-motion"; export default function RePro() { const [search, setSearch] = useState(""); const reviews = [ { product: "Sony WH-1000XM5 Headphones", rating: 4.7, review: "Amazing noise cancellation and sound quality!", reviewer: "JohnDoe92", }, { product: "Apple MacBook Pro 16”", rating: 4.9, review: "Incredible performance and display. Worth the price!", reviewer: "TechGuru", }, ]; return ( <div className="min-h-screen bg-gray-100 p-6"> <div className="max-w-4xl mx-auto"> <h1 className="text-4xl font-bold mb-4 text-center text-gray-800"> RePro: Honest Product Reviews </h1> <div className="flex items-center space-x-2 mb-6"> <Input placeholder="Search for a product..." value={search} onChange={(e) => setSearch(e.target.value)} className="w-full p-3 border rounded-lg shadow-sm" /> <Button className="bg-blue-600 text-white px-4 py-2 rounded-lg"> Search </Button> </div> <div className="grid gap-4"> {reviews.map((item, index) => ( <motion.div key={index} initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }} > <Card className="bg-white shadow-md rounded-xl p-4"> <CardHeader> <CardTitle className="text-xl font-semibold"> {item.product} </CardTitle> </CardHeader> <CardContent> <div className="flex items-center mb-2"> {[...Array(5)].map((_, i) => ( <Star key={i} className={ i < Math.round(item.rating) ? "text-yellow-400" : "text-gray-300" } /> ))} <span className="ml-2 text-gray-600">{item.rating}</span> </div> <p className="text-gray-700">{item.review}</p> <p className="text-sm text-gray-500 mt-2">By {item.reviewer}</p> </CardContent> </Card> </motion.div> ))} </div> </div> </div> ); }
Editor is loading...
Leave a Comment