[V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --primary: 262 83.3% 57.8%; --primary-foreground: 0 0% 98%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 262 83.3% 57.8%; --accent-foreground: 0 0% 98%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 262 83.3% 57.8%; --radius: 0.5rem; } .dark { --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; --primary: 262 83.3% 57.8%; --primary-foreground: 0 0% 98%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --accent: 262 83.3% 57.8%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 262 83.3% 57.8%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } .animate-fade-in { animation: fadeIn 0.5s ease-in-out; } .animate-slide-up { animation: slideUp 0.5s ease-in-out; } .animate-pulse-slow { animation: pulseSlow 3s infinite; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes pulseSlow { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .product-card { transition: transform 0.3s ease, box-shadow 0.3s ease; } .product-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px -5px rgba(124, 58, 237, 0.2); } .hero-gradient { background: linear-gradient(135deg, rgba(124, 58, 237, 0.2) 0%, rgba(45, 45, 45, 0.1) 100%); } .category-card { transition: all 0.3s ease; } .category-card:hover { transform: scale(1.03); } // Add these animation classes to the existing CSS file .btn-pulse { animation: btnPulse 2s infinite; } .btn-float { transition: transform 0.3s ease; } .btn-float:hover { transform: translateY(-3px); } .btn-shine { position: relative; overflow: hidden; } .btn-shine::after { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient( to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100% ); transform: rotate(30deg); animation: shine 3s infinite; } @keyframes btnPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.4); } 50% { box-shadow: 0 0 0 8px rgba(124, 58, 237, 0); } } @keyframes shine { 0% { left: -100%; opacity: 0; } 20% { left: 100%; opacity: 0.6; } 100% { left: 100%; opacity: 0; } } .card-flip { perspective: 1000px; transition: transform 0.6s; } .card-flip:hover { transform: rotateY(10deg); } .image-zoom { transition: transform 0.5s ease; } .image-zoom:hover { transform: scale(1.05); } .badge-bounce { animation: badgeBounce 1s ease infinite; } @keyframes badgeBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } .text-gradient { background: linear-gradient(90deg, #7c3aed, #c026d3); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Search } from "lucide-react" import Link from "next/link" import Image from "next/image" import FeaturedProducts from "@/components/featured-products" import CategorySection from "@/components/category-section" import TestimonialSection from "@/components/testimonial-section" export default function Home() { return (

{/* Hero Section */}

StudySwap

India's ultimate marketplace for students to buy and sell educational resources

{/* Featured Products */}

Featured Products

{/* Categories */}

Browse Categories

{/* How It Works */}

How StudySwap Works

List Your Items

Create listings for textbooks, stationery, or other educational resources you no longer need.

Connect with Buyers

Chat with interested buyers, answer questions, and arrange the exchange.

Complete the Sale

Meet safely on campus or use our secure payment system for shipping items.

{/* Testimonials */}

What Students Say

{/* CTA */}

Ready to join the community?

) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/auth-provider.tsx" isMerged="true" "use client" import type React from "react" import { createContext, useContext, useState, useEffect } from "react" type User = { id: string name: string email: string avatar: string isVerified: boolean school: string role: "student" | "admin" } type AuthContextType = { user: User | null isLoading: boolean login: (email: string, password: string) => Promise register: (userData: Partial & { password: string }) => Promise logout: () => void } const AuthContext = createContext(undefined) export function AuthProvider({ children }: { children: React.ReactNode }) { const [user, setUser] = useState(null) const [isLoading, setIsLoading] = useState(true) useEffect(() => { // Check if user is logged in from localStorage const storedUser = localStorage.getItem("user") if (storedUser) { setUser(JSON.parse(storedUser)) } setIsLoading(false) }, []) const login = async (email: string, password: string) => { setIsLoading(true) try { // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1000)) // Mock user data const mockUser: User = { id: "user-1", name: "John Doe", email, avatar: "/placeholder.svg?height=100&width=100", isVerified: true, school: "University of Technology", role: "student", } setUser(mockUser) localStorage.setItem("user", JSON.stringify(mockUser)) } catch (error) { console.error("Login failed:", error) throw error } finally { setIsLoading(false) } } const register = async (userData: Partial & { password: string }) => { setIsLoading(true) try { // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1000)) // Mock user data const mockUser: User = { id: "user-" + Math.floor(Math.random() * 1000), name: userData.name || "New User", email: userData.email || "", avatar: "/placeholder.svg?height=100&width=100", isVerified: false, school: userData.school || "", role: "student", } setUser(mockUser) localStorage.setItem("user", JSON.stringify(mockUser)) } catch (error) { console.error("Registration failed:", error) throw error } finally { setIsLoading(false) } } const logout = () => { setUser(null) localStorage.removeItem("user") } return {children} } export const useAuth = () => { const context = useContext(AuthContext) if (context === undefined) { throw new Error("useAuth must be used within an AuthProvider") } return context } [V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true" import Link from "next/link" import { Facebook, Instagram, Twitter, Youtube } from "lucide-react" export default function Footer() { return ( ) } [V0_FILE]typescriptreact:file="components/featured-products.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import Image from "next/image" import { Heart, MessageSquare } from "lucide-react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Card, CardContent, CardFooter } from "@/components/ui/card" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { useToast } from "@/components/ui/use-toast" // Replace the mock data with Indian books and authors const featuredProducts = [ { id: "1", title: "Maths NCERT Textbook Class 12", description: "RD Sharma, Hindi & English Medium. Excellent condition with solved examples.", price: 349.99, condition: "Like New", category: "Textbooks", image: "https://m.media-amazon.com/images/I/51OsKlKLCIL._SY264_BO1,204,203,200_QL40_FMwebp_.jpg", seller: { id: "user-1", name: "Rahul Sharma", avatar: "/placeholder.svg?height=40&width=40", rating: 4.8, verified: true, }, location: "North Campus, DU", postedAt: "2 days ago", saved: false, }, { id: "2", title: "Casio FX-991EX Scientific Calculator", description: "Used for one semester only. Perfect for JEE/NEET preparation.", price: 1299.99, condition: "Excellent", category: "Electronics", image: "https://m.media-amazon.com/images/I/71L6iEHdI7L._SX679_.jpg", seller: { id: "user-2", name: "Priya Patel", avatar: "/placeholder.svg?height=40&width=40", rating: 4.9, verified: true, }, location: "South Campus, DU", postedAt: "5 hours ago", saved: false, }, { id: "3", title: "मनोविज्ञान का परिचय - Introduction to Psychology", description: "Hindi Edition by Dr. Rampal Singh. Minimal highlighting, perfect for BA Psychology.", price: 275.5, condition: "Good", category: "Textbooks", image: "https://m.media-amazon.com/images/I/51HzFZOridL._SX365_BO1,204,203,200_.jpg", seller: { id: "user-3", name: "Ankit Kumar", avatar: "/placeholder.svg?height=40&width=40", rating: 4.6, verified: true, }, location: "Kamla Nagar", postedAt: "1 week ago", saved: false, }, { id: "4", title: "Classmate Premium Notebook Bundle", description: "Set of 5 spiral notebooks, perfect for UPSC preparation notes.", price: 299.99, condition: "New", category: "Stationery", image: "https://m.media-amazon.com/images/I/71Y8wSdqh0L._SX679_.jpg", seller: { id: "user-4", name: "Neha Gupta", avatar: "/placeholder.svg?height=40&width=40", rating: 4.7, verified: true, }, location: "IIT Delhi Campus", postedAt: "3 days ago", saved: false, }, ] export default function FeaturedProducts() { const [products, setProducts] = useState(featuredProducts) const { toast } = useToast() const toggleSave = (productId: string) => { setProducts(products.map((product) => (product.id === productId ? { ...product, saved: !product.saved } : product))) const product = products.find((p) => p.id === productId) toast({ title: product?.saved ? "Removed from wishlist" : "Added to wishlist", description: product?.saved ? `${product.title} has been removed from your wishlist.` : `${product.title} has been added to your wishlist.`, duration: 3000, }) } // Update the return JSX to include more dynamic elements return (

{products.map((product) => (

{product.category} {product.condition}

{product.title}

{product.description}

₹{product.price.toFixed(2)} {product.postedAt}

{product.seller.name.charAt(0)} {product.seller.name}

))}

) } [V0_FILE]typescriptreact:file="components/category-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import Link from "next/link" import { BookOpen, Pencil, Laptop, FileText, Lightbulb, Backpack, Calculator, Palette } from "lucide-react" // Update categories with India-specific educational categories const categories = [ { name: "NCERT Textbooks", icon: BookOpen, description: "All subjects for classes 6-12", href: "/products/textbooks", color: "bg-blue-500/10 text-blue-500", }, { name: "Stationery", icon: Pencil, description: "Notebooks, pens, and other supplies", href: "/products/stationery", color: "bg-green-500/10 text-green-500", }, { name: "Electronics", icon: Laptop, description: "Calculators, tablets, and accessories", href: "/products/electronics", color: "bg-orange-500/10 text-orange-500", }, { name: "Competitive Exams", icon: FileText, description: "JEE, NEET, UPSC, and other exam materials", href: "/products/competitive-exams", color: "bg-purple-500/10 text-purple-500", }, { name: "Hindi Literature", icon: Lightbulb, description: "Hindi novels, poetry, and academic books", href: "/products/hindi-literature", color: "bg-pink-500/10 text-pink-500", }, { name: "College Bags", icon: Backpack, description: "Backpacks, laptop bags, and cases", href: "/products/bags", color: "bg-yellow-500/10 text-yellow-500", }, { name: "Engineering Tools", icon: Calculator, description: "Drawing tools, calculators, and lab equipment", href: "/products/engineering-tools", color: "bg-red-500/10 text-red-500", }, { name: "Regional Books", icon: Palette, description: "Books in Tamil, Bengali, Marathi, and other languages", href: "/products/regional-books", color: "bg-cyan-500/10 text-cyan-500", }, ] export default function CategorySection() { // Update the return JSX to include more dynamic elements return (

{categories.map((category) => (

{category.name}

{category.description}

))}

) } [V0_FILE]typescriptreact:file="components/testimonial-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Card, CardContent } from "@/components/ui/card" const testimonials = [ { id: "1", content: "StudySwap saved me so much money on my NEET preparation books! I found all the materials I needed at half the price of the bookstore.", author: { name: "Tanvi Sharma", role: "MBBS Student, AIIMS Delhi", avatar: "/placeholder.svg?height=40&width=40", }, }, { id: "2", content: "As a final year B.Tech student, I was able to sell all my old textbooks quickly. The platform connects me with juniors at my college who need the same books.", author: { name: "Arjun Reddy", role: "Computer Science, IIT Bombay", avatar: "/placeholder.svg?height=40&width=40", }, }, { id: "3", content: "I found a graphing calculator for my engineering classes at a great price. The seller was from my college and we met on campus for the exchange.", author: { name: "Aisha Khan", role: "Mechanical Engineering, DTU", avatar: "/placeholder.svg?height=40&width=40", }, }, ] export default function TestimonialSection() { return (

{testimonials.map((testimonial) => (

"{testimonial.content}"

{testimonial.author.name.charAt(0)}

{testimonial.author.name}

{testimonial.author.role}

))}

) } [V0_FILE]typescriptreact:file="components/ui/toast.tsx" isMerged="true" "use client" import * as React from "react" import * as ToastPrimitives from "@radix-ui/react-toast" import { cva, type VariantProps } from "class-variance-authority" import { X } from "lucide-react" import { cn } from "@/lib/utils" const ToastProvider = ToastPrimitives.Provider const ToastViewport = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastViewport.displayName = ToastPrimitives.Viewport.displayName const toastVariants = cva( "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full", { variants: { variant: { default: "border bg-background text-foreground", destructive: "destructive group border-destructive bg-destructive text-destructive-foreground", }, }, defaultVariants: { variant: "default", }, }, ) const Toast = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, variant, ...props }, ref) => { return }) Toast.displayName = ToastPrimitives.Root.displayName const ToastAction = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastAction.displayName = ToastPrimitives.Action.displayName const ToastClose = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastClose.displayName = ToastPrimitives.Close.displayName const ToastTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastTitle.displayName = ToastPrimitives.Title.displayName const ToastDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastDescription.displayName = ToastPrimitives.Description.displayName type ToastProps = React.ComponentPropsWithoutRef type ToastActionElement = React.ReactElement export { type ToastProps, type ToastActionElement, ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, } [V0_FILE]typescriptreact:file="components/ui/toaster.tsx" isMerged="true" "use client" import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/toast" import { useToast } from "@/components/ui/use-toast" export function Toaster() { const { toasts } = useToast() return ( {toasts.map(({ id, title, description, action, ...props }) => (

{title && {title}} {description && {description}}

{action} ))} ) } [V0_FILE]typescriptreact:file="components/ui/use-toast.ts" isFixed="true" isQuickEdit="true" isMerged="true" // Adapted from: https://github.com/shadcn-ui/ui/blob/main/apps/www/registry/default/ui/use-toast.ts "use client" import * as React from "react" import type { ToastActionElement, ToastProps } from "@/components/ui/toast" const TOAST_LIMIT = 5 const TOAST_REMOVE_DELAY = 1000000 type ToasterToast = ToastProps & { id: string title?: React.ReactNode description?: React.ReactNode action?: ToastActionElement } const actionTypes = { ADD_TOAST: "ADD_TOAST", UPDATE_TOAST: "UPDATE_TOAST", DISMISS_TOAST: "DISMISS_TOAST", REMOVE_TOAST: "REMOVE_TOAST", } as const let count = 0 function genId() { count = (count + 1) % Number.MAX_VALUE return count.toString() } type ActionType = typeof actionTypes type Action = | { type: ActionType["ADD_TOAST"] toast: ToasterToast } | { type: ActionType["UPDATE_TOAST"] toast: Partial } | { type: ActionType["DISMISS_TOAST"] toastId?: string } | { type: ActionType["REMOVE_TOAST"] toastId?: string } interface State { toasts: ToasterToast[] } const toastTimeouts = new Map>() const reducer = (state: State, action: Action): State => { switch (action.type) { case actionTypes.ADD_TOAST: return { ...state, toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT), } case actionTypes.UPDATE_TOAST: return { ...state, toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)), } case actionTypes.DISMISS_TOAST: { const { toastId } = action if (toastId) { toastTimeouts.set( toastId, setTimeout(() => { toastTimeouts.delete(toastId) dispatch({ type: actionTypes.REMOVE_TOAST, toastId, }) }, TOAST_REMOVE_DELAY), ) } return { ...state, toasts: state.toasts.map((t) => t.id === toastId || toastId === undefined ? { ...t, open: false, } : t, ), } } case actionTypes.REMOVE_TOAST: if (action.toastId === undefined) { return { ...state, toasts: [], } } return { ...state, toasts: state.toasts.filter((t) => t.id !== action.toastId), } } } const listeners: Array<(state: State) => void> = [] let memoryState: State = { toasts: [] } function dispatch(action: Action) { memoryState = reducer(memoryState, action) listeners.forEach((listener) => { listener(memoryState) }) } type Toast = Omit function toast({ ...props }: Toast) { const id = genId() const update = (props: ToasterToast) => dispatch({ type: actionTypes.UPDATE_TOAST, toast: { ...props, id }, }) const dismiss = () => dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id }) dispatch({ type: actionTypes.ADD_TOAST, toast: { ...props, id, open: true, onOpenChange: (open) => { if (!open) dismiss() }, }, }) return { id, dismiss, update, } } function useToast() { const [state, setState] = React.useState(memoryState) React.useEffect(() => { listeners.push(setState) return () => { const index = listeners.indexOf(setState) if (index > -1) { listeners.splice(index, 1) } } }, []) return { ...state, toast, dismiss: (toastId?: string) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId }), } } export { useToast, toast } [V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="app/login/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Checkbox } from "@/components/ui/checkbox" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { useAuth } from "@/components/auth-provider" import { useToast } from "@/components/ui/use-toast" export default function LoginPage() { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [isLoading, setIsLoading] = useState(false) const { login } = useAuth() const router = useRouter() const { toast } = useToast() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) try { await login(email, password) toast({ title: "Login successful", description: "Welcome back to StudySwap!", }) router.push("/") } catch (error) { toast({ title: "Login failed", description: "Please check your credentials and try again.", variant: "destructive", }) } finally { setIsLoading(false) } } return (

) } [V0_FILE]typescriptreact:file="app/register/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { useAuth } from "@/components/auth-provider" import { useToast } from "@/components/ui/use-toast" export default function RegisterPage() { const [formData, setFormData] = useState({ name: "", email: "", school: "", password: "", confirmPassword: "", }) const [isLoading, setIsLoading] = useState(false) const { register } = useAuth() const router = useRouter() const { toast } = useToast() const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleSchoolChange = (value: string) => { setFormData((prev) => ({ ...prev, school: value })) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (formData.password !== formData.confirmPassword) { toast({ title: "Passwords don't match", description: "Please make sure your passwords match.", variant: "destructive", }) return } setIsLoading(true) try { await register({ name: formData.name, email: formData.email, school: formData.school, password: formData.password, }) toast({ title: "Registration successful", description: "Welcome to StudySwap! Your account has been created.", }) router.push("/") } catch (error) { toast({ title: "Registration failed", description: "There was an error creating your account. Please try again.", variant: "destructive", }) } finally { setIsLoading(false) } } return (

Create an account Enter your information to create a StudySwap account

Full Name

Please use your university email for verification

School/University

Password

Confirm Password

Already have an account?{" "} Login

) } [V0_FILE]typescriptreact:file="app/products/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import Image from "next/image" import { Heart, Search, SlidersHorizontal, X } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardFooter } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Checkbox } from "@/components/ui/checkbox" import { Label } from "@/components/ui/label" import { Slider } from "@/components/ui/slider" import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { useToast } from "@/components/ui/use-toast" // Update the mock data with Indian books and products const allProducts = [ { id: "1", title: "Maths NCERT Textbook Class 12", description: "RD Sharma, Hindi & English Medium. Excellent condition with solved examples.", price: 349.99, condition: "Like New", category: "NCERT Textbooks", image: "https://m.media-amazon.com/images/I/51OsKlKLCIL._SY264_BO1,204,203,200_QL40_FMwebp_.jpg", seller: { id: "user-1", name: "Rahul Sharma", avatar: "/placeholder.svg?height=40&width=40", rating: 4.8, verified: true, }, location: "North Campus, DU", postedAt: "2 days ago", saved: false, }, { id: "2", title: "Casio FX-991EX Scientific Calculator", description: "Used for one semester only. Perfect for JEE/NEET preparation.", price: 1299.99, condition: "Excellent", category: "Electronics", image: "https://m.media-amazon.com/images/I/71L6iEHdI7L._SX679_.jpg", seller: { id: "user-2", name: "Priya Patel", avatar: "/placeholder.svg?height=40&width=40", rating: 4.9, verified: true, }, location: "South Campus, DU", postedAt: "5 hours ago", saved: false, }, { id: "3", title: "मनोविज्ञान का परिचय - Introduction to Psychology", description: "Hindi Edition by Dr. Rampal Singh. Minimal highlighting, perfect for BA Psychology.", price: 275.5, condition: "Good", category: "Hindi Literature", image: "https://m.media-amazon.com/images/I/51HzFZOridL._SX365_BO1,204,203,200_.jpg", seller: { id: "user-3", name: "Ankit Kumar", avatar: "/placeholder.svg?height=40&width=40", rating: 4.6, verified: true, }, location: "Kamla Nagar", postedAt: "1 week ago", saved: false, }, { id: "4", title: "Classmate Premium Notebook Bundle", description: "Set of 5 spiral notebooks, perfect for UPSC preparation notes.", price: 299.99, condition: "New", category: "Stationery", image: "https://m.media-amazon.com/images/I/71Y8wSdqh0L._SX679_.jpg", seller: { id: "user-4", name: "Neha Gupta", avatar: "/placeholder.svg?height=40&width=40", rating: 4.7, verified: true, }, location: "IIT Delhi Campus", postedAt: "3 days ago", saved: false, }, { id: "5", title: "भौतिकी - HC Verma Physics Part 1 & 2", description: "Hindi Edition, perfect for JEE preparation. Contains all solved examples.", price: 599.99, condition: "Good", category: "Competitive Exams", image: "https://m.media-amazon.com/images/I/51zXoIqkw8L._SX384_BO1,204,203,200_.jpg", seller: { id: "user-5", name: "Vikram Singh", avatar: "/placeholder.svg?height=40&width=40", rating: 4.5, verified: true, }, location: "Kota", postedAt: "1 day ago", saved: false, }, { id: "6", title: "Lenovo Laptop Stand", description: "Adjustable aluminum stand, perfect for online classes and studying.", price: 899.99, condition: "Like New", category: "Electronics", image: "https://m.media-amazon.com/images/I/61ItVsiIbrL._SX679_.jpg", seller: { id: "user-6", name: "Riya Kapoor", avatar: "/placeholder.svg?height=40&width=40", rating: 4.9, verified: true, }, location: "Noida", postedAt: "4 days ago", saved: false, }, { id: "7", title: "रसायन विज्ञान - Organic Chemistry Study Guide", description: "Hindi medium comprehensive guide with practice problems for NEET/JEE.", price: 450.5, condition: "Good", category: "Competitive Exams", image: "https://m.media-amazon.com/images/I/51-sSzxgPJL._SX258_BO1,204,203,200_.jpg", seller: { id: "user-7", name: "Rajesh Kumar", avatar: "/placeholder.svg?height=40&width=40", rating: 4.7, verified: true, }, location: "Patna", postedAt: "6 days ago", saved: false, }, { id: "8", title: "boAt Rockerz 450 Wireless Headphones", description: "Barely used. Great for online classes and studying in noisy environments.", price: 1499.99, condition: "Excellent", category: "Electronics", image: "https://m.media-amazon.com/images/I/61jlGsA5-jL._SX679_.jpg", seller: { id: "user-8", name: "Divya Sharma", avatar: "/placeholder.svg?height=40&width=40", rating: 4.8, verified: true, }, location: "Pune", postedAt: "2 weeks ago", saved: false, }, ] const categories = [ "All Categories", "NCERT Textbooks", "Stationery", "Electronics", "Competitive Exams", "Hindi Literature", "College Bags", "Engineering Tools", "Regional Books", ] const conditions = ["New", "Like New", "Excellent", "Good", "Fair", "Poor"] export default function ProductsPage() { const [searchQuery, setSearchQuery] = useState("") const [selectedCategory, setSelectedCategory] = useState("All Categories") const [selectedConditions, setSelectedConditions] = useState([]) const [priceRange, setPriceRange] = useState([0, 200]) const [sortOption, setSortOption] = useState("newest") const [products, setProducts] = useState(allProducts) const { toast } = useToast() const toggleSave = (productId: string) => { setProducts(products.map((product) => (product.id === productId ? { ...product, saved: !product.saved } : product))) const product = products.find((p) => p.id === productId) toast({ title: product?.saved ? "Removed from wishlist" : "Added to wishlist", description: product?.saved ? `${product.title} has been removed from your wishlist.` : `${product.title} has been added to your wishlist.`, duration: 3000, }) } const toggleCondition = (condition: string) => { setSelectedConditions((prev) => prev.includes(condition) ? prev.filter((c) => c !== condition) : [...prev, condition], ) } const filteredProducts = allProducts .filter((product) => { // Search query filter if ( searchQuery && !product.title.toLowerCase().includes(searchQuery.toLowerCase()) && !product.description.toLowerCase().includes(searchQuery.toLowerCase()) ) { return false } // Category filter if (selectedCategory !== "All Categories" && product.category !== selectedCategory) { return false } // Condition filter if (selectedConditions.length > 0 && !selectedConditions.includes(product.condition)) { return false } // Price range filter if (product.price < priceRange[0] || product.price > priceRange[1]) { return false } return true }) .sort((a, b) => { // Sort options switch (sortOption) { case "newest": return 0 // In a real app, would compare dates case "oldest": return 0 // In a real app, would compare dates case "price-low": return a.price - b.price case "price-high": return b.price - a.price default: return 0 } }) const clearFilters = () => { setSearchQuery("") setSelectedCategory("All Categories") setSelectedConditions([]) setPriceRange([0, 200]) setSortOption("newest") } return (

Browse Products

setSearchQuery(e.target.value)} /> {searchQuery && ( )}

Filters

Condition

{conditions.map((condition) => (

toggleCondition(condition)} /> {condition}

))}

Price Range

${priceRange[0]} - ${priceRange[1]}

{/* Active filters */} {(selectedCategory !== "All Categories" || selectedConditions.length > 0 || priceRange[0] > 0 || priceRange[1] < 200) && (

Active filters: {selectedCategory !== "All Categories" && ( {selectedCategory} )} {selectedConditions.map((condition) => ( {condition} ))} {(priceRange[0] > 0 || priceRange[1] < 200) && ( ${priceRange[0]} - ${priceRange[1]} )}

)}

{/* Results count */}

Showing {filteredProducts.length} results

{/* Products grid */} {filteredProducts.length > 0 ? (

{filteredProducts.map((product) => (

{product.category} {product.condition}

{product.title}

{product.description}

₹{product.price.toFixed(2)} {product.postedAt}

{product.seller.name.charAt(0)} {product.seller.name}

{product.location} ))}

) : (

No products found

Try adjusting your search or filter criteria

)}

) } [V0_FILE]typescriptreact:file="app/sell/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { useToast } from "@/components/ui/use-toast" import { useAuth } from "@/components/auth-provider" import { Button } from "@/components/ui/button" import { ImageIcon } from "@radix-ui/react-icons" import Image from "next/image" import { Badge } from "@/components/ui/badge" export default function SellPage() { const { user } = useAuth() const router = useRouter() const { toast } = useToast() const [formData, setFormData] = useState({ title: "", description: "", price: "", category: "", condition: "", location: "", images: [] as string[], }) const [isLoading, setIsLoading] = useState(false) const [dragActive, setDragActive] = useState(false) const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleSelectChange = (name: string, value: string) => { setFormData((prev) => ({ ...prev, [name]: value })) } const handleDrag = (e: React.DragEvent) => { e.preventDefault() e.stopPropagation() if (e.type === "dragenter" || e.type === "dragover") { setDragActive(true) } else if (e.type === "dragleave") { setDragActive(false) } } const handleDrop = (e: React.DragEvent) => { e.preventDefault() e.stopPropagation() setDragActive(false) if (e.dataTransfer.files && e.dataTransfer.files.length > 0) { handleFiles(e.dataTransfer.files) } } const handleFileChange = (e: React.ChangeEvent) => { if (e.target.files && e.target.files.length > 0) { handleFiles(e.target.files) } } const handleFiles = (files: FileList) => { if (formData.images.length + files.length > 5) { toast({ title: "Too many images", description: "You can upload a maximum of 5 images.", variant: "destructive", }) return } // In a real app, we would upload these to a storage service // For now, we'll create object URLs const newImages = Array.from(files).map((file) => URL.createObjectURL(file)) setFormData((prev) => ({ ...prev, images: [...prev.images, ...newImages], })) } const removeImage = (index: number) => { setFormData((prev) => ({ ...prev, images: prev.images.filter((_, i) => i !== index), })) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!user) { toast({ title: "Authentication required", description: "Please log in to list an item for sale.", variant: "destructive", }) router.push("/login") return } setIsLoading(true) try { // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1500)) toast({ title: "Listing created!", description: "Your item has been listed for sale.", }) router.push("/my-listings") } catch (error) { toast({ title: "Error creating listing", description: "There was a problem creating your listing. Please try again.", variant: "destructive", }) } finally { setIsLoading(false) } } return (

Sell an Item List your educational materials for sale to other students

Title

Description

</div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div className="space-y-2">
                <Label htmlFor="price">Price ($)</Label>
                <Input
                  id="price"
                  name="price"
                  type="number"
                  min="0"
                  step="0.01"
                  placeholder="0.00"
                  value={formData.price}
                  onChange={handleChange}
                  required
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="category">Category</Label>
                <Select onValueChange={(value) => handleSelectChange("category", value)} required>
                  <SelectTrigger id="category">
                    <SelectValue placeholder="Select a category" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="NCERT Textbooks">NCERT Textbooks</SelectItem>
                    <SelectItem value="Stationery">Stationery</SelectItem>
                    <SelectItem value="Electronics">Electronics</SelectItem>
                    <SelectItem value="Competitive Exams">Competitive Exams</SelectItem>
                    <SelectItem value="Hindi Literature">Hindi Literature</SelectItem>
                    <SelectItem value="College Bags">College Bags</SelectItem>
                    <SelectItem value="Engineering Tools">Engineering Tools</SelectItem>
                    <SelectItem value="Regional Books">Regional Books</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label htmlFor="condition">Condition</Label>
                <Select onValueChange={(value) => handleSelectChange("condition", value)} required>
                  <SelectTrigger id="condition">
                    <SelectValue placeholder="Select condition" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="New">New</SelectItem>
                    <SelectItem value="Like New">Like New</SelectItem>
                    <SelectItem value="Excellent">Excellent</SelectItem>
                    <SelectItem value="Good">Good</SelectItem>
                    <SelectItem value="Fair">Fair</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label htmlFor="location">Location</Label>
                <Select onValueChange={(value) => handleSelectChange("location", value)} required>
                  <SelectTrigger id="location">
                    <SelectValue placeholder="Select your location" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="Delhi University North Campus">Delhi University North Campus</SelectItem>
                    <SelectItem value="Delhi University South Campus">Delhi University South Campus</SelectItem>
                    <SelectItem value="IIT Delhi">IIT Delhi</SelectItem>
                    <SelectItem value="JNU">JNU</SelectItem>
                    <SelectItem value="Jamia Millia Islamia">Jamia Millia Islamia</SelectItem>
                    <SelectItem value="DTU">DTU</SelectItem>
                    <SelectItem value="NSUT">NSUT</SelectItem>
                    <SelectItem value="Amity Noida">Amity Noida</SelectItem>
                    <SelectItem value="Kota">Kota</SelectItem>
                    <SelectItem value="IIT Bombay">IIT Bombay</SelectItem>
                    <SelectItem value="IIT Madras">IIT Madras</SelectItem>
                    <SelectItem value="Other">Other</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

<div className="space-y-2">
              <Label>Upload Images</Label>
              <div
                className={`relative border-2 border-dashed rounded-md p-6 text-center cursor-pointer ${dragActive ? "border-primary" : "border-muted-foreground"}`}
                onDragEnter={handleDrag}
                onDragOver={handleDrag}
                onDragLeave={handleDrag}
                onDrop={handleDrop}
              >
                <input
                  type="file"
                  multiple
                  accept="image/*"
                  className="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
                  onChange={handleFileChange}
                />
                <p className="text-sm text-muted-foreground">
                  Drag and drop images here or click to select files (Max: 5 images)
                </p>
              </div>

{formData.images.length > 0 && (
                <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 mt-4">
                  {formData.images.map((image, index) => (
                    <div key={index} className="relative">
                      <Image
                        src={image || "/placeholder.svg"}
                        alt={`Uploaded image ${index + 1}`}
                        width={200}
                        height={200}
                        className="object-cover rounded-md"
                      />
                      <button
                        type="button"
                        className="absolute top-1 right-1 bg-black bg-opacity-50 text-white rounded-full w-6 h-6 flex items-center justify-center"
                        onClick={() => removeImage(index)}
                      >
                        <span className="sr-only">Remove</span>
                        ×
                      </button>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </CardContent>
          <div className="p-6">
            <Button type="submit" className="w-full btn-shine" disabled={isLoading}>
              {isLoading ? "Creating listing..." : "List Item for Sale"}
            </Button>
          </div>
        </form>
        {formData.title && formData.price && formData.category && (
          <div className="mt-6 p-4 border rounded-lg">
            <h3 className="font-medium mb-2">Preview</h3>
            <div className="flex gap-4">
              <div className="w-24 h-24 bg-muted rounded-md flex items-center justify-center">
                {formData.images.length > 0 ? (
                  <Image
                    src={formData.images[0] || "/placeholder.svg"}
                    alt="Preview"
                    width={96}
                    height={96}
                    className="object-cover rounded-md"
                  />
                ) : (
                  <ImageIcon className="h-8 w-8 text-muted-foreground" />
                )}
              </div>
              <div>
                <h4 className="font-semibold">{formData.title}</h4>
                <p className="text-sm text-muted-foreground line-clamp-1">{formData.description}</p>
                <div className="flex gap-2 mt-1">
                  <Badge>{formData.category}</Badge>
                  <Badge variant="outline">₹{formData.price}</Badge>
                </div>
              </div>
            </div>
          </div>
        )}
      </Card>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/products/[id]/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Image from "next/image"
import Link from "next/link"
import { useParams } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { useToast } from "@/components/ui/use-toast"
import { Heart, Share2, MessageSquare, ArrowLeft, Star, MapPin, Calendar, Info, ShieldCheck } from "lucide-react"

// Mock product data
const products = [
  {
    id: "1",
    title: "Maths NCERT Textbook Class 12",
    description:
      "RD Sharma, Hindi & English Medium. Excellent condition with solved examples. This textbook is perfect for Class 12 students preparing for board exams and competitive entrance tests like JEE and other engineering entrance exams. The book contains comprehensive explanations of all concepts with numerous solved examples and practice problems.\n\nThe book has minimal highlighting and all pages are intact. I've used it for just one academic year and it's in excellent condition.",
    price: 349.99,
    condition: "Like New",
    category: "NCERT Textbooks",
    images: [
      "https://m.media-amazon.com/images/I/51OsKlKLCIL._SY264_BO1,204,203,200_QL40_FMwebp_.jpg",
      "https://m.media-amazon.com/images/I/51zXoIqkw8L._SX384_BO1,204,203,200_.jpg",
      "https://m.media-amazon.com/images/I/51HzFZOridL._SX365_BO1,204,203,200_.jpg",
    ],
    seller: {
      id: "user-1",
      name: "Rahul Sharma",
      avatar: "/placeholder.svg?height=40&width=40",
      rating: 4.8,
      verified: true,
      joinedDate: "August 2022",
      responseRate: "98%",
      responseTime: "Within 2 hours",
    },
    location: "North Campus, Delhi University",
    postedAt: "2 days ago",
    meetupOptions: ["North Campus", "Vishwavidyalaya Metro Station", "Kamla Nagar"],
    originalPrice: 499.99,
    saved: false,
    specifications: [
      { label: "Author", value: "RD Sharma" },
      { label: "Edition", value: "2023" },
      { label: "Language", value: "Hindi & English" },
      { label: "Subject", value: "Mathematics" },
      { label: "Class", value: "12th" },
      { label: "Board", value: "CBSE" },
    ],
  },
]

export default function ProductDetailPage() {
  const params = useParams()
  const { toast } = useToast()
  const productId = params.id as string

// Find the product by ID
  const product = products.find((p) => p.id === productId) || products[0]

const [saved, setSaved] = useState(product.saved)
  const [activeImage, setActiveImage] = useState(0)

const toggleSave = () => {
    setSaved(!saved)
    toast({
      title: saved ? "Removed from wishlist" : "Added to wishlist",
      description: saved
        ? `${product.title} has been removed from your wishlist.`
        : `${product.title} has been added to your wishlist.`,
      duration: 3000,
    })
  }

const handleShare = () => {
    navigator.clipboard.writeText(window.location.href)
    toast({
      title: "Link copied",
      description: "Product link has been copied to clipboard.",
      duration: 3000,
    })
  }

return (
    <div className="container px-4 py-8 md:px-6 lg:px-8">
      <Button variant="ghost" className="mb-6 -ml-4 btn-float" asChild>
        <Link href="/products">
          <ArrowLeft className="mr-2 h-4 w-4" />
          Back to products
        </Link>
      </Button>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
        {/* Product Images */}
        <div className="space-y-4">
          <div className="relative aspect-square overflow-hidden rounded-lg border">
            <Image
              src={product.images[activeImage] || "/placeholder.svg"}
              alt={product.title}
              fill
              className="object-contain image-zoom"
            />
          </div>

<div className="flex gap-2 overflow-x-auto pb-2">
            {product.images.map((image, index) => (
              <button
                key={index}
                className={`relative h-20 w-20 flex-shrink-0 overflow-hidden rounded-md border ${
                  activeImage === index ? "ring-2 ring-primary" : ""
                }`}
                onClick={() => setActiveImage(index)}
              >
                <Image
                  src={image || "/placeholder.svg"}
                  alt={`${product.title} - Image ${index + 1}`}
                  fill
                  className="object-cover"
                />
              </button>
            ))}
          </div>
        </div>

{/* Product Details */}
        <div className="space-y-6">
          <div>
            <div className="flex items-center justify-between">
              <Badge className="badge-bounce">{product.category}</Badge>
              <div className="flex gap-2">
                <Button variant="outline" size="icon" className="btn-float" onClick={handleShare}>
                  <Share2 className="h-4 w-4" />
                  <span className="sr-only">Share</span>
                </Button>
                <Button
                  variant={saved ? "default" : "outline"}
                  size="icon"
                  className={saved ? "btn-pulse" : "btn-float"}
                  onClick={toggleSave}
                >
                  <Heart className={`h-4 w-4 ${saved ? "fill-current" : ""}`} />
                  <span className="sr-only">{saved ? "Remove from wishlist" : "Add to wishlist"}</span>
                </Button>
              </div>
            </div>

<h1 className="mt-2 text-2xl font-bold">{product.title}</h1>

<div className="mt-4 flex items-baseline gap-2">
              <span className="text-3xl font-bold">₹{product.price.toFixed(2)}</span>
              {product.originalPrice && (
                <span className="text-lg text-muted-foreground line-through">₹{product.originalPrice.toFixed(2)}</span>
              )}
              {product.originalPrice && (
                <Badge variant="outline" className="ml-2 bg-green-500/10 text-green-500">
                  {Math.round((1 - product.price / product.originalPrice) * 100)}% OFF
                </Badge>
              )}
            </div>

<div className="mt-2 flex items-center gap-2">
              <Badge variant="outline" className="bg-background">
                {product.condition}
              </Badge>
              <span className="text-sm text-muted-foreground">Posted {product.postedAt}</span>
            </div>
          </div>

<Tabs defaultValue="description" className="w-full">
            <TabsList className="grid w-full grid-cols-3">
              <TabsTrigger value="description">Description</TabsTrigger>
              <TabsTrigger value="details">Details</TabsTrigger>
              <TabsTrigger value="seller">Seller</TabsTrigger>
            </TabsList>
            <TabsContent value="description" className="pt-4">
              <div className="space-y-4">
                <p className="text-muted-foreground whitespace-pre-line">{product.description}</p>
              </div>
            </TabsContent>
            <TabsContent value="details" className="pt-4">
              <div className="space-y-4">
                <h3 className="font-semibold">Specifications</h3>
                <div className="grid grid-cols-2 gap-2">
                  {product.specifications.map((spec, index) => (
                    <div key={index} className="flex justify-between">
                      <span className="text-muted-foreground">{spec.label}:</span>
                      <span className="font-medium">{spec.value}</span>
                    </div>
                  ))}
                </div>

<h3 className="font-semibold mt-6">Meetup Options</h3>
                <div className="space-y-2">
                  {product.meetupOptions.map((option, index) => (
                    <div key={index} className="flex items-center gap-2">
                      <MapPin className="h-4 w-4 text-muted-foreground" />
                      <span>{option}</span>
                    </div>
                  ))}
                </div>
              </div>
            </TabsContent>
            <TabsContent value="seller" className="pt-4">
              <Card>
                <CardContent className="p-4">
                  <div className="flex items-center gap-4">
                    <Avatar className="h-12 w-12">
                      <AvatarImage src={product.seller.avatar} alt={product.seller.name} />
                      <AvatarFallback>{product.seller.name.charAt(0)}</AvatarFallback>
                    </Avatar>
                    <div>
                      <div className="flex items-center gap-2">
                        <span className="font-semibold">{product.seller.name}</span>
                        {product.seller.verified && (
                          <Badge variant="outline" className="bg-blue-500/10 text-blue-500">
                            <ShieldCheck className="mr-1 h-3 w-3" />
                            Verified
                          </Badge>
                        )}
                      </div>
                      <div className="flex items-center gap-1 text-sm text-muted-foreground">
                        <Star className="h-3 w-3 fill-yellow-500 text-yellow-500" />
                        <span>{product.seller.rating} Rating</span>
                      </div>
                    </div>
                  </div>

<div className="mt-4 grid grid-cols-2 gap-2 text-sm">
                    <div className="flex items-center gap-2">
                      <Calendar className="h-4 w-4 text-muted-foreground" />
                      <span>Joined {product.seller.joinedDate}</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <MessageSquare className="h-4 w-4 text-muted-foreground" />
                      <span>Responds {product.seller.responseTime}</span>
                    </div>
                  </div>

<Button className="mt-4 w-full btn-shine">
                    <MessageSquare className="mr-2 h-4 w-4" />
                    Contact Seller
                  </Button>
                </CardContent>
              </Card>

<div className="mt-4 flex items-center gap-2 text-sm text-muted-foreground">
                <Info className="h-4 w-4" />
                <span>Always meet in public places and inspect items before payment</span>
              </div>
            </TabsContent>
          </Tabs>

<div className="flex flex-col gap-4">
            <Button size="lg" className="btn-pulse">
              <MessageSquare className="mr-2 h-5 w-5" />
              Chat with Seller
            </Button>

<div className="flex gap-4">
              <Button variant="outline" className="flex-1 btn-float" onClick={toggleSave}>
                <Heart className={`mr-2 h-5 w-5 ${saved ? "fill-red-500 text-red-500" : ""}`} />
                {saved ? "Saved" : "Save for Later"}
              </Button>
              <Button variant="outline" className="flex-1 btn-float" onClick={handleShare}>
                <Share2 className="mr-2 h-5 w-5" />
                Share
              </Button>
            </div>
          </div>
        </div>
      </div>

{/* Safety Tips */}
      <div className="mt-12 rounded-lg bg-primary/10 p-6">
        <h3 className="text-lg font-semibold mb-4">StudySwap Safety Tips</h3>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="flex gap-3">
            <div className="h-10 w-10 rounded-full bg-primary/20 flex items-center justify-center flex-shrink-0">
              <MapPin className="h-5 w-5 text-primary" />
            </div>
            <div>
              <h4 className="font-medium">Meet in Public Places</h4>
              <p className="text-sm text-muted-foreground">
                Always meet in well-lit, public areas like your campus library or cafeteria.
              </p>
            </div>
          </div>
          <div className="flex gap-3">
            <div className="h-10 w-10 rounded-full bg-primary/20 flex items-center justify-center flex-shrink-0">
              <ShieldCheck className="h-5 w-5 text-primary" />
            </div>
            <div>
              <h4 className="font-medium">Inspect Before Paying</h4>
              <p className="text-sm text-muted-foreground">
                Check the condition of items thoroughly before completing the transaction.
              </p>
            </div>
          </div>
          <div className="flex gap-3">
            <div className="h-10 w-10 rounded-full bg-primary/20 flex items-center justify-center flex-shrink-0">
              <Info className="h-5 w-5 text-primary" />
            </div>
            <div>
              <h4 className="font-medium">Trust Your Instincts</h4>
              <p className="text-sm text-muted-foreground">
                If something feels wrong, cancel the transaction and report suspicious behavior.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/wishlist/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { useToast } from "@/components/ui/use-toast"
import { useAuth } from "@/components/auth-provider"
import { Heart, MessageSquare, Trash2, ShoppingCart } from "lucide-react"

// Mock wishlist data
const wishlistItems = [
  {
    id: "1",
    title: "Maths NCERT Textbook Class 12",
    description: "RD Sharma, Hindi & English Medium. Excellent condition with solved examples.",
    price: 349.99,
    condition: "Like New",
    category: "NCERT Textbooks",
    image: "https://m.media-amazon.com/images/I/51OsKlKLCIL._SY264_BO1,204,203,200_QL40_FMwebp_.jpg",
    seller: {
      id: "user-1",
      name: "Rahul Sharma",
      avatar: "/placeholder.svg?height=40&width=40",
      rating: 4.8,
      verified: true,
    },
    location: "North Campus, DU",
    postedAt: "2 days ago",
    saved: true,
  },
  {
    id: "3",
    title: "मनोविज्ञान का परिचय - Introduction to Psychology",
    description: "Hindi Edition by Dr. Rampal Singh. Minimal highlighting, perfect for BA Psychology.",
    price: 275.5,
    condition: "Good",
    category: "Hindi Literature",
    image: "https://m.media-amazon.com/images/I/51HzFZOridL._SX365_BO1,204,203,200_.jpg",
    seller: {
      id: "user-3",
      name: "Ankit Kumar",
      avatar: "/placeholder.svg?height=40&width=40",
      rating: 4.6,
      verified: true,
    },
    location: "Kamla Nagar",
    postedAt: "1 week ago",
    saved: true,
  },
  {
    id: "5",
    title: "भौतिकी - HC Verma Physics Part 1 & 2",
    description: "Hindi Edition, perfect for JEE preparation. Contains all solved examples.",
    price: 599.99,
    condition: "Good",
    category: "Competitive Exams",
    image: "https://m.media-amazon.com/images/I/51zXoIqkw8L._SX384_BO1,204,203,200_.jpg",
    seller: {
      id: "user-5",
      name: "Vikram Singh",
      avatar: "/placeholder.svg?height=40&width=40",
      rating: 4.5,
      verified: true,
    },
    location: "Kota",
    postedAt: "1 day ago",
    saved: true,
  },
]

export default function WishlistPage() {
  const { user } = useAuth()
  const { toast } = useToast()
  const [items, setItems] = useState(wishlistItems)

const removeFromWishlist = (itemId: string) => {
    const item = items.find((item) => item.id === itemId)
    setItems(items.filter((item) => item.id !== itemId))

toast({
      title: "Removed from wishlist",
      description: `${item?.title} has been removed from your wishlist.`,
      duration: 3000,
    })
  }

if (!user) {
    return (
      <div className="container flex items-center justify-center min-h-[80vh] px-4 py-12">
        <div className="text-center">
          <h1 className="text-2xl font-bold mb-4">Please login to view your wishlist</h1>
          <Button asChild className="btn-pulse">
            <Link href="/login">Login</Link>
          </Button>
        </div>
      </div>
    )
  }

return (
    <div className="container px-4 py-8 md:px-6 lg:px-8">
      <div className="flex flex-col gap-6">
        <div className="flex items-center justify-between">
          <h1 className="text-3xl font-bold">My Wishlist</h1>
          <Badge variant="outline" className="text-lg px-3 py-1">
            {items.length} {items.length === 1 ? "item" : "items"}
          </Badge>
        </div>

{items.length > 0 ? (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {items.map((item) => (
              <Card key={item.id} className="product-card overflow-hidden card-flip">
                <div className="relative">
                  <Link href={`/products/${item.id}`}>
                    <div className="aspect-[3/4] relative overflow-hidden">
                      <Image
                        src={item.image || "/placeholder.svg"}
                        alt={item.title}
                        fill
                        className="object-cover image-zoom"
                      />
                    </div>
                  </Link>
                  <Button
                    variant="destructive"
                    size="icon"
                    className="absolute top-2 right-2 bg-background/80 backdrop-blur-sm rounded-full hover:bg-destructive/90"
                    onClick={() => removeFromWishlist(item.id)}
                  >
                    <Trash2 className="h-5 w-5" />
                    <span className="sr-only">Remove from wishlist</span>
                  </Button>
                  <Badge className="absolute top-2 left-2 badge-bounce">{item.category}</Badge>
                  <Badge variant="outline" className="absolute bottom-2 left-2 bg-background/80 backdrop-blur-sm">
                    {item.condition}
                  </Badge>
                </div>

<CardContent className="p-4">
                  <div className="space-y-2">
                    <h3 className="font-semibold line-clamp-1">{item.title}</h3>
                    <p className="text-sm text-muted-foreground line-clamp-2">{item.description}</p>
                    <div className="flex justify-between items-center">
                      <span className="text-lg font-bold">₹{item.price.toFixed(2)}</span>
                      <span className="text-xs text-muted-foreground">{item.postedAt}</span>
                    </div>
                  </div>
                </CardContent>

<CardFooter className="p-4 pt-0 flex justify-between items-center">
                  <div className="flex items-center gap-2">
                    <Avatar className="h-6 w-6">
                      <AvatarImage src={item.seller.avatar} alt={item.seller.name} />
                      <AvatarFallback>{item.seller.name.charAt(0)}</AvatarFallback>
                    </Avatar>
                    <span className="text-xs">{item.seller.name}</span>
                  </div>
                  <div className="flex gap-2">
                    <Button size="sm" variant="ghost" className="btn-float" asChild>
                      <Link href={`/messages/new?seller=${item.seller.id}&product=${item.id}`}>
                        <MessageSquare className="h-4 w-4" />
                      </Link>
                    </Button>
                    <Button size="sm" variant="ghost" className="btn-float" asChild>
                      <Link href={`/products/${item.id}`}>
                        <ShoppingCart className="h-4 w-4" />
                      </Link>
                    </Button>
                  </div>
                </CardFooter>
              </Card>
            ))}
          </div>
        ) : (
          <div className="flex flex-col items-center justify-center py-12 text-center">
            <div className="w-16 h-16 bg-muted rounded-full flex items-center justify-center mb-4">
              <Heart className="h-8 w-8 text-muted-foreground" />
            </div>
            <h3 className="text-lg font-semibold mb-2">Your wishlist is empty</h3>
            <p className="text-muted-foreground mb-4">Save items you're interested in to keep track of them</p>
            <Button className="btn-pulse" asChild>
              <Link href="/products">Browse Products</Link>
            </Button>
          </div>
        )}
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="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 { Toaster } from "@/components/ui/toaster"
import { AuthProvider } from "@/components/auth-provider"
import Header from "@/components/header"
import Footer from "@/components/footer"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "StudySwap - Student Marketplace",
  description: "Buy and sell educational resources with other students",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={`${inter.className} min-h-screen flex flex-col`}>
        <AuthProvider>
          <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
            <Header />
            <main className="flex-1">{children}</main>
            <Footer />
            <Toaster />
          </ThemeProvider>
        </AuthProvider>
      </body>
    </html>
  )
}

[V0_FILE]typescriptreact:file="components/header.tsx" isEdit="true"
"use client"

import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Search, Menu, X, Bell, MessageSquare, Heart } from "lucide-react"
import { useState } from "react"
import { useAuth } from "@/components/auth-provider"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"

export default function Header() {
  const [isSearchOpen, setIsSearchOpen] = useState(false)
  const { user, logout } = useAuth()

return (
    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="container flex h-16 items-center justify-between px-4 md:px-6 lg:px-8">
        <div className="flex items-center gap-2 md:gap-4">
          <Sheet>
            <SheetTrigger asChild>
              <Button variant="ghost" size="icon" className="md:hidden">
                <Menu className="h-5 w-5" />
                <span className="sr-only">Toggle menu</span>
              </Button>
            </SheetTrigger>
            <SheetContent side="left" className="w-[300px] sm:w-[400px]">
              <nav className="flex flex-col gap-4 mt-8">
                <Link href="/" className="text-lg font-medium transition-colors hover:text-primary">
                  Home
                </Link>
                <Link href="/products" className="text-lg font-medium transition-colors hover:text-primary">
                  Browse
                </Link>
                <Link href="/sell" className="text-lg font-medium transition-colors hover:text-primary">
                  Sell
                </Link>
                <Link href="/about" className="text-lg font-medium transition-colors hover:text-primary">
                  About
                </Link>
                <Link href="/contact" className="text-lg font-medium transition-colors hover:text-primary">
                  Contact
                </Link>
                <Link href="/competitive-exams" className="text-lg font-medium transition-colors hover:text-primary">
                  Competitive Exams
                </Link>
              </nav>
            </SheetContent>
          </Sheet>

<Link href="/" className="flex items-center gap-2">
            <span className="text-xl font-bold tracking-tight">
              <span className="text-gradient">Study</span>Swap
            </span>
            <Badge variant="outline" className="hidden md:inline-flex">
              India
            </Badge>
          </Link>

<nav className="hidden md:flex items-center gap-6 text-sm">
            <Link href="/products" className="font-medium transition-colors hover:text-primary relative group">
              Browse
              <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary transition-all group-hover:w-full"></span>
            </Link>
            <Link href="/sell" className="font-medium transition-colors hover:text-primary relative group">
              Sell
              <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary transition-all group-hover:w-full"></span>
            </Link>
            <Link href="/about" className="font-medium transition-colors hover:text-primary relative group">
              About
              <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary transition-all group-hover:w-full"></span>
            </Link>
            <Link href="/contact" className="font-medium transition-colors hover:text-primary relative group">
              Contact
              <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary transition-all group-hover:w-full"></span>
            </Link>
            <Link href="/competitive-exams" className="font-medium transition-colors hover:text-primary relative group">
              <Badge className="mr-1 bg-primary/20 text-primary hover:bg-primary/30">New</Badge>
              JEE/NEET Materials
              <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary transition-all group-hover:w-full"></span>
            </Link>
          </nav>
        </div>

<div className="flex items-center gap-2">
          {isSearchOpen ? (
            <div className="relative hidden md:block w-[200px] lg:w-[300px]">
              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
              <Input type="search" placeholder="Search..." className="w-full pl-8 pr-4" />
              <Button
                variant="ghost"
                size="icon"
                className="absolute right-0 top-0"
                onClick={() => setIsSearchOpen(false)}
              >
                <X className="h-4 w-4" />
                <span className="sr-only">Close search</span>
              </Button>
            </div>
          ) : (
            <Button variant="ghost" size="icon" className="hidden md:flex" onClick={() => setIsSearchOpen(true)}>
              <Search className="h-5 w-5" />
              <span className="sr-only">Search</span>
            </Button>
          )}

<Button variant="ghost" size="icon" className="md:hidden" asChild>
            <Link href="/search">
              <Search className="h-5 w-5" />
              <span className="sr-only">Search</span>
            </Link>
          </Button>

{user ? (
            <>
              <Button variant="ghost" size="icon" asChild>
                <Link href="/wishlist">
                  <Heart className="h-5 w-5" />
                  <span className="sr-only">Wishlist</span>
                </Link>
              </Button>

<Button variant="ghost" size="icon" asChild>
                <Link href="/messages">
                  <div className="relative">
                    <MessageSquare className="h-5 w-5" />
                    <Badge className="absolute -top-2 -right-2 h-4 w-4 p-0 flex items-center justify-center">3</Badge>
                  </div>
                  <span className="sr-only">Messages</span>
                </Link>
              </Button>

<Button variant="ghost" size="icon" asChild>
                <Link href="/notifications">
                  <div className="relative">
                    <Bell className="h-5 w-5" />
                    <Badge className="absolute -top-2 -right-2 h-4 w-4 p-0 flex items-center justify-center">5</Badge>
                  </div>
                  <span className="sr-only">Notifications</span>
                </Link>
              </Button>

<DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="ghost" size="icon" className="rounded-full">
                    <Avatar className="h-8 w-8">
                      <AvatarImage src={user.avatar} alt={user.name} />
                      <AvatarFallback>{user.name.charAt(0)}</AvatarFallback>
                    </Avatar>
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
                  <DropdownMenuLabel>My Account</DropdownMenuLabel>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem asChild>
                    <Link href="/profile">Profile</Link>
                  </DropdownMenuItem>
                  <DropdownMenuItem asChild>
                    <Link href="/my-listings">My Listings</Link>
                  </DropdownMenuItem>
                  <DropdownMenuItem asChild>
                    <Link href="/purchases">Purchases</Link>
                  </DropdownMenuItem>
                  <DropdownMenuItem asChild>
                    <Link href="/wishlist">Wishlist</Link>
                  </DropdownMenuItem>
                  <DropdownMenuItem asChild>
                    <Link href="/settings">Settings</Link>
                  </DropdownMenuItem>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem asChild>
                    <Link href="/help">Help & Support</Link>
                  </DropdownMenuItem>
                  <DropdownMenuItem onClick={logout} className="text-red-500">
                    Logout
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </>
          ) : (
            <div className="flex items-center gap-2">
              <Button variant="ghost" asChild>
                <Link href="/login">Login</Link>
              </Button>
              <Button asChild>
                <Link href="/register">Register</Link>
              </Button>
            </div>
          )}
        </div>
      </div>
    </header>
  )
}

[V0_FILE]typescriptreact:file="app/about/page.tsx"
import { Button } from "@/components/ui/button"
import Link from "next/link"

export default function AboutPage() {
  return (
    <div className="container px-4 py-12 md:px-6 lg:px-8">
      <h1 className="text-4xl font-bold mb-6">About StudySwap</h1>
      <div className="space-y-6 text-lg">
        <p>
          StudySwap is India's premier student-to-student marketplace for educational resources. Our platform connects
          students across the country, allowing them to buy, sell, and exchange textbooks, study materials, and other
          academic essentials.
        </p>
        <p>
          Founded by a group of students who understood the financial challenges of higher education, StudySwap aims to
          make quality educational resources more accessible and affordable for all.
        </p>
        <p>
          We're committed to fostering a community of learners who support each other's academic journeys. By
          facilitating the exchange of resources, we're not just helping students save money – we're promoting
          sustainability and reducing waste in the education sector.
        </p>
        <h2 className="text-2xl font-semibold mt-8 mb-4">Our Mission</h2>
        <p>
          To empower Indian students by providing a safe, efficient, and user-friendly platform for exchanging
          educational resources, thereby making quality education more accessible and affordable.
        </p>
        <div className="mt-8">
          <Button asChild>
            <Link href="/contact">Contact Us</Link>
          </Button>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/contact/page.tsx"
"use client"

import type React from "react"

export default function ContactPage() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    subject: "",
    message: "",
  })
  const { toast } = useToast()

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // Here you would typically send the form data to your backend
    console.log("Form submitted:", formData)
    toast({
      title: "Message Sent",
      description: "We've received your message and will get back to you soon.",
    })
    setFormData({ name: "", email: "", subject: "", message: "" })
  }

return (
    <div className="container px-4 py-12 md:px-6 lg:px-8">
      <h1 className="text-4xl font-bold mb-6">Contact Us</h1>
      <div className="max-w-2xl mx-auto">
        <form onSubmit={handleSubmit} className="space-y-6">
          <div>
            <label htmlFor="name" className="block text-sm font-medium mb-2">
              Name
            </label>
            <Input id="name" name="name" value={formData.name} onChange={handleChange} required />
          </div>
          <div>
            <label htmlFor="email" className="block text-sm font-medium mb-2">
              Email
            </label>
            <Input id="email" name="email" type="email" value={formData.email} onChange={handleChange} required />
          </div>
          <div>
            <label htmlFor="subject" className="block text-sm font-medium mb-2">
              Subject
            </label>
            <Input id="subject" name="subject" value={formData.subject} onChange={handleChange} required />
          </div>
          <div>
            <label htmlFor="message" className="block text-sm font-medium mb-2">
              Message
            </label>
            <Textarea id="message" name="message" value={formData.message} onChange={handleChange} rows={5} required />
          </div>
          <Button type="submit" className="w-full">
            Send Message
          </Button>
        </form>
      </div>
      <div className="mt-12 text-center">
        <h2 className="text-2xl font-semibold mb-4">Other Ways to Reach Us</h2>
        <p className="mb-2">Email: support@studyswap.in</p>
        <p className="mb-2">Phone: +91 1234567890</p>
        <p>Address: 123 Education Street, Knowledge City, India 110001</p>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/competitive-exams/page.tsx"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import Link from "next/link"

const examCategories = [
  { name: "JEE (Main & Advanced)", description: "Engineering entrance exam" },
  { name: "NEET", description: "Medical entrance exam" },
  { name: "UPSC", description: "Civil Services exam" },
  { name: "CAT", description: "Management entrance exam" },
  { name: "GATE", description: "Graduate Aptitude Test in Engineering" },
  { name: "Bank Exams", description: "Various banking sector exams" },
]

export default function CompetitiveExamsPage() {
  return (
    <div className="container px-4 py-12 md:px-6 lg:px-8">
      <h1 className="text-4xl font-bold mb-6">Competitive Exam Resources</h1>
      <p className="text-lg mb-8">
        Find study materials, previous year papers, and guides for various competitive exams in India.
      </p>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {examCategories.map((category) => (
          <Card key={category.name} className="hover:shadow-lg transition-shadow">
            <CardHeader>
              <CardTitle>{category.name}</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-muted-foreground mb-4">{category.description}</p>
              <Button asChild>
                <Link href={`/products?category=${encodeURIComponent(category.name)}`}>Browse Resources</Link>
              </Button>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/messages/page.tsx" isEdit="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Search, Send, ArrowLeft, MoreVertical, Phone, Video, ImageIcon } from "lucide-react"
import { useAuth } from "@/components/auth-provider"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

// Mock conversation data
const conversations = [
  {
    id: "1",
    user: {
      id: "user-1",
      name: "Rahul Sharma",
      avatar: "/placeholder.svg?height=40&width=40",
      online: true,
    },
    lastMessage: {
      text: "Is the NCERT Maths textbook still available?",
      time: "10:42 AM",
      isRead: true,
      sender: "them",
    },
    unreadCount: 0,
    product: {
      id: "1",
      title: "Maths NCERT Textbook Class 12",
      image: "https://m.media-amazon.com/images/I/51OsKlKLCIL._SY264_BO1,204,203,200_QL40_FMwebp_.jpg",
      price: 349.99,
    },
  },
  {
    id: "2",
    user: {
      id: "user-2",
      name: "Priya Patel",
      avatar: "/placeholder.svg?height=40&width=40",
      online: false,
    },
    lastMessage: {
      text: "Can we meet tomorrow at the campus library?",
      time: "Yesterday",
      isRead: false,
      sender: "them",
    },
    unreadCount: 2,
    product: {
      id: "2",
      title: "Casio FX-991EX Scientific Calculator",
      image: "https://m.media-amazon.com/images/I/71L6iEHdI7L._SX679_.jpg",
      price: 1299.99,
    },
  },
  {
    id: "3",
    user: {
      id: "user-3",
      name: "Ankit Kumar",
      avatar: "/placeholder.svg?height=40&width=40",
      online: true,
    },
    lastMessage: {
      text: "Thanks for the quick response! I'll take it.",
      time: "Yesterday",
      isRead: true,
      sender: "them",
    },
    unreadCount: 0,
    product: {
      id: "3",
      title: "मनोविज्ञान का परिचय - Introduction to Psychology",
      image: "https://m.media-amazon.com/images/I/51HzFZOridL._SX365_BO1,204,203,200_.jpg",
      price: 275.5,
    },
  },
]

// Mock messages for a conversation
const messages = [
  {
    id: "msg-1",
    text: "Hi, is the NCERT Maths textbook still available?",
    time: "10:30 AM",
    sender: "them",
    isRead: true,
  },
  {
    id: "msg-2",
    text: "Yes, it's still available. Are you interested?",
    time: "10:35 AM",
    sender: "me",
    isRead: true,
  },
  {
    id: "msg-3",
    text: "Great! What's the condition of the book? Are there any markings or highlights?",
    time: "10:38 AM",
    sender: "them",
    isRead: true,
  },
  {
    id: "msg-4",
    text: "The book is in excellent condition. There are minimal highlights, mainly in the important formulas section. All pages are intact and there's no damage.",
    time: "10:40 AM",
    sender: "me",
    isRead: true,
  },
  {
    id: "msg-5",
    text: "That sounds perfect. Can we meet tomorrow to complete the transaction?",
    time: "10:42 AM",
    sender: "them",
    isRead: true,
  },
]

export default function MessagesPage() {
  const { user } = useAuth()
  const [activeConversation, setActiveConversation] = useState<string | null>(null)
  const [messageText, setMessageText] = useState("")
  const [searchQuery, setSearchQuery] = useState("")
  const [windowWidth, setWindowWidth] = useState(typeof window !== "undefined" ? window.innerWidth : 0)

useEffect(() => {
    const handleResize = () => setWindowWidth(window.innerWidth)
    window.addEventListener("resize", handleResize)
    return () => window.removeEventListener("resize", handleResize)
  }, [])

const filteredConversations = conversations.filter(
    (conv) =>
      conv.user.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      conv.product.title.toLowerCase().includes(searchQuery.toLowerCase()),
  )

const currentConversation = conversations.find((conv) => conv.id === activeConversation)

const handleSendMessage = (e: React.FormEvent) => {
    e.preventDefault()
    if (messageText.trim()) {
      // In a real app, we would send the message to the API
      console.log("Sending message:", messageText)
      setMessageText("")
    }
  }

if (!user) {
    return (
      <div className="container flex items-center justify-center min-h-[80vh] px-4 py-12">
        <div className="text-center">
          <h1 className="text-2xl font-bold mb-4">Please login to view your messages</h1>
          <Button asChild>
            <Link href="/login">Login</Link>
          </Button>
        </div>
      </div>
    )
  }

return (
    <div className="container px-0 md:px-6 lg:px-8 py-0 md:py-8 h-[calc(100vh-4rem)]">
      <div
        className="grid h-full md:rounded-lg md:border overflow-hidden"
        style={{ gridTemplateColumns: activeConversation && windowWidth >= 768 ? "320px 1fr" : "1fr" }}
      >
        {/* Conversations List - Hidden on mobile when a conversation is active */}
        {(!activeConversation || windowWidth >= 768) && (
          <div className="border-r flex flex-col h-full">
            <div className="p-4 border-b">
              <h2 className="font-semibold text-lg mb-4">Messages</h2>
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
                <Input
                  placeholder="Search messages..."
                  className="pl-10"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                />
              </div>
            </div>

<div className="flex-1 overflow-auto">
              {filteredConversations.length > 0 ? (
                <div className="divide-y">
                  {filteredConversations.map((conversation) => (
                    <button
                      key={conversation.id}
                      className={`w-full text-left p-4 hover:bg-muted/50 transition-colors ${
                        activeConversation === conversation.id ? "bg-muted" : ""
                      }`}
                      onClick={() => setActiveConversation(conversation.id)}
                    >
                      <div className="flex gap-3">
                        <div className="relative">
                          <Avatar className="h-12 w-12">
                            <AvatarImage src={conversation.user.avatar} alt={conversation.user.name} />
                            <AvatarFallback>{conversation.user.name.charAt(0)}</AvatarFallback>
                          </Avatar>
                          {conversation.user.online && (
                            <span className="absolute bottom-0 right-0 h-3 w-3 rounded-full bg-green-500 border-2 border-background"></span>
                          )}
                        </div>
                        <div className="flex-1 min-w-0">
                          <div className="flex justify-between items-start">
                            <span className="font-medium truncate">{conversation.user.name}</span>
                            <span className="text-xs text-muted-foreground whitespace-nowrap ml-2">
                              {conversation.lastMessage.time}
                            </span>
                          </div>
                          <p className="text-sm text-muted-foreground truncate">
                            {conversation.lastMessage.sender === "me" ? "You: " : ""}
                            {conversation.lastMessage.text}
                          </p>
                          <div className="flex items-center gap-2 mt-1">
                            <div className="w-6 h-6 rounded-md overflow-hidden relative flex-shrink-0">
                              <Image
                                src={conversation.product.image || "/placeholder.svg"}
                                alt={conversation.product.title}
                                fill
                                className="object-cover"
                              />
                            </div>
                            <span className="text-xs truncate">{conversation.product.title}</span>
                          </div>
                        </div>
                        {conversation.unreadCount > 0 && (
                          <Badge className="ml-auto badge-bounce">{conversation.unreadCount}</Badge>
                        )}
                      </div>
                    </button>
                  ))}
                </div>
              ) : (
                <div className="p-4 text-center text-muted-foreground">No conversations found</div>
              )}
            </div>
          </div>
        )}

{/* Conversation Detail */}
        {activeConversation && currentConversation && (
          <div className="flex flex-col h-full">
            <div className="border-b p-4 flex items-center gap-4">
              <Button variant="ghost" size="icon" className="md:hidden" onClick={() => setActiveConversation(null)}>
                <ArrowLeft className="h-5 w-5" />
              </Button>

<Avatar className="h-10 w-10">
                <AvatarImage src={currentConversation.user.avatar} alt={currentConversation.user.name} />
                <AvatarFallback>{currentConversation.user.name.charAt(0)}</AvatarFallback>
              </Avatar>

<div className="flex-1">
                <div className="flex items-center gap-2">
                  <span className="font-medium">{currentConversation.user.name}</span>
                  {currentConversation.user.online && (
                    <Badge variant="outline" className="bg-green-500/10 text-green-500 text-xs">
                      Online
                    </Badge>
                  )}
                </div>
                <p className="text-xs text-muted-foreground">
                  {currentConversation.user.online ? "Active now" : "Last seen recently"}
                </p>
              </div>

<div className="flex items-center gap-1">
                <Button variant="ghost" size="icon" className="btn-float">
                  <Phone className="h-5 w-5" />
                </Button>
                <Button variant="ghost" size="icon" className="btn-float">
                  <Video className="h-5 w-5" />
                </Button>
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button variant="ghost" size="icon">
                      <MoreVertical className="h-5 w-5" />
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end">
                    <DropdownMenuLabel>Options</DropdownMenuLabel>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem>View profile</DropdownMenuItem>
                    <DropdownMenuItem>View product</DropdownMenuItem>
                    <DropdownMenuItem>Block user</DropdownMenuItem>
                    <DropdownMenuItem>Report conversation</DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </div>
            </div>

<div className="flex-1 overflow-auto p-4 space-y-4">
              <div className="bg-primary/10 p-3 rounded-lg flex items-center gap-3">
                <div className="w-12 h-12 rounded-md overflow-hidden relative flex-shrink-0">
                  <Image
                    src={currentConversation.product.image || "/placeholder.svg"}
                    alt={currentConversation.product.title}
                    fill
                    className="object-cover"
                  />
                </div>
                <div className="flex-1 min-w-0">
                  <h4 className="font-medium text-sm truncate">{currentConversation.product.title}</h4>
                  <p className="text-sm">₹{currentConversation.product.price.toFixed(2)}</p>
                </div>
                <Button size="sm" variant="outline" className="btn-float" asChild>
                  <Link href={`/products/${currentConversation.product.id}`}>View</Link>
                </Button>
              </div>

{messages.map((message) => (
                <div key={message.id} className={`flex ${message.sender === "me" ? "justify-end" : "justify-start"}`}>
                  <div
                    className={`max-w-[80%] rounded-lg p-3 ${
                      message.sender === "me" ? "bg-primary text-primary-foreground" : "bg-muted"
                    }`}
                  >
                    <p>{message.text}</p>
                    <div
                      className={`text-xs mt-1 ${
                        message.sender === "me" ? "text-primary-foreground/70" : "text-muted-foreground"
                      }`}
                    >
                      {message.time}
                    </div>
                  </div>
                </div>
              ))}
            </div>

<form onSubmit={handleSendMessage} className="border-t p-4 flex gap-2">
              <Button type="button" variant="ghost" size="icon" className="btn-float">
                <ImageIcon className="h-5 w-5" />
              </Button>
              <Input
                placeholder="Type a message..."
                value={messageText}
                onChange={(e) => setMessageText(e.target.value)}
                className="flex-1"
              />
              <Button type="submit" size="icon" className="btn-pulse" disabled={!messageText.trim()}>
                <Send className="h-5 w-5" />
              </Button>
            </form>
          </div>
        )}
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/profile/page.tsx"
"use client"

import Link from "next/link"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { useToast } from "@/components/ui/use-toast"
import { useAuth } from "@/components/auth-provider"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

export default function ProfilePage() {
  const { user } = useAuth()
  const { toast } = useToast()
  const [formData, setFormData] = useState({
    name: user?.name || "",
    email: user?.email || "",
    bio: user?.bio || "",
    school: user?.school || "",
  })

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // Here you would typically update the user profile in your backend
    console.log("Profile updated:", formData)
    toast({
      title: "Profile Updated",
      description: "Your profile has been successfully updated.",
    })
  }

if (!user) {
    return (
      <div className="container flex items-center justify-center min-h-[80vh] px-4 py-12">
        <div className="text-center">
          <h1 className="text-2xl font-bold mb-4">Please login to view your profile</h1>
          <Button asChild>
            <Link href="/login">Login</Link>
          </Button>
        </div>
      </div>
    )
  }

return (
    <div className="container px-4 py-12 md:px-6 lg:px-8">
      <h1 className="text-4xl font-bold mb-6">Your Profile</h1>
      <div className="max-w-2xl mx-auto">
        <div className="flex items-center gap-4 mb-8">
          <Avatar className="h-24 w-24">
            <AvatarImage src={user.avatar} alt={user.name} />
            <AvatarFallback>{user.name.charAt(0)}</AvatarFallback>
          </Avatar>
          <div>
            <h2 className="text-2xl font-semibold">{user.name}</h2>
            <p className="text-muted-foreground">{user.email}</p>
          </div>
        </div>
        <form onSubmit={handleSubmit} className="space-y-6">
          <div>
            <label htmlFor="name" className="block text-sm font-medium mb-2">
              Name
            </label>
            <Input id="name" name="name" value={formData.name} onChange={handleChange} required />
          </div>
          <div>
            <label htmlFor="email" className="block text-sm font-medium mb-2">
              Email
            </label>
            <Input id="email" name="email" type="email" value={formData.email} onChange={handleChange} required />
          </div>
          <div>
            <label htmlFor="school" className="block text-sm font-medium mb-2">
              School/University
            </label>
            <Input id="school" name="school" value={formData.school} onChange={handleChange} />
          </div>
          <div>
            <label htmlFor="bio" className="block text-sm font-medium mb-2">
              Bio
            </label>
            <Textarea id="bio" name="bio" value={formData.bio} onChange={handleChange} rows={4} />
          </div>
          <Button type="submit" className="w-full">
            Update Profile
          </Button>
        </form>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/my-listings/page.tsx"
"use client"

import { useState } from "react"
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { useToast } from "@/components/ui/use-toast"
import { useAuth } from "@/components/auth-provider"
import { Edit, Trash2, Eye, MessageSquare } from "lucide-react"

// Mock listings data
const myListings = [
  {
    id: "1",
    title: "Maths NCERT Textbook Class 12",
    description: "RD Sharma, Hindi & English Medium. Excellent condition with solved examples.",
    price: 349.99,
    condition: "Like New",
    category: "NCERT Textbooks",
    image: "https://m.media-amazon.com/images/I/51OsKlKLCIL._SY264_BO1,204,203,200_QL40_FMwebp_.jpg",
    location: "North Campus, DU",
    postedAt: "2 days ago",
    status: "active",
    views: 15,
    inquiries: 3,
  },
  {
    id: "2",
    title: "HC Verma Physics Part 1 & 2",
    description: "Complete set for JEE preparation. Good condition with minimal markings.",
    price: 599.99,
    condition: "Good",
    category: "Competitive Exams",
    image: "https://m.media-amazon.com/images/I/51zXoIqkw8L._SX384_BO1,204,203,200_.jpg",
    location: "South Campus, DU",
    postedAt: "1 week ago",
    status: "sold",
    views: 32,
    inquiries: 7,
  },
  {
    id: "3",
    title: "Organic Chemistry Study Guide",
    description: "Comprehensive guide for NEET aspirants. Like new condition.",
    price: 199.99,
    condition: "Like New",
    category: "Study Guides",
    image: "https://m.media-amazon.com/images/I/51-sSzxgPJL._SX258_BO1,204,203,200_.jpg",
    location: "Kamla Nagar",
    postedAt: "3 days ago",
    status: "active",
    views: 8,
    inquiries: 1,
  },
]

export default function MyListingsPage() {
  const { user } = useAuth()
  const { toast } = useToast()
  const [listings, setListings] = useState(myListings)

const handleDelete = (listingId: string) => {
    setListings(listings.filter((listing) => listing.id !== listingId))
    toast({
      title: "Listing Deleted",
      description: "Your listing has been successfully removed.",
      duration: 3000,
    })
  }

if (!user) {
    return (
      <div className="container flex items-center justify-center min-h-[80vh] px-4 py-12">
        <div className="text-center">
          <h1 className="text-2xl font-bold mb-4">Please login to view your listings</h1>
          <Button asChild>
            <Link href="/login">Login</Link>
          </Button>
        </div>
      </div>
    )
  }

return (
    <div className="container px-4 py-8 md:px-6 lg:px-8">
      <div className="flex flex-col gap-6">
        <div className="flex items-center justify-between">
          <h1 className="text-3xl font-bold">My Listings</h1>
          <Button asChild>
            <Link href="/sell">Create New Listing</Link>
          </Button>
        </div>

{listings.length > 0 ? (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {listings.map((listing) => (
              <Card key={listing.id} className="overflow-hidden">
                <div className="relative aspect-video">
                  <Image src={listing.image || "/placeholder.svg"} alt={listing.title} fill className="object-cover" />
                  <Badge
                    className={`absolute top-2 right-2 ${listing.status === "active" ? "bg-green-500" : "bg-blue-500"}`}
                  >
                    {listing.status === "active" ? "Active" : "Sold"}
                  </Badge>
                </div>

<CardContent className="p-4">
                  <h3 className="font-semibold text-lg mb-2">{listing.title}</h3>
                  <p className="text-muted-foreground text-sm mb-2">{listing.description}</p>
                  <div className="flex justify-between items-center">
                    <span className="text-lg font-bold">₹{listing.price.toFixed(2)}</span>
                    <Badge variant="outline">{listing.condition}</Badge>
                  </div>
                </CardContent>

<CardFooter className="p-4 pt-0 flex flex-wrap gap-2">
                  <Button variant="outline" size="sm" asChild>
                    <Link href={`/products/${listing.id}`}>
                      <Eye className="w-4 h-4 mr-2" />
                      View ({listing.views})
                    </Link>
                  </Button>
                  <Button variant="outline" size="sm" asChild>
                    <Link href={`/messages?listing=${listing.id}`}>
                      <MessageSquare className="w-4 h-4 mr-2" />
                      Inquiries ({listing.inquiries})
                    </Link>
                  </Button>
                  <Button variant="outline" size="sm" asChild>
                    <Link href={`/edit-listing/${listing.id}`}>
                      <Edit className="w-4 h-4 mr-2" />
                      Edit
                    </Link>
                  </Button>
                  <Button variant="outline" size="sm" onClick={() => handleDelete(listing.id)}>
                    <Trash2 className="w-4 h-4 mr-2" />
                    Delete
                  </Button>
                </CardFooter>
              </Card>
            ))}
          </div>
        ) : (
          <div className="text-center py-12">
            <h2 className="text-2xl font-semibold mb-4">You haven't created any listings yet</h2>
            <p className="text-muted-foreground mb-6">Start selling your educational materials today!</p>
            <Button asChild>
              <Link href="/sell">Create Your First Listing</Link>
            </Button>
          </div>
        )}
      </div>
    </div>
  )
}
</article></body></html>