92:I[903690,["/chat-static/_next/static/chunks/1hm3q0j7vx_jl.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/30cg74pivru03.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/1v3tu-ayeqrg_.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/2ir1-mfl-mxun.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/3139m71i45f_m.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/1d27q4_h4it5w.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/24itveg68o90k.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/10df6ghephwfh.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/3g-fs4xgai-g5.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/45cgj0o2dd5ka.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/1vo2s82fx-91j.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/2b7mx-6g-n-p-.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/3qbqqz-30yf_e.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/0n2vqkuu3m7mv.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/151itv_w2dl-d.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/2oig3hoirmj64.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/1pzl0qjyusfha.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/1ilnu97ogkb5i.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/0wkini5l9f_9s.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/1zvm-f33paz4c.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/43emq6v2fv13u.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/02rh369i5mh-5.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/2iu_2gtqlb9fh.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/1e1jj32nu3059.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/054nyoml5t8yc.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/0tmnhs5rj_pj7.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/3z0af037uy3y2.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/130lebo2db7jj.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/2ffzcp23_gird.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/311y33ni2zbzy.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/0b2jr5pl--hcz.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/3ji6b0r5j__17.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/01ptiup-2nj2g.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/346rh7hczex73.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/0ite474mxrjfz.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/0rr2h1ez7ud1-.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/0xushjtk7v84v.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/42e91lyqcvypr.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF"],"ExplicitChatIdProvider"] 93:I[838238,["/chat-static/_next/static/chunks/1hm3q0j7vx_jl.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/30cg74pivru03.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/1v3tu-ayeqrg_.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/2ir1-mfl-mxun.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/3139m71i45f_m.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/1d27q4_h4it5w.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/24itveg68o90k.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/10df6ghephwfh.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/3g-fs4xgai-g5.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/45cgj0o2dd5ka.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/1vo2s82fx-91j.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/2b7mx-6g-n-p-.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/3qbqqz-30yf_e.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/0n2vqkuu3m7mv.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/151itv_w2dl-d.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/2oig3hoirmj64.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/1pzl0qjyusfha.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/1ilnu97ogkb5i.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/0wkini5l9f_9s.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/1zvm-f33paz4c.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/43emq6v2fv13u.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/02rh369i5mh-5.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/2iu_2gtqlb9fh.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/1e1jj32nu3059.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/054nyoml5t8yc.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/0tmnhs5rj_pj7.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/3z0af037uy3y2.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/130lebo2db7jj.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/2ffzcp23_gird.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/311y33ni2zbzy.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/0b2jr5pl--hcz.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/3ji6b0r5j__17.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/01ptiup-2nj2g.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/346rh7hczex73.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/0ite474mxrjfz.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/0rr2h1ez7ud1-.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/0xushjtk7v84v.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF","/chat-static/_next/static/chunks/42e91lyqcvypr.js?dpl=dpl_GKCxgZYuMHZaP7gJ6dR7rS7v2SQF"],"SWRDataProvider"] 94:T48fc,[V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true" import { fontFamily } from "tailwindcss/defaultTheme" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}"], theme: { extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "#415444", foreground: "#ffffff", }, secondary: { DEFAULT: "#e0e5ce", foreground: "#415444", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, fontFamily: { sans: ["var(--font-sans)", ...fontFamily.sans], }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="page.tsx" isEdit="true" "use client" import { Bell, Home, LogOut, Mail, Search, Settings, ShoppingBag, User2 } from "lucide-react" import Image from "next/image" import Link from "next/link" import { useCallback, useState } from "react" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Separator } from "@/components/ui/separator" import { toast } from "@/components/ui/use-toast" interface CartItem { id: string name: string price: number size: string quantity: number image: string } export default function Component() { const [cartItems, setCartItems] = useState([ { id: "1", name: "Monocle Canvas Tote Bag", price: 213.99, size: "L", quantity: 1, image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/The%20Best%20Media%20Tote%20Bags,%20Ranked.jpg-z2O2nGPSTrjey8xEM1cc5aTI2ggjXE.jpeg", }, { id: "2", name: "Square One District Tote", price: 189.99, size: "M", quantity: 1, image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Index,%20Vanderbrand.jpg-Fv7HHkBaQgZe7HG3hbz5aojPoFRIuo.jpeg", }, ]) const popularItems = [ { id: "1", name: "Monocle Canvas Tote Bag", price: 213.99, rating: 4.9, image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/The%20Best%20Media%20Tote%20Bags,%20Ranked.jpg-z2O2nGPSTrjey8xEM1cc5aTI2ggjXE.jpeg", }, { id: "2", name: "Square One District Tote", price: 189.99, rating: 4.9, image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Index,%20Vanderbrand.jpg-Fv7HHkBaQgZe7HG3hbz5aojPoFRIuo.jpeg", }, { id: "3", name: "Sporty & Rich Canvas Tote", price: 221.99, rating: 4.9, image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/download%20(2).jpg-zbeT25jMphcVf4DmpAlTVsGALg88Zn.jpeg", }, ] const updateQuantity = useCallback((itemId: string, change: number) => { setCartItems( (prevItems) => prevItems .map((item) => { if (item.id === itemId) { const newQuantity = Math.max(0, item.quantity + change) if (newQuantity === 0) { toast({ title: "Item removed", description: `${item.name} has been removed from your cart.`, }) return null } return { ...item, quantity: newQuantity } } return item }) .filter(Boolean) as CartItem[], ) }, []) const addToCart = useCallback((item: (typeof popularItems)[0]) => { setCartItems((prevItems) => { const existingItem = prevItems.find((cartItem) => cartItem.id === item.id) if (existingItem) { return prevItems.map((cartItem) => cartItem.id === item.id ? { ...cartItem, quantity: cartItem.quantity + 1 } : cartItem, ) } toast({ title: "Item added to cart", description: `${item.name} has been added to your cart.`, }) return [...prevItems, { ...item, quantity: 1, size: "M" }] }) }, []) const calculateTotal = useCallback((items: CartItem[]) => { return items.reduce((total, item) => total + item.price * item.quantity, 0) }, []) const cartTotal = calculateTotal(cartItems) return (

{/* Sidebar */} {/* Main Content */}

Hi, Dollar! 👋

Welcome Back

BEST OFFERS

Tote Bag Collection

Join and discover the best product according to your passion

Flash Sale ✨

75% OFF

Popular Collection

{popularItems.map((item) => (

{item.name}

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

({item.rating})

$ {item.price}

))}

{/* Cart Sidebar */}

My Cart

{cartItems.map((item) => (

{item.name}

SIZE {item.size}

$ {item.price}

{item.quantity}

))}

Sub Total

$ {cartTotal.toFixed(2)}

Shipping

FREE

Total

$ {cartTotal.toFixed(2)}

) } 88:["$","$L92",null,{"chatId":"MpJGlXxML4D","children":["$","$L93",null,{"data":{"@\"active-block\",\"MpJGlXxML4D\",":{"id":"b_xdFNCLnc416","messageId":"fKBCpsc65SRa892b5yo5ICDtcd8AGidm","source":"$94","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"tote-bag-store","type":"code-project","project":"tote-bag-store"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"MpJGlXxML4D\",":false,"":null},"children":"$L95"}]}]

About

Tags

Share

About

Tags

Share

More from dollargill

More Templates Like This