[V0_FILE]typescriptreact:file="components/product-list.tsx" isMerged="true" import type { Product } from "@/types/product" import ProductCard from "./product-card" interface ProductListProps { products: Product[] } export default function ProductList({ products }: ProductListProps) { return (

{products.map((product) => ( ))}

) } [V0_FILE]typescriptreact:file="components/product-card.tsx" isMerged="true" import Link from "next/link" import Image from "next/image" import type { Product } from "@/types/product" interface ProductCardProps { product: Product } export default function ProductCard({ product }: ProductCardProps) { return (

{product.Brand}

{product.Description}

₹{product["Discount Price (in Rs.)"]} ₹{product["Product Price"]}

{Math.round((1 - product["Discount Price (in Rs.)"] / product["Product Price"]) * 100)}% OFF

) } [V0_FILE]typescriptreact:file="types/product.ts" isMerged="true" export interface Product { Product_URL: string Brand: string Description: string Id_Product: string URL_image: string Category_by_gender: string "Discount Price (in Rs.)": number "Product Price": number Color: string } [V0_FILE]typescriptreact:file="app/products/page.tsx" isMerged="true" import Header from "@/components/header" import ChatWindow from "@/components/chat-window" import ProductList from "@/components/product-list" import Facets from "@/components/facets" import { products } from "@/data/products" export default function ProductsPage() { return (

{/* Facets sidebar */}

Filter Products

{/* Product listing area */}

All Products

Fashion Skin Care

{/* Chat window */}

) } [V0_FILE]typescriptreact:file="components/mobile-facets.tsx" isMerged="true" "use client" import { useState } from "react" import { Filter, X } from "lucide-react" import { Button } from "@/components/ui/button" import Facets from "@/components/facets" export default function MobileFacets() { const [isOpen, setIsOpen] = useState(false) return ( <> {isOpen && (

Filters

)} ) } [V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" import { SearchProvider } from "@/context/search-context" import { Suspense } from "react" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "CompareShop - Compare Products Across Websites", description: "Compare fashion and skincare products from different websites all in one place.", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/facets.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Check, ChevronDown } from "lucide-react" import { Button } from "@/components/ui/button" import { Slider } from "@/components/ui/slider" interface FacetOption { id: string label: string count: number } interface FacetGroupProps { title: string options: FacetOption[] onChange: (selectedOptions: string[]) => void } function FacetGroup({ title, options, onChange }: FacetGroupProps) { const [isOpen, setIsOpen] = useState(true) const [selected, setSelected] = useState([]) const handleToggle = (optionId: string) => { const newSelected = selected.includes(optionId) ? selected.filter((id) => id !== optionId) : [...selected, optionId] setSelected(newSelected) onChange(newSelected) } return (

{isOpen && (

{options.map((option) => (

handleToggle(option.id)} > {selected.includes(option.id) && }

{option.label} ({option.count}) ))}

)}

) } function PriceRangeSlider() { const [priceRange, setPriceRange] = useState([300, 1200]) return (

setPriceRange(value as number[])} />

₹{priceRange[0]} ₹{priceRange[1]}

) } function ColorSelector() { const [selectedColors, setSelectedColors] = useState([]) const colors = [ { id: "white", color: "#ffffff", border: true }, { id: "black", color: "#000000" }, { id: "navy", color: "#000080" }, { id: "red", color: "#ff0000" }, { id: "green", color: "#008000" }, { id: "blue", color: "#0000ff" }, { id: "yellow", color: "#ffff00", border: true }, { id: "purple", color: "#800080" }, { id: "pink", color: "#ffc0cb" }, { id: "orange", color: "#ffa500" }, { id: "brown", color: "#a52a2a" }, { id: "gray", color: "#808080" }, ] const toggleColor = (colorId: string) => { setSelectedColors((prev) => (prev.includes(colorId) ? prev.filter((id) => id !== colorId) : [...prev, colorId])) } return (

{colors.map((color) => (

) } function RatingFilter() { const [selectedRating, setSelectedRating] = useState(null) const ratings = [5, 4, 3, 2, 1] return (

{ratings.map((rating) => (

setSelectedRating(rating === selectedRating ? null : rating)} > {selectedRating === rating && }

{[...Array(5)].map((_, i) => ( ))} & Up

))}

) } export default function Facets() { const handleBrandChange = (selected: string[]) => { console.log("Selected brands:", selected) } const handleCategoryChange = (selected: string[]) => { console.log("Selected categories:", selected) } return (

{}} />

) } [V0_FILE]typescriptreact:file="components/ui/slider.tsx" isMerged="true" "use client" import * as React from "react" import * as SliderPrimitive from "@radix-ui/react-slider" import { cn } from "@/lib/utils" const Slider = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( {props.defaultValue?.map((_, i) => ( ))} )) Slider.displayName = SliderPrimitive.Root.displayName export { Slider } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Custom animations */ @keyframes slide-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .animate-slide-in-right { animation: slide-in-right 0.3s ease-out; } .animate-fade-in { animation: fade-in 0.3s ease-out; } [V0_FILE]typescriptreact:file="context/search-context.tsx" isEdit="true" isQuickEdit="true" "use client" import { createContext, useContext, useState, type ReactNode } from "react" interface SearchContextType { searchQuery: string setSearchQuery: (query: string) => void isChatOpen: boolean setIsChatOpen: (isOpen: boolean) => void } const SearchContext = createContext(undefined) export function SearchProvider({ children }: { children: ReactNode }) { const [searchQuery, setSearchQuery] = useState("") const [isChatOpen, setIsChatOpen] = useState(false) return ( {children} ) } export function useSearchContext() { const context = useContext(SearchContext) if (context === undefined) { throw new Error("useSearchContext must be used within a SearchProvider") } return context } [V0_FILE]typescriptreact:file="components/header.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useState } from "react" import { Search, Menu, X } from "lucide-react" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import Link from "next/link" import { useSearchContext } from "@/context/search-context" export default function Header() { const [mobileMenuOpen, setMobileMenuOpen] = useState(false) const [searchValue, setSearchValue] = useState("") const { setSearchQuery, setIsChatOpen } = useSearchContext() const handleSearch = (e: React.FormEvent) => { e.preventDefault() if (searchValue.trim()) { setSearchQuery(searchValue) setIsChatOpen(true) setSearchValue("") } } return (

CompareShop

{/* Mobile menu */} {mobileMenuOpen && (

)}

) } [V0_FILE]typescriptreact:file="components/chat-window.tsx" isEdit="true" "use client" import { useState, useEffect, useRef } from "react" import { Send, X } from "lucide-react" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { useSearchContext } from "@/context/search-context" type Message = { id: number text: string isUser: boolean } export default function ChatWindow() { const [messages, setMessages] = useState([ { id: 1, text: "Hello! I'm your shopping assistant. How can I help you today?", isUser: false }, ]) const [input, setInput] = useState("") const { searchQuery, setSearchQuery, isChatOpen, setIsChatOpen } = useSearchContext() const messagesEndRef = useRef(null) const inputRef = useRef(null) // Handle search queries from the header useEffect(() => { if (searchQuery) { handleSendMessage(searchQuery) setSearchQuery("") // Clear the search query after handling } }, [searchQuery]) // Auto-scroll to bottom of messages useEffect(() => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }) }, [messages]) // Focus input when chat opens useEffect(() => { if (isChatOpen) { setTimeout(() => { inputRef.current?.focus() }, 100) } }, [isChatOpen]) const handleSendMessage = (text: string = input) => { if (!text.trim()) return // Add user message const newUserMessage = { id: messages.length + 1, text, isUser: true } setMessages([...messages, newUserMessage]) setInput("") // Simulate agent response setTimeout(() => { let response = "" // Simple keyword matching for demo purposes const lowerText = text.toLowerCase() if ( lowerText.includes("fashion") || lowerText.includes("clothes") || lowerText.includes("shirt") || lowerText.includes("jeans") ) { response = "I found several fashion items that might interest you. Check out the product list above!" } else if (lowerText.includes("skin") || lowerText.includes("care") || lowerText.includes("cream")) { response = "Looking for skincare products? We have a great selection of skincare items from top brands." } else if (lowerText.includes("price") || lowerText.includes("discount") || lowerText.includes("offer")) { response = "We have several items on discount right now, with up to 70% off on selected products!" } else if (lowerText.includes("help") || lowerText.includes("how")) { response = "I can help you find products, compare prices, or learn about specific items. Just let me know what you're looking for!" } else { const responses = [ "I can help you find products that match your preferences.", "Would you like to see more fashion items or skincare products?", "I found several items that might interest you. Check out the product list!", "Is there a specific brand or price range you're looking for?", ] response = responses[Math.floor(Math.random() * responses.length)] } setMessages((prev) => [...prev, { id: prev.length + 1, text: response, isUser: false }]) }, 1000) } if (!isChatOpen) return null return (

Shopping Assistant

{messages.map((message) => (

{message.text}

))}

) } [V0_FILE]typescriptreact:file="components/chat-button.tsx" "use client" import { MessageCircle } from "lucide-react" import { Button } from "@/components/ui/button" import { useSearchContext } from "@/context/search-context" export default function ChatButton() { const { setIsChatOpen } = useSearchContext() return ( ) } [V0_FILE]typescriptreact:file="components/pagination.tsx" "use client" import { ChevronLeft, ChevronRight } from "lucide-react" import { Button } from "@/components/ui/button" interface PaginationProps { currentPage: number totalPages: number onPageChange: (page: number) => void } export default function Pagination({ currentPage, totalPages, onPageChange }: PaginationProps) { const pages = Array.from({ length: totalPages }, (_, i) => i + 1) // Show a limited number of page buttons const getVisiblePages = () => { if (totalPages <= 5) return pages if (currentPage <= 3) return [...pages.slice(0, 5), "...", totalPages] if (currentPage >= totalPages - 2) return [1, "...", ...pages.slice(totalPages - 5)] return [1, "...", currentPage - 1, currentPage, currentPage + 1, "...", totalPages] } const visiblePages = getVisiblePages() return (

{visiblePages.map((page, index) => page === "..." ? ( ... ) : ( ), )}

) } [V0_FILE]typescriptreact:file="data/products.ts" isEdit="true" import type { Product } from "@/types/product" // Original data const originalProducts: Product[] = [ { Product_URL: "https://www.ajio.com/netplay-checked-polo-t-shirt/p/441137362_white", Brand: "netplay", Description: "Checked Polo T-shirt", Id_Product: "441137362", URL_image: "https://assets.ajio.com/medias/sys_master/root/20220309/inTn/6227b81faeb26921afcde577/-286Wx359H-441137362-white-MODEL.jpg", Category_by_gender: "Men", "Discount Price (in Rs.)": 559, "Product Price": 699, Color: "white", }, { Product_URL: "https://www.ajio.com/netplay-tapered-fit-flat-front-trousers/p/441124497_navy", Brand: "netplay", Description: "Tapered Fit Flat-Front Trousers", Id_Product: "441124497", URL_image: "https://assets.ajio.com/medias/sys_master/root/20210907/vQKt/6136775cf997ddce89bddeea/-286Wx359H-441124497-navy-MODEL.jpg", Category_by_gender: "Men", "Discount Price (in Rs.)": 720, "Product Price": 1499, Color: "navy", }, { Product_URL: "https://www.ajio.com/the-indian-garage-co-striped-slim-fit-shirt-with-patch-pocket/p/460453612_white", Brand: "the-indian-garage-co", Description: "Striped Slim Fit Shirt with Patch Pocket", Id_Product: "460453612", URL_image: "https://assets.ajio.com/medias/sys_master/root/20211228/s1km/61ca36a4aeb26901101f7552/-286Wx359H-460453612-white-MODEL.jpg", Category_by_gender: "Men", "Discount Price (in Rs.)": 495, "Product Price": 1649, Color: "white", }, { Product_URL: "https://www.ajio.com/performax-heathered-crew-neck-t-shirt/p/441036730_charcoal", Brand: "performax", Description: "Heathered Crew-Neck T-shirt", Id_Product: "441036730", URL_image: "https://assets.ajio.com/medias/sys_master/root/20220120/lLur/61e981aef997dd66232f4792/-286Wx359H-441036730-charcoal-MODEL.jpg", Category_by_gender: "Men", "Discount Price (in Rs.)": 329, "Product Price": 599, Color: "charcoal", }, { Product_URL: "https://www.ajio.com/john-players-jeans-washed-skinny-fit-jeans-with-whiskers/p/441128531_jetblack", Brand: "john-players-jeans", Description: "Washed Skinny Fit Jeans with Whiskers", Id_Product: "441128531", URL_image: "https://assets.ajio.com/medias/sys_master/root/20210728/I1Im/61005afff997ddb3123c0416/-286Wx359H-441128531-jetblack-MODEL.jpg", Category_by_gender: "Men", "Discount Price (in Rs.)": 899, "Product Price": 999, Color: "jetblack", }, ] // Function to create variations of products function createProductVariations(products: Product[], count: number): Product[] { const variations: Product[] = [] for (let i = 0; i < count; i++) { const baseProduct = products[i % products.length] const variation: Product = { ...baseProduct, Id_Product: `${baseProduct.Id_Product}_var${Math.floor(i / products.length) + 1}`, Description: i % 3 === 0 ? `Premium ${baseProduct.Description}` : i % 3 === 1 ? `${baseProduct.Description} - Limited Edition` : `${baseProduct.Description} - New Arrival`, "Discount Price (in Rs.)": Math.round(baseProduct["Discount Price (in Rs.)"] * (0.9 + Math.random() * 0.2)), "Product Price": Math.round(baseProduct["Product Price"] * (0.9 + Math.random() * 0.2)), } variations.push(variation) } return variations } // Create 30 product variations (for pagination demo) export const products: Product[] = [...originalProducts, ...createProductVariations(originalProducts, 25)] [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { useState } from "react" import Header from "@/components/header" import ChatWindow from "@/components/chat-window" import ProductList from "@/components/product-list" import { products } from "@/data/products" import Facets from "@/components/facets" import MobileFacets from "@/components/mobile-facets" import Pagination from "@/components/pagination" import ChatButton from "@/components/chat-button" const PRODUCTS_PER_PAGE = 10 export default function Home() { const [currentPage, setCurrentPage] = useState(1) // Calculate pagination const totalPages = Math.ceil(products.length / PRODUCTS_PER_PAGE) const startIndex = (currentPage - 1) * PRODUCTS_PER_PAGE const paginatedProducts = products.slice(startIndex, startIndex + PRODUCTS_PER_PAGE) const handlePageChange = (page: number) => { setCurrentPage(page) // Scroll to top when page changes window.scrollTo({ top: 0, behavior: "smooth" }) } return (

{/* Facets sidebar - hidden on mobile, visible on larger screens */}

Filter Products

{/* Product listing area (adjusts width based on screen size) */}

{/* Banner */}

Summer Collection 2025

Discover the latest trends in fashion and skincare with up to 50% off on selected items.

Product Comparison

Fashion Skin Care

{/* Mobile facets - only visible on mobile */}

{/* Pagination */}

{/* Chat window - rendered conditionally */}

{/* Floating chat button */}

) } [V0_FILE]typescriptreact:file="app/product/[id]/page.tsx" isEdit="true" "use client" import Link from "next/link" import Image from "next/image" import { ArrowLeft } from "lucide-react" import Header from "@/components/header" import ChatWindow from "@/components/chat-window" import ChatButton from "@/components/chat-button" import { products } from "@/data/products" import { Button } from "@/components/ui/button" interface ProductDetailPageProps { params: { id: string } } export default function ProductDetailPage({ params }: ProductDetailPageProps) { const product = products.find((p) => p.Id_Product === params.id) if (!product) { return

Product not found

} return (

Back to products

{product.Brand}

{product.Description}

₹{product["Discount Price (in Rs.)"]} ₹{product["Product Price"]} {Math.round((1 - product["Discount Price (in Rs.)"] / product["Product Price"]) * 100)}% OFF

Color

{product.Color}