Page structure - v0 by Vercel

i want folder strucute like this /app├── api/│ ├── auth/│ ├── user/│ ├── admin/│ ├── reviews/│ └── subscribe/│├── admin/│ ├── dashboard/│ ├── products/│ ├── orders/│ ├── sliders/│ ├── reviews/│ └── marketing/ → email subscribers│├── user/│ ├── dashboard/│ ├── profile/│ ├── orders/│ ├── wallet/│ └── returns/│├── auth/│ ├── login/│ ├── register/│ ├── forgot-password/│ ├── reset-password/│ └── delete-account/│├── cart/├── checkout/├── products/├── layout.tsx├── page.tsx so plese only give fist page how i want currenlty focus only on give first page //C:\Users\UDAYN\Downloads\Projects\mahadev-baby - Copy\app\page.tsximport { Header } from "@/components/header"import { Hero } from "@/components/hero"import { FeaturedProducts } from "@/components/featured-products"import { ShopInfo } from "@/components/shop-info"import { Reviews } from "@/components/reviews"import { Footer } from "@/components/footer"export default function Home() { return ( <div className="min-h-screen"> <Header /> <main> <Hero /> <FeaturedProducts /> <ShopInfo /> <Reviews /> </main> <Footer /> </div> )} 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 { CartProvider } from "@/components/cart-provider"const inter = Inter({ subsets: ["latin"] })export const metadata: Metadata = { title: "Mahadev Baby Shop Mangrol - Premium Baby Clothes", description: "Premium baby clothes and accessories in Mangrol. Quality products for your little ones.", generator: 'v0.dev'}export default function RootLayout({ children,}: { children: React.ReactNode}) { return ( <html lang="en" suppressHydrationWarning> <body className={inter.className}> <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange> <AuthProvider> <CartProvider> {children} <Toaster /> </CartProvider> </AuthProvider> </ThemeProvider> </body> </html> )} "use client"import { useContext } from "react"import { AuthContext } from "@/components/auth-provider"export function useAuth() { const context = useContext(AuthContext) if (context === undefined) { throw new Error("useAuth must be used within an AuthProvider") } return context} //C:\Users\UDAYN\Downloads\Projects\mahadev-baby - Copy\components\hero.tsx"use client"import Image from "next/image"import Link from "next/link"import { Button } from "@/components/ui/button"import { ArrowRight, Star, Shield, Truck } from "lucide-react"export function Hero() { return ( <section className="relative bg-background text-foreground"> <div className="container py-16 md:py-24"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> {/* Text Content */} <div className="space-y-8"> <div className="space-y-4"> <h1 className="text-4xl md:text-6xl font-bold tracking-tight"> Premium Baby Clothes in{" "} <span className="text-transparent bg-clip-text bg-gradient-to-r from-pink-500 to-purple-600"> Mangrol </span> </h1> <p className="text-xl text-muted-foreground max-w-lg"> Discover the finest collection of baby clothes, accessories, and essentials. Quality products for your little ones with love from Mahadev Baby Shop. </p> </div> {/* Features */} <div className="flex flex-wrap gap-6"> <div className="flex items-center gap-2"> <Star className="h-5 w-5 text-yellow-500" /> <span className="text-sm font-medium">Premium Quality</span> </div> <div className="flex items-center gap-2"> <Shield className="h-5 w-5 text-green-500" /> <span className="text-sm font-medium">Safe Materials</span> </div> <div className="flex items-center gap-2"> <Truck className="h-5 w-5 text-blue-500" /> <span className="text-sm font-medium">Fast Delivery</span> </div> </div> {/* CTA Buttons */} <div className="flex flex-col sm:flex-row gap-4"> <Button size="lg" asChild> <Link href="/products"> Shop Now <ArrowRight className="ml-2 h-4 w-4" /> </Link> </Button> <Button variant="outline" size="lg" asChild> <Link href="/categories">Browse Categories</Link> </Button> </div> {/* Stats */} <div className="grid grid-cols-3 gap-8 pt-8 border-t border-border"> <div className="text-center"> <div className="text-2xl font-bold text-primary">500+</div> <div className="text-sm text-muted-foreground">Happy Customers</div> </div> <div className="text-center"> <div className="text-2xl font-bold text-primary">1000+</div> <div className="text-sm text-muted-foreground">Products</div> </div> <div className="text-center"> <div className="text-2xl font-bold text-primary">5★</div> <div className="text-sm text-muted-foreground">Rating</div> </div> </div> </div> {/* Hero Image */} <div className="relative"> <div className="relative rounded-2xl overflow-hidden bg-muted p-8 shadow-xl"> <Image src="/banner/Baby shop.png" alt="Baby clothes collection" width={500} height={600} priority className="w-full h-auto rounded-lg object-cover" /> </div> </div> </div> </div> </section> )} import Link from "next/link"import { Instagram, MapPin, Phone, Mail, Heart } from "lucide-react"export function Footer() { return ( <footer className="bg-gray-900 text-white"> <div className="container py-12"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> {/* Brand */} <div> <div className="flex items-center space-x-2 mb-4"> <div className="h-8 w-8 rounded-full bg-gradient-to-r from-pink-500 to-purple-600 flex items-center justify-center"> <span className="text-white font-bold text-sm">M</span> </div> <span className="font-bold text-xl">Mahadev Baby Shop</span> </div> <p className="text-gray-300 mb-4"> Premium baby clothes and accessories in Mangrol. Quality products for your little ones. </p> <div className="flex space-x-4"> <Link href="https://www.instagram.com/mahadev_baby_shop?igsh=eDlna2prOTVkNW5z" target="_blank" rel="noopener noreferrer" className="text-gray-300 hover:text-pink-400 transition-colors" > <Instagram className="h-5 w-5" /> </Link> </div> </div> {/* Quick Links */} <div> <h3 className="font-semibold text-lg mb-4">Quick Links</h3> <ul className="space-y-2"> <li> <Link href="/products" className="text-gray-300 hover:text-white transition-colors"> Products </Link> </li> <li> <Link href="/categories" className="text-gray-300 hover:text-white transition-colors"> Categories </Link> </li> <li> <Link href="/offers" className="text-gray-300 hover:text-white transition-colors"> Offers </Link> </li> <li> <Link href="/about" className="text-gray-300 hover:text-white transition-colors"> About Us </Link> </li> </ul> </div> {/* Customer Service */} <div> <h3 className="font-semibold text-lg mb-4">Customer Service</h3> <ul className="space-y-2"> <li> <Link href="/contact" className="text-gray-300 hover:text-white transition-colors"> Contact Us </Link> </li> <li> <Link href="/query" className="text-gray-300 hover:text-white transition-colors"> Ask Query </Link> </li> <li> <Link href="/shipping" className="text-gray-300 hover:text-white transition-colors"> Shipping Info </Link> </li> <li> <Link href="/returns" className="text-gray-300 hover:text-white transition-colors"> Returns </Link> </li> </ul> </div> {/* Contact Info */} <div> <h3 className="font-semibold text-lg mb-4">Contact Info</h3> <div className="space-y-3"> <div className="flex items-center space-x-2"> <Phone className="h-4 w-4 text-pink-400" /> <span className="text-gray-300">Divyesh Nanadaniya</span> </div> <div className="flex items-center space-x-2"> <MapPin className="h-4 w-4 text-pink-400" /> <span className="text-gray-300">Mangrol, Gujarat</span> </div> <div className="flex items-center space-x-2"> <Mail className="h-4 w-4 text-pink-400" /> <span className="text-gray-300">info@mahadevbabyshop.com</span> </div> </div> </div> </div> <div className="border-t border-gray-800 mt-8 pt-8"> <div className="flex flex-col md:flex-row justify-between items-center"> <p className="text-gray-300 text-sm">© 2024 Mahadev Baby Shop. All rights reserved.</p> <p className="text-gray-300 text-sm flex items-center"> Made with <Heart className="h-4 w-4 text-red-500 mx-1" /> for babies in Mangrol </p> </div> </div> </div> </footer> )} // components/header.tsx"use client"import { useState } from "react"import Link from "next/link"import { usePathname } from "next/navigation"import { useAuth } from "@/hooks/use-auth"import { useCart } from "@/hooks/use-cart"import { Button } from "@/components/ui/button"import { Badge } from "@/components/ui/badge"import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"import { ThemeToggle } from "@/components/theme-toggle"import { ShoppingCart, User, Menu, X, Heart, Search, Package } from "lucide-react"import { Input } from "@/components/ui/input"import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"import clsx from "clsx"export function Header() { const { user, logout } = useAuth() const { items } = useCart() const pathname = usePathname() const [isSearchOpen, setIsSearchOpen] = useState(false) const cartItemsCount = items.reduce((sum, item) => sum + item.quantity, 0) const navLinks = [ { href: "/products", label: "Products" }, { href: "/offers", label: "Offers" }, { href: "/contact", label: "Contact" }, { href: "/location", label: "Location" }, ] // Add admin-only navigation const adminNavLinks = user?.isAdmin ? [...navLinks, { href: "/stock-management", label: "Stock Management", icon: Package }] : navLinks 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"> {/* Logo */} <div className="flex items-center gap-6"> <Link href="/" className="flex items-center space-x-2"> <div className="h-8 w-8 rounded-full bg-gradient-to-r from-pink-500 to-purple-600 flex items-center justify-center"> <span className="text-white font-bold text-sm">M</span> </div> <span className="font-bold text-xl">Mahadev Baby Shop</span> </Link> {/* Desktop Nav */} <nav className="hidden md:flex items-center space-x-4"> {adminNavLinks.map(({ href, label, icon: Icon }) => ( <Link key={href} href={href} className={clsx( "text-base font-medium rounded-md px-3 py-1.5 transition-colors flex items-center gap-2", "bg-muted/40 hover:bg-muted", pathname.startsWith(href) && "bg-primary/10 text-primary font-semibold", )} > {Icon && <Icon className="h-4 w-4" />} {label} </Link> ))} </nav> </div> {/* Right section */} <div className="flex items-center gap-4"> {/* Search */} <div className="hidden md:flex items-center"> {isSearchOpen ? ( <div className="flex items-center gap-2"> <Input placeholder="Search products..." className="w-64" autoFocus /> <Button variant="ghost" size="icon" onClick={() => setIsSearchOpen(false)}> <X className="h-4 w-4" /> </Button> </div> ) : ( <Button variant="ghost" size="icon" onClick={() => setIsSearchOpen(true)}> <Search className="h-4 w-4" /> </Button> )} </div> <ThemeToggle /> {/* Wishlist */} <Button variant="ghost" size="icon" asChild> <Link href="/wishlist"> <Heart className="h-4 w-4" /> </Link> </Button> {/* Cart */} <Button variant="ghost" size="icon" className="relative" asChild> <Link href="/cart"> <ShoppingCart className="h-4 w-4" /> {cartItemsCount > 0 && ( <Badge className="absolute -top-2 -right-2 h-5 w-5 flex items-center justify-center p-0 text-xs"> {cartItemsCount} </Badge> )} </Link> </Button> {/* User Menu */} {user ? ( <DropdownMenu> <DropdownMenuTrigger asChild> <Button variant="ghost" size="icon" className="relative flex items-center gap-1"> <User className="h-4 w-4" /> {user.isAdmin && <span className="text-xs text-muted-foreground">(Admin)</span>} </Button></DropdownMenuTrigger> <DropdownMenuContent align="end"> <DropdownMenuItem asChild> <Link href={user.isAdmin ? "/admin" : "/dashboard"}>Dashboard</Link> </DropdownMenuItem> {user.isAdmin && ( <DropdownMenuItem asChild> <Link href="/admin/stock-management">Stock Management</Link> </DropdownMenuItem> )} <DropdownMenuItem asChild> <Link href="/profile">Profile</Link> </DropdownMenuItem> <DropdownMenuItem asChild> <Link href="/orders">Orders</Link> </DropdownMenuItem> <DropdownMenuItem onClick={logout}>Logout</DropdownMenuItem> </DropdownMenuContent> </DropdownMenu> ) : ( <div className="hidden md:flex items-center gap-2"> <Button variant="ghost" asChild> <Link href="/login">Login</Link> </Button> <Button asChild> <Link href="/signup">Sign Up</Link> </Button> </div> )} {/* Mobile Menu */} <Sheet> <SheetTrigger asChild> <Button variant="ghost" size="icon" className="md:hidden"> <Menu className="h-4 w-4" /> </Button> </SheetTrigger> <SheetContent side="right"> <div className="flex flex-col gap-4 mt-8"> {adminNavLinks.map(({ href, label, icon: Icon }) => ( <Link key={href} href={href} className={clsx( "text-base font-medium rounded-md px-3 py-2 transition-colors flex items-center gap-2", "bg-muted/40 hover:bg-muted", pathname.startsWith(href) && "bg-primary/10 text-primary font-semibold", )} > {Icon && <Icon className="h-4 w-4" />} {label} </Link> ))} {!user && ( <> <Button variant="ghost" asChild> <Link href="/login">Login</Link> </Button> <Button asChild> <Link href="/signup">Sign Up</Link> </Button> </> )} </div> </SheetContent> </Sheet> </div> </div> </header> )} // components/reviews.tsx"use client"import type React from "react"import { useState, useEffect } from "react"import { Card, CardContent, CardHeader } from "@/components/ui/card"import { Button } from "@/components/ui/button"import { Textarea } from "@/components/ui/textarea"import { Label } from "@/components/ui/label"import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"import { Star, MessageSquare } from "lucide-react"import { useAuth } from "@/hooks/use-auth"import { useToast } from "@/hooks/use-toast"interface Review { id: string name: string rating: number comment: string date: string avatar?: string}export function Reviews() { const [reviews, setReviews] = useState<Review[]>([]) const [newReview, setNewReview] = useState({ rating: 5, comment: "" }) const [showReviewForm, setShowReviewForm] = useState(false) const { user } = useAuth() const { toast } = useToast() useEffect(() => { // Mock reviews data - replace with actual API call const mockReviews: Review[] = [ // { // id: "1", // name: "Priya Patel", // rating: 5, // comment: // "Excellent quality baby clothes! My daughter loves her new dresses. Divyesh bhai provides great service.", // date: "2024-01-15", // }, // { // id: "2", // name: "Rahul Shah", // rating: 5, // comment: "Best baby shop in Mangrol! Great collection and reasonable prices. Highly recommended.", // date: "2024-01-10", // }, // { // id: "3", // name: "Meera Joshi", // rating: 4, // comment: "Good quality products and friendly service. Will definitely shop again.", // date: "2024-01-05", // }, ] setReviews(mockReviews) }, []) const handleSubmitReview = async (e: React.FormEvent) => { e.preventDefault() if (!user) { toast({ title: "Please login", description: "You need to login to write a review", variant: "destructive", }) return } if (!newReview.comment.trim()) { toast({ title: "Please write a comment", description: "Comment is required to submit a review", variant: "destructive", }) return } try { // Add review logic here - replace with actual API call const review: Review = { id: Date.now().toString(), name: user.name, rating: newReview.rating, comment: newReview.comment, date: new Date().toISOString().split("T")[0], } setReviews((prev) => [review, ...prev]) setNewReview({ rating: 5, comment: "" }) setShowReviewForm(false) toast({ title: "Review submitted", description: "Thank you for your feedback!", }) } catch (error) { toast({ title: "Error", description: "Failed to submit review. Please try again.", variant: "destructive", }) } } return ( <section className="py-16 bg-gray-50 dark:bg-gray-900/50"> <div className="container"> <div className="text-center mb-12"> <h2 className="text-3xl font-bold mb-4">Customer Reviews</h2> <p className="text-gray-600 dark:text-gray-300">See what our happy customers say about us</p> </div> <div className="max-w-4xl mx-auto"> {/* Write Review Button */} <div className="text-center mb-8"> <Button onClick={() => setShowReviewForm(!showReviewForm)} className="mb-4"> <MessageSquare className="h-4 w-4 mr-2" /> Write a Review </Button> </div> {/* Review Form */} {showReviewForm && ( <Card className="mb-8"> <CardHeader> <h3 className="text-lg font-semibold">Write Your Review</h3> </CardHeader> <CardContent> <form onSubmit={handleSubmitReview} className="space-y-4"> <div> <Label htmlFor="rating">Rating</Label> <div className="flex items-center gap-1 mt-1"> {[1, 2, 3, 4, 5].map((star) => ( <button key={star} type="button" onClick={() => setNewReview((prev) => ({ ...prev, rating: star }))} className="p-1" > <Star className={`h-6 w-6 ${ star <= newReview.rating ? "fill-yellow-400 text-yellow-400" : "text-gray-300" }`} /> </button> ))} </div> </div> <div> <Label htmlFor="comment">Your Review</Label> <Textarea id="comment" placeholder="Share your experience with Mahadev Baby Shop..." value={newReview.comment} onChange={(e) => setNewReview((prev) => ({ ...prev, comment: e.target.value }))} className="mt-1" rows={4} /> </div> <div className="flex gap-2"> <Button type="submit">Submit Review</Button> <Button type="button" variant="outline" onClick={() => setShowReviewForm(false)}> Cancel </Button> </div> </form> </CardContent> </Card> )} {/* Reviews List */} <div className="space-y-6"> {reviews.map((review) => ( <Card key={review.id}> <CardContent className="p-6"> <div className="flex items-start gap-4"> <Avatar> <AvatarImage src={review.avatar || "/placeholder.svg"} /> <AvatarFallback> {review.name .split(" ") .map((n) => n[0]) .join("")} </AvatarFallback> </Avatar> <div className="flex-1"> <div className="flex items-center justify-between mb-2"> <h4 className="font-semibold">{review.name}</h4> <span className="text-sm text-gray-500">{review.date}</span> </div> <div className="flex items-center gap-1 mb-3"> {[1, 2, 3, 4, 5].map((star) => ( <Star key={star} className={`h-4 w-4 ${ star <= review.rating ? "fill-yellow-400 text-yellow-400" : "text-gray-300" }`} /> ))} </div> <p className="text-gray-700 dark:text-gray-300">{review.comment}</p> </div> </div> </CardContent> </Card> ))} </div> {reviews.length === 0 && ( <div className="text-center py-12"> <MessageSquare className="h-12 w-12 text-gray-400 mx-auto mb-4" /> <p className="text-gray-500">No reviews yet. Be the first to write one!</p> </div> )} </div> </div> </section> )} //C:\Users\UDAYN\Downloads\Projects\mahadev-baby\components\theme-provider.tsx"use client"import { ThemeProvider as NextThemesProvider } from "next-themes"import type { ThemeProviderProps } from "next-themes"export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return <NextThemesProvider {...props}>{children}</NextThemesProvider>} //C:\Users\UDAYN\Downloads\Projects\mahadev-baby\components\theme-toggle.tsx"use client"import { Moon, Sun } from "lucide-react"import { useTheme } from "next-themes"import { Button } from "@/components/ui/button"export function ThemeToggle() { const { setTheme, theme } = useTheme() return ( <Button variant="ghost" size="icon" onClick={() => setTheme(theme === "light" ? "dark" : "light")}> <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" /> <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" /> <span className="sr-only">Toggle theme</span> </Button> )} and take refenrnce of it fore refernce // components/UserDropdown.tsx"use client"import type React from "react"import { AnimatePresence } from "framer-motion"import { useState, useRef, useEffect } from "react"import { User, Settings, LogOut, ChevronDown, Users, UserCheck, Building2, Shield, Trash2} from "lucide-react"import { Button } from "@/components/ui/button"import { useRouter } from "next/navigation"import Swal from "sweetalert2"import { useAuth, isLoading } from "@/app/contexts/AuthProvider"export default function UserDropdown() { const [isOpen, setIsOpen] = useState(false) const dropdownRef = useRef<HTMLDivElement>(null) const { user } = useAuth() const router = useRouter() useEffect(() => { function handleClickOutside(event: MouseEvent) { if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) { setIsOpen(false) } } document.addEventListener("mousedown", handleClickOutside) return () => document.removeEventListener("mousedown", handleClickOutside) }, []) const handleLogout = async (e: React.MouseEvent) => { e.preventDefault() e.stopPropagation() const result = await Swal.fire({ title: "Are you sure?", text: "You will be logged out.", icon: "warning", showCancelButton: true, confirmButtonColor: "#d33", cancelButtonColor: "#3085d6", confirmButtonText: "Yes, log me out", }) if (result.isConfirmed) { try { const response = await fetch("/api/auth/logout", { method: "POST", credentials: "include", }) if (response.ok) { Swal.fire("Logged out!", "You have been logged out.", "success") setIsOpen(false) window.location.href = "/" } else { Swal.fire("Failed!", "Logout failed. Try again.", "error") } } catch (error) { console.error("Logout error:", error) Swal.fire("Error", "Something went wrong. Please try again.", "error") } } } const handleDashboardClick = (e: React.MouseEvent) => { e.preventDefault() e.stopPropagation() setIsOpen(false) const dashboardPath = user?.isAdmin ? "/admin/dashboard" : `/${user?.role}/dashboard` window.location.href = dashboardPath } const handleDeleteAccount = async () => { const firstConfirm = await Swal.fire({ title: "Are you sure?", text: "Your account will be permanently deleted.", icon: "warning", showCancelButton: true, confirmButtonText: "Yes, delete it!", }) if (!firstConfirm.isConfirmed) return const secondConfirm = await Swal.fire({ title: "Final confirmation", text: "This cannot be undone. Proceed?", icon: "question", showCancelButton: true, confirmButtonText: "Delete my account", }) if (!secondConfirm.isConfirmed) return Swal.fire({ title: "Deleting...", text: "Please wait...", allowOutsideClick: false, allowEscapeKey: false, didOpen: () => Swal.showLoading(), }) try { const res = await fetch("/api/delete-account", { method: "DELETE", credentials: "include", }) const data = await res.json() if (res.ok) { Swal.fire({ icon: "success", title: "Deleted!", text: data.message, }) await fetch("/api/auth/logout", { method: "POST" }) window.location.href = "/" } else { Swal.fire({ icon: "error", title: "Failed", text: data.error || "Something went wrong.", }) } } catch (error) { Swal.fire({ icon: "error", title: "Error", text: "Network or server error.", }) } } // if (!user) return null if (isLoading || !user) return null const getRoleIcon = () => { if (user.isAdmin) return <Shield className="w-4 h-4 text-white" /> switch (user.role) { case "user": return <Users className="w-4 h-4 text-white" /> case "doctor": return <UserCheck className="w-4 h-4 text-white" /> case "hospital": return <Building2 className="w-4 h-4 text-white" /> default: return <User className="w-4 h-4 text-white" /> } } const getRoleColor = () => { if (user.isAdmin) return "from-red-500 to-red-600" switch (user.role) { case "user": return "from-blue-500 to-blue-600" case "doctor": return "from-green-500 to-green-600" case "hospital": return "from-purple-500 to-purple-600" default: return "from-gray-500 to-gray-600" } } return ( <div className="relative" ref={dropdownRef}> <Button variant="ghost" className="flex items-center space-x-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full px-4 py-2 transition-colors duration-200" onClick={(e) => { e.preventDefault() e.stopPropagation() setIsOpen(!isOpen) }} > <div className={`w-8 h-8 bg-gradient-to-br ${getRoleColor()} rounded-full flex items-center justify-center shadow-sm`}> {getRoleIcon()} </div> <span className="hidden sm:block font-medium text-gray-700 dark:text-gray-300 max-w-32 truncate"> {user.name} </span> <ChevronDown className={`w-4 h-4 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`} /> </Button> <AnimatePresence> {isOpen && ( <div className="absolute right-0 top-full mt-2 w-64 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg overflow-visible z-[9999]"> <div className="p-4 border-b border-gray-100 dark:border-gray-700"> <p className="font-semibold text-gray-900 dark:text-white">{user.name}</p> <p className="text-sm text-gray-600 dark:text-gray-400">{user.email}</p> <p className="text-xs text-gray-400 capitalize">{user.isAdmin ? "Admin" : `${user.role} account`}</p> </div> <div> <button onClick={handleDashboardClick} className="w-full text-left px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-800 flex items-center gap-3 text-gray-700 dark:text-gray-300" > {getRoleIcon()} <span>Dashboard</span> </button> <button onClick={() => { setIsOpen(false) router.push("/auth/forgot-password") }} className="w-full text-left px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-800 flex items-center gap-3 text-gray-700 dark:text-gray-300" > <Settings className="w-4 h-4" /> <span>Change Password</span> </button> <button onClick={handleDeleteAccount} className="w-full text-left px-4 py-3 hover:bg-red-50 dark:hover:bg-red-900/20 flex items-center gap-3 text-red-600 dark:text-red-400" > <Trash2 className="w-4 h-4" /> <span>Delete Account</span> </button> </div> <div className="border-t border-gray-100 dark:border-gray-700"> <button onClick={handleLogout} className="w-full text-left px-4 py-3 hover:bg-red-50 dark:hover:bg-red-900/20 flex items-center gap-3 text-red-600 dark:text-red-400" > <LogOut className="w-4 h-4" /> <span>Logout</span> </button> </div> </div> )} </AnimatePresence> </div> )} //C:\Users\UDAYN\Downloads\healthcare-platform - Copy\app\contexts\AuthProvider.tsx"use client"import React, { createContext, useContext, useEffect, useState } from "react"import { usePathname } from "next/navigation"import type { DecodedToken } from "@/lib/auth"import { toast } from "react-hot-toast"interface AuthContextType { isAuthenticated: boolean user: DecodedToken | null isLoading: boolean logout: () => Promise<void>}const AuthContext = createContext<AuthContextType | undefined>(undefined)export const AuthProvider = ({ children }: { children: React.ReactNode }) => { const [user, setUser] = useState<DecodedToken | null>(null) const [isLoading, setIsLoading] = useState(true) const pathname = usePathname() // 🔥 Watch for page changes const logout = async () => { try { const res = await fetch("/api/auth/logout", { method: "POST", credentials: "include", }) if (res.ok) { setUser(null) if (typeof window !== "undefined") { window.location.href = "/auth/login" } } else { toast.error("Logout failed.") } } catch (error) { console.error("Logout error:", error) toast.error("Error during logout.") } } const checkAuth = async () => { try { const res = await fetch("/api/auth/me", { method: "GET", credentials: "include", }) const data = await res.json() if (res.ok && data.success && data.user) { setUser(data.user) } else { setUser(null) } } catch (error) { console.error("Auth check error:", error) setUser(null) } finally { setIsLoading(false) } } useEffect(() => { checkAuth() }, [pathname]) // 🔁 Check auth every time path changes return ( <AuthContext.Provider value={{ isAuthenticated: !!user, user, isLoading, logout, }} > {children} </AuthContext.Provider> )}export const useAuth = () => { const context = useContext(AuthContext) if (!context) { throw new Error("useAuth must be used within an AuthProvider") } return context} so give only first page =currenly page is good give same ad noe=w just add new like this make mobile responsive so curenlt give onnly first page how i tell you just want first page currenly moblvire resposnsive also boible resposive also and my code is write just add new fesite hiow i teel you and remove offersection and i want fisrt page like in background all items are moving like small iond like clothes baby , toys icond small icond and than small baby products like than in small size and and if check slider image aiclavle than put after Hero sectionn so give like that cirrenly code is almost good just eant to more ui and fetcute how i tell you take time and give if any questionwan tthan ask

Show full message

50d ago