[V0_FILE]plaintext:file=".gitignore" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" # Vitta store design *Automatically synced with your [v0.dev](https://v0.dev) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/ju-s-projects/v0-vitta-store-design) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.dev-black?style=for-the-badge)](https://v0.dev/chat/projects/JEWKdVnOQ6U) ## Overview This repository will stay in sync with your deployed chats on [v0.dev](https://v0.dev). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.dev](https://v0.dev). ## Deployment Your project is live at: **[https://vercel.com/ju-s-projects/v0-vitta-store-design](https://vercel.com/ju-s-projects/v0-vitta-store-design)** ## Build your app Continue building your app on: **[https://v0.dev/chat/projects/JEWKdVnOQ6U](https://v0.dev/chat/projects/JEWKdVnOQ6U)** ## How It Works 1. Create and modify your project using [v0.dev](https://v0.dev) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescriptreact:file="app/admin/page.tsx" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Plus, Edit, Trash2, Package, Users, ShoppingCart, TrendingUp } from "lucide-react" // Dados simulados const initialProducts = [ { id: 1, name: "Camiseta Dry Fit Premium", price: 89.9, category: "roupas", stock: 25, status: "ativo", }, { id: 2, name: "Garrafa Térmica 1L", price: 45.9, category: "acessorios", stock: 15, status: "ativo", }, { id: 3, name: "Straps de Levantamento", price: 35.9, category: "acessorios", stock: 8, status: "ativo", }, ] const stats = { totalProducts: 156, totalUsers: 1247, totalOrders: 89, monthlyRevenue: 45670.5, } export default function AdminPage() { const [products, setProducts] = useState(initialProducts) const [isAddingProduct, setIsAddingProduct] = useState(false) const [editingProduct, setEditingProduct] = useState(null) const [newProduct, setNewProduct] = useState({ name: "", price: "", category: "", stock: "", description: "", }) const handleAddProduct = (e: React.FormEvent) => { e.preventDefault() const product = { id: Date.now(), name: newProduct.name, price: Number.parseFloat(newProduct.price), category: newProduct.category, stock: Number.parseInt(newProduct.stock), status: "ativo", } setProducts((prev) => [...prev, product]) setNewProduct({ name: "", price: "", category: "", stock: "", description: "" }) setIsAddingProduct(false) alert("Produto adicionado com sucesso!") } const handleDeleteProduct = (id: number) => { if (confirm("Tem certeza que deseja excluir este produto?")) { setProducts((prev) => prev.filter((p) => p.id !== id)) alert("Produto excluído com sucesso!") } } const handleEditProduct = (id: number) => { setEditingProduct(id) const product = products.find((p) => p.id === id) if (product) { setNewProduct({ name: product.name, price: product.price.toString(), category: product.category, stock: product.stock.toString(), description: "", }) } } const handleUpdateProduct = (e: React.FormEvent) => { e.preventDefault() if (editingProduct) { setProducts((prev) => prev.map((p) => p.id === editingProduct ? { ...p, name: newProduct.name, price: Number.parseFloat(newProduct.price), category: newProduct.category, stock: Number.parseInt(newProduct.stock), } : p, ), ) setEditingProduct(null) setNewProduct({ name: "", price: "", category: "", stock: "", description: "" }) alert("Produto atualizado com sucesso!") } } return (

{/* Header */}

Painel Administrativo - Vitta

Dashboard Produtos Pedidos Usuários {/* Dashboard */}

Total de Produtos

{stats.totalProducts}

Usuários Cadastrados

{stats.totalUsers}

Pedidos do Mês

{stats.totalOrders}

Receita Mensal

R$ {stats.monthlyRevenue.toLocaleString("pt-BR", { minimumFractionDigits: 2 })}

Produtos com Estoque Baixo

{products .filter((p) => p.stock < 10) .map((product) => (

{product.name} Estoque: {product.stock}

))}

{/* Produtos */}

Gerenciar Produtos

{/* Formulário de Adicionar/Editar Produto */} {(isAddingProduct || editingProduct) && ( {editingProduct ? "Editar Produto" : "Adicionar Novo Produto"}

Nome do Produto setNewProduct((prev) => ({ ...prev, name: e.target.value }))} className="border-blue-200 focus:border-blue-400" required />

Preço (R$) setNewProduct((prev) => ({ ...prev, price: e.target.value }))} className="border-blue-200 focus:border-blue-400" required />

Categoria

Estoque setNewProduct((prev) => ({ ...prev, stock: e.target.value }))} className="border-blue-200 focus:border-blue-400" required />

Descrição

setNewProduct((prev) => ({ ...prev, description: e.target.value }))}
                        className="border-blue-200 focus:border-blue-400"
                        rows={3}
                      />
                    </div>
                    <div className="flex space-x-2">
                      <Button type="submit" className="bg-blue-600 hover:bg-blue-700">
                        {editingProduct ? "Atualizar" : "Adicionar"} Produto
                      </Button>
                      <Button
                        type="button"
                        variant="outline"
                        onClick={() => {
                          setIsAddingProduct(false)
                          setEditingProduct(null)
                          setNewProduct({ name: "", price: "", category: "", stock: "", description: "" })
                        }}
                        className="border-blue-200 text-blue-600 hover:bg-blue-50"
                      >
                        Cancelar
                      </Button>
                    </div>
                  </form>
                </CardContent>
              </Card>
            )}

{/* Lista de Produtos */}
            <Card className="border-blue-200">
              <CardHeader>
                <CardTitle className="text-blue-900">Produtos Cadastrados</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="overflow-x-auto">
                  <table className="w-full">
                    <thead>
                      <tr className="border-b border-blue-200">
                        <th className="text-left py-2 text-blue-900">Nome</th>
                        <th className="text-left py-2 text-blue-900">Categoria</th>
                        <th className="text-left py-2 text-blue-900">Preço</th>
                        <th className="text-left py-2 text-blue-900">Estoque</th>
                        <th className="text-left py-2 text-blue-900">Status</th>
                        <th className="text-left py-2 text-blue-900">Ações</th>
                      </tr>
                    </thead>
                    <tbody>
                      {products.map((product) => (
                        <tr key={product.id} className="border-b border-blue-100">
                          <td className="py-3 text-blue-900">{product.name}</td>
                          <td className="py-3">
                            <Badge variant="outline" className="border-blue-200 text-blue-600">
                              {product.category}
                            </Badge>
                          </td>
                          <td className="py-3 text-blue-900">R$ {product.price.toFixed(2)}</td>
                          <td className="py-3">
                            <Badge variant={product.stock < 10 ? "destructive" : "default"}>{product.stock}</Badge>
                          </td>
                          <td className="py-3">
                            <Badge variant="default" className="bg-green-100 text-green-800">
                              {product.status}
                            </Badge>
                          </td>
                          <td className="py-3">
                            <div className="flex space-x-2">
                              <Button
                                size="sm"
                                variant="outline"
                                onClick={() => handleEditProduct(product.id)}
                                className="border-blue-200 text-blue-600 hover:bg-blue-50"
                              >
                                <Edit className="h-4 w-4" />
                              </Button>
                              <Button
                                size="sm"
                                variant="outline"
                                onClick={() => handleDeleteProduct(product.id)}
                                className="border-red-200 text-red-600 hover:bg-red-50"
                              >
                                <Trash2 className="h-4 w-4" />
                              </Button>
                            </div>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

{/* Pedidos */}
          <TabsContent value="orders">
            <Card className="border-blue-200">
              <CardHeader>
                <CardTitle className="text-blue-900">Pedidos Recentes</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-blue-600">Funcionalidade de gerenciamento de pedidos em desenvolvimento...</p>
              </CardContent>
            </Card>
          </TabsContent>

{/* Usuários */}
          <TabsContent value="users">
            <Card className="border-blue-200">
              <CardHeader>
                <CardTitle className="text-blue-900">Usuários Cadastrados</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-blue-600">Funcionalidade de gerenciamento de usuários em desenvolvimento...</p>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}
[V0_FILE]css:file="app/animations.css"
/* Animações personalizadas para o site Vitta */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes bounceOnce {
  0%,
  20%,
  53%,
  80%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    transform: translate3d(0, -8px, 0);
  }
  70% {
    transform: translate3d(0, -4px, 0);
  }
  90% {
    transform: translate3d(0, -2px, 0);
  }
}

@keyframes bounceSmall {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes heartBeat {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.2);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.2);
  }
  70% {
    transform: scale(1);
  }
}

@keyframes heartFill {
  0% {
    transform: scale(1);
    color: currentColor;
  }
  50% {
    transform: scale(1.2);
    color: #ef4444;
  }
  100% {
    transform: scale(1);
    color: #ef4444;
  }
}

@keyframes pulsePrice {
  0%,
  100% {
    transform: scale(1);
    color: #1e40af;
  }
  50% {
    transform: scale(1.05);
    color: #2563eb;
  }
}

@keyframes pulseSuccess {
  0%,
  100% {
    background-color: #2563eb;
    transform: scale(1);
  }
  50% {
    background-color: #16a34a;
    transform: scale(1.02);
  }
}

@keyframes numberChange {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
    color: #2563eb;
  }
  100% {
    transform: scale(1);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes wiggle {
  0%,
  7% {
    transform: rotateZ(0);
  }
  15% {
    transform: rotateZ(-15deg);
  }
  20% {
    transform: rotateZ(10deg);
  }
  25% {
    transform: rotateZ(-10deg);
  }
  30% {
    transform: rotateZ(6deg);
  }
  35% {
    transform: rotateZ(-4deg);
  }
  40%,
  100% {
    transform: rotateZ(0);
  }
}

/* Classes de animação */
.animate-fade-in {
  animation: fadeIn 0.6s ease-out;
}

.animate-slide-up {
  animation: slideUp 0.6s ease-out;
}

.animate-slide-up-delay-1 {
  animation: slideUp 0.6s ease-out 0.1s both;
}

.animate-slide-up-delay-2 {
  animation: slideUp 0.6s ease-out 0.2s both;
}

.animate-slide-up-delay-3 {
  animation: slideUp 0.6s ease-out 0.3s both;
}

.animate-slide-up-delay-4 {
  animation: slideUp 0.6s ease-out 0.4s both;
}

.animate-slide-up-delay-5 {
  animation: slideUp 0.6s ease-out 0.5s both;
}

.animate-slide-in-left {
  animation: slideInLeft 0.5s ease-out both;
}

.animate-slide-in-right {
  animation: slideInRight 0.5s ease-out both;
}

.animate-bounce-once {
  animation: bounceOnce 0.8s ease-out;
}

.animate-bounce-small {
  animation: bounceSmall 2s ease-in-out infinite;
}

.animate-heart-beat {
  animation: heartBeat 1s ease-in-out;
}

.animate-heart-fill {
  animation: heartFill 0.6s ease-out;
}

.animate-pulse-price {
  animation: pulsePrice 2s ease-in-out infinite;
}

.animate-pulse-success {
  animation: pulseSuccess 0.6s ease-out;
}

.animate-number-change {
  animation: numberChange 0.3s ease-out;
}

.animate-shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200px 100%;
  animation: shimmer 1.5s infinite;
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-scale-in {
  animation: scaleIn 0.3s ease-out;
}

.animate-wiggle {
  animation: wiggle 1s ease-in-out;
}

/* Hover animations */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.hover-glow {
  transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.3);
}

.hover-rotate {
  transition: transform 0.3s ease;
}

.hover-rotate:hover {
  transform: rotate(5deg);
}

/* Loading animations */
.loading-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200px 100%;
  animation: shimmer 1.5s infinite;
}

/* Stagger animations for lists */
.stagger-item {
  opacity: 0;
  animation: slideUp 0.6s ease-out forwards;
}

.stagger-item:nth-child(1) {
  animation-delay: 0.1s;
}
.stagger-item:nth-child(2) {
  animation-delay: 0.2s;
}
.stagger-item:nth-child(3) {
  animation-delay: 0.3s;
}
.stagger-item:nth-child(4) {
  animation-delay: 0.4s;
}
.stagger-item:nth-child(5) {
  animation-delay: 0.5s;
}
.stagger-item:nth-child(6) {
  animation-delay: 0.6s;
}
.stagger-item:nth-child(7) {
  animation-delay: 0.7s;
}
.stagger-item:nth-child(8) {
  animation-delay: 0.8s;
}

/* Responsive animations */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
[V0_FILE]typescriptreact:file="app/carrinho/page.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import Link from "next/link"
import { ArrowLeft, Minus, Plus, Trash2, ShoppingBag, Sparkles } from "lucide-react"

// Dados simulados do carrinho
const initialCartItems = [
  {
    id: 1,
    name: "Camiseta Dry Fit Premium",
    price: 89.9,
    quantity: 2,
    image: "/placeholder.svg?height=100&width=100",
  },
  {
    id: 2,
    name: "Garrafa Térmica 1L",
    price: 45.9,
    quantity: 1,
    image: "/placeholder.svg?height=100&width=100",
  },
  {
    id: 3,
    name: "Straps de Levantamento",
    price: 35.9,
    quantity: 1,
    image: "/placeholder.svg?height=100&width=100",
  },
]

export default function CarrinhoPage() {
  const [cartItems, setCartItems] = useState(initialCartItems)
  const [cupomDesconto, setCupomDesconto] = useState("")
  const [desconto, setDesconto] = useState(0)
  const [isAnimating, setIsAnimating] = useState<number | null>(null)

const updateQuantity = (id: number, newQuantity: number) => {
    if (newQuantity <= 0) {
      removeItem(id)
      return
    }

setIsAnimating(id)
    setTimeout(() => setIsAnimating(null), 300)

setCartItems((prev) => prev.map((item) => (item.id === id ? { ...item, quantity: newQuantity } : item)))
  }

const removeItem = (id: number) => {
    setCartItems((prev) => prev.filter((item) => item.id !== id))
  }

const aplicarCupom = () => {
    if (cupomDesconto.toLowerCase() === "vitta10") {
      setDesconto(0.1)
      alert("Cupom aplicado! 10% de desconto")
    } else if (cupomDesconto.toLowerCase() === "primeira20") {
      setDesconto(0.2)
      alert("Cupom aplicado! 20% de desconto")
    } else {
      alert("Cupom inválido")
    }
  }

const subtotal = cartItems.reduce((total, item) => total + item.price * item.quantity, 0)
  const valorDesconto = subtotal * desconto
  const frete = subtotal > 150 ? 0 : 15.9
  const total = subtotal - valorDesconto + frete

const finalizarCompra = () => {
    if (cartItems.length === 0) {
      alert("Seu carrinho está vazio!")
      return
    }
    window.location.href = "/pagamento"
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-blue-100">
      {/* Header */}
      <header className="bg-blue-900 text-white shadow-lg animate-slide-up">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <Link
              href="/"
              className="inline-flex items-center text-white hover:text-blue-200 transition-all duration-300 hover:scale-105"
            >
              <ArrowLeft className="h-4 w-4 mr-2" />
              Continuar comprando
            </Link>
            <h1 className="text-2xl font-bold animate-float">Carrinho de Compras</h1>
            <div className="w-32"></div>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-8">
        {cartItems.length === 0 ? (
          <Card className="text-center py-12 border-blue-200 animate-scale-in">
            <CardContent>
              <ShoppingBag className="h-16 w-16 text-blue-400 mx-auto mb-4 animate-float" />
              <h2 className="text-2xl font-bold text-blue-900 mb-4 animate-slide-up">Seu carrinho está vazio</h2>
              <p className="text-blue-600 mb-6 animate-slide-up-delay-1">
                Adicione alguns produtos incríveis da Vitta!
              </p>
              <Link href="/">
                <Button className="bg-blue-600 hover:bg-blue-700 transition-all duration-300 transform hover:scale-105 animate-slide-up-delay-2">
                  Explorar Produtos
                </Button>
              </Link>
            </CardContent>
          </Card>
        ) : (
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            {/* Items do Carrinho */}
            <div className="lg:col-span-2">
              <Card className="border-blue-200 animate-slide-up">
                <CardHeader>
                  <CardTitle className="text-blue-900 flex items-center">
                    <ShoppingBag className="h-5 w-5 mr-2" />
                    Itens no Carrinho ({cartItems.length})
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  {cartItems.map((item, index) => (
                    <div
                      key={item.id}
                      className={`flex items-center space-x-4 p-4 border border-blue-100 rounded-lg transition-all duration-500 hover:shadow-md stagger-item ${
                        isAnimating === item.id ? "animate-pulse-success" : ""
                      }`}
                      style={{ animationDelay: `${index * 100}ms` }}
                    >
                      <img
                        src={item.image || "/placeholder.svg"}
                        alt={item.name}
                        className="w-20 h-20 object-cover rounded-lg transition-transform duration-300 hover:scale-105"
                      />
                      <div className="flex-1">
                        <h3 className="font-semibold text-blue-900">{item.name}</h3>
                        <p className="text-blue-600">R$ {item.price.toFixed(2)}</p>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() => updateQuantity(item.id, item.quantity - 1)}
                          className="border-blue-200 text-blue-600 hover:bg-blue-50 transition-all duration-200 hover:scale-110"
                        >
                          <Minus className="h-4 w-4" />
                        </Button>
                        <span
                          className={`w-8 text-center font-semibold transition-all duration-300 ${
                            isAnimating === item.id ? "animate-number-change" : ""
                          }`}
                        >
                          {item.quantity}
                        </span>
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() => updateQuantity(item.id, item.quantity + 1)}
                          className="border-blue-200 text-blue-600 hover:bg-blue-50 transition-all duration-200 hover:scale-110"
                        >
                          <Plus className="h-4 w-4" />
                        </Button>
                      </div>
                      <div className="text-right">
                        <p className="font-bold text-blue-900">R$ {(item.price * item.quantity).toFixed(2)}</p>
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => removeItem(item.id)}
                          className="text-red-500 hover:text-red-700 hover:bg-red-50 transition-all duration-300 hover:scale-110"
                        >
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>
                  ))}
                </CardContent>
              </Card>
            </div>

{/* Resumo do Pedido */}
            <div>
              <Card className="border-blue-200 sticky top-4 animate-slide-up-delay-1">
                <CardHeader>
                  <CardTitle className="text-blue-900 flex items-center">
                    <Sparkles className="h-5 w-5 mr-2" />
                    Resumo do Pedido
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  {/* Cupom de Desconto */}
                  <div className="animate-slide-up-delay-2">
                    <label className="block text-sm font-medium text-blue-900 mb-2">Cupom de Desconto</label>
                    <div className="flex space-x-2">
                      <Input
                        placeholder="Digite o cupom"
                        value={cupomDesconto}
                        onChange={(e) => setCupomDesconto(e.target.value)}
                        className="border-blue-200 focus:border-blue-400 transition-all duration-300 focus:scale-105"
                      />
                      <Button
                        onClick={aplicarCupom}
                        variant="outline"
                        className="border-blue-200 text-blue-600 hover:bg-blue-50 bg-transparent transition-all duration-300 hover:scale-105"
                      >
                        Aplicar
                      </Button>
                    </div>
                    <p className="text-xs text-blue-500 mt-1">Experimente: VITTA10 ou PRIMEIRA20</p>
                  </div>

{/* Valores */}
                  <div className="space-y-2 pt-4 border-t border-blue-100 animate-slide-up-delay-3">
                    <div className="flex justify-between">
                      <span className="text-blue-700">Subtotal:</span>
                      <span className="text-blue-900">R$ {subtotal.toFixed(2)}</span>
                    </div>
                    {desconto > 0 && (
                      <div className="flex justify-between text-green-600 animate-slide-in-left">
                        <span>Desconto ({(desconto * 100).toFixed(0)}%):</span>
                        <span>-R$ {valorDesconto.toFixed(2)}</span>
                      </div>
                    )}
                    <div className="flex justify-between">
                      <span className="text-blue-700">Frete:</span>
                      <span className="text-blue-900">{frete === 0 ? "Grátis" : `R$ ${frete.toFixed(2)}`}</span>
                    </div>
                    {subtotal < 150 && (
                      <p className="text-xs text-blue-500 animate-fade-in">
                        Frete grátis para compras acima de R$ 150,00
                      </p>
                    )}
                    <div className="flex justify-between text-lg font-bold text-blue-900 pt-2 border-t border-blue-200 animate-pulse-price">
                      <span>Total:</span>
                      <span>R$ {total.toFixed(2)}</span>
                    </div>
                  </div>

<Button
                    onClick={finalizarCompra}
                    className="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 text-lg transition-all duration-300 transform hover:scale-105 animate-slide-up-delay-4"
                  >
                    Finalizar Compra
                  </Button>

<div className="text-center text-sm text-blue-600 animate-fade-in">
                    <p>🔒 Compra 100% segura</p>
                    <p>📦 Entrega em todo o Brasil</p>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/compartilhar/page.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import Link from "next/link"
import {
  ArrowLeft,
  Share2,
  Copy,
  Facebook,
  Twitter,
  MessageCircle,
  Mail,
  QrCode,
  Check,
  Gift,
  Users,
  TrendingUp,
  Heart,
} from "lucide-react"

export default function CompartilharPage() {
  const [copied, setCopied] = useState(false)
  const [shareStats, setShareStats] = useState({
    totalShares: 1247,
    thisWeek: 89,
    referrals: 156,
  })

const siteUrl = typeof window !== "undefined" ? window.location.origin : "https://vitta.com.br"
  const shareUrl = `${siteUrl}?ref=share`
  const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=${encodeURIComponent(shareUrl)}`

const copyToClipboard = async () => {
    try {
      await navigator.clipboard.writeText(shareUrl)
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    } catch (err) {
      const textArea = document.createElement("textarea")
      textArea.value = shareUrl
      document.body.appendChild(textArea)
      textArea.select()
      document.execCommand("copy")
      document.body.removeChild(textArea)
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    }
  }

const shareOptions = [
    {
      name: "WhatsApp",
      icon: MessageCircle,
      color: "bg-green-500 hover:bg-green-600",
      url: `https://wa.me/?text=${encodeURIComponent(`🏋️‍♂️ Descobri a Vitta - a melhor loja de fitness online!\n\n✅ Roupas de alta qualidade\n✅ Acessórios profissionais\n✅ Suplementos premium\n✅ Frete grátis acima de R$ 150\n\nConfira: ${shareUrl}`)}`,
      description: "Compartilhe com seus amigos do treino",
    },
    {
      name: "Facebook",
      icon: Facebook,
      color: "bg-blue-600 hover:bg-blue-700",
      url: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}"e=${encodeURIComponent("Vitta - Sua loja de fitness com os melhores produtos para treino!")}`,
      description: "Poste em sua timeline",
    },
    {
      name: "Twitter",
      icon: Twitter,
      color: "bg-sky-500 hover:bg-sky-600",
      url: `https://twitter.com/intent/tweet?text=${encodeURIComponent("🏋️‍♂️ Descobri a @Vitta - loja completa de fitness! Roupas, acessórios e suplementos de qualidade. #fitness #treino #vitta")}&url=${encodeURIComponent(shareUrl)}`,
      description: "Tweete para seus seguidores",
    },
    {
      name: "Email",
      icon: Mail,
      color: "bg-gray-600 hover:bg-gray-700",
      url: `mailto:?subject=${encodeURIComponent("Vitta - Loja de Fitness")}&body=${encodeURIComponent(`Olá!\n\nQuero compartilhar com você a Vitta, uma loja incrível de produtos para fitness!\n\nEles têm:\n• Roupas esportivas de alta qualidade\n• Acessórios profissionais para treino\n• Suplementos premium\n• Frete grátis acima de R$ 150\n\nConfira: ${shareUrl}\n\nTenho certeza que você vai gostar!`)}`,
      description: "Envie por email",
    },
  ]

const handleShare = (shareUrl: string) => {
    window.open(shareUrl, "_blank", "width=600,height=400")
  }

const benefits = [
    {
      icon: Gift,
      title: "Ganhe Desconto",
      description: "10% OFF na próxima compra quando seus amigos comprarem",
      color: "text-green-600",
    },
    {
      icon: Users,
      title: "Ajude Amigos",
      description: "Seus amigos também ganham 5% de desconto na primeira compra",
      color: "text-blue-600",
    },
    {
      icon: Heart,
      title: "Espalhe Fitness",
      description: "Ajude mais pessoas a descobrirem produtos de qualidade",
      color: "text-red-600",
    },
  ]

return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-blue-100">
      {/* Header */}
      <header className="bg-blue-900 text-white shadow-lg">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <Link href="/" className="inline-flex items-center text-white hover:text-blue-200 transition-colors">
              <ArrowLeft className="h-4 w-4 mr-2" />
              Voltar para loja
            </Link>
            <h1 className="text-2xl font-bold flex items-center">
              <Share2 className="h-6 w-6 mr-2" />
              Compartilhar Vitta
            </h1>
            <div className="w-32"></div>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-8">
        {/* Hero Section */}
        <div className="text-center mb-8">
          <h2 className="text-4xl font-bold text-blue-900 mb-4">Compartilhe a Vitta com seus amigos!</h2>
          <p className="text-xl text-blue-600 mb-6">Espalhe o fitness e ganhe benefícios incríveis</p>
        </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Seção Principal de Compartilhamento */}
          <div className="lg:col-span-2 space-y-6">
            {/* Preview do Site */}
            <Card className="border-blue-200">
              <CardHeader>
                <CardTitle className="text-blue-900">Preview do Site</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="flex items-start space-x-4 p-4 bg-blue-50 rounded-lg border border-blue-200">
                  <div className="w-16 h-16 bg-blue-600 rounded-lg flex items-center justify-center text-white font-bold text-2xl">
                    V
                  </div>
                  <div className="flex-1">
                    <h3 className="text-xl font-bold text-blue-900">Vitta - Sua Loja de Fitness</h3>
                    <p className="text-blue-600 mt-1">
                      Roupas, acessórios e suplementos de alta qualidade para sua jornada fitness
                    </p>
                    <div className="flex flex-wrap gap-2 mt-3">
                      <Badge className="bg-green-100 text-green-800">Frete Grátis</Badge>
                      <Badge className="bg-blue-100 text-blue-800">Qualidade Premium</Badge>
                      <Badge className="bg-purple-100 text-purple-800">Entrega Rápida</Badge>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Link para Copiar */}
            <Card className="border-blue-200">
              <CardHeader>
                <CardTitle className="text-blue-900">Link de Compartilhamento</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="flex space-x-2">
                    <Input
                      value={shareUrl}
                      readOnly
                      className="border-blue-200 focus:border-blue-400 bg-blue-50 font-mono text-sm"
                    />
                    <Button
                      onClick={copyToClipboard}
                      className={`transition-all duration-300 ${
                        copied ? "bg-green-600 hover:bg-green-700" : "bg-blue-600 hover:bg-blue-700"
                      }`}
                    >
                      {copied ? <Check className="h-4 w-4 mr-2" /> : <Copy className="h-4 w-4 mr-2" />}
                      {copied ? "Copiado!" : "Copiar"}
                    </Button>
                  </div>
                  {copied && (
                    <p className="text-sm text-green-600 animate-fade-in">
                      ✅ Link copiado para a área de transferência!
                    </p>
                  )}
                </div>
              </CardContent>
            </Card>

{/* Botões de Compartilhamento */}
            <Card className="border-blue-200">
              <CardHeader>
                <CardTitle className="text-blue-900">Compartilhar em Redes Sociais</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {shareOptions.map((option) => (
                    <Button
                      key={option.name}
                      onClick={() => handleShare(option.url)}
                      className={`${option.color} text-white h-auto p-4 transition-all duration-300 hover:scale-105`}
                    >
                      <div className="flex items-center space-x-3">
                        <option.icon className="h-6 w-6" />
                        <div className="text-left">
                          <p className="font-semibold">{option.name}</p>
                          <p className="text-xs opacity-90">{option.description}</p>
                        </div>
                      </div>
                    </Button>
                  ))}
                </div>
              </CardContent>
            </Card>

{/* Benefícios */}
            <Card className="border-blue-200">
              <CardHeader>
                <CardTitle className="text-blue-900">Por que compartilhar?</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  {benefits.map((benefit, index) => (
                    <div key={index} className="text-center p-4 bg-white rounded-lg border border-blue-100">
                      <benefit.icon className={`h-8 w-8 mx-auto mb-3 ${benefit.color}`} />
                      <h3 className="font-semibold text-blue-900 mb-2">{benefit.title}</h3>
                      <p className="text-sm text-blue-600">{benefit.description}</p>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>

{/* Sidebar */}
          <div className="space-y-6">
            {/* QR Code */}
            <Card className="border-blue-200">
              <CardHeader>
                <CardTitle className="text-blue-900 flex items-center">
                  <QrCode className="h-5 w-5 mr-2" />
                  QR Code
                </CardTitle>
              </CardHeader>
              <CardContent className="text-center">
                <div className="inline-block p-4 bg-white border-2 border-blue-200 rounded-lg mb-4">
                  <img src={qrCodeUrl || "/placeholder.svg"} alt="QR Code do site Vitta" className="w-48 h-48" />
                </div>
                <p className="text-sm text-blue-600">Escaneie para acessar o site</p>
                <Button
                  onClick={() => window.open(qrCodeUrl, "_blank")}
                  variant="outline"
                  className="mt-3 border-blue-200 text-blue-600 hover:bg-blue-50"
                >
                  Baixar QR Code
                </Button>
              </CardContent>
            </Card>

{/* Estatísticas */}
            <Card className="border-blue-200">
              <CardHeader>
                <CardTitle className="text-blue-900 flex items-center">
                  <TrendingUp className="h-5 w-5 mr-2" />
                  Estatísticas
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="flex justify-between items-center">
                    <span className="text-blue-700">Total de compartilhamentos:</span>
                    <Badge className="bg-blue-600 text-white">{shareStats.totalShares.toLocaleString()}</Badge>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-blue-700">Esta semana:</span>
                    <Badge className="bg-green-600 text-white">+{shareStats.thisWeek}</Badge>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-blue-700">Indicações ativas:</span>
                    <Badge className="bg-purple-600 text-white">{shareStats.referrals}</Badge>
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Programa de Indicação */}
            <Card className="bg-gradient-to-br from-green-50 to-green-100 border-green-200">
              <CardHeader>
                <CardTitle className="text-green-800 flex items-center">
                  <Gift className="h-5 w-5 mr-2" />
                  Programa de Indicação
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  <div className="bg-white p-3 rounded-lg border border-green-200">
                    <h4 className="font-semibold text-green-800 mb-1">Para você:</h4>
                    <p className="text-sm text-green-600">10% de desconto na próxima compra</p>
                  </div>
                  <div className="bg-white p-3 rounded-lg border border-green-200">
                    <h4 className="font-semibold text-green-800 mb-1">Para seu amigo:</h4>
                    <p className="text-sm text-green-600">5% de desconto na primeira compra</p>
                  </div>
                  <div className="text-center pt-2">
                    <p className="text-xs text-green-700">💡 Quanto mais você compartilha, mais desconto acumula!</p>
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Dicas de Compartilhamento */}
            <Card className="border-blue-200">
              <CardHeader>
                <CardTitle className="text-blue-900">💡 Dicas para Compartilhar</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-3 text-sm text-blue-700">
                  <div className="flex items-start space-x-2">
                    <span className="text-blue-600 font-bold">1.</span>
                    <p>Compartilhe em grupos de treino no WhatsApp</p>
                  </div>
                  <div className="flex items-start space-x-2">
                    <span className="text-blue-600 font-bold">2.</span>
                    <p>Poste nos stories do Instagram marcando @vitta</p>
                  </div>
                  <div className="flex items-start space-x-2">
                    <span className="text-blue-600 font-bold">3.</span>
                    <p>Envie por email para amigos que fazem academia</p>
                  </div>
                  <div className="flex items-start space-x-2">
                    <span className="text-blue-600 font-bold">4.</span>
                    <p>Use o QR Code em academias e eventos fitness</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>

{/* Call to Action Final */}
        <div className="mt-12 text-center">
          <Card className="bg-gradient-to-r from-blue-600 to-blue-700 text-white border-0 max-w-2xl mx-auto">
            <CardContent className="p-8">
              <h3 className="text-2xl font-bold mb-4">Pronto para compartilhar?</h3>
              <p className="text-blue-100 mb-6">
                Escolha sua plataforma favorita e espalhe o fitness para seus amigos!
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <Button
                  onClick={() => handleShare(shareOptions[0].url)}
                  className="bg-green-500 hover:bg-green-600 text-white"
                >
                  <MessageCircle className="h-4 w-4 mr-2" />
                  Compartilhar no WhatsApp
                </Button>
                <Button
                  onClick={copyToClipboard}
                  variant="outline"
                  className="border-white text-white hover:bg-white hover:text-blue-600 bg-transparent"
                >
                  <Copy className="h-4 w-4 mr-2" />
                  Copiar Link
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]css:file="app/globals.css"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]typescriptreact:file="app/layout.tsx"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import "./animations.css"

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

export const metadata: Metadata = {
  title: "Vitta - Sua Loja de Fitness",
  description: "Roupas e acessórios de academia de alta qualidade",
    generator: 'v0.dev'
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="pt-BR">
      <body className={inter.className}>{children}</body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/lista-desejos/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import Link from "next/link"
import { ArrowLeft, Heart, ShoppingCart, Trash2 } from "lucide-react"
import { getWishlist, removeFromWishlist } from "@/lib/wishlist"

// Importar produtos (em uma aplicação real, viria de uma API)
const products = [
  {
    id: 1,
    name: "Camiseta Dry Fit Premium",
    price: 89.9,
    category: "roupas",
    image: "/placeholder.svg?height=300&width=300&text=Camiseta+Dry+Fit+Premium",
    description: "Camiseta de alta performance com tecnologia dry fit",
  },
  {
    id: 2,
    name: "Garrafa Térmica 1L",
    price: 45.9,
    category: "acessorios",
    image: "/placeholder.svg?height=300&width=300&text=Garrafa+Térmica+1L",
    description: "Garrafa térmica com isolamento duplo",
  },
  {
    id: 3,
    name: "Straps de Levantamento",
    price: 35.9,
    category: "acessorios",
    image: "/placeholder.svg?height=300&width=300&text=Straps+de+Levantamento",
    description: "Straps profissionais para levantamento de peso",
  },
  {
    id: 4,
    name: "Shorts Masculino Fit",
    price: 69.9,
    category: "roupas",
    image: "/placeholder.svg?height=300&width=300&text=Shorts+Masculino+Fit",
    description: "Shorts com tecido respirável e ajuste perfeito",
  },
  {
    id: 5,
    name: "Top Feminino Sport",
    price: 59.9,
    category: "roupas",
    image: "/placeholder.svg?height=300&width=300&text=Top+Feminino+Sport",
    description: "Top esportivo com suporte médio",
  },
  {
    id: 6,
    name: "Luvas de Treino",
    price: 29.9,
    category: "acessorios",
    image: "/placeholder.svg?height=300&width=300&text=Luvas+de+Treino",
    description: "Luvas com grip antiderrapante",
  },
  {
    id: 7,
    name: "Legging Feminina Premium",
    price: 99.9,
    category: "roupas",
    image: "/placeholder.svg?height=300&width=300&text=Legging+Feminina+Premium",
    description: "Legging de alta compressão com tecnologia anti-celulite",
  },
  {
    id: 8,
    name: "Shaker Protein 600ml",
    price: 25.9,
    category: "acessorios",
    image: "/placeholder.svg?height=300&width=300&text=Shaker+Protein+600ml",
    description: "Shaker com compartimento para suplementos",
  },
]

export default function ListaDesejosPage() {
  const [wishlistItems, setWishlistItems] = useState<number[]>([])
  const [currentUser, setCurrentUser] = useState<any>(null)

useEffect(() => {
    // Verificar se há usuário logado
    const user = localStorage.getItem("currentUser")
    if (user) {
      const userData = JSON.parse(user)
      setCurrentUser(userData)
      setWishlistItems(getWishlist(userData.id))
    }
  }, [])

const handleRemoveFromWishlist = (productId: number) => {
    if (currentUser) {
      removeFromWishlist(currentUser.id, productId)
      setWishlistItems(getWishlist(currentUser.id))
    }
  }

const handleAddToCart = (productId: number) => {
    // Simular adição ao carrinho
    alert("Produto adicionado ao carrinho!")
  }

const wishlistProducts = products.filter((product) => wishlistItems.includes(product.id))

if (!currentUser) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center">
        <Card className="w-full max-w-md border-blue-200">
          <CardContent className="p-8 text-center">
            <Heart className="h-16 w-16 text-blue-400 mx-auto mb-4" />
            <h2 className="text-2xl font-bold text-blue-900 mb-4">Faça login para ver sua lista de desejos</h2>
            <p className="text-blue-600 mb-6">Você precisa estar logado para acessar sua lista de desejos.</p>
            <Link href="/login">
              <Button className="bg-blue-600 hover:bg-blue-700">Fazer Login</Button>
            </Link>
          </CardContent>
        </Card>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-blue-100">
      {/* Header */}
      <header className="bg-blue-900 text-white shadow-lg">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <Link href="/" className="inline-flex items-center text-white hover:text-blue-200 transition-colors">
              <ArrowLeft className="h-4 w-4 mr-2" />
              Voltar para loja
            </Link>
            <h1 className="text-2xl font-bold">Lista de Desejos</h1>
            <div className="w-32"></div>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-8">
        {wishlistProducts.length === 0 ? (
          <Card className="text-center py-12 border-blue-200">
            <CardContent>
              <Heart className="h-16 w-16 text-blue-400 mx-auto mb-4" />
              <h2 className="text-2xl font-bold text-blue-900 mb-4">Sua lista de desejos está vazia</h2>
              <p className="text-blue-600 mb-6">Adicione produtos que você gostaria de comprar mais tarde!</p>
              <Link href="/">
                <Button className="bg-blue-600 hover:bg-blue-700">Explorar Produtos</Button>
              </Link>
            </CardContent>
          </Card>
        ) : (
          <>
            <div className="mb-6">
              <h2 className="text-2xl font-bold text-blue-900 mb-2">
                Minha Lista de Desejos ({wishlistProducts.length} {wishlistProducts.length === 1 ? "item" : "itens"})
              </h2>
              <p className="text-blue-600">Produtos que você salvou para comprar depois</p>
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
              {wishlistProducts.map((product) => (
                <Card key={product.id} className="group hover:shadow-lg transition-shadow duration-300 border-blue-100">
                  <CardContent className="p-4">
                    <div className="aspect-square mb-4 overflow-hidden rounded-lg bg-blue-50 relative">
                      <img
                        src={product.image || "/placeholder.svg"}
                        alt={product.name}
                        className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                      />
                      <Button
                        onClick={() => handleRemoveFromWishlist(product.id)}
                        variant="ghost"
                        size="sm"
                        className="absolute top-2 right-2 bg-white/80 hover:bg-white text-red-500 hover:text-red-700"
                      >
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </div>
                    <h3 className="font-semibold text-blue-900 mb-2">{product.name}</h3>
                    <p className="text-sm text-blue-600 mb-3">{product.description}</p>
                    <div className="flex items-center justify-between mb-3">
                      <span className="text-2xl font-bold text-blue-800">R$ {product.price.toFixed(2)}</span>
                    </div>
                    <div className="space-y-2">
                      <Button
                        onClick={() => handleAddToCart(product.id)}
                        className="w-full bg-blue-600 hover:bg-blue-700 text-white"
                      >
                        <ShoppingCart className="h-4 w-4 mr-2" />
                        Adicionar ao Carrinho
                      </Button>
                      <Button
                        onClick={() => handleRemoveFromWishlist(product.id)}
                        variant="outline"
                        className="w-full border-red-200 text-red-600 hover:bg-red-50"
                      >
                        <Heart className="h-4 w-4 mr-2" />
                        Remover dos Desejos
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/loading.tsx"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/login/page.tsx"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import Link from "next/link"
import { ArrowLeft, Eye, EyeOff } from "lucide-react"
// Adicionar import do sistema de auth
import { authenticateUser, registerUser, mockUsers } from "@/lib/auth"
import { Badge } from "@/components/ui/badge"

export default function LoginPage() {
  const [showPassword, setShowPassword] = useState(false)
  const [loginData, setLoginData] = useState({ email: "", password: "" })
  const [registerData, setRegisterData] = useState({
    name: "",
    email: "",
    password: "",
    confirmPassword: "",
  })

// Adicionar estado para mostrar usuários de teste
  const [showTestUsers, setShowTestUsers] = useState(false)

// Atualizar a função handleLogin
  const handleLogin = (e: React.FormEvent) => {
    e.preventDefault()

const user = authenticateUser(loginData.email, loginData.password)

if (user) {
      // Simular login bem-sucedido
      localStorage.setItem("currentUser", JSON.stringify(user))
      alert(`Login realizado com sucesso! Bem-vindo(a), ${user.name}!`)

// Redirecionar baseado no tipo de usuário
      if (user.isAdmin) {
        window.location.href = "/admin"
      } else {
        window.location.href = "/"
      }
    } else {
      alert("Email ou senha incorretos!")
    }
  }

// Atualizar a função handleRegister
  const handleRegister = (e: React.FormEvent) => {
    e.preventDefault()
    if (registerData.password !== registerData.confirmPassword) {
      alert("As senhas não coincidem!")
      return
    }

const user = registerUser(registerData.name, registerData.email, registerData.password)

if (user) {
      localStorage.setItem("currentUser", JSON.stringify(user))
      alert(`Cadastro realizado com sucesso! Bem-vindo(a), ${user.name}!`)
      window.location.href = "/"
    } else {
      alert("Este email já está cadastrado!")
    }
  }

// Adicionar função para login rápido
  const quickLogin = (email: string, password: string) => {
    setLoginData({ email, password })
    const user = authenticateUser(email, password)
    if (user) {
      localStorage.setItem("currentUser", JSON.stringify(user))
      alert(`Login realizado com sucesso! Bem-vindo(a), ${user.name}!`)
      if (user.isAdmin) {
        window.location.href = "/admin"
      } else {
        window.location.href = "/"
      }
    }
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center p-4">
      <div className="w-full max-w-md">
        <div className="mb-6">
          <Link href="/" className="inline-flex items-center text-blue-600 hover:text-blue-800 transition-colors">
            <ArrowLeft className="h-4 w-4 mr-2" />
            Voltar para loja
          </Link>
        </div>

{/* Adicionar seção de usuários de teste antes do Card principal */}
        <div className="mb-4">
          <Button
            variant="outline"
            onClick={() => setShowTestUsers(!showTestUsers)}
            className="w-full border-blue-200 text-blue-600 hover:bg-blue-50"
          >
            {showTestUsers ? "Ocultar" : "Mostrar"} Usuários de Teste
          </Button>

{showTestUsers && (
            <Card className="mt-2 border-blue-200">
              <CardContent className="p-4">
                <h3 className="font-semibold text-blue-900 mb-3">Usuários Fictícios para Teste:</h3>
                <div className="space-y-2">
                  {mockUsers.map((user) => (
                    <div key={user.id} className="flex items-center justify-between p-2 bg-blue-50 rounded">
                      <div className="flex items-center space-x-2">
                        <img src={user.avatar || "/placeholder.svg"} alt={user.name} className="w-8 h-8 rounded-full" />
                        <div>
                          <p className="text-sm font-medium text-blue-900">{user.name}</p>
                          <p className="text-xs text-blue-600">{user.email}</p>
                          {user.isAdmin && <Badge className="text-xs bg-blue-600">Admin</Badge>}
                        </div>
                      </div>
                      <Button
                        size="sm"
                        onClick={() => quickLogin(user.email, user.password)}
                        className="bg-blue-600 hover:bg-blue-700 text-xs"
                      >
                        Login
                      </Button>
                    </div>
                  ))}
                </div>
                <p className="text-xs text-blue-500 mt-2">
                  💡 Clique em "Login" ao lado de qualquer usuário para fazer login automaticamente
                </p>
              </CardContent>
            </Card>
          )}
        </div>

<Card className="border-blue-200 shadow-lg">
          <CardHeader className="text-center bg-blue-900 text-white rounded-t-lg">
            <CardTitle className="text-2xl font-bold">Vitta</CardTitle>
            <p className="text-blue-200">Acesse sua conta</p>
          </CardHeader>
          <CardContent className="p-6">
            <Tabs defaultValue="login" className="w-full">
              <TabsList className="grid w-full grid-cols-2 mb-6">
                <TabsTrigger value="login" className="data-[state=active]:bg-blue-600 data-[state=active]:text-white">
                  Entrar
                </TabsTrigger>
                <TabsTrigger
                  value="register"
                  className="data-[state=active]:bg-blue-600 data-[state=active]:text-white"
                >
                  Cadastrar
                </TabsTrigger>
              </TabsList>

<TabsContent value="login">
                <form onSubmit={handleLogin} className="space-y-4">
                  <div>
                    <Label htmlFor="email">E-mail</Label>
                    <Input
                      id="email"
                      type="email"
                      placeholder="seu@email.com"
                      value={loginData.email}
                      onChange={(e) => setLoginData((prev) => ({ ...prev, email: e.target.value }))}
                      className="border-blue-200 focus:border-blue-400"
                      required
                    />
                  </div>
                  <div>
                    <Label htmlFor="password">Senha</Label>
                    <div className="relative">
                      <Input
                        id="password"
                        type={showPassword ? "text" : "password"}
                        placeholder="Sua senha"
                        value={loginData.password}
                        onChange={(e) => setLoginData((prev) => ({ ...prev, password: e.target.value }))}
                        className="border-blue-200 focus:border-blue-400 pr-10"
                        required
                      />
                      <Button
                        type="button"
                        variant="ghost"
                        size="sm"
                        className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
                        onClick={() => setShowPassword(!showPassword)}
                      >
                        {showPassword ? (
                          <EyeOff className="h-4 w-4 text-blue-400" />
                        ) : (
                          <Eye className="h-4 w-4 text-blue-400" />
                        )}
                      </Button>
                    </div>
                  </div>
                  <Button type="submit" className="w-full bg-blue-600 hover:bg-blue-700">
                    Entrar
                  </Button>
                  <div className="text-center">
                    <Link href="/esqueci-senha" className="text-sm text-blue-600 hover:text-blue-800">
                      Esqueci minha senha
                    </Link>
                  </div>
                </form>
              </TabsContent>

<TabsContent value="register">
                <form onSubmit={handleRegister} className="space-y-4">
                  <div>
                    <Label htmlFor="name">Nome completo</Label>
                    <Input
                      id="name"
                      type="text"
                      placeholder="Seu nome completo"
                      value={registerData.name}
                      onChange={(e) => setRegisterData((prev) => ({ ...prev, name: e.target.value }))}
                      className="border-blue-200 focus:border-blue-400"
                      required
                    />
                  </div>
                  <div>
                    <Label htmlFor="register-email">E-mail</Label>
                    <Input
                      id="register-email"
                      type="email"
                      placeholder="seu@email.com"
                      value={registerData.email}
                      onChange={(e) => setRegisterData((prev) => ({ ...prev, email: e.target.value }))}
                      className="border-blue-200 focus:border-blue-400"
                      required
                    />
                  </div>
                  <div>
                    <Label htmlFor="register-password">Senha</Label>
                    <Input
                      id="register-password"
                      type="password"
                      placeholder="Mínimo 6 caracteres"
                      value={registerData.password}
                      onChange={(e) => setRegisterData((prev) => ({ ...prev, password: e.target.value }))}
                      className="border-blue-200 focus:border-blue-400"
                      minLength={6}
                      required
                    />
                  </div>
                  <div>
                    <Label htmlFor="confirm-password">Confirmar senha</Label>
                    <Input
                      id="confirm-password"
                      type="password"
                      placeholder="Confirme sua senha"
                      value={registerData.confirmPassword}
                      onChange={(e) => setRegisterData((prev) => ({ ...prev, confirmPassword: e.target.value }))}
                      className="border-blue-200 focus:border-blue-400"
                      required
                    />
                  </div>
                  <Button type="submit" className="w-full bg-blue-600 hover:bg-blue-700">
                    Criar conta
                  </Button>
                </form>
              </TabsContent>
            </Tabs>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/pagamento/page.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Separator } from "@/components/ui/separator"
import Link from "next/link"
import { ArrowLeft, CreditCard, Smartphone, FileText, Shield, Clock, CheckCircle } from "lucide-react"

export default function PagamentoPage() {
  const [paymentMethod, setPaymentMethod] = useState("pix")
  const [cardData, setCardData] = useState({
    number: "",
    name: "",
    expiry: "",
    cvv: "",
    installments: "1",
  })

// Dados simulados do pedido
  const orderData = {
    items: [
      { name: "Camiseta Dry Fit Premium", quantity: 2, price: 89.9 },
      { name: "Garrafa Térmica 1L", quantity: 1, price: 45.9 },
    ],
    subtotal: 225.7,
    discount: 22.57, // 10% de desconto
    shipping: 0, // Frete grátis
    total: 203.13,
  }

const handlePayment = () => {
    if (paymentMethod === "pix") {
      alert("Código PIX gerado! Você tem 30 minutos para realizar o pagamento.")
    } else if (paymentMethod === "boleto") {
      alert("Boleto gerado! Você pode imprimir ou pagar online até o vencimento.")
    } else if (paymentMethod === "cartao") {
      alert("Pagamento processado com sucesso! Você receberá a confirmação por email.")
    }
  }

const formatCardNumber = (value: string) => {
    const v = value.replace(/\s+/g, "").replace(/[^0-9]/gi, "")
    const matches = v.match(/\d{4,16}/g)
    const match = (matches && matches[0]) || ""
    const parts = []
    for (let i = 0, len = match.length; i < len; i += 4) {
      parts.push(match.substring(i, i + 4))
    }
    if (parts.length) {
      return parts.join(" ")
    } else {
      return v
    }
  }

const formatExpiry = (value: string) => {
    const v = value.replace(/\s+/g, "").replace(/[^0-9]/gi, "")
    if (v.length >= 2) {
      return v.substring(0, 2) + "/" + v.substring(2, 4)
    }
    return v
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-blue-100">
      {/* Header */}
      <header className="bg-blue-900 text-white shadow-lg">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <Link
              href="/carrinho"
              className="inline-flex items-center text-white hover:text-blue-200 transition-colors"
            >
              <ArrowLeft className="h-4 w-4 mr-2" />
              Voltar ao carrinho
            </Link>
            <h1 className="text-2xl font-bold">Finalizar Pagamento</h1>
            <div className="w-32"></div>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-8">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Formulário de Pagamento */}
          <div className="lg:col-span-2">
            <Card className="border-blue-200">
              <CardHeader>
                <CardTitle className="text-blue-900 flex items-center">
                  <Shield className="h-5 w-5 mr-2" />
                  Forma de Pagamento
                </CardTitle>
                <p className="text-sm text-blue-600">Escolha como deseja pagar seu pedido</p>
              </CardHeader>
              <CardContent className="space-y-6">
                <RadioGroup value={paymentMethod} onValueChange={setPaymentMethod}>
                  {/* PIX */}
                  <div className="flex items-center space-x-2 p-4 border border-blue-200 rounded-lg hover:bg-blue-50 transition-colors">
                    <RadioGroupItem value="pix" id="pix" />
                    <Label htmlFor="pix" className="flex-1 cursor-pointer">
                      <div className="flex items-center justify-between">
                        <div className="flex items-center space-x-3">
                          <Smartphone className="h-6 w-6 text-blue-600" />
                          <div>
                            <p className="font-semibold text-blue-900">PIX</p>
                            <p className="text-sm text-blue-600">Pagamento instantâneo</p>
                          </div>
                        </div>
                        <div className="text-right">
                          <p className="font-bold text-green-600">5% de desconto</p>
                          <p className="text-sm text-blue-600">R$ {(orderData.total * 0.95).toFixed(2)}</p>
                        </div>
                      </div>
                    </Label>
                  </div>

{/* Boleto */}
                  <div className="flex items-center space-x-2 p-4 border border-blue-200 rounded-lg hover:bg-blue-50 transition-colors">
                    <RadioGroupItem value="boleto" id="boleto" />
                    <Label htmlFor="boleto" className="flex-1 cursor-pointer">
                      <div className="flex items-center justify-between">
                        <div className="flex items-center space-x-3">
                          <FileText className="h-6 w-6 text-blue-600" />
                          <div>
                            <p className="font-semibold text-blue-900">Boleto Bancário</p>
                            <p className="text-sm text-blue-600">Vencimento em 3 dias úteis</p>
                          </div>
                        </div>
                        <div className="text-right">
                          <p className="font-bold text-blue-900">R$ {orderData.total.toFixed(2)}</p>
                          <p className="text-sm text-blue-600">À vista</p>
                        </div>
                      </div>
                    </Label>
                  </div>

{/* Cartão de Crédito */}
                  <div className="flex items-center space-x-2 p-4 border border-blue-200 rounded-lg hover:bg-blue-50 transition-colors">
                    <RadioGroupItem value="cartao" id="cartao" />
                    <Label htmlFor="cartao" className="flex-1 cursor-pointer">
                      <div className="flex items-center justify-between">
                        <div className="flex items-center space-x-3">
                          <CreditCard className="h-6 w-6 text-blue-600" />
                          <div>
                            <p className="font-semibold text-blue-900">Cartão de Crédito</p>
                            <p className="text-sm text-blue-600">Parcelamento em até 12x</p>
                          </div>
                        </div>
                        <div className="text-right">
                          <p className="font-bold text-blue-900">R$ {orderData.total.toFixed(2)}</p>
                          <p className="text-sm text-blue-600">1x sem juros</p>
                        </div>
                      </div>
                    </Label>
                  </div>
                </RadioGroup>

{/* Detalhes do PIX */}
                {paymentMethod === "pix" && (
                  <Card className="bg-blue-50 border-blue-200">
                    <CardContent className="p-4">
                      <div className="flex items-center space-x-2 mb-3">
                        <Smartphone className="h-5 w-5 text-blue-600" />
                        <h3 className="font-semibold text-blue-900">Como pagar com PIX</h3>
                      </div>
                      <div className="space-y-2 text-sm text-blue-700">
                        <p>1. Após confirmar o pedido, você receberá o código PIX</p>
                        <p>2. Abra o app do seu banco e escolha a opção PIX</p>
                        <p>3. Escaneie o QR Code ou cole o código PIX</p>
                        <p>4. Confirme o pagamento no seu banco</p>
                      </div>
                      <div className="mt-3 p-2 bg-green-100 border border-green-200 rounded flex items-center space-x-2">
                        <CheckCircle className="h-4 w-4 text-green-600" />
                        <p className="text-sm text-green-700 font-medium">5% de desconto aplicado automaticamente</p>
                      </div>
                    </CardContent>
                  </Card>
                )}

{/* Detalhes do Boleto */}
                {paymentMethod === "boleto" && (
                  <Card className="bg-blue-50 border-blue-200">
                    <CardContent className="p-4">
                      <div className="flex items-center space-x-2 mb-3">
                        <FileText className="h-5 w-5 text-blue-600" />
                        <h3 className="font-semibold text-blue-900">Informações do Boleto</h3>
                      </div>
                      <div className="space-y-2 text-sm text-blue-700">
                        <p>• Vencimento: 3 dias úteis após a confirmação</p>
                        <p>• Você pode pagar em qualquer banco, lotérica ou internet banking</p>
                        <p>• O pedido será processado após a confirmação do pagamento</p>
                        <p>• Prazo de compensação: até 2 dias úteis</p>
                      </div>
                      <div className="mt-3 p-2 bg-yellow-100 border border-yellow-200 rounded flex items-center space-x-2">
                        <Clock className="h-4 w-4 text-yellow-600" />
                        <p className="text-sm text-yellow-700">Lembre-se de pagar até o vencimento</p>
                      </div>
                    </CardContent>
                  </Card>
                )}

{/* Formulário do Cartão */}
                {paymentMethod === "cartao" && (
                  <Card className="bg-blue-50 border-blue-200">
                    <CardContent className="p-4 space-y-4">
                      <div className="flex items-center space-x-2 mb-3">
                        <CreditCard className="h-5 w-5 text-blue-600" />
                        <h3 className="font-semibold text-blue-900">Dados do Cartão</h3>
                      </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div className="md:col-span-2">
                          <Label htmlFor="cardNumber">Número do Cartão</Label>
                          <Input
                            id="cardNumber"
                            placeholder="0000 0000 0000 0000"
                            value={cardData.number}
                            onChange={(e) =>
                              setCardData((prev) => ({ ...prev, number: formatCardNumber(e.target.value) }))
                            }
                            maxLength={19}
                            className="border-blue-200 focus:border-blue-400"
                          />
                        </div>

<div className="md:col-span-2">
                          <Label htmlFor="cardName">Nome no Cartão</Label>
                          <Input
                            id="cardName"
                            placeholder="Nome como está no cartão"
                            value={cardData.name}
                            onChange={(e) => setCardData((prev) => ({ ...prev, name: e.target.value.toUpperCase() }))}
                            className="border-blue-200 focus:border-blue-400"
                          />
                        </div>

<div>
                          <Label htmlFor="cardExpiry">Validade</Label>
                          <Input
                            id="cardExpiry"
                            placeholder="MM/AA"
                            value={cardData.expiry}
                            onChange={(e) => setCardData((prev) => ({ ...prev, expiry: formatExpiry(e.target.value) }))}
                            maxLength={5}
                            className="border-blue-200 focus:border-blue-400"
                          />
                        </div>

<div>
                          <Label htmlFor="cardCvv">CVV</Label>
                          <Input
                            id="cardCvv"
                            placeholder="000"
                            value={cardData.cvv}
                            onChange={(e) =>
                              setCardData((prev) => ({ ...prev, cvv: e.target.value.replace(/\D/g, "") }))
                            }
                            maxLength={4}
                            className="border-blue-200 focus:border-blue-400"
                          />
                        </div>

<div className="md:col-span-2">
                          <Label htmlFor="installments">Parcelamento</Label>
                          <select
                            id="installments"
                            value={cardData.installments}
                            onChange={(e) => setCardData((prev) => ({ ...prev, installments: e.target.value }))}
                            className="w-full h-10 px-3 py-2 border border-blue-200 rounded-md focus:border-blue-400 focus:outline-none"
                          >
                            <option value="1">1x de R$ {orderData.total.toFixed(2)} sem juros</option>
                            <option value="2">2x de R$ {(orderData.total / 2).toFixed(2)} sem juros</option>
                            <option value="3">3x de R$ {(orderData.total / 3).toFixed(2)} sem juros</option>
                            <option value="6">6x de R$ {(orderData.total / 6).toFixed(2)} sem juros</option>
                            <option value="12">12x de R$ {((orderData.total * 1.1) / 12).toFixed(2)} com juros</option>
                          </select>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                )}

<Button
                  onClick={handlePayment}
                  className="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 text-lg"
                >
                  {paymentMethod === "pix" && "Gerar Código PIX"}
                  {paymentMethod === "boleto" && "Gerar Boleto"}
                  {paymentMethod === "cartao" && "Finalizar Pagamento"}
                </Button>
              </CardContent>
            </Card>
          </div>

{/* Resumo do Pedido */}
          <div>
            <Card className="border-blue-200 sticky top-4">
              <CardHeader>
                <CardTitle className="text-blue-900">Resumo do Pedido</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                {/* Itens */}
                <div className="space-y-3">
                  {orderData.items.map((item, index) => (
                    <div key={index} className="flex justify-between items-center">
                      <div>
                        <p className="font-medium text-blue-900">{item.name}</p>
                        <p className="text-sm text-blue-600">Qtd: {item.quantity}</p>
                      </div>
                      <p className="font-medium text-blue-900">R$ {(item.price * item.quantity).toFixed(2)}</p>
                    </div>
                  ))}
                </div>

{/* Valores */}
                <div className="space-y-2">
                  <div className="flex justify-between">
                    <span className="text-blue-700">Subtotal:</span>
                    <span className="text-blue-900">R$ {orderData.subtotal.toFixed(2)}</span>
                  </div>
                  <div className="flex justify-between text-green-600">
                    <span>Desconto:</span>
                    <span>-R$ {orderData.discount.toFixed(2)}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-blue-700">Frete:</span>
                    <span className="text-blue-900">Grátis</span>
                  </div>
                  {paymentMethod === "pix" && (
                    <div className="flex justify-between text-green-600">
                      <span>Desconto PIX (5%):</span>
                      <span>-R$ {(orderData.total * 0.05).toFixed(2)}</span>
                    </div>
                  )}
                  <Separator />
                  <div className="flex justify-between text-lg font-bold text-blue-900">
                    <span>Total:</span>
                    <span>
                      R$ {paymentMethod === "pix" ? (orderData.total * 0.95).toFixed(2) : orderData.total.toFixed(2)}
                    </span>
                  </div>
                </div>

{/* Informações de Segurança */}
                <div className="bg-green-50 p-3 rounded-lg border border-green-200">
                  <div className="flex items-center space-x-2 mb-2">
                    <Shield className="h-4 w-4 text-green-600" />
                    <p className="text-sm font-medium text-green-800">Compra Segura</p>
                  </div>
                  <ul className="text-xs text-green-700 space-y-1">
                    <li>• Dados protegidos com SSL</li>
                    <li>• Pagamento processado com segurança</li>
                    <li>• Garantia de entrega</li>
                  </ul>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { ShoppingCart, Search, User, Menu, X, Heart, Star, Eye, Zap, Dumbbell } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import Link from "next/link"
import { addToWishlist, isInWishlist, removeFromWishlist } from "@/lib/wishlist"
import { getProductRating } from "@/lib/reviews"
import ProductQuickView from "@/components/ProductQuickView"
import ShareButton from "@/components/ShareButton"

// Produtos atualizados com suplementos
const products = [
  {
    id: 1,
    name: "Camiseta Dry Fit Premium",
    price: 89.9,
    category: "roupas",
    image: "/images/camiseta-dry-fit.png",
    description: "Camiseta de alta performance com tecnologia dry fit",
    fullDescription:
      "Camiseta desenvolvida com tecnologia Dry Fit que oferece máximo conforto e performance durante os treinos. Confeccionada em tecido 100% poliéster com tratamento antimicrobiano, proporciona secagem rápida e controle de odor. Design ergonômico com costuras planas que evitam atrito e irritações na pele. Disponível em diversos tamanhos e cores. Ideal para corrida, musculação, crossfit e outras atividades físicas intensas.",
    features: ["Tecnologia Dry Fit", "Secagem rápida", "Antimicrobiano", "Costuras planas", "100% Poliéster"],
    sizes: ["P", "M", "G", "GG", "XG"],
    colors: ["Azul", "Preto", "Branco", "Cinza"],
  },
  {
    id: 2,
    name: "Garrafa Térmica 1L",
    price: 45.9,
    category: "acessorios",
    image: "/images/garrafa-termica.png",
    description: "Garrafa térmica com isolamento duplo",
    fullDescription:
      "Garrafa térmica de alta qualidade com capacidade de 1 litro, ideal para manter suas bebidas na temperatura perfeita durante todo o treino. Construída em aço inoxidável 304 com isolamento a vácuo duplo, mantém líquidos quentes por até 12 horas e frios por até 24 horas. Tampa rosqueável com vedação hermética e bico ergonômico para facilitar o consumo. Design moderno e resistente, perfeita para academia, trabalho ou atividades ao ar livre.",
    features: ["Capacidade 1L", "Aço inoxidável 304", "Isolamento duplo", "12h quente / 24h frio", "Tampa hermética"],
    sizes: ["1L"],
    colors: ["Azul", "Preto", "Prata"],
  },
  {
    id: 3,
    name: "Straps de Levantamento",
    price: 35.9,
    category: "acessorios",
    image: "/images/straps-levantamento.png",
    description: "Straps profissionais para levantamento de peso",
    fullDescription:
      "Straps de levantamento profissionais desenvolvidos para maximizar sua performance em exercícios de puxada e levantamento. Confeccionados em algodão resistente com reforço em couro sintético, proporcionam aderência superior e durabilidade excepcional. Sistema de enrolamento otimizado que distribui o peso uniformemente, reduzindo a fadiga dos antebraços e permitindo focar no músculo alvo. Ajuste universal que se adapta a diferentes tamanhos de punho.",
    features: [
      "Algodão resistente",
      "Reforço em couro",
      "Aderência superior",
      "Ajuste universal",
      "Distribuição uniforme",
    ],
    sizes: ["Único"],
    colors: ["Preto", "Azul"],
  },
  {
    id: 4,
    name: "Shorts Masculino Fit",
    price: 69.9,
    category: "roupas",
    image: "/images/shorts-masculino.png",
    description: "Shorts com tecido respirável e ajuste perfeito",
    fullDescription:
      "Shorts masculino desenvolvido especialmente para treinos intensos, oferecendo máxima liberdade de movimento e conforto. Confeccionado em tecido Dry Fit com elastano, proporciona flexibilidade e secagem rápida. Cintura com elástico e cordão ajustável, bolsos laterais funcionais e comprimento ideal para diversos tipos de exercício. Costuras reforçadas garantem durabilidade mesmo nos treinos mais intensos. Design moderno e versátil, perfeito para academia e atividades esportivas.",
    features: ["Tecido Dry Fit", "Elastano", "Cintura ajustável", "Bolsos funcionais", "Costuras reforçadas"],
    sizes: ["P", "M", "G", "GG", "XG"],
    colors: ["Preto", "Azul", "Cinza", "Verde"],
  },
  {
    id: 5,
    name: "Top Feminino Sport",
    price: 59.9,
    category: "roupas",
    image: "/images/top-feminino.png",
    description: "Top esportivo com suporte médio",
    fullDescription:
      "Top esportivo feminino com suporte médio, ideal para diversas modalidades de exercício. Desenvolvido com tecnologia de compressão graduada que oferece sustentação adequada sem comprometer o conforto. Tecido respirável com tratamento antimicrobiano e proteção UV. Design anatômico com costuras planas e alças ajustáveis que se adaptam perfeitamente ao corpo. Bojo removível para maior praticidade na lavagem. Perfeito para yoga, pilates, corrida e musculação.",
    features: ["Suporte médio", "Compressão graduada", "Proteção UV", "Alças ajustáveis", "Bojo removível"],
    sizes: ["PP", "P", "M", "G", "GG"],
    colors: ["Rosa", "Azul", "Preto", "Branco"],
  },
  {
    id: 6,
    name: "Luvas de Treino",
    price: 29.9,
    category: "acessorios",
    image: "/images/luvas-treino.png",
    description: "Luvas com grip antiderrapante",
    fullDescription:
      "Luvas de treino profissionais com tecnologia de grip antiderrapante para máxima segurança e performance. Palma em couro sintético com textura especial que proporciona aderência superior em barras e halteres. Dorso em tecido respirável com sistema de ventilação que mantém as mãos secas. Dedos cortados para melhor sensibilidade e controle. Punho ajustável com velcro e proteção extra nas áreas de maior atrito. Essenciais para levantamento de peso e exercícios funcionais.",
    features: ["Grip antiderrapante", "Couro sintético", "Ventilação", "Dedos cortados", "Punho ajustável"],
    sizes: ["P", "M", "G"],
    colors: ["Preto", "Azul", "Vermelho"],
  },
  {
    id: 7,
    name: "Legging Feminina Premium",
    price: 99.9,
    category: "roupas",
    image: "/images/legging-feminina.png",
    description: "Legging de alta compressão com tecnologia anti-celulite",
    fullDescription:
      "Legging feminina premium com tecnologia de compressão graduada e efeito anti-celulite. Desenvolvida com tecido inteligente que estimula a microcirculação e ajuda na redução da aparência da celulite. Cintura alta modeladora que realça a silhueta e oferece suporte abdominal. Tecido com elastano de alta qualidade garante flexibilidade total e retorno à forma original. Costuras estratégicas que valorizam as curvas naturais do corpo. Resistente a pilling e desbotamento.",
    features: [
      "Compressão graduada",
      "Efeito anti-celulite",
      "Cintura alta",
      "Elastano premium",
      "Costuras estratégicas",
    ],
    sizes: ["PP", "P", "M", "G", "GG"],
    colors: ["Preto", "Azul marinho", "Grafite", "Vinho"],
  },
  {
    id: 8,
    name: "Shaker Protein 600ml",
    price: 25.9,
    category: "acessorios",
    image: "/images/shaker-protein.png",
    description: "Shaker com compartimento para suplementos",
    fullDescription:
      "Shaker profissional de 600ml com design inovador e funcionalidades exclusivas para praticantes de atividade física. Possui compartimento superior removível para armazenar suplementos em pó, cápsulas ou lanches. Misturador em espiral de aço inoxidável que garante dissolução perfeita sem grumos. Tampa com sistema de vedação dupla à prova de vazamentos. Graduação em ml e oz para medições precisas. Material livre de BPA, resistente e fácil de limpar. Ideal para whey protein, creatina, BCAA e outros suplementos.",
    features: ["Capacidade 600ml", "Compartimento superior", "Misturador espiral", "Livre de BPA", "Graduação dupla"],
    sizes: ["600ml"],
    colors: ["Azul", "Preto", "Transparente"],
  },
  // NOVOS SUPLEMENTOS
  {
    id: 9,
    name: "Whey Protein Chocolate 1kg",
    price: 129.9,
    category: "suplementos",
    image: "/images/whey-protein-chocolate.png",
    description: "Proteína isolada premium sabor chocolate",
    fullDescription:
      "Whey Protein Isolado de alta qualidade com 90% de proteína por porção. Desenvolvido com tecnologia de microfiltração que preserva os aminoácidos essenciais e remove lactose e gorduras. Rico em BCAA e glutamina naturais, ideal para recuperação muscular e ganho de massa magra. Sabor chocolate cremoso e dissolução instantânea. Livre de açúcar adicionado, corantes artificiais e conservantes. Perfeito para pós-treino ou entre as refeições.",
    features: ["90% proteína", "Zero lactose", "Rico em BCAA", "Dissolução instantânea", "Sem açúcar adicionado"],
    sizes: ["1kg"],
    colors: ["Chocolate"],
    nutritionalInfo: {
      serving: "30g",
      protein: "27g",
      carbs: "1g",
      fat: "0.5g",
      calories: "115kcal",
    },
  },
  {
    id: 10,
    name: "Whey Protein Baunilha 1kg",
    price: 129.9,
    category: "suplementos",
    image: "/images/whey-protein-baunilha.png",
    description: "Proteína isolada premium sabor baunilha",
    fullDescription:
      "Whey Protein Isolado premium com sabor baunilha natural. Fórmula avançada com 90% de concentração proteica, obtida através de processo de microfiltração a frio que preserva a integridade dos aminoácidos. Contém todos os aminoácidos essenciais em proporções ideais para síntese proteica. Baixo teor de carboidratos e gorduras, ideal para dietas de definição muscular. Dissolve facilmente em água ou leite, proporcionando textura cremosa e sabor suave.",
    features: ["90% proteína", "Microfiltração a frio", "Aminoácidos completos", "Baixo carb", "Sabor natural"],
    sizes: ["1kg"],
    colors: ["Baunilha"],
    nutritionalInfo: {
      serving: "30g",
      protein: "27g",
      carbs: "1.2g",
      fat: "0.3g",
      calories: "112kcal",
    },
  },
  {
    id: 11,
    name: "Creatina Monohidratada 300g",
    price: 79.9,
    category: "suplementos",
    image: "/images/creatina-monohidratada.png",
    description: "Creatina pura para força e explosão muscular",
    fullDescription:
      "Creatina Monohidratada 100% pura, o suplemento mais estudado e eficaz para aumento de força, potência e massa muscular. Cada porção fornece 3g de creatina micronizada para melhor absorção e dissolução. Aumenta os estoques de fosfocreatina muscular, proporcionando mais energia para treinos intensos. Acelera a recuperação entre as séries e promove maior volume muscular. Produto testado e livre de impurezas, garantindo máxima pureza e eficácia.",
    features: ["100% pura", "Micronizada", "Maior absorção", "Testada em laboratório", "Sem sabor"],
    sizes: ["300g"],
    colors: ["Natural"],
    nutritionalInfo: {
      serving: "3g",
      creatine: "3g",
      carbs: "0g",
      fat: "0g",
      calories: "0kcal",
    },
  },
  {
    id: 12,
    name: "Creatina Creapure 250g",
    price: 99.9,
    category: "suplementos",
    image: "/images/creatina-creapure.png",
    description: "Creatina premium alemã Creapure",
    fullDescription:
      "Creatina Creapure, a creatina de mais alta qualidade do mundo, produzida na Alemanha com tecnologia exclusiva. Padrão ouro em pureza e eficácia, com certificação de qualidade internacional. Livre de impurezas como creatinina, diciandiamida e outros subprodutos. Dissolução superior e absorção otimizada. Clinicamente testada e aprovada por atletas profissionais. Ideal para quem busca máxima performance e resultados superiores em força, potência e ganho de massa muscular.",
    features: [
      "Creapure alemã",
      "Máxima pureza",
      "Certificação internacional",
      "Dissolução superior",
      "Clinicamente testada",
    ],
    sizes: ["250g"],
    colors: ["Premium"],
    nutritionalInfo: {
      serving: "3g",
      creatine: "3g",
      carbs: "0g",
      fat: "0g",
      calories: "0kcal",
    },
  },
  {
    id: 13,
    name: "BCAA 2:1:1 - 120 Cápsulas",
    price: 89.9,
    category: "suplementos",
    image: "/images/bcaa-capsulas.png",
    description: "Aminoácidos essenciais para recuperação muscular",
    fullDescription:
      "BCAA (Aminoácidos de Cadeia Ramificada) na proporção ideal 2:1:1 de Leucina, Isoleucina e Valina. Aminoácidos essenciais que o corpo não produz, fundamentais para síntese proteica, recuperação muscular e prevenção do catabolismo. Cada cápsula contém 500mg de BCAA puro. Ideal para consumo antes, durante ou após o treino. Acelera a recuperação, reduz a fadiga muscular e melhora a performance. Cápsulas vegetais de fácil digestão, sem sabor artificial.",
    features: ["Proporção 2:1:1", "500mg por cápsula", "Anticatabólico", "Cápsulas vegetais", "Fácil digestão"],
    sizes: ["120 cápsulas"],
    colors: ["Natural"],
    nutritionalInfo: {
      serving: "4 cápsulas",
      bcaa: "2g",
      leucine: "1g",
      isoleucine: "500mg",
      valine: "500mg",
    },
  },
  {
    id: 14,
    name: "Pré-Treino Energy 300g",
    price: 119.9,
    category: "suplementos",
    image: "/images/pre-treino.png",
    description: "Fórmula energética para treinos intensos",
    fullDescription:
      "Pré-treino avançado com fórmula cientificamente desenvolvida para máxima energia, foco e performance. Contém cafeína, beta-alanina, arginina, taurina e vitaminas do complexo B. Proporciona energia sustentada sem crash, melhora o foco mental e aumenta a resistência muscular. Beta-alanina reduz a fadiga e melhora a capacidade de trabalho. Arginina promove vasodilatação e melhor pump muscular. Sabor frutas vermelhas refrescante. Ideal para treinos de alta intensidade.",
    features: [
      "Cafeína + Beta-alanina",
      "Foco mental",
      "Energia sustentada",
      "Vasodilatação",
      "Sabor frutas vermelhas",
    ],
    sizes: ["300g"],
    colors: ["Frutas Vermelhas"],
    nutritionalInfo: {
      serving: "10g",
      caffeine: "200mg",
      betaAlanine: "2g",
      arginine: "1.5g",
      calories: "15kcal",
    },
  },
]

export default function HomePage() {
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedCategory, setSelectedCategory] = useState("todos")
  const [cartItems, setCartItems] = useState<number[]>([])
  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const [currentUser, setCurrentUser] = useState<any>(null)
  const [wishlistItems, setWishlistItems] = useState<number[]>([])
  const [selectedProduct, setSelectedProduct] = useState<any>(null)
  const [isQuickViewOpen, setIsQuickViewOpen] = useState(false)
  const [isLoading, setIsLoading] = useState(true)
  const [imageErrors, setImageErrors] = useState<Set<number>>(new Set())

useEffect(() => {
    const user = localStorage.getItem("currentUser")
    if (user) {
      const userData = JSON.parse(user)
      setCurrentUser(userData)
      const wishlist = localStorage.getItem(`wishlist_${userData.id}`)
      setWishlistItems(wishlist ? JSON.parse(wishlist) : [])
    }

// Simular loading
    setTimeout(() => setIsLoading(false), 1000)
  }, [])

const filteredProducts = products.filter((product) => {
    const matchesSearch = product.name.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesCategory = selectedCategory === "todos" || product.category === selectedCategory
    return matchesSearch && matchesCategory
  })

const addToCart = (productId: number) => {
    setCartItems((prev) => [...prev, productId])
  }

const toggleWishlist = (productId: number) => {
    if (!currentUser) {
      alert("Faça login para adicionar produtos à lista de desejos!")
      return
    }

if (isInWishlist(currentUser.id, productId)) {
      removeFromWishlist(currentUser.id, productId)
      setWishlistItems((prev) => prev.filter((id) => id !== productId))
    } else {
      addToWishlist(currentUser.id, productId)
      setWishlistItems((prev) => [...prev, productId])
    }
  }

const openQuickView = (product: any) => {
    setSelectedProduct(product)
    setIsQuickViewOpen(true)
  }

const handleImageError = (productId: number) => {
    setImageErrors((prev) => new Set(prev).add(productId))
  }

const getImageSrc = (product: any) => {
    if (imageErrors.has(product.id)) {
      return `/placeholder.svg?height=300&width=300&text=${encodeURIComponent(product.name)}`
    }
    return product.image
  }

const getCategoryIcon = (category: string) => {
    switch (category) {
      case "suplementos":
        return <Zap className="h-4 w-4" />
      case "roupas":
        return <User className="h-4 w-4" />
      case "acessorios":
        return <Dumbbell className="h-4 w-4" />
      default:
        return null
    }
  }

const getCategoryColor = (category: string) => {
    switch (category) {
      case "suplementos":
        return "bg-green-100 text-green-800 border-green-200"
      case "roupas":
        return "bg-blue-100 text-blue-800 border-blue-200"
      case "acessorios":
        return "bg-purple-100 text-purple-800 border-purple-200"
      default:
        return "bg-gray-100 text-gray-800 border-gray-200"
    }
  }

if (isLoading) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-16 w-16 border-b-2 border-blue-600 mx-auto mb-4"></div>
          <h2 className="text-2xl font-bold text-blue-900 animate-pulse">Carregando Vitta...</h2>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-blue-100">
      {/* Header */}
      <header className="bg-blue-900 text-white shadow-lg animate-slide-up">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-4">
              <h1 className="text-3xl font-bold animate-float">Vitta</h1>
              <p className="text-blue-200 hidden md:block animate-fade-in">Sua loja de fitness</p>
            </div>

<nav className="hidden md:flex items-center space-x-6">
              {["Início", "Produtos", "Suplementos", "Usuários Teste", "Sobre", "Contato", "Lista de Desejos"].map(
                (item, index) => (
                  <Link
                    key={item}
                    href={item === "Início" ? "/" : `/${item.toLowerCase().replace(" ", "-")}`}
                    className="hover:text-blue-200 transition-all duration-300 hover:scale-105 animate-slide-in-right"
                    style={{ animationDelay: `${index * 100}ms` }}
                  >
                    {item}
                  </Link>
                ),
              )}
            </nav>

<div className="flex items-center space-x-4">
              {/* Botão de Compartilhar */}
              <ShareButton className="hidden md:block" />

<Link href="/login">
                <Button
                  variant="ghost"
                  size="sm"
                  className="text-white hover:bg-blue-800 transition-all duration-300 hover:scale-105"
                >
                  <User className="h-4 w-4 mr-2" />
                  Login
                </Button>
              </Link>
              <Link href="/carrinho">
                <Button
                  variant="ghost"
                  size="sm"
                  className="text-white hover:bg-blue-800 relative transition-all duration-300 hover:scale-105"
                >
                  <ShoppingCart className="h-4 w-4" />
                  {cartItems.length > 0 && (
                    <Badge className="absolute -top-2 -right-2 bg-blue-500 text-white text-xs animate-bounce-once">
                      {cartItems.length}
                    </Badge>
                  )}
                </Button>
              </Link>
              <Button
                variant="ghost"
                size="sm"
                className="md:hidden text-white transition-all duration-300 hover:scale-105"
                onClick={() => setIsMenuOpen(!isMenuOpen)}
              >
                {isMenuOpen ? <X className="h-4 w-4" /> : <Menu className="h-4 w-4" />}
              </Button>
            </div>
          </div>

{/* Mobile Menu */}
          {isMenuOpen && (
            <nav className="md:hidden mt-4 pb-4 border-t border-blue-800 pt-4 animate-slide-up">
              <div className="flex flex-col space-y-2">
                {["Início", "Produtos", "Suplementos", "Usuários Teste", "Sobre", "Contato", "Lista de Desejos"].map(
                  (item, index) => (
                    <Link
                      key={item}
                      href={item === "Início" ? "/" : `/${item.toLowerCase().replace(" ", "-")}`}
                      className="hover:text-blue-200 transition-colors py-2 animate-slide-in-left"
                      style={{ animationDelay: `${index * 50}ms` }}
                    >
                      {item}
                    </Link>
                  ),
                )}
                {/* Botão de Compartilhar Mobile */}
                <div className="pt-2">
                  <ShareButton className="w-full" />
                </div>
              </div>
            </nav>
          )}
        </div>
      </header>

{/* Hero Section */}
      <section className="bg-gradient-to-r from-blue-600 to-blue-800 text-white py-20 animate-fade-in">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-5xl font-bold mb-6 animate-slide-up">Eleve seu treino ao próximo nível</h2>
          <p className="text-xl mb-8 text-blue-100 animate-slide-up-delay-1">
            Roupas, acessórios e suplementos de alta qualidade para sua jornada fitness
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
            <Button
              size="lg"
              className="bg-blue-500 hover:bg-blue-400 text-white px-8 py-3 text-lg transition-all duration-300 transform hover:scale-105 animate-slide-up-delay-2"
            >
              Explorar Produtos
            </Button>
            <ShareButton
              className="bg-white/10 hover:bg-white/20 text-white border-white/30 animate-slide-up-delay-3"
              title="Vitta - Sua Loja de Fitness"
              description="Descubra roupas, acessórios e suplementos de alta qualidade para sua jornada fitness!"
            />
          </div>
        </div>
      </section>

{/* Filters and Search */}
      <section className="container mx-auto px-4 py-8">
        <div className="flex flex-col md:flex-row gap-4 mb-8 animate-slide-up-delay-1">
          <div className="flex-1">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-blue-400 h-4 w-4" />
              <Input
                type="text"
                placeholder="Buscar produtos..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-10 border-blue-200 focus:border-blue-400 transition-all duration-300 focus:scale-105"
              />
            </div>
          </div>
          <div className="flex gap-2 flex-wrap">
            {["todos", "roupas", "acessorios", "suplementos"].map((category, index) => (
              <Button
                key={category}
                variant={selectedCategory === category ? "default" : "outline"}
                onClick={() => setSelectedCategory(category)}
                className={`transition-all duration-300 transform hover:scale-105 animate-slide-in-right ${
                  selectedCategory === category
                    ? "bg-blue-600 hover:bg-blue-700"
                    : "border-blue-200 text-blue-600 hover:bg-blue-50"
                }`}
                style={{ animationDelay: `${index * 100}ms` }}
              >
                {getCategoryIcon(category)}
                <span className="ml-2">
                  {category === "todos"
                    ? "Todos"
                    : category === "roupas"
                      ? "Roupas"
                      : category === "acessorios"
                        ? "Acessórios"
                        : "Suplementos"}
                </span>
              </Button>
            ))}
          </div>
        </div>

{/* Seção Destaque Suplementos */}
        {selectedCategory === "suplementos" && (
          <div className="mb-8 animate-slide-up">
            <Card className="bg-gradient-to-r from-green-500 to-green-600 text-white border-0">
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <h3 className="text-2xl font-bold mb-2 flex items-center">
                      <Zap className="h-6 w-6 mr-2" />
                      Suplementos Premium
                    </h3>
                    <p className="text-green-100">
                      Potencialize seus resultados com nossa linha completa de suplementos de alta qualidade
                    </p>
                  </div>
                  <div className="hidden md:flex items-center space-x-4">
                    <div className="text-right">
                      <p className="text-green-100 text-sm">Frete grátis</p>
                      <p className="text-white font-bold">Acima de R$ 150</p>
                    </div>
                    <ShareButton
                      className="bg-white/20 hover:bg-white/30 text-white border-white/30"
                      title="Suplementos Premium Vitta"
                      description="Descubra nossa linha completa de suplementos de alta qualidade: Whey Protein, Creatina, BCAA e muito mais!"
                    />
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        )}

{/* Products Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
          {filteredProducts.map((product, index) => {
            const rating = getProductRating(product.id)

return (
              <Card
                key={product.id}
                className="group hover:shadow-lg transition-all duration-500 border-blue-100 hover-lift stagger-item animate-scale-in"
                style={{ animationDelay: `${index * 100}ms` }}
              >
                <CardContent className="p-4">
                  <div className="aspect-square mb-4 overflow-hidden rounded-lg bg-blue-50 relative">
                    <img
                      src={getImageSrc(product) || "/placeholder.svg"}
                      alt={product.name}
                      className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                      onError={() => handleImageError(product.id)}
                      loading="lazy"
                    />
                    <div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-300 flex items-center justify-center">
                      <Button
                        onClick={() => openQuickView(product)}
                        className="opacity-0 group-hover:opacity-100 transition-all duration-300 transform scale-90 group-hover:scale-100 bg-white text-blue-600 hover:bg-blue-50"
                      >
                        <Eye className="h-4 w-4 mr-2" />
                        Visualizar
                      </Button>
                    </div>
                  </div>

<div className="mb-2">
                    <Badge className={`text-xs ${getCategoryColor(product.category)}`}>
                      {getCategoryIcon(product.category)}
                      <span className="ml-1">
                        {product.category === "roupas"
                          ? "Roupas"
                          : product.category === "acessorios"
                            ? "Acessórios"
                            : "Suplementos"}
                      </span>
                    </Badge>
                  </div>

<h3 className="font-semibold text-blue-900 mb-2 group-hover:text-blue-700 transition-colors duration-300">
                    {product.name}
                  </h3>
                  <p className="text-sm text-blue-600 mb-2">{product.description}</p>

{rating.total > 0 && (
                    <div className="flex items-center space-x-1 mb-3">
                      <div className="flex items-center">
                        {[...Array(5)].map((_, i) => (
                          <Star
                            key={i}
                            className={`h-3 w-3 transition-colors duration-300 ${
                              i < Math.floor(rating.average) ? "text-yellow-400 fill-current" : "text-gray-300"
                            }`}
                          />
                        ))}
                      </div>
                      <span className="text-xs text-blue-600">
                        {rating.average.toFixed(1)} ({rating.total})
                      </span>
                    </div>
                  )}

{/* Informação nutricional para suplementos */}
                  {product.category === "suplementos" && product.nutritionalInfo && (
                    <div className="mb-3 p-2 bg-green-50 rounded-lg border border-green-200">
                      <p className="text-xs text-green-700 font-medium">
                        Por porção ({product.nutritionalInfo.serving}):
                      </p>
                      <div className="text-xs text-green-600 grid grid-cols-2 gap-1">
                        {product.nutritionalInfo.protein && <span>Proteína: {product.nutritionalInfo.protein}</span>}
                        {product.nutritionalInfo.creatine && <span>Creatina: {product.nutritionalInfo.creatine}</span>}
                        {product.nutritionalInfo.bcaa && <span>BCAA: {product.nutritionalInfo.bcaa}</span>}
                        {product.nutritionalInfo.caffeine && <span>Cafeína: {product.nutritionalInfo.caffeine}</span>}
                      </div>
                    </div>
                  )}

<div className="flex items-center justify-between">
                    <span className="text-2xl font-bold text-blue-800 animate-pulse-price">
                      R$ {product.price.toFixed(2)}
                    </span>
                    <div className="flex space-x-2">
                      <Button
                        onClick={() => toggleWishlist(product.id)}
                        variant="outline"
                        size="sm"
                        className={`border-blue-200 transition-all duration-300 transform hover:scale-110 ${
                          currentUser && isInWishlist(currentUser.id, product.id)
                            ? "bg-red-50 text-red-600 border-red-200 animate-heart-beat"
                            : "text-blue-600 hover:bg-blue-50"
                        }`}
                      >
                        <Heart
                          className={`h-4 w-4 transition-all duration-300 ${
                            currentUser && isInWishlist(currentUser.id, product.id) ? "fill-current" : ""
                          }`}
                        />
                      </Button>
                      <Link href={`/produto/${product.id}`}>
                        <Button className="bg-blue-600 hover:bg-blue-700 text-white transition-all duration-300 transform hover:scale-105">
                          <ShoppingCart className="h-4 w-4 mr-2" />
                          Ver Produto
                        </Button>
                      </Link>
                    </div>
                  </div>
                </CardContent>
              </Card>
            )
          })}
        </div>

{filteredProducts.length === 0 && (
          <div className="text-center py-12 animate-fade-in">
            <div className="animate-wiggle inline-block mb-4">
              <Search className="h-16 w-16 text-blue-400" />
            </div>
            <p className="text-blue-600 text-lg">Nenhum produto encontrado.</p>
          </div>
        )}
      </section>

{/* Footer */}
      <footer className="bg-blue-900 text-white py-12 mt-16 animate-slide-up">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div className="animate-slide-up-delay-1">
              <h3 className="text-2xl font-bold mb-4">Vitta</h3>
              <p className="text-blue-200 mb-4">
                Sua loja especializada em roupas, acessórios e suplementos para academia.
              </p>
              <ShareButton
                className="bg-blue-800 hover:bg-blue-700 text-white border-blue-700"
                title="Vitta - Sua Loja de Fitness"
                description="Roupas, acessórios e suplementos de alta qualidade para sua jornada fitness!"
              />
            </div>
            <div className="animate-slide-up-delay-2">
              <h4 className="font-semibold mb-4">Links Rápidos</h4>
              <ul className="space-y-2 text-blue-200">
                {["Início", "Produtos", "Suplementos", "Sobre", "Contato"].map((item, index) => (
                  <li key={item} className="animate-slide-in-left" style={{ animationDelay: `${index * 100}ms` }}>
                    <Link href="/" className="hover:text-white transition-colors duration-300">
                      {item}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
            <div className="animate-slide-up-delay-3">
              <h4 className="font-semibold mb-4">Categorias</h4>
              <ul className="space-y-2 text-blue-200">
                {["Roupas", "Acessórios", "Suplementos"].map((item, index) => (
                  <li key={item} className="animate-slide-in-left" style={{ animationDelay: `${index * 100}ms` }}>
                    <Link href="/roupas" className="hover:text-white transition-colors duration-300">
                      {item}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
            <div className="animate-slide-up-delay-4">
              <h4 className="font-semibold mb-4">Contato</h4>
              <ul className="space-y-2 text-blue-200">
                <li className="animate-slide-in-left" style={{ animationDelay: "0ms" }}>
                  📧 contato@vitta.com.br
                </li>
                <li className="animate-slide-in-left" style={{ animationDelay: "100ms" }}>
                  📱 (11) 99999-9999
                </li>
                <li className="animate-slide-in-left" style={{ animationDelay: "200ms" }}>
                  📍 São Paulo, SP
                </li>
              </ul>
            </div>
          </div>
          <div className="border-t border-blue-800 mt-8 pt-8 text-center text-blue-200 animate-fade-in">
            <p>© 2024 Vitta. Todos os direitos reservados.</p>
          </div>
        </div>
      </footer>

{/* Quick View Modal */}
      <ProductQuickView
        product={selectedProduct}
        isOpen={isQuickViewOpen}
        onClose={() => setIsQuickViewOpen(false)}
        currentUser={currentUser}
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/produto/[id]/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import Link from "next/link"
import { ArrowLeft, ShoppingCart, Heart, Star, Truck, Shield, RotateCcw } from "lucide-react"
import { addToWishlist, isInWishlist, removeFromWishlist } from "@/lib/wishlist"
import ProductReviews from "@/components/ProductReviews"
import SizeGuide from "@/components/SizeGuide"
import { getSizeGuide } from "@/lib/sizes"
import { getProductRating } from "@/lib/reviews"

// Dados dos produtos (em uma aplicação real, viria de uma API)
const products = [
  {
    id: 1,
    name: "Camiseta Dry Fit Premium",
    price: 89.9,
    category: "roupas",
    image: "/placeholder.svg?height=400&width=400&text=Camiseta+Dry+Fit+Premium",
    description: "Camiseta de alta performance com tecnologia dry fit",
    fullDescription:
      "Camiseta desenvolvida com tecnologia Dry Fit que oferece máximo conforto e performance durante os treinos. Confeccionada em tecido 100% poliéster com tratamento antimicrobiano, proporciona secagem rápida e controle de odor. Design ergonômico com costuras planas que evitam atrito e irritações na pele. Disponível em diversos tamanhos e cores. Ideal para corrida, musculação, crossfit e outras atividades físicas intensas.",
    features: ["Tecnologia Dry Fit", "Secagem rápida", "Antimicrobiano", "Costuras planas", "100% Poliéster"],
    colors: ["Azul", "Preto", "Branco", "Cinza"],
  },
  {
    id: 2,
    name: "Garrafa Térmica 1L",
    price: 45.9,
    category: "acessorios",
    image: "/placeholder.svg?height=400&width=400&text=Garrafa+Térmica+1L",
    description: "Garrafa térmica com isolamento duplo",
    fullDescription:
      "Garrafa térmica de alta qualidade com capacidade de 1 litro, ideal para manter suas bebidas na temperatura perfeita durante todo o treino. Construída em aço inoxidável 304 com isolamento a vácuo duplo, mantém líquidos quentes por até 12 horas e frios por até 24 horas.",
    features: ["Capacidade 1L", "Aço inoxidável 304", "Isolamento duplo", "12h quente / 24h frio", "Tampa hermética"],
    colors: ["Azul", "Preto", "Prata"],
  },
  // Adicionar outros produtos conforme necessário
]

export default function ProdutoPage({ params }: { params: { id: string } }) {
  const [selectedSize, setSelectedSize] = useState("")
  const [selectedColor, setSelectedColor] = useState("")
  const [quantity, setQuantity] = useState(1)
  const [currentUser, setCurrentUser] = useState<any>(null)
  const [isInWishlistState, setIsInWishlistState] = useState(false)

const productId = Number.parseInt(params.id)
  const product = products.find((p) => p.id === productId)

useEffect(() => {
    const user = localStorage.getItem("currentUser")
    if (user) {
      const userData = JSON.parse(user)
      setCurrentUser(userData)
      setIsInWishlistState(isInWishlist(userData.id, productId))
    }

// Carregar dados de avaliação
    const rating = getProductRating(productId)
    // Você pode usar esses dados se necessário
  }, [productId])

if (!product) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center">
        <Card className="p-8 text-center">
          <h2 className="text-2xl font-bold text-blue-900 mb-4">Produto não encontrado</h2>
          <Link href="/">
            <Button className="bg-blue-600 hover:bg-blue-700">Voltar para loja</Button>
          </Link>
        </Card>
      </div>
    )
  }

const toggleWishlist = () => {
    if (!currentUser) {
      alert("Faça login para adicionar produtos à lista de desejos!")
      return
    }

if (isInWishlistState) {
      removeFromWishlist(currentUser.id, productId)
      setIsInWishlistState(false)
      alert("Produto removido da lista de desejos!")
    } else {
      addToWishlist(currentUser.id, productId)
      setIsInWishlistState(true)
      alert("Produto adicionado à lista de desejos!")
    }
  }

const addToCart = () => {
    if (!selectedSize && product.sizes && product.sizes.length > 0) {
      alert("Por favor, selecione um tamanho!")
      return
    }
    if (!selectedColor && product.colors && product.colors.length > 0) {
      alert("Por favor, selecione uma cor!")
      return
    }
    alert(`${quantity}x ${product.name} adicionado ao carrinho!`)
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-blue-100">
      {/* Header */}
      <header className="bg-blue-900 text-white shadow-lg">
        <div className="container mx-auto px-4 py-4">
          <Link href="/" className="inline-flex items-center text-white hover:text-blue-200 transition-colors">
            <ArrowLeft className="h-4 w-4 mr-2" />
            Voltar para loja
          </Link>
        </div>
      </header>

<div className="container mx-auto px-4 py-8">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          {/* Imagem do Produto */}
          <div>
            <Card className="border-blue-200">
              <CardContent className="p-4">
                <div className="aspect-square bg-blue-50 rounded-lg overflow-hidden">
                  <img
                    src={product.image || "/placeholder.svg"}
                    alt={product.name}
                    className="w-full h-full object-cover"
                  />
                </div>
              </CardContent>
            </Card>
          </div>

{/* Informações do Produto */}
          <div className="space-y-6">
            <div>
              <Badge className="mb-2 bg-blue-100 text-blue-800">{product.category}</Badge>
              <h1 className="text-3xl font-bold text-blue-900 mb-2">{product.name}</h1>
              <div className="flex items-center space-x-2 mb-4">
                <div className="flex items-center">
                  {[...Array(5)].map((_, i) => (
                    <Star
                      key={i}
                      className={`h-4 w-4 ${
                        i < Math.floor(product.rating) ? "text-yellow-400 fill-current" : "text-gray-300"
                      }`}
                    />
                  ))}
                </div>
                <span className="text-sm text-blue-600">
                  {product.rating} ({product.reviews} avaliações)
                </span>
              </div>
              <p className="text-4xl font-bold text-blue-800 mb-4">R$ {product.price.toFixed(2)}</p>
              <p className="text-blue-700 leading-relaxed">{product.fullDescription}</p>
            </div>

{/* Características */}
            <div>
              <h3 className="font-semibold text-blue-900 mb-3">Características:</h3>
              <div className="grid grid-cols-2 gap-2">
                {product.features.map((feature, index) => (
                  <div key={index} className="flex items-center space-x-2">
                    <div className="w-2 h-2 bg-blue-600 rounded-full"></div>
                    <span className="text-sm text-blue-700">{feature}</span>
                  </div>
                ))}
              </div>
            </div>

{/* Seleção de Tamanho com Guia */}
            {getSizeGuide(productId) && (
              <SizeGuide productId={productId} selectedSize={selectedSize} onSizeSelect={setSelectedSize} />
            )}

{/* Seleção de Cor */}
            {product.colors && product.colors.length > 0 && (
              <div>
                <h3 className="font-semibold text-blue-900 mb-3">Cor:</h3>
                <div className="flex flex-wrap gap-2">
                  {product.colors.map((color) => (
                    <Button
                      key={color}
                      variant={selectedColor === color ? "default" : "outline"}
                      onClick={() => setSelectedColor(color)}
                      className={
                        selectedColor === color
                          ? "bg-blue-600 hover:bg-blue-700"
                          : "border-blue-200 text-blue-600 hover:bg-blue-50"
                      }
                    >
                      {color}
                    </Button>
                  ))}
                </div>
              </div>
            )}

{/* Quantidade */}
            <div>
              <h3 className="font-semibold text-blue-900 mb-3">Quantidade:</h3>
              <div className="flex items-center space-x-3">
                <Button
                  variant="outline"
                  onClick={() => setQuantity(Math.max(1, quantity - 1))}
                  className="border-blue-200 text-blue-600 hover:bg-blue-50"
                >
                  -
                </Button>
                <span className="w-12 text-center font-semibold">{quantity}</span>
                <Button
                  variant="outline"
                  onClick={() => setQuantity(quantity + 1)}
                  className="border-blue-200 text-blue-600 hover:bg-blue-50"
                >
                  +
                </Button>
              </div>
            </div>

{/* Botões de Ação */}
            <div className="space-y-3">
              <Button onClick={addToCart} className="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 text-lg">
                <ShoppingCart className="h-5 w-5 mr-2" />
                Adicionar ao Carrinho - R$ {(product.price * quantity).toFixed(2)}
              </Button>

<Button
                onClick={toggleWishlist}
                variant="outline"
                className={`w-full border-blue-200 ${
                  isInWishlistState ? "bg-red-50 text-red-600 border-red-200" : "text-blue-600 hover:bg-blue-50"
                }`}
              >
                <Heart className={`h-4 w-4 mr-2 ${isInWishlistState ? "fill-current" : ""}`} />
                {isInWishlistState ? "Remover dos Desejos" : "Adicionar aos Desejos"}
              </Button>
            </div>

{/* Informações de Entrega */}
            <Card className="bg-blue-50 border-blue-200">
              <CardContent className="p-4">
                <div className="space-y-3">
                  <div className="flex items-center space-x-3">
                    <Truck className="h-5 w-5 text-blue-600" />
                    <div>
                      <p className="font-medium text-blue-900">Frete Grátis</p>
                      <p className="text-sm text-blue-600">Para compras acima de R$ 150,00</p>
                    </div>
                  </div>
                  <div className="flex items-center space-x-3">
                    <Shield className="h-5 w-5 text-blue-600" />
                    <div>
                      <p className="font-medium text-blue-900">Compra Segura</p>
                      <p className="text-sm text-blue-600">Seus dados protegidos</p>
                    </div>
                  </div>
                  <div className="flex items-center space-x-3">
                    <RotateCcw className="h-5 w-5 text-blue-600" />
                    <div>
                      <p className="font-medium text-blue-900">Troca Garantida</p>
                      <p className="text-sm text-blue-600">30 dias para trocar</p>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
      {/* Seção de Avaliações */}
      <div className="mt-12">
        <ProductReviews productId={productId} currentUser={currentUser} />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/suplementos/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import Link from "next/link"
import { ArrowLeft, Zap, Heart, ShoppingCart, Star, Filter, Info } from "lucide-react"

// Dados dos suplementos
const supplements = [
  {
    id: 9,
    name: "Whey Protein Chocolate 1kg",
    price: 129.9,
    category: "proteinas",
    image: "/images/whey-protein-chocolate.png",
    description: "Proteína isolada premium sabor chocolate",
    fullDescription: "Whey Protein Isolado de alta qualidade com 90% de proteína por porção...",
    features: ["90% proteína", "Zero lactose", "Rico em BCAA", "Dissolução instantânea", "Sem açúcar adicionado"],
    nutritionalInfo: {
      serving: "30g",
      protein: "27g",
      carbs: "1g",
      fat: "0.5g",
      calories: "115kcal",
    },
    rating: 4.8,
    reviews: 156,
    inStock: true,
  },
  {
    id: 10,
    name: "Whey Protein Baunilha 1kg",
    price: 129.9,
    category: "proteinas",
    image: "/images/whey-protein-baunilha.png",
    description: "Proteína isolada premium sabor baunilha",
    nutritionalInfo: {
      serving: "30g",
      protein: "27g",
      carbs: "1.2g",
      fat: "0.3g",
      calories: "112kcal",
    },
    rating: 4.7,
    reviews: 142,
    inStock: true,
  },
  {
    id: 11,
    name: "Creatina Monohidratada 300g",
    price: 79.9,
    category: "creatinas",
    image: "/images/creatina-monohidratada.png",
    description: "Creatina pura para força e explosão muscular",
    nutritionalInfo: {
      serving: "3g",
      creatine: "3g",
      carbs: "0g",
      fat: "0g",
      calories: "0kcal",
    },
    rating: 4.9,
    reviews: 203,
    inStock: true,
  },
  {
    id: 12,
    name: "Creatina Creapure 250g",
    price: 99.9,
    category: "creatinas",
    image: "/images/creatina-creapure.png",
    description: "Creatina premium alemã Creapure",
    nutritionalInfo: {
      serving: "3g",
      creatine: "3g",
      carbs: "0g",
      fat: "0g",
      calories: "0kcal",
    },
    rating: 5.0,
    reviews: 89,
    inStock: true,
  },
  {
    id: 13,
    name: "BCAA 2:1:1 - 120 Cápsulas",
    price: 89.9,
    category: "aminoacidos",
    image: "/images/bcaa-capsulas.png",
    description: "Aminoácidos essenciais para recuperação muscular",
    nutritionalInfo: {
      serving: "4 cápsulas",
      bcaa: "2g",
      leucine: "1g",
      isoleucine: "500mg",
      valine: "500mg",
    },
    rating: 4.6,
    reviews: 98,
    inStock: true,
  },
  {
    id: 14,
    name: "Pré-Treino Energy 300g",
    price: 119.9,
    category: "pre-treino",
    image: "/images/pre-treino.png",
    description: "Fórmula energética para treinos intensos",
    nutritionalInfo: {
      serving: "10g",
      caffeine: "200mg",
      betaAlanine: "2g",
      arginine: "1.5g",
      calories: "15kcal",
    },
    rating: 4.5,
    reviews: 67,
    inStock: true,
  },
]

export default function SuplementosPage() {
  const [selectedCategory, setSelectedCategory] = useState("todos")
  const [searchTerm, setSearchTerm] = useState("")
  const [priceRange, setPriceRange] = useState("todos")
  const [currentUser, setCurrentUser] = useState<any>(null)

useEffect(() => {
    const user = localStorage.getItem("currentUser")
    if (user) {
      setCurrentUser(JSON.parse(user))
    }
  }, [])

const filteredSupplements = supplements.filter((supplement) => {
    const matchesSearch = supplement.name.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesCategory = selectedCategory === "todos" || supplement.category === selectedCategory

let matchesPrice = true
    if (priceRange === "ate-50") matchesPrice = supplement.price <= 50
    else if (priceRange === "50-100") matchesPrice = supplement.price > 50 && supplement.price <= 100
    else if (priceRange === "100-150") matchesPrice = supplement.price > 100 && supplement.price <= 150
    else if (priceRange === "acima-150") matchesPrice = supplement.price > 150

return matchesSearch && matchesCategory && matchesPrice
  })

const renderStars = (rating: number) => {
    return (
      <div className="flex items-center">
        {[...Array(5)].map((_, i) => (
          <Star
            key={i}
            className={`h-4 w-4 ${i < Math.floor(rating) ? "text-yellow-400 fill-current" : "text-gray-300"}`}
          />
        ))}
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-green-50 to-green-100">
      {/* Header */}
      <header className="bg-green-600 text-white shadow-lg">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <Link href="/" className="inline-flex items-center text-white hover:text-green-200 transition-colors">
              <ArrowLeft className="h-4 w-4 mr-2" />
              Voltar para loja
            </Link>
            <h1 className="text-2xl font-bold flex items-center">
              <Zap className="h-6 w-6 mr-2" />
              Suplementos Vitta
            </h1>
            <div className="w-32"></div>
          </div>
        </div>
      </header>

{/* Hero Section */}
      <section className="bg-gradient-to-r from-green-600 to-green-700 text-white py-16">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-4xl font-bold mb-4">Potencialize seus Resultados</h2>
          <p className="text-xl text-green-100 mb-6">Suplementos de alta qualidade para maximizar sua performance</p>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
            <div className="bg-white/10 backdrop-blur-sm rounded-lg p-4">
              <h3 className="font-bold text-lg mb-2">🏆 Qualidade Premium</h3>
              <p className="text-green-100 text-sm">Produtos testados e certificados</p>
            </div>
            <div className="bg-white/10 backdrop-blur-sm rounded-lg p-4">
              <h3 className="font-bold text-lg mb-2">🚚 Frete Grátis</h3>
              <p className="text-green-100 text-sm">Acima de R$ 150,00</p>
            </div>
            <div className="bg-white/10 backdrop-blur-sm rounded-lg p-4">
              <h3 className="font-bold text-lg mb-2">💪 Resultados Garantidos</h3>
              <p className="text-green-100 text-sm">Ou seu dinheiro de volta</p>
            </div>
          </div>
        </div>
      </section>

<div className="container mx-auto px-4 py-8">
        {/* Filtros */}
        <Card className="mb-8 border-green-200">
          <CardHeader>
            <CardTitle className="text-green-800 flex items-center">
              <Filter className="h-5 w-5 mr-2" />
              Filtros
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              {/* Busca */}
              <div>
                <label className="block text-sm font-medium text-green-700 mb-2">Buscar</label>
                <Input
                  placeholder="Nome do suplemento..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="border-green-200 focus:border-green-400"
                />
              </div>

{/* Categoria */}
              <div>
                <label className="block text-sm font-medium text-green-700 mb-2">Categoria</label>
                <select
                  value={selectedCategory}
                  onChange={(e) => setSelectedCategory(e.target.value)}
                  className="w-full h-10 px-3 py-2 border border-green-200 rounded-md focus:border-green-400 focus:outline-none"
                >
                  <option value="todos">Todos</option>
                  <option value="proteinas">Proteínas</option>
                  <option value="creatinas">Creatinas</option>
                  <option value="aminoacidos">Aminoácidos</option>
                  <option value="pre-treino">Pré-treino</option>
                </select>
              </div>

{/* Preço */}
              <div>
                <label className="block text-sm font-medium text-green-700 mb-2">Faixa de Preço</label>
                <select
                  value={priceRange}
                  onChange={(e) => setPriceRange(e.target.value)}
                  className="w-full h-10 px-3 py-2 border border-green-200 rounded-md focus:border-green-400 focus:outline-none"
                >
                  <option value="todos">Todos</option>
                  <option value="ate-50">Até R$ 50</option>
                  <option value="50-100">R$ 50 - R$ 100</option>
                  <option value="100-150">R$ 100 - R$ 150</option>
                  <option value="acima-150">Acima de R$ 150</option>
                </select>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Guia de Suplementos */}
        <Card className="mb-8 border-green-200">
          <CardHeader>
            <CardTitle className="text-green-800 flex items-center">
              <Info className="h-5 w-5 mr-2" />
              Guia de Suplementos
            </CardTitle>
          </CardHeader>
          <CardContent>
            <Tabs defaultValue="proteinas" className="w-full">
              <TabsList className="grid w-full grid-cols-4">
                <TabsTrigger value="proteinas">Proteínas</TabsTrigger>
                <TabsTrigger value="creatinas">Creatinas</TabsTrigger>
                <TabsTrigger value="aminoacidos">Aminoácidos</TabsTrigger>
                <TabsTrigger value="pre-treino">Pré-treino</TabsTrigger>
              </TabsList>

<TabsContent value="proteinas" className="mt-4">
                <div className="bg-blue-50 p-4 rounded-lg border border-blue-200">
                  <h4 className="font-semibold text-blue-900 mb-2">🥛 Whey Protein</h4>
                  <p className="text-blue-700 text-sm mb-2">
                    Ideal para recuperação muscular e ganho de massa magra. Consuma até 30 minutos após o treino.
                  </p>
                  <p className="text-blue-600 text-xs">
                    <strong>Dosagem:</strong> 25-30g por porção | <strong>Quando tomar:</strong> Pós-treino ou entre
                    refeições
                  </p>
                </div>
              </TabsContent>

<TabsContent value="creatinas" className="mt-4">
                <div className="bg-red-50 p-4 rounded-lg border border-red-200">
                  <h4 className="font-semibold text-red-900 mb-2">⚡ Creatina</h4>
                  <p className="text-red-700 text-sm mb-2">
                    Aumenta força, potência e volume muscular. Essencial para treinos de alta intensidade.
                  </p>
                  <p className="text-red-600 text-xs">
                    <strong>Dosagem:</strong> 3-5g por dia | <strong>Quando tomar:</strong> Qualquer horário,
                    preferencialmente pós-treino
                  </p>
                </div>
              </TabsContent>

<TabsContent value="aminoacidos" className="mt-4">
                <div className="bg-purple-50 p-4 rounded-lg border border-purple-200">
                  <h4 className="font-semibold text-purple-900 mb-2">🔗 BCAA</h4>
                  <p className="text-purple-700 text-sm mb-2">
                    Previne catabolismo muscular e acelera a recuperação. Ideal para treinos longos.
                  </p>
                  <p className="text-purple-600 text-xs">
                    <strong>Dosagem:</strong> 5-10g por porção | <strong>Quando tomar:</strong> Antes, durante ou após o
                    treino
                  </p>
                </div>
              </TabsContent>

<TabsContent value="pre-treino" className="mt-4">
                <div className="bg-orange-50 p-4 rounded-lg border border-orange-200">
                  <h4 className="font-semibold text-orange-900 mb-2">🔥 Pré-treino</h4>
                  <p className="text-orange-700 text-sm mb-2">
                    Aumenta energia, foco e resistência para treinos mais intensos e produtivos.
                  </p>
                  <p className="text-orange-600 text-xs">
                    <strong>Dosagem:</strong> 1 dose (10g) | <strong>Quando tomar:</strong> 20-30 minutos antes do
                    treino
                  </p>
                </div>
              </TabsContent>
            </Tabs>
          </CardContent>
        </Card>

{/* Grid de Produtos */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {filteredSupplements.map((supplement, index) => (
            <Card key={supplement.id} className="group hover:shadow-lg transition-all duration-300 border-green-100">
              <CardContent className="p-4">
                <div className="aspect-square mb-4 overflow-hidden rounded-lg bg-green-50 relative">
                  <img
                    src={supplement.image || "/placeholder.svg"}
                    alt={supplement.name}
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                  />
                  <Badge className="absolute top-2 left-2 bg-green-600 text-white">
                    {supplement.category === "proteinas"
                      ? "Proteína"
                      : supplement.category === "creatinas"
                        ? "Creatina"
                        : supplement.category === "aminoacidos"
                          ? "Aminoácidos"
                          : "Pré-treino"}
                  </Badge>
                  {supplement.inStock && (
                    <Badge className="absolute top-2 right-2 bg-blue-600 text-white">Em Estoque</Badge>
                  )}
                </div>

<h3 className="font-semibold text-green-900 mb-2">{supplement.name}</h3>
                <p className="text-sm text-green-600 mb-3">{supplement.description}</p>

{/* Rating */}
                <div className="flex items-center space-x-2 mb-3">
                  {renderStars(supplement.rating)}
                  <span className="text-sm text-green-600">
                    {supplement.rating} ({supplement.reviews} avaliações)
                  </span>
                </div>

{/* Informação Nutricional */}
                <div className="mb-4 p-3 bg-green-50 rounded-lg border border-green-200">
                  <p className="text-xs text-green-700 font-medium mb-1">
                    Por porção ({supplement.nutritionalInfo.serving}):
                  </p>
                  <div className="text-xs text-green-600 grid grid-cols-2 gap-1">
                    {supplement.nutritionalInfo.protein && <span>Proteína: {supplement.nutritionalInfo.protein}</span>}
                    {supplement.nutritionalInfo.creatine && (
                      <span>Creatina: {supplement.nutritionalInfo.creatine}</span>
                    )}
                    {supplement.nutritionalInfo.bcaa && <span>BCAA: {supplement.nutritionalInfo.bcaa}</span>}
                    {supplement.nutritionalInfo.caffeine && <span>Cafeína: {supplement.nutritionalInfo.caffeine}</span>}
                    {supplement.nutritionalInfo.calories && (
                      <span>Calorias: {supplement.nutritionalInfo.calories}</span>
                    )}
                  </div>
                </div>

<div className="flex items-center justify-between mb-4">
                  <span className="text-2xl font-bold text-green-800">R$ {supplement.price.toFixed(2)}</span>
                  <Button
                    variant="outline"
                    size="sm"
                    className="border-green-200 text-green-600 hover:bg-green-50 bg-transparent"
                  >
                    <Heart className="h-4 w-4" />
                  </Button>
                </div>

<div className="space-y-2">
                  <Button className="w-full bg-green-600 hover:bg-green-700 text-white">
                    <ShoppingCart className="h-4 w-4 mr-2" />
                    Adicionar ao Carrinho
                  </Button>
                  <Link href={`/produto/${supplement.id}`}>
                    <Button
                      variant="outline"
                      className="w-full border-green-200 text-green-600 hover:bg-green-50 bg-transparent"
                    >
                      Ver Detalhes
                    </Button>
                  </Link>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

{filteredSupplements.length === 0 && (
          <div className="text-center py-12">
            <Zap className="h-16 w-16 text-green-400 mx-auto mb-4" />
            <h3 className="text-xl font-semibold text-green-900 mb-2">Nenhum suplemento encontrado</h3>
            <p className="text-green-600">Tente ajustar os filtros para encontrar o que procura.</p>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/usuarios-teste/page.tsx"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { mockUsers } from "@/lib/auth"
import Link from "next/link"
import { ArrowLeft, User, Shield, Calendar } from "lucide-react"

export default function UsuariosTestePage() {
  const copyCredentials = (email: string, password: string) => {
    navigator.clipboard.writeText(`Email: ${email}\nSenha: ${password}`)
    alert("Credenciais copiadas para a área de transferência!")
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-blue-100">
      {/* Header */}
      <header className="bg-blue-900 text-white shadow-lg">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <Link href="/" className="inline-flex items-center text-white hover:text-blue-200 transition-colors">
              <ArrowLeft className="h-4 w-4 mr-2" />
              Voltar para loja
            </Link>
            <h1 className="text-2xl font-bold">Usuários de Teste - Vitta</h1>
            <div className="w-32"></div>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-8">
        <Card className="mb-8 border-blue-200">
          <CardHeader>
            <CardTitle className="text-blue-900">Como usar os usuários de teste</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4 text-blue-700">
              <p>
                <strong>1.</strong> Escolha um usuário da lista abaixo
              </p>
              <p>
                <strong>2.</strong> Clique em "Copiar Credenciais" para copiar email e senha
              </p>
              <p>
                <strong>3.</strong> Vá para a{" "}
                <Link href="/login" className="text-blue-600 underline">
                  página de login
                </Link>{" "}
                e cole as credenciais
              </p>
              <p>
                <strong>4.</strong> Ou clique em "Login Direto" para fazer login automaticamente
              </p>
            </div>
          </CardContent>
        </Card>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {mockUsers.map((user) => (
            <Card key={user.id} className="border-blue-200 hover:shadow-lg transition-shadow">
              <CardContent className="p-6">
                <div className="flex items-center space-x-4 mb-4">
                  <img
                    src={user.avatar || "/placeholder.svg"}
                    alt={user.name}
                    className="w-16 h-16 rounded-full border-2 border-blue-200"
                  />
                  <div>
                    <h3 className="font-semibold text-blue-900">{user.name}</h3>
                    <p className="text-sm text-blue-600">{user.email}</p>
                    {user.isAdmin && (
                      <Badge className="mt-1 bg-blue-600">
                        <Shield className="h-3 w-3 mr-1" />
                        Administrador
                      </Badge>
                    )}
                  </div>
                </div>

<div className="space-y-2 mb-4">
                  <div className="flex items-center text-sm text-blue-600">
                    <User className="h-4 w-4 mr-2" />
                    ID: {user.id}
                  </div>
                  <div className="flex items-center text-sm text-blue-600">
                    <Calendar className="h-4 w-4 mr-2" />
                    Cadastrado em: {user.createdAt}
                  </div>
                </div>

<div className="bg-blue-50 p-3 rounded-lg mb-4">
                  <p className="text-sm font-medium text-blue-900 mb-1">Credenciais:</p>
                  <p className="text-xs text-blue-700">Email: {user.email}</p>
                  <p className="text-xs text-blue-700">Senha: {user.password}</p>
                </div>

<div className="space-y-2">
                  <Button
                    onClick={() => copyCredentials(user.email, user.password)}
                    variant="outline"
                    className="w-full border-blue-200 text-blue-600 hover:bg-blue-50"
                  >
                    Copiar Credenciais
                  </Button>
                  <Link href={`/login?email=${user.email}&password=${user.password}`}>
                    <Button className="w-full bg-blue-600 hover:bg-blue-700">Login Direto</Button>
                  </Link>
                </div>

{user.isAdmin && (
                  <div className="mt-3 p-2 bg-yellow-50 border border-yellow-200 rounded">
                    <p className="text-xs text-yellow-700">⚡ Este usuário tem acesso à área administrativa</p>
                  </div>
                )}
              </CardContent>
            </Card>
          ))}
        </div>

<Card className="mt-8 border-blue-200">
          <CardHeader>
            <CardTitle className="text-blue-900">Informações Importantes</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-3 text-blue-700">
              <p>
                <strong>🔐 Segurança:</strong> Estes são usuários fictícios apenas para demonstração. Em produção, use
                sempre senhas seguras e criptografadas.
              </p>
              <p>
                <strong>👤 Usuário Admin:</strong> Use o usuário "Admin Vitta" para acessar a área administrativa e
                gerenciar produtos.
              </p>
              <p>
                <strong>🛒 Teste de Compras:</strong> Use qualquer usuário comum para testar o fluxo de compras e
                carrinho.
              </p>
              <p>
                <strong>💾 Persistência:</strong> Os dados são salvos no localStorage do navegador durante a sessão.
              </p>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]json:file="components.json"
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}
[V0_FILE]typescriptreact:file="components/ProductQuickView.tsx"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Separator } from "@/components/ui/separator"
import { ShoppingCart, Heart, Star, Eye, Minus, Plus } from "lucide-react"
import { addToWishlist, isInWishlist, removeFromWishlist } from "@/lib/wishlist"
import { getProductRating } from "@/lib/reviews"
import { getSizeGuide } from "@/lib/sizes"
import Link from "next/link"

interface Product {
  id: number
  name: string
  price: number
  category: string
  image: string
  description: string
  fullDescription: string
  features: string[]
  colors: string[]
}

interface ProductQuickViewProps {
  product: Product | null
  isOpen: boolean
  onClose: () => void
  currentUser?: any
}

export default function ProductQuickView({ product, isOpen, onClose, currentUser }: ProductQuickViewProps) {
  const [selectedSize, setSelectedSize] = useState("")
  const [selectedColor, setSelectedColor] = useState("")
  const [quantity, setQuantity] = useState(1)
  const [isInWishlistState, setIsInWishlistState] = useState(false)
  const [isAnimating, setIsAnimating] = useState(false)

useEffect(() => {
    if (product && currentUser) {
      setIsInWishlistState(isInWishlist(currentUser.id, product.id))
    }
    // Reset form when product changes
    setSelectedSize("")
    setSelectedColor("")
    setQuantity(1)
  }, [product, currentUser])

if (!product) return null

const rating = getProductRating(product.id)
  const sizeGuide = getSizeGuide(product.id)
  const availableSizes = sizeGuide?.sizes.filter((s) => s.stock > 0) || []

const toggleWishlist = () => {
    if (!currentUser) {
      alert("Faça login para adicionar produtos à lista de desejos!")
      return
    }

setIsAnimating(true)
    setTimeout(() => setIsAnimating(false), 600)

if (isInWishlistState) {
      removeFromWishlist(currentUser.id, product.id)
      setIsInWishlistState(false)
    } else {
      addToWishlist(currentUser.id, product.id)
      setIsInWishlistState(true)
    }
  }

const addToCart = () => {
    if (availableSizes.length > 0 && !selectedSize) {
      alert("Por favor, selecione um tamanho!")
      return
    }
    if (product.colors.length > 0 && !selectedColor) {
      alert("Por favor, selecione uma cor!")
      return
    }

// Animação de sucesso
    setIsAnimating(true)
    setTimeout(() => setIsAnimating(false), 600)

alert(`${quantity}x ${product.name} adicionado ao carrinho!`)
  }

return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="sr-only">Visualização Rápida do Produto</DialogTitle>
        </DialogHeader>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {/* Imagem do Produto */}
          <div className="relative group">
            <div className="aspect-square bg-blue-50 rounded-lg overflow-hidden">
              <img
                src={product.image || "/placeholder.svg"}
                alt={product.name}
                className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
              />
            </div>
            <Badge className="absolute top-3 left-3 bg-blue-600 text-white animate-fade-in">{product.category}</Badge>
          </div>

{/* Informações do Produto */}
          <div className="space-y-4">
            <div className="animate-slide-up">
              <h2 className="text-2xl font-bold text-blue-900 mb-2">{product.name}</h2>

{rating.total > 0 && (
                <div className="flex items-center space-x-2 mb-3">
                  <div className="flex items-center">
                    {[...Array(5)].map((_, i) => (
                      <Star
                        key={i}
                        className={`h-4 w-4 transition-colors duration-300 ${
                          i < Math.floor(rating.average) ? "text-yellow-400 fill-current" : "text-gray-300"
                        }`}
                      />
                    ))}
                  </div>
                  <span className="text-sm text-blue-600">
                    {rating.average.toFixed(1)} ({rating.total} avaliações)
                  </span>
                </div>
              )}

<p className="text-3xl font-bold text-blue-800 mb-3 animate-pulse-price">R$ {product.price.toFixed(2)}</p>

<p className="text-blue-700 text-sm leading-relaxed">{product.fullDescription}</p>
            </div>

{/* Características */}
            <div className="animate-slide-up-delay-1">
              <h3 className="font-semibold text-blue-900 mb-2">Características:</h3>
              <div className="grid grid-cols-1 gap-1">
                {product.features.slice(0, 3).map((feature, index) => (
                  <div
                    key={index}
                    className="flex items-center space-x-2 animate-slide-in-left"
                    style={{ animationDelay: `${index * 100}ms` }}
                  >
                    <div className="w-2 h-2 bg-blue-600 rounded-full animate-bounce-small"></div>
                    <span className="text-sm text-blue-700">{feature}</span>
                  </div>
                ))}
              </div>
            </div>

{/* Seleção de Tamanho */}
            {availableSizes.length > 0 && (
              <div className="animate-slide-up-delay-2">
                <h3 className="font-semibold text-blue-900 mb-2">Tamanho:</h3>
                <div className="flex flex-wrap gap-2">
                  {availableSizes.map((size) => (
                    <Button
                      key={size.size}
                      variant={selectedSize === size.size ? "default" : "outline"}
                      onClick={() => setSelectedSize(size.size)}
                      className={`transition-all duration-300 transform hover:scale-105 ${
                        selectedSize === size.size
                          ? "bg-blue-600 hover:bg-blue-700 animate-bounce-once"
                          : "border-blue-200 text-blue-600 hover:bg-blue-50"
                      }`}
                    >
                      {size.size}
                    </Button>
                  ))}
                </div>
              </div>
            )}

{/* Seleção de Cor */}
            {product.colors.length > 0 && (
              <div className="animate-slide-up-delay-3">
                <h3 className="font-semibold text-blue-900 mb-2">Cor:</h3>
                <div className="flex flex-wrap gap-2">
                  {product.colors.map((color) => (
                    <Button
                      key={color}
                      variant={selectedColor === color ? "default" : "outline"}
                      onClick={() => setSelectedColor(color)}
                      className={`transition-all duration-300 transform hover:scale-105 ${
                        selectedColor === color
                          ? "bg-blue-600 hover:bg-blue-700 animate-bounce-once"
                          : "border-blue-200 text-blue-600 hover:bg-blue-50"
                      }`}
                    >
                      {color}
                    </Button>
                  ))}
                </div>
              </div>
            )}

{/* Quantidade */}
            <div className="animate-slide-up-delay-4">
              <h3 className="font-semibold text-blue-900 mb-2">Quantidade:</h3>
              <div className="flex items-center space-x-3">
                <Button
                  variant="outline"
                  onClick={() => setQuantity(Math.max(1, quantity - 1))}
                  className="border-blue-200 text-blue-600 hover:bg-blue-50 transition-all duration-200 hover:scale-110"
                >
                  <Minus className="h-4 w-4" />
                </Button>
                <span className="w-12 text-center font-semibold text-lg animate-number-change">{quantity}</span>
                <Button
                  variant="outline"
                  onClick={() => setQuantity(quantity + 1)}
                  className="border-blue-200 text-blue-600 hover:bg-blue-50 transition-all duration-200 hover:scale-110"
                >
                  <Plus className="h-4 w-4" />
                </Button>
              </div>
            </div>

{/* Botões de Ação */}
            <div className="space-y-3 animate-slide-up-delay-5">
              <Button
                onClick={addToCart}
                className={`w-full bg-blue-600 hover:bg-blue-700 text-white py-3 text-lg transition-all duration-300 transform hover:scale-105 ${
                  isAnimating ? "animate-pulse-success" : ""
                }`}
              >
                <ShoppingCart className="h-5 w-5 mr-2" />
                Adicionar ao Carrinho - R$ {(product.price * quantity).toFixed(2)}
              </Button>

<div className="grid grid-cols-2 gap-3">
                <Button
                  onClick={toggleWishlist}
                  variant="outline"
                  className={`border-blue-200 transition-all duration-300 transform hover:scale-105 ${
                    isInWishlistState ? "bg-red-50 text-red-600 border-red-200" : "text-blue-600 hover:bg-blue-50"
                  } ${isAnimating ? "animate-heart-beat" : ""}`}
                >
                  <Heart
                    className={`h-4 w-4 mr-2 transition-all duration-300 ${
                      isInWishlistState ? "fill-current animate-heart-fill" : ""
                    }`}
                  />
                  {isInWishlistState ? "Remover" : "Favoritar"}
                </Button>

<Link href={`/produto/${product.id}`}>
                  <Button
                    variant="outline"
                    className="w-full border-blue-200 text-blue-600 hover:bg-blue-50 transition-all duration-300 transform hover:scale-105 bg-transparent"
                    onClick={onClose}
                  >
                    <Eye className="h-4 w-4 mr-2" />
                    Ver Detalhes
                  </Button>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/ProductReviews.tsx"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { Star, ThumbsUp, CheckCircle } from "lucide-react"
import { getProductReviews, getProductRating, addReview, markReviewHelpful, type Review } from "@/lib/reviews"

interface ProductReviewsProps {
  productId: number
  currentUser?: any
}

export default function ProductReviews({ productId, currentUser }: ProductReviewsProps) {
  const [reviews, setReviews] = useState<Review[]>(getProductReviews(productId))
  const [showReviewForm, setShowReviewForm] = useState(false)
  const [newReview, setNewReview] = useState({
    rating: 5,
    title: "",
    comment: "",
    size: "",
    color: "",
  })

const rating = getProductRating(productId)

const handleSubmitReview = (e: React.FormEvent) => {
    e.preventDefault()
    if (!currentUser) {
      alert("Faça login para avaliar produtos!")
      return
    }

const review = addReview({
      productId,
      userId: currentUser.id,
      userName: currentUser.name,
      userAvatar: currentUser.avatar || "/placeholder.svg?height=40&width=40&text=U",
      rating: newReview.rating,
      title: newReview.title,
      comment: newReview.comment,
      verified: true,
      size: newReview.size,
      color: newReview.color,
    })

setReviews([review, ...reviews])
    setNewReview({ rating: 5, title: "", comment: "", size: "", color: "" })
    setShowReviewForm(false)
    alert("Avaliação enviada com sucesso!")
  }

const handleHelpful = (reviewId: number) => {
    markReviewHelpful(reviewId)
    setReviews(reviews.map((review) => (review.id === reviewId ? { ...review, helpful: review.helpful + 1 } : review)))
  }

const renderStars = (rating: number, interactive = false, onRatingChange?: (rating: number) => void) => {
    return (
      <div className="flex items-center space-x-1">
        {[1, 2, 3, 4, 5].map((star) => (
          <Star
            key={star}
            className={`h-4 w-4 ${
              star <= rating ? "text-yellow-400 fill-current" : "text-gray-300"
            } ${interactive ? "cursor-pointer hover:text-yellow-400" : ""}`}
            onClick={interactive && onRatingChange ? () => onRatingChange(star) : undefined}
          />
        ))}
      </div>
    )
  }

const getRatingDistribution = () => {
    const distribution = [0, 0, 0, 0, 0]
    reviews.forEach((review) => {
      distribution[review.rating - 1]++
    })
    return distribution.reverse()
  }

const ratingDistribution = getRatingDistribution()

return (
    <div className="space-y-6">
      {/* Resumo das Avaliações */}
      <Card className="border-blue-200">
        <CardHeader>
          <CardTitle className="text-blue-900">Avaliações dos Clientes</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {/* Média Geral */}
            <div className="text-center">
              <div className="text-4xl font-bold text-blue-900 mb-2">{rating.average.toFixed(1)}</div>
              {renderStars(Math.round(rating.average))}
              <p className="text-sm text-blue-600 mt-2">Baseado em {rating.total} avaliações</p>
            </div>

{/* Distribuição das Estrelas */}
            <div className="space-y-2">
              {[5, 4, 3, 2, 1].map((stars, index) => (
                <div key={stars} className="flex items-center space-x-2">
                  <span className="text-sm text-blue-700 w-8">{stars}</span>
                  <Star className="h-3 w-3 text-yellow-400 fill-current" />
                  <div className="flex-1 bg-gray-200 rounded-full h-2">
                    <div
                      className="bg-yellow-400 h-2 rounded-full"
                      style={{
                        width: rating.total > 0 ? `${(ratingDistribution[index] / rating.total) * 100}%` : "0%",
                      }}
                    />
                  </div>
                  <span className="text-sm text-blue-600 w-8">{ratingDistribution[index]}</span>
                </div>
              ))}
            </div>
          </div>

<div className="flex justify-center">
            <Button onClick={() => setShowReviewForm(!showReviewForm)} className="bg-blue-600 hover:bg-blue-700">
              {showReviewForm ? "Cancelar" : "Escrever Avaliação"}
            </Button>
          </div>
        </CardContent>
      </Card>

{/* Formulário de Nova Avaliação */}
      {showReviewForm && (
        <Card className="border-blue-200">
          <CardHeader>
            <CardTitle className="text-blue-900">Escrever Avaliação</CardTitle>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleSubmitReview} className="space-y-4">
              <div>
                <Label>Sua avaliação</Label>
                <div className="mt-2">
                  {renderStars(newReview.rating, true, (rating) => setNewReview((prev) => ({ ...prev, rating })))}
                </div>
              </div>

<div>
                <Label htmlFor="review-title">Título da avaliação</Label>
                <Input
                  id="review-title"
                  value={newReview.title}
                  onChange={(e) => setNewReview((prev) => ({ ...prev, title: e.target.value }))}
                  placeholder="Resuma sua experiência"
                  className="border-blue-200 focus:border-blue-400"
                  required
                />
              </div>

<div>
                <Label htmlFor="review-comment">Comentário</Label>
                <Textarea
                  id="review-comment"
                  value={newReview.comment}
                  onChange={(e) => setNewReview((prev) => ({ ...prev, comment: e.target.value }))}
                  placeholder="Conte sobre sua experiência com o produto"
                  className="border-blue-200 focus:border-blue-400"
                  rows={4}
                  required
                />
              </div>

<div className="grid grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="review-size">Tamanho comprado (opcional)</Label>
                  <Input
                    id="review-size"
                    value={newReview.size}
                    onChange={(e) => setNewReview((prev) => ({ ...prev, size: e.target.value }))}
                    placeholder="Ex: M"
                    className="border-blue-200 focus:border-blue-400"
                  />
                </div>
                <div>
                  <Label htmlFor="review-color">Cor comprada (opcional)</Label>
                  <Input
                    id="review-color"
                    value={newReview.color}
                    onChange={(e) => setNewReview((prev) => ({ ...prev, color: e.target.value }))}
                    placeholder="Ex: Azul"
                    className="border-blue-200 focus:border-blue-400"
                  />
                </div>
              </div>

<Button type="submit" className="w-full bg-blue-600 hover:bg-blue-700">
                Publicar Avaliação
              </Button>
            </form>
          </CardContent>
        </Card>
      )}

{/* Lista de Avaliações */}
      <div className="space-y-4">
        {reviews.length === 0 ? (
          <Card className="border-blue-200">
            <CardContent className="p-8 text-center">
              <Star className="h-12 w-12 text-blue-400 mx-auto mb-4" />
              <h3 className="text-lg font-semibold text-blue-900 mb-2">Seja o primeiro a avaliar!</h3>
              <p className="text-blue-600">Compartilhe sua experiência com este produto</p>
            </CardContent>
          </Card>
        ) : (
          reviews.map((review) => (
            <Card key={review.id} className="border-blue-200">
              <CardContent className="p-6">
                <div className="flex items-start space-x-4">
                  <img
                    src={review.userAvatar || "/placeholder.svg"}
                    alt={review.userName}
                    className="w-10 h-10 rounded-full"
                  />
                  <div className="flex-1">
                    <div className="flex items-center justify-between mb-2">
                      <div className="flex items-center space-x-2">
                        <h4 className="font-semibold text-blue-900">{review.userName}</h4>
                        {review.verified && (
                          <Badge className="bg-green-100 text-green-800 text-xs">
                            <CheckCircle className="h-3 w-3 mr-1" />
                            Compra verificada
                          </Badge>
                        )}
                      </div>
                      <span className="text-sm text-blue-600">{review.date}</span>
                    </div>

<div className="flex items-center space-x-2 mb-2">
                      {renderStars(review.rating)}
                      {(review.size || review.color) && (
                        <div className="flex space-x-2">
                          {review.size && (
                            <Badge variant="outline" className="text-xs">
                              Tamanho: {review.size}
                            </Badge>
                          )}
                          {review.color && (
                            <Badge variant="outline" className="text-xs">
                              Cor: {review.color}
                            </Badge>
                          )}
                        </div>
                      )}
                    </div>

<h5 className="font-medium text-blue-900 mb-2">{review.title}</h5>
                    <p className="text-blue-700 mb-3">{review.comment}</p>

<div className="flex items-center justify-between">
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={() => handleHelpful(review.id)}
                        className="text-blue-600 hover:bg-blue-50"
                      >
                        <ThumbsUp className="h-4 w-4 mr-1" />
                        Útil ({review.helpful})
                      </Button>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ShareButton.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Share2, Copy, Facebook, Twitter, MessageCircle, Mail, Check, Smartphone } from "lucide-react"

interface ShareButtonProps {
  url?: string
  title?: string
  description?: string
  className?: string
}

export default function ShareButton({
  url = typeof window !== "undefined" ? window.location.href : "",
  title = "Vitta - Sua Loja de Fitness",
  description = "Roupas, acessórios e suplementos de alta qualidade para sua jornada fitness",
  className = "",
}: ShareButtonProps) {
  const [isOpen, setIsOpen] = useState(false)
  const [copied, setCopied] = useState(false)
  const [qrCodeUrl, setQrCodeUrl] = useState("")

// Gerar QR Code usando API gratuita
  const generateQRCode = () => {
    const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(url)}`
    setQrCodeUrl(qrUrl)
  }

const copyToClipboard = async () => {
    try {
      await navigator.clipboard.writeText(url)
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    } catch (err) {
      // Fallback para navegadores mais antigos
      const textArea = document.createElement("textarea")
      textArea.value = url
      document.body.appendChild(textArea)
      textArea.select()
      document.execCommand("copy")
      document.body.removeChild(textArea)
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    }
  }

const shareOptions = [
    {
      name: "WhatsApp",
      icon: MessageCircle,
      color: "bg-green-500 hover:bg-green-600",
      url: `https://wa.me/?text=${encodeURIComponent(`${title} - ${description}\n${url}`)}`,
    },
    {
      name: "Facebook",
      icon: Facebook,
      color: "bg-blue-600 hover:bg-blue-700",
      url: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}"e=${encodeURIComponent(title)}`,
    },
    {
      name: "Twitter",
      icon: Twitter,
      color: "bg-sky-500 hover:bg-sky-600",
      url: `https://twitter.com/intent/tweet?text=${encodeURIComponent(title)}&url=${encodeURIComponent(url)}`,
    },
    {
      name: "Email",
      icon: Mail,
      color: "bg-gray-600 hover:bg-gray-700",
      url: `mailto:?subject=${encodeURIComponent(title)}&body=${encodeURIComponent(`${description}\n\n${url}`)}`,
    },
  ]

const handleShare = (shareUrl: string) => {
    window.open(shareUrl, "_blank", "width=600,height=400")
  }

const handleNativeShare = async () => {
    if (navigator.share) {
      try {
        await navigator.share({
          title,
          text: description,
          url,
        })
      } catch (err) {
        console.log("Erro ao compartilhar:", err)
      }
    }
  }

return (
    <Dialog open={isOpen} onOpenChange={setIsOpen}>
      <DialogTrigger asChild>
        <Button
          variant="outline"
          className={`border-blue-200 text-blue-600 hover:bg-blue-50 transition-all duration-300 hover:scale-105 ${className}`}
          onClick={generateQRCode}
        >
          <Share2 className="h-4 w-4 mr-2" />
          Compartilhar
        </Button>
      </DialogTrigger>

<DialogContent className="max-w-md">
        <DialogHeader>
          <DialogTitle className="text-blue-900 flex items-center">
            <Share2 className="h-5 w-5 mr-2" />
            Compartilhar Vitta
          </DialogTitle>
        </DialogHeader>

<div className="space-y-6">
          {/* Preview do Site */}
          <Card className="border-blue-200">
            <CardContent className="p-4">
              <div className="flex items-start space-x-3">
                <div className="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center text-white font-bold text-lg">
                  V
                </div>
                <div className="flex-1">
                  <h3 className="font-semibold text-blue-900">{title}</h3>
                  <p className="text-sm text-blue-600 mt-1">{description}</p>
                  <Badge className="mt-2 bg-blue-100 text-blue-800">vitta.com.br</Badge>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Link para Copiar */}
          <div>
            <label className="block text-sm font-medium text-blue-900 mb-2">Link do Site</label>
            <div className="flex space-x-2">
              <Input value={url} readOnly className="border-blue-200 focus:border-blue-400 bg-blue-50" />
              <Button
                onClick={copyToClipboard}
                variant="outline"
                className={`border-blue-200 transition-all duration-300 ${
                  copied ? "bg-green-50 text-green-600 border-green-200" : "text-blue-600 hover:bg-blue-50"
                }`}
              >
                {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
              </Button>
            </div>
            {copied && <p className="text-sm text-green-600 mt-1 animate-fade-in">✅ Link copiado!</p>}
          </div>

{/* Botões de Compartilhamento */}
          <div>
            <label className="block text-sm font-medium text-blue-900 mb-3">Compartilhar em:</label>
            <div className="grid grid-cols-2 gap-3">
              {shareOptions.map((option) => (
                <Button
                  key={option.name}
                  onClick={() => handleShare(option.url)}
                  className={`${option.color} text-white transition-all duration-300 hover:scale-105`}
                >
                  <option.icon className="h-4 w-4 mr-2" />
                  {option.name}
                </Button>
              ))}
            </div>
          </div>

{/* Compartilhamento Nativo (Mobile) */}
          {typeof navigator !== "undefined" && navigator.share && (
            <Button
              onClick={handleNativeShare}
              className="w-full bg-blue-600 hover:bg-blue-700 text-white transition-all duration-300 hover:scale-105"
            >
              <Smartphone className="h-4 w-4 mr-2" />
              Compartilhar (Nativo)
            </Button>
          )}

{/* QR Code */}
          {qrCodeUrl && (
            <div className="text-center">
              <label className="block text-sm font-medium text-blue-900 mb-3">QR Code</label>
              <div className="inline-block p-4 bg-white border-2 border-blue-200 rounded-lg">
                <img src={qrCodeUrl || "/placeholder.svg"} alt="QR Code do site Vitta" className="w-32 h-32" />
              </div>
              <p className="text-xs text-blue-600 mt-2">Escaneie para acessar o site</p>
            </div>
          )}

{/* Estatísticas de Compartilhamento */}
          <Card className="bg-blue-50 border-blue-200">
            <CardContent className="p-4">
              <h4 className="font-medium text-blue-900 mb-2">💡 Dica:</h4>
              <p className="text-sm text-blue-700">
                Compartilhe com seus amigos e ganhe <strong>10% de desconto</strong> na próxima compra quando eles
                fizerem o primeiro pedido!
              </p>
            </CardContent>
          </Card>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/SizeGuide.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Ruler, Package, AlertCircle } from "lucide-react"
import { getSizeGuide, getAvailableSizes, type SizeInfo } from "@/lib/sizes"

interface SizeGuideProps {
  productId: number
  selectedSize: string
  onSizeSelect: (size: string) => void
}

export default function SizeGuide({ productId, selectedSize, onSizeSelect }: SizeGuideProps) {
  const [showSizeChart, setShowSizeChart] = useState(false)
  const sizeGuide = getSizeGuide(productId)
  const availableSizes = getAvailableSizes(productId)

if (!sizeGuide || availableSizes.length === 0) {
    return null
  }

const getSizeStatus = (size: SizeInfo) => {
    if (size.stock === 0) return { status: "out-of-stock", label: "Esgotado", color: "bg-gray-200 text-gray-500" }
    if (size.stock <= 5)
      return {
        status: "low-stock",
        label: `Últimas ${size.stock}`,
        color: "bg-yellow-100 text-yellow-800 border-yellow-200",
      }
    return { status: "in-stock", label: "Disponível", color: "bg-green-100 text-green-800 border-green-200" }
  }

return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h3 className="font-semibold text-blue-900">Tamanho:</h3>
        <Dialog open={showSizeChart} onOpenChange={setShowSizeChart}>
          <DialogTrigger asChild>
            <Button variant="ghost" size="sm" className="text-blue-600 hover:bg-blue-50">
              <Ruler className="h-4 w-4 mr-1" />
              Guia de Tamanhos
            </Button>
          </DialogTrigger>
          <DialogContent className="max-w-2xl">
            <DialogHeader>
              <DialogTitle className="text-blue-900">{sizeGuide.sizeChart?.title || "Guia de Tamanhos"}</DialogTitle>
            </DialogHeader>
            <div className="space-y-4">
              {sizeGuide.sizeChart && (
                <div className="overflow-x-auto">
                  <table className="w-full border-collapse">
                    <thead>
                      <tr className="border-b border-blue-200">
                        {sizeGuide.sizeChart.headers.map((header, index) => (
                          <th key={index} className="text-left py-2 px-4 font-semibold text-blue-900">
                            {header}
                          </th>
                        ))}
                      </tr>
                    </thead>
                    <tbody>
                      {sizeGuide.sizeChart.rows.map((row, index) => (
                        <tr key={index} className="border-b border-blue-100">
                          {row.map((cell, cellIndex) => (
                            <td key={cellIndex} className="py-2 px-4 text-blue-700">
                              {cell}
                            </td>
                          ))}
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}

<div className="bg-blue-50 p-4 rounded-lg border border-blue-200">
                <div className="flex items-start space-x-2">
                  <AlertCircle className="h-5 w-5 text-blue-600 mt-0.5" />
                  <div>
                    <h4 className="font-medium text-blue-900 mb-2">Dicas de Medição:</h4>
                    <ul className="text-sm text-blue-700 space-y-1">
                      <li>• Use uma fita métrica flexível</li>
                      <li>• Meça sobre a pele ou roupa íntima</li>
                      <li>• Mantenha a fita firme, mas não apertada</li>
                      <li>• Em caso de dúvida, escolha o tamanho maior</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </DialogContent>
        </Dialog>
      </div>

{/* Seletor de Tamanhos */}
      <div className="grid grid-cols-3 sm:grid-cols-5 gap-2">
        {sizeGuide.sizes.map((size) => {
          const sizeStatus = getSizeStatus(size)
          const isSelected = selectedSize === size.size
          const isAvailable = size.stock > 0

return (
            <div key={size.size} className="relative">
              <Button
                variant={isSelected ? "default" : "outline"}
                onClick={() => isAvailable && onSizeSelect(size.size)}
                disabled={!isAvailable}
                className={`w-full h-12 ${
                  isSelected
                    ? "bg-blue-600 hover:bg-blue-700 text-white"
                    : isAvailable
                      ? "border-blue-200 text-blue-600 hover:bg-blue-50"
                      : "border-gray-200 text-gray-400 cursor-not-allowed"
                }`}
              >
                <div className="text-center">
                  <div className="font-semibold">{size.size}</div>
                  {size.measurements.chest && <div className="text-xs opacity-75">{size.measurements.chest}</div>}
                </div>
              </Button>

{/* Badge de Status */}
              {sizeStatus.status === "low-stock" && (
                <Badge className={`absolute -top-2 -right-2 text-xs ${sizeStatus.color}`}>{sizeStatus.label}</Badge>
              )}
              {sizeStatus.status === "out-of-stock" && (
                <div className="absolute inset-0 bg-gray-200 bg-opacity-75 rounded flex items-center justify-center">
                  <span className="text-xs font-medium text-gray-600">Esgotado</span>
                </div>
              )}
            </div>
          )
        })}
      </div>

{/* Informações do Tamanho Selecionado */}
      {selectedSize && (
        <Card className="bg-blue-50 border-blue-200">
          <CardContent className="p-4">
            {(() => {
              const selectedSizeInfo = sizeGuide.sizes.find((s) => s.size === selectedSize)
              if (!selectedSizeInfo) return null

return (
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <h4 className="font-medium text-blue-900">Tamanho {selectedSize} selecionado</h4>
                    <div className="flex items-center space-x-2">
                      <Package className="h-4 w-4 text-blue-600" />
                      <span className="text-sm text-blue-700">{selectedSizeInfo.stock} em estoque</span>
                    </div>
                  </div>

<div className="grid grid-cols-2 gap-4 text-sm">
                    {selectedSizeInfo.measurements.chest && (
                      <div>
                        <span className="text-blue-600">Peito/Busto:</span>
                        <span className="ml-2 font-medium text-blue-900">{selectedSizeInfo.measurements.chest}</span>
                      </div>
                    )}
                    {selectedSizeInfo.measurements.waist && (
                      <div>
                        <span className="text-blue-600">Cintura:</span>
                        <span className="ml-2 font-medium text-blue-900">{selectedSizeInfo.measurements.waist}</span>
                      </div>
                    )}
                    {selectedSizeInfo.measurements.length && (
                      <div>
                        <span className="text-blue-600">Comprimento:</span>
                        <span className="ml-2 font-medium text-blue-900">{selectedSizeInfo.measurements.length}</span>
                      </div>
                    )}
                    {selectedSizeInfo.measurements.inseam && (
                      <div>
                        <span className="text-blue-600">Entrepernas:</span>
                        <span className="ml-2 font-medium text-blue-900">{selectedSizeInfo.measurements.inseam}</span>
                      </div>
                    )}
                  </div>
                </div>
              )
            })()}
          </CardContent>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx"
'use client'

import * as React from 'react'
import {
  ThemeProvider as NextThemesProvider,
  type ThemeProviderProps,
} from 'next-themes'

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
[V0_FILE]typescriptreact:file="components/ui/accordion.tsx"
"use client"

import * as React from "react"
import * as AccordionPrimitive from "@radix-ui/react-accordion"
import { ChevronDown } from "lucide-react"

import { cn } from "@/lib/utils"

const Accordion = AccordionPrimitive.Root

const AccordionItem = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
>(({ className, ...props }, ref) => (
  <AccordionPrimitive.Item
    ref={ref}
    className={cn("border-b", className)}
    {...props}
  />
))
AccordionItem.displayName = "AccordionItem"

const AccordionTrigger = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <AccordionPrimitive.Header className="flex">
    <AccordionPrimitive.Trigger
      ref={ref}
      className={cn(
        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
        className
      )}
      {...props}
    >
      {children}
      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
    </AccordionPrimitive.Trigger>
  </AccordionPrimitive.Header>
))
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName

const AccordionContent = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <AccordionPrimitive.Content
    ref={ref}
    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
    {...props}
  >
    <div className={cn("pb-4 pt-0", className)}>{children}</div>
  </AccordionPrimitive.Content>
))

AccordionContent.displayName = AccordionPrimitive.Content.displayName

export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
[V0_FILE]typescriptreact:file="components/ui/alert-dialog.tsx"
"use client"

import * as React from "react"
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"

import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"

const AlertDialog = AlertDialogPrimitive.Root

const AlertDialogTrigger = AlertDialogPrimitive.Trigger

const AlertDialogPortal = AlertDialogPrimitive.Portal

const AlertDialogOverlay = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Overlay
    className={cn(
      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className
    )}
    {...props}
    ref={ref}
  />
))
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName

const AlertDialogContent = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
>(({ className, ...props }, ref) => (
  <AlertDialogPortal>
    <AlertDialogOverlay />
    <AlertDialogPrimitive.Content
      ref={ref}
      className={cn(
        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
        className
      )}
      {...props}
    />
  </AlertDialogPortal>
))
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName

const AlertDialogHeader = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col space-y-2 text-center sm:text-left",
      className
    )}
    {...props}
  />
)
AlertDialogHeader.displayName = "AlertDialogHeader"

const AlertDialogFooter = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
      className
    )}
    {...props}
  />
)
AlertDialogFooter.displayName = "AlertDialogFooter"

const AlertDialogTitle = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Title
    ref={ref}
    className={cn("text-lg font-semibold", className)}
    {...props}
  />
))
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName

const AlertDialogDescription = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Description
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
))
AlertDialogDescription.displayName =
  AlertDialogPrimitive.Description.displayName

const AlertDialogAction = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Action>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Action
    ref={ref}
    className={cn(buttonVariants(), className)}
    {...props}
  />
))
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName

const AlertDialogCancel = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Cancel
    ref={ref}
    className={cn(
      buttonVariants({ variant: "outline" }),
      "mt-2 sm:mt-0",
      className
    )}
    {...props}
  />
))
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName

export {
  AlertDialog,
  AlertDialogPortal,
  AlertDialogOverlay,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
}
[V0_FILE]typescriptreact:file="components/ui/alert.tsx"
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const alertVariants = cva(
  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
  {
    variants: {
      variant: {
        default: "bg-background text-foreground",
        destructive:
          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

const Alert = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
>(({ className, variant, ...props }, ref) => (
  <div
    ref={ref}
    role="alert"
    className={cn(alertVariants({ variant }), className)}
    {...props}
  />
))
Alert.displayName = "Alert"

const AlertTitle = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
  <h5
    ref={ref}
    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
    {...props}
  />
))
AlertTitle.displayName = "AlertTitle"

const AlertDescription = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("text-sm [&_p]:leading-relaxed", className)}
    {...props}
  />
))
AlertDescription.displayName = "AlertDescription"

export { Alert, AlertTitle, AlertDescription }
[V0_FILE]typescriptreact:file="components/ui/aspect-ratio.tsx"
"use client"

import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"

const AspectRatio = AspectRatioPrimitive.Root

export { AspectRatio }
[V0_FILE]typescriptreact:file="components/ui/avatar.tsx"
"use client"

import * as React from "react"
import * as AvatarPrimitive from "@radix-ui/react-avatar"

import { cn } from "@/lib/utils"

const Avatar = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Root
    ref={ref}
    className={cn(
      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
      className
    )}
    {...props}
  />
))
Avatar.displayName = AvatarPrimitive.Root.displayName

const AvatarImage = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Image>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Image
    ref={ref}
    className={cn("aspect-square h-full w-full", className)}
    {...props}
  />
))
AvatarImage.displayName = AvatarPrimitive.Image.displayName

const AvatarFallback = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Fallback>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Fallback
    ref={ref}
    className={cn(
      "flex h-full w-full items-center justify-center rounded-full bg-muted",
      className
    )}
    {...props}
  />
))
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName

export { Avatar, AvatarImage, AvatarFallback }
[V0_FILE]typescriptreact:file="components/ui/badge.tsx"
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const badgeVariants = cva(
  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default:
          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
        secondary:
          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive:
          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
        outline: "text-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

export interface BadgeProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {
  return (
    <div className={cn(badgeVariants({ variant }), className)} {...props} />
  )
}

export { Badge, badgeVariants }
[V0_FILE]typescriptreact:file="components/ui/breadcrumb.tsx"
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { ChevronRight, MoreHorizontal } from "lucide-react"

import { cn } from "@/lib/utils"

const Breadcrumb = React.forwardRef<
  HTMLElement,
  React.ComponentPropsWithoutRef<"nav"> & {
    separator?: React.ReactNode
  }
>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
Breadcrumb.displayName = "Breadcrumb"

const BreadcrumbList = React.forwardRef<
  HTMLOListElement,
  React.ComponentPropsWithoutRef<"ol">
>(({ className, ...props }, ref) => (
  <ol
    ref={ref}
    className={cn(
      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
      className
    )}
    {...props}
  />
))
BreadcrumbList.displayName = "BreadcrumbList"

const BreadcrumbItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentPropsWithoutRef<"li">
>(({ className, ...props }, ref) => (
  <li
    ref={ref}
    className={cn("inline-flex items-center gap-1.5", className)}
    {...props}
  />
))
BreadcrumbItem.displayName = "BreadcrumbItem"

const BreadcrumbLink = React.forwardRef<
  HTMLAnchorElement,
  React.ComponentPropsWithoutRef<"a"> & {
    asChild?: boolean
  }
>(({ asChild, className, ...props }, ref) => {
  const Comp = asChild ? Slot : "a"

return (
    <Comp
      ref={ref}
      className={cn("transition-colors hover:text-foreground", className)}
      {...props}
    />
  )
})
BreadcrumbLink.displayName = "BreadcrumbLink"

const BreadcrumbPage = React.forwardRef<
  HTMLSpanElement,
  React.ComponentPropsWithoutRef<"span">
>(({ className, ...props }, ref) => (
  <span
    ref={ref}
    role="link"
    aria-disabled="true"
    aria-current="page"
    className={cn("font-normal text-foreground", className)}
    {...props}
  />
))
BreadcrumbPage.displayName = "BreadcrumbPage"

const BreadcrumbSeparator = ({
  children,
  className,
  ...props
}: React.ComponentProps<"li">) => (
  <li
    role="presentation"
    aria-hidden="true"
    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
    {...props}
  >
    {children ?? <ChevronRight />}
  </li>
)
BreadcrumbSeparator.displayName = "BreadcrumbSeparator"

const BreadcrumbEllipsis = ({
  className,
  ...props
}: React.ComponentProps<"span">) => (
  <span
    role="presentation"
    aria-hidden="true"
    className={cn("flex h-9 w-9 items-center justify-center", className)}
    {...props}
  >
    <MoreHorizontal className="h-4 w-4" />
    <span className="sr-only">More</span>
  </span>
)
BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"

export {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
}
[V0_FILE]typescriptreact:file="components/ui/button.tsx"
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive:
          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline:
          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
        secondary:
          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button"
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    )
  }
)
Button.displayName = "Button"

export { Button, buttonVariants }
[V0_FILE]typescriptreact:file="components/ui/calendar.tsx"
'use client'

import * as React from 'react'
import {
  ChevronDownIcon,
  ChevronLeftIcon,
  ChevronRightIcon,
} from 'lucide-react'
import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker'

import { cn } from '@/lib/utils'
import { Button, buttonVariants } from '@/components/ui/button'

function Calendar({
  className,
  classNames,
  showOutsideDays = true,
  captionLayout = 'label',
  buttonVariant = 'ghost',
  formatters,
  components,
  ...props
}: React.ComponentProps<typeof DayPicker> & {
  buttonVariant?: React.ComponentProps<typeof Button>['variant']
}) {
  const defaultClassNames = getDefaultClassNames()

return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn(
        'bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
        className
      )}
      captionLayout={captionLayout}
      formatters={{
        formatMonthDropdown: date =>
          date.toLocaleString('default', { month: 'short' }),
        ...formatters,
      }}
      classNames={{
        root: cn('w-fit', defaultClassNames.root),
        months: cn(
          'flex gap-4 flex-col md:flex-row relative',
          defaultClassNames.months
        ),
        month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
        nav: cn(
          'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between',
          defaultClassNames.nav
        ),
        button_previous: cn(
          buttonVariants({ variant: buttonVariant }),
          'size-[--cell-size] aria-disabled:opacity-50 p-0 select-none',
          defaultClassNames.button_previous
        ),
        button_next: cn(
          buttonVariants({ variant: buttonVariant }),
          'size-[--cell-size] aria-disabled:opacity-50 p-0 select-none',
          defaultClassNames.button_next
        ),
        month_caption: cn(
          'flex items-center justify-center h-[--cell-size] w-full px-[--cell-size]',
          defaultClassNames.month_caption
        ),
        dropdowns: cn(
          'w-full flex items-center text-sm font-medium justify-center h-[--cell-size] gap-1.5',
          defaultClassNames.dropdowns
        ),
        dropdown_root: cn(
          'relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md',
          defaultClassNames.dropdown_root
        ),
        dropdown: cn(
          'absolute bg-popover inset-0 opacity-0',
          defaultClassNames.dropdown
        ),
        caption_label: cn(
          'select-none font-medium',
          captionLayout === 'label'
            ? 'text-sm'
            : 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5',
          defaultClassNames.caption_label
        ),
        table: 'w-full border-collapse',
        weekdays: cn('flex', defaultClassNames.weekdays),
        weekday: cn(
          'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none',
          defaultClassNames.weekday
        ),
        week: cn('flex w-full mt-2', defaultClassNames.week),
        week_number_header: cn(
          'select-none w-[--cell-size]',
          defaultClassNames.week_number_header
        ),
        week_number: cn(
          'text-[0.8rem] select-none text-muted-foreground',
          defaultClassNames.week_number
        ),
        day: cn(
          'relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none',
          defaultClassNames.day
        ),
        range_start: cn(
          'rounded-l-md bg-accent',
          defaultClassNames.range_start
        ),
        range_middle: cn('rounded-none', defaultClassNames.range_middle),
        range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end),
        today: cn(
          'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none',
          defaultClassNames.today
        ),
        outside: cn(
          'text-muted-foreground aria-selected:text-muted-foreground',
          defaultClassNames.outside
        ),
        disabled: cn(
          'text-muted-foreground opacity-50',
          defaultClassNames.disabled
        ),
        hidden: cn('invisible', defaultClassNames.hidden),
        ...classNames,
      }}
      components={{
        Root: ({ className, rootRef, ...props }) => {
          return (
            <div
              data-slot="calendar"
              ref={rootRef}
              className={cn(className)}
              {...props}
            />
          )
        },
        Chevron: ({ className, orientation, ...props }) => {
          if (orientation === 'left') {
            return (
              <ChevronLeftIcon className={cn('size-4', className)} {...props} />
            )
          }

if (orientation === 'right') {
            return (
              <ChevronRightIcon
                className={cn('size-4', className)}
                {...props}
              />
            )
          }

return (
            <ChevronDownIcon className={cn('size-4', className)} {...props} />
          )
        },
        DayButton: CalendarDayButton,
        WeekNumber: ({ children, ...props }) => {
          return (
            <td {...props}>
              <div className="flex size-[--cell-size] items-center justify-center text-center">
                {children}
              </div>
            </td>
          )
        },
        ...components,
      }}
      {...props}
    />
  )
}

function CalendarDayButton({
  className,
  day,
  modifiers,
  ...props
}: React.ComponentProps<typeof DayButton>) {
  const defaultClassNames = getDefaultClassNames()

const ref = React.useRef<HTMLButtonElement>(null)
  React.useEffect(() => {
    if (modifiers.focused) ref.current?.focus()
  }, [modifiers.focused])

return (
    <Button
      ref={ref}
      variant="ghost"
      size="icon"
      data-day={day.date.toLocaleDateString()}
      data-selected-single={
        modifiers.selected &&
        !modifiers.range_start &&
        !modifiers.range_end &&
        !modifiers.range_middle
      }
      data-range-start={modifiers.range_start}
      data-range-end={modifiers.range_end}
      data-range-middle={modifiers.range_middle}
      className={cn(
        'data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square w-full min-w-[--cell-size] flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70',
        defaultClassNames.day,
        className
      )}
      {...props}
    />
  )
}

export { Calendar, CalendarDayButton }
[V0_FILE]typescriptreact:file="components/ui/card.tsx"
import * as React from "react"

import { cn } from "@/lib/utils"

const Card = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "rounded-lg border bg-card text-card-foreground shadow-sm",
      className
    )}
    {...props}
  />
))
Card.displayName = "Card"

const CardHeader = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("flex flex-col space-y-1.5 p-6", className)}
    {...props}
  />
))
CardHeader.displayName = "CardHeader"

const CardTitle = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "text-2xl font-semibold leading-none tracking-tight",
      className
    )}
    {...props}
  />
))
CardTitle.displayName = "CardTitle"

const CardDescription = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
))
CardDescription.displayName = "CardDescription"

const CardContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
))
CardContent.displayName = "CardContent"

const CardFooter = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("flex items-center p-6 pt-0", className)}
    {...props}
  />
))
CardFooter.displayName = "CardFooter"

export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
[V0_FILE]typescriptreact:file="components/ui/carousel.tsx"
"use client"

import * as React from "react"
import useEmblaCarousel, {
  type UseEmblaCarouselType,
} from "embla-carousel-react"
import { ArrowLeft, ArrowRight } from "lucide-react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"

type CarouselApi = UseEmblaCarouselType[1]
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
type CarouselOptions = UseCarouselParameters[0]
type CarouselPlugin = UseCarouselParameters[1]

type CarouselProps = {
  opts?: CarouselOptions
  plugins?: CarouselPlugin
  orientation?: "horizontal" | "vertical"
  setApi?: (api: CarouselApi) => void
}

type CarouselContextProps = {
  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
  api: ReturnType<typeof useEmblaCarousel>[1]
  scrollPrev: () => void
  scrollNext: () => void
  canScrollPrev: boolean
  canScrollNext: boolean
} & CarouselProps

const CarouselContext = React.createContext<CarouselContextProps | null>(null)

function useCarousel() {
  const context = React.useContext(CarouselContext)

if (!context) {
    throw new Error("useCarousel must be used within a <Carousel />")
  }

return context
}

const Carousel = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & CarouselProps
>(
  (
    {
      orientation = "horizontal",
      opts,
      setApi,
      plugins,
      className,
      children,
      ...props
    },
    ref
  ) => {
    const [carouselRef, api] = useEmblaCarousel(
      {
        ...opts,
        axis: orientation === "horizontal" ? "x" : "y",
      },
      plugins
    )
    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
    const [canScrollNext, setCanScrollNext] = React.useState(false)

const onSelect = React.useCallback((api: CarouselApi) => {
      if (!api) {
        return
      }

setCanScrollPrev(api.canScrollPrev())
      setCanScrollNext(api.canScrollNext())
    }, [])

const scrollPrev = React.useCallback(() => {
      api?.scrollPrev()
    }, [api])

const scrollNext = React.useCallback(() => {
      api?.scrollNext()
    }, [api])

const handleKeyDown = React.useCallback(
      (event: React.KeyboardEvent<HTMLDivElement>) => {
        if (event.key === "ArrowLeft") {
          event.preventDefault()
          scrollPrev()
        } else if (event.key === "ArrowRight") {
          event.preventDefault()
          scrollNext()
        }
      },
      [scrollPrev, scrollNext]
    )

React.useEffect(() => {
      if (!api || !setApi) {
        return
      }

setApi(api)
    }, [api, setApi])

React.useEffect(() => {
      if (!api) {
        return
      }

onSelect(api)
      api.on("reInit", onSelect)
      api.on("select", onSelect)

return () => {
        api?.off("select", onSelect)
      }
    }, [api, onSelect])

return (
      <CarouselContext.Provider
        value={{
          carouselRef,
          api: api,
          opts,
          orientation:
            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
          scrollPrev,
          scrollNext,
          canScrollPrev,
          canScrollNext,
        }}
      >
        <div
          ref={ref}
          onKeyDownCapture={handleKeyDown}
          className={cn("relative", className)}
          role="region"
          aria-roledescription="carousel"
          {...props}
        >
          {children}
        </div>
      </CarouselContext.Provider>
    )
  }
)
Carousel.displayName = "Carousel"

const CarouselContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const { carouselRef, orientation } = useCarousel()

return (
    <div ref={carouselRef} className="overflow-hidden">
      <div
        ref={ref}
        className={cn(
          "flex",
          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
          className
        )}
        {...props}
      />
    </div>
  )
})
CarouselContent.displayName = "CarouselContent"

const CarouselItem = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const { orientation } = useCarousel()

return (
    <div
      ref={ref}
      role="group"
      aria-roledescription="slide"
      className={cn(
        "min-w-0 shrink-0 grow-0 basis-full",
        orientation === "horizontal" ? "pl-4" : "pt-4",
        className
      )}
      {...props}
    />
  )
})
CarouselItem.displayName = "CarouselItem"

const CarouselPrevious = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<typeof Button>
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
  const { orientation, scrollPrev, canScrollPrev } = useCarousel()

return (
    <Button
      ref={ref}
      variant={variant}
      size={size}
      className={cn(
        "absolute  h-8 w-8 rounded-full",
        orientation === "horizontal"
          ? "-left-12 top-1/2 -translate-y-1/2"
          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
        className
      )}
      disabled={!canScrollPrev}
      onClick={scrollPrev}
      {...props}
    >
      <ArrowLeft className="h-4 w-4" />
      <span className="sr-only">Previous slide</span>
    </Button>
  )
})
CarouselPrevious.displayName = "CarouselPrevious"

const CarouselNext = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<typeof Button>
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
  const { orientation, scrollNext, canScrollNext } = useCarousel()

return (
    <Button
      ref={ref}
      variant={variant}
      size={size}
      className={cn(
        "absolute h-8 w-8 rounded-full",
        orientation === "horizontal"
          ? "-right-12 top-1/2 -translate-y-1/2"
          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
        className
      )}
      disabled={!canScrollNext}
      onClick={scrollNext}
      {...props}
    >
      <ArrowRight className="h-4 w-4" />
      <span className="sr-only">Next slide</span>
    </Button>
  )
})
CarouselNext.displayName = "CarouselNext"

export {
  type CarouselApi,
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPrevious,
  CarouselNext,
}
[V0_FILE]typescriptreact:file="components/ui/chart.tsx"
"use client"

import * as React from "react"
import * as RechartsPrimitive from "recharts"

import { cn } from "@/lib/utils"

// Format: { THEME_NAME: CSS_SELECTOR }
const THEMES = { light: "", dark: ".dark" } as const

export type ChartConfig = {
  [k in string]: {
    label?: React.ReactNode
    icon?: React.ComponentType
  } & (
    | { color?: string; theme?: never }
    | { color?: never; theme: Record<keyof typeof THEMES, string> }
  )
}

type ChartContextProps = {
  config: ChartConfig
}

const ChartContext = React.createContext<ChartContextProps | null>(null)

function useChart() {
  const context = React.useContext(ChartContext)

if (!context) {
    throw new Error("useChart must be used within a <ChartContainer />")
  }

return context
}

const ChartContainer = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & {
    config: ChartConfig
    children: React.ComponentProps<
      typeof RechartsPrimitive.ResponsiveContainer
    >["children"]
  }
>(({ id, className, children, config, ...props }, ref) => {
  const uniqueId = React.useId()
  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`

return (
    <ChartContext.Provider value={{ config }}>
      <div
        data-chart={chartId}
        ref={ref}
        className={cn(
          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
          className
        )}
        {...props}
      >
        <ChartStyle id={chartId} config={config} />
        <RechartsPrimitive.ResponsiveContainer>
          {children}
        </RechartsPrimitive.ResponsiveContainer>
      </div>
    </ChartContext.Provider>
  )
})
ChartContainer.displayName = "Chart"

const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
  const colorConfig = Object.entries(config).filter(
    ([_, config]) => config.theme || config.color
  )

if (!colorConfig.length) {
    return null
  }

return (
    <style
      dangerouslySetInnerHTML={{
        __html: Object.entries(THEMES)
          .map(
            ([theme, prefix]) => `
${prefix} [data-chart=${id}] {
${colorConfig
  .map(([key, itemConfig]) => {
    const color =
      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
      itemConfig.color
    return color ? `  --color-${key}: ${color};` : null
  })
  .join("\n")}
}
`
          )
          .join("\n"),
      }}
    />
  )
}

const ChartTooltip = RechartsPrimitive.Tooltip

const ChartTooltipContent = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
    React.ComponentProps<"div"> & {
      hideLabel?: boolean
      hideIndicator?: boolean
      indicator?: "line" | "dot" | "dashed"
      nameKey?: string
      labelKey?: string
    }
>(
  (
    {
      active,
      payload,
      className,
      indicator = "dot",
      hideLabel = false,
      hideIndicator = false,
      label,
      labelFormatter,
      labelClassName,
      formatter,
      color,
      nameKey,
      labelKey,
    },
    ref
  ) => {
    const { config } = useChart()

const tooltipLabel = React.useMemo(() => {
      if (hideLabel || !payload?.length) {
        return null
      }

const [item] = payload
      const key = `${labelKey || item.dataKey || item.name || "value"}`
      const itemConfig = getPayloadConfigFromPayload(config, item, key)
      const value =
        !labelKey && typeof label === "string"
          ? config[label as keyof typeof config]?.label || label
          : itemConfig?.label

if (labelFormatter) {
        return (
          <div className={cn("font-medium", labelClassName)}>
            {labelFormatter(value, payload)}
          </div>
        )
      }

if (!value) {
        return null
      }

return <div className={cn("font-medium", labelClassName)}>{value}</div>
    }, [
      label,
      labelFormatter,
      payload,
      hideLabel,
      labelClassName,
      config,
      labelKey,
    ])

if (!active || !payload?.length) {
      return null
    }

const nestLabel = payload.length === 1 && indicator !== "dot"

return (
      <div
        ref={ref}
        className={cn(
          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
          className
        )}
      >
        {!nestLabel ? tooltipLabel : null}
        <div className="grid gap-1.5">
          {payload.map((item, index) => {
            const key = `${nameKey || item.name || item.dataKey || "value"}`
            const itemConfig = getPayloadConfigFromPayload(config, item, key)
            const indicatorColor = color || item.payload.fill || item.color

return (
              <div
                key={item.dataKey}
                className={cn(
                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
                  indicator === "dot" && "items-center"
                )}
              >
                {formatter && item?.value !== undefined && item.name ? (
                  formatter(item.value, item.name, item, index, item.payload)
                ) : (
                  <>
                    {itemConfig?.icon ? (
                      <itemConfig.icon />
                    ) : (
                      !hideIndicator && (
                        <div
                          className={cn(
                            "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
                            {
                              "h-2.5 w-2.5": indicator === "dot",
                              "w-1": indicator === "line",
                              "w-0 border-[1.5px] border-dashed bg-transparent":
                                indicator === "dashed",
                              "my-0.5": nestLabel && indicator === "dashed",
                            }
                          )}
                          style={
                            {
                              "--color-bg": indicatorColor,
                              "--color-border": indicatorColor,
                            } as React.CSSProperties
                          }
                        />
                      )
                    )}
                    <div
                      className={cn(
                        "flex flex-1 justify-between leading-none",
                        nestLabel ? "items-end" : "items-center"
                      )}
                    >
                      <div className="grid gap-1.5">
                        {nestLabel ? tooltipLabel : null}
                        <span className="text-muted-foreground">
                          {itemConfig?.label || item.name}
                        </span>
                      </div>
                      {item.value && (
                        <span className="font-mono font-medium tabular-nums text-foreground">
                          {item.value.toLocaleString()}
                        </span>
                      )}
                    </div>
                  </>
                )}
              </div>
            )
          })}
        </div>
      </div>
    )
  }
)
ChartTooltipContent.displayName = "ChartTooltip"

const ChartLegend = RechartsPrimitive.Legend

const ChartLegendContent = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> &
    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
      hideIcon?: boolean
      nameKey?: string
    }
>(
  (
    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
    ref
  ) => {
    const { config } = useChart()

if (!payload?.length) {
      return null
    }

return (
      <div
        ref={ref}
        className={cn(
          "flex items-center justify-center gap-4",
          verticalAlign === "top" ? "pb-3" : "pt-3",
          className
        )}
      >
        {payload.map((item) => {
          const key = `${nameKey || item.dataKey || "value"}`
          const itemConfig = getPayloadConfigFromPayload(config, item, key)

return (
            <div
              key={item.value}
              className={cn(
                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
              )}
            >
              {itemConfig?.icon && !hideIcon ? (
                <itemConfig.icon />
              ) : (
                <div
                  className="h-2 w-2 shrink-0 rounded-[2px]"
                  style={{
                    backgroundColor: item.color,
                  }}
                />
              )}
              {itemConfig?.label}
            </div>
          )
        })}
      </div>
    )
  }
)
ChartLegendContent.displayName = "ChartLegend"

// Helper to extract item config from a payload.
function getPayloadConfigFromPayload(
  config: ChartConfig,
  payload: unknown,
  key: string
) {
  if (typeof payload !== "object" || payload === null) {
    return undefined
  }

const payloadPayload =
    "payload" in payload &&
    typeof payload.payload === "object" &&
    payload.payload !== null
      ? payload.payload
      : undefined

let configLabelKey: string = key

if (
    key in payload &&
    typeof payload[key as keyof typeof payload] === "string"
  ) {
    configLabelKey = payload[key as keyof typeof payload] as string
  } else if (
    payloadPayload &&
    key in payloadPayload &&
    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
  ) {
    configLabelKey = payloadPayload[
      key as keyof typeof payloadPayload
    ] as string
  }

return configLabelKey in config
    ? config[configLabelKey]
    : config[key as keyof typeof config]
}

export {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  ChartStyle,
}
[V0_FILE]typescriptreact:file="components/ui/checkbox.tsx"
"use client"

import * as React from "react"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
import { Check } from "lucide-react"

import { cn } from "@/lib/utils"

const Checkbox = React.forwardRef<
  React.ElementRef<typeof CheckboxPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>(({ className, ...props }, ref) => (
  <CheckboxPrimitive.Root
    ref={ref}
    className={cn(
      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
      className
    )}
    {...props}
  >
    <CheckboxPrimitive.Indicator
      className={cn("flex items-center justify-center text-current")}
    >
      <Check className="h-4 w-4" />
    </CheckboxPrimitive.Indicator>
  </CheckboxPrimitive.Root>
))
Checkbox.displayName = CheckboxPrimitive.Root.displayName

export { Checkbox }
[V0_FILE]typescriptreact:file="components/ui/collapsible.tsx"
"use client"

import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"

const Collapsible = CollapsiblePrimitive.Root

const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger

const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent

export { Collapsible, CollapsibleTrigger, CollapsibleContent }
[V0_FILE]typescriptreact:file="components/ui/command.tsx"
"use client"

import * as React from "react"
import { type DialogProps } from "@radix-ui/react-dialog"
import { Command as CommandPrimitive } from "cmdk"
import { Search } from "lucide-react"

import { cn } from "@/lib/utils"
import { Dialog, DialogContent } from "@/components/ui/dialog"

const Command = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
>(({ className, ...props }, ref) => (
  <CommandPrimitive
    ref={ref}
    className={cn(
      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
      className
    )}
    {...props}
  />
))
Command.displayName = CommandPrimitive.displayName

const CommandDialog = ({ children, ...props }: DialogProps) => {
  return (
    <Dialog {...props}>
      <DialogContent className="overflow-hidden p-0 shadow-lg">
        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
          {children}
        </Command>
      </DialogContent>
    </Dialog>
  )
}

const CommandInput = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Input>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
>(({ className, ...props }, ref) => (
  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
    <CommandPrimitive.Input
      ref={ref}
      className={cn(
        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
        className
      )}
      {...props}
    />
  </div>
))

CommandInput.displayName = CommandPrimitive.Input.displayName

const CommandList = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.List
    ref={ref}
    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
    {...props}
  />
))

CommandList.displayName = CommandPrimitive.List.displayName

const CommandEmpty = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Empty>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
>((props, ref) => (
  <CommandPrimitive.Empty
    ref={ref}
    className="py-6 text-center text-sm"
    {...props}
  />
))

CommandEmpty.displayName = CommandPrimitive.Empty.displayName

const CommandGroup = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Group>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.Group
    ref={ref}
    className={cn(
      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
      className
    )}
    {...props}
  />
))

CommandGroup.displayName = CommandPrimitive.Group.displayName

const CommandSeparator = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.Separator
    ref={ref}
    className={cn("-mx-1 h-px bg-border", className)}
    {...props}
  />
))
CommandSeparator.displayName = CommandPrimitive.Separator.displayName

const CommandItem = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
      className
    )}
    {...props}
  />
))

CommandItem.displayName = CommandPrimitive.Item.displayName

const CommandShortcut = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn(
        "ml-auto text-xs tracking-widest text-muted-foreground",
        className
      )}
      {...props}
    />
  )
}
CommandShortcut.displayName = "CommandShortcut"

export {
  Command,
  CommandDialog,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandShortcut,
  CommandSeparator,
}
[V0_FILE]typescriptreact:file="components/ui/context-menu.tsx"
"use client"

import * as React from "react"
import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
import { Check, ChevronRight, Circle } from "lucide-react"

import { cn } from "@/lib/utils"

const ContextMenu = ContextMenuPrimitive.Root

const ContextMenuTrigger = ContextMenuPrimitive.Trigger

const ContextMenuGroup = ContextMenuPrimitive.Group

const ContextMenuPortal = ContextMenuPrimitive.Portal

const ContextMenuSub = ContextMenuPrimitive.Sub

const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup

const ContextMenuSubTrigger = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
    inset?: boolean
  }
>(({ className, inset, children, ...props }, ref) => (
  <ContextMenuPrimitive.SubTrigger
    ref={ref}
    className={cn(
      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
      inset && "pl-8",
      className
    )}
    {...props}
  >
    {children}
    <ChevronRight className="ml-auto h-4 w-4" />
  </ContextMenuPrimitive.SubTrigger>
))
ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName

const ContextMenuSubContent = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
>(({ className, ...props }, ref) => (
  <ContextMenuPrimitive.SubContent
    ref={ref}
    className={cn(
      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
      className
    )}
    {...props}
  />
))
ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName

const ContextMenuContent = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
>(({ className, ...props }, ref) => (
  <ContextMenuPrimitive.Portal>
    <ContextMenuPrimitive.Content
      ref={ref}
      className={cn(
        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        className
      )}
      {...props}
    />
  </ContextMenuPrimitive.Portal>
))
ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName

const ContextMenuItem = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <ContextMenuPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      inset && "pl-8",
      className
    )}
    {...props}
  />
))
ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName

const ContextMenuCheckboxItem = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
  <ContextMenuPrimitive.CheckboxItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    checked={checked}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <ContextMenuPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </ContextMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </ContextMenuPrimitive.CheckboxItem>
))
ContextMenuCheckboxItem.displayName =
  ContextMenuPrimitive.CheckboxItem.displayName

const ContextMenuRadioItem = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
  <ContextMenuPrimitive.RadioItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <ContextMenuPrimitive.ItemIndicator>
        <Circle className="h-2 w-2 fill-current" />
      </ContextMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </ContextMenuPrimitive.RadioItem>
))
ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName

const ContextMenuLabel = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <ContextMenuPrimitive.Label
    ref={ref}
    className={cn(
      "px-2 py-1.5 text-sm font-semibold text-foreground",
      inset && "pl-8",
      className
    )}
    {...props}
  />
))
ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName

const ContextMenuSeparator = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <ContextMenuPrimitive.Separator
    ref={ref}
    className={cn("-mx-1 my-1 h-px bg-border", className)}
    {...props}
  />
))
ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName

const ContextMenuShortcut = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn(
        "ml-auto text-xs tracking-widest text-muted-foreground",
        className
      )}
      {...props}
    />
  )
}
ContextMenuShortcut.displayName = "ContextMenuShortcut"

export {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuCheckboxItem,
  ContextMenuRadioItem,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuGroup,
  ContextMenuPortal,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuRadioGroup,
}
[V0_FILE]typescriptreact:file="components/ui/dialog.tsx"
"use client"

import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { X } from "lucide-react"

import { cn } from "@/lib/utils"

const Dialog = DialogPrimitive.Root

const DialogTrigger = DialogPrimitive.Trigger

const DialogPortal = DialogPrimitive.Portal

const DialogClose = DialogPrimitive.Close

const DialogOverlay = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Overlay
    ref={ref}
    className={cn(
      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className,
    )}
    {...props}
  />
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName

const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DialogPortal>
    <DialogOverlay />
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
        className,
      )}
      {...props}
    >
      {children}
      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </DialogPrimitive.Close>
    </DialogPrimitive.Content>
  </DialogPortal>
))
DialogContent.displayName = DialogPrimitive.Content.displayName

const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
)
DialogHeader.displayName = "DialogHeader"

const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
)
DialogFooter.displayName = "DialogFooter"

const DialogTitle = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Title
    ref={ref}
    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
    {...props}
  />
))
DialogTitle.displayName = DialogPrimitive.Title.displayName

const DialogDescription = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
))
DialogDescription.displayName = DialogPrimitive.Description.displayName

export {
  Dialog,
  DialogPortal,
  DialogOverlay,
  DialogClose,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
}
[V0_FILE]typescriptreact:file="components/ui/drawer.tsx"
"use client"

import * as React from "react"
import { Drawer as DrawerPrimitive } from "vaul"

import { cn } from "@/lib/utils"

const Drawer = ({
  shouldScaleBackground = true,
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
  <DrawerPrimitive.Root
    shouldScaleBackground={shouldScaleBackground}
    {...props}
  />
)
Drawer.displayName = "Drawer"

const DrawerTrigger = DrawerPrimitive.Trigger

const DrawerPortal = DrawerPrimitive.Portal

const DrawerClose = DrawerPrimitive.Close

const DrawerOverlay = React.forwardRef<
  React.ElementRef<typeof DrawerPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <DrawerPrimitive.Overlay
    ref={ref}
    className={cn("fixed inset-0 z-50 bg-black/80", className)}
    {...props}
  />
))
DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName

const DrawerContent = React.forwardRef<
  React.ElementRef<typeof DrawerPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DrawerPortal>
    <DrawerOverlay />
    <DrawerPrimitive.Content
      ref={ref}
      className={cn(
        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
        className
      )}
      {...props}
    >
      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
      {children}
    </DrawerPrimitive.Content>
  </DrawerPortal>
))
DrawerContent.displayName = "DrawerContent"

const DrawerHeader = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
    {...props}
  />
)
DrawerHeader.displayName = "DrawerHeader"

const DrawerFooter = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
    {...props}
  />
)
DrawerFooter.displayName = "DrawerFooter"

const DrawerTitle = React.forwardRef<
  React.ElementRef<typeof DrawerPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
>(({ className, ...props }, ref) => (
  <DrawerPrimitive.Title
    ref={ref}
    className={cn(
      "text-lg font-semibold leading-none tracking-tight",
      className
    )}
    {...props}
  />
))
DrawerTitle.displayName = DrawerPrimitive.Title.displayName

const DrawerDescription = React.forwardRef<
  React.ElementRef<typeof DrawerPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
>(({ className, ...props }, ref) => (
  <DrawerPrimitive.Description
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
))
DrawerDescription.displayName = DrawerPrimitive.Description.displayName

export {
  Drawer,
  DrawerPortal,
  DrawerOverlay,
  DrawerTrigger,
  DrawerClose,
  DrawerContent,
  DrawerHeader,
  DrawerFooter,
  DrawerTitle,
  DrawerDescription,
}
[V0_FILE]typescriptreact:file="components/ui/dropdown-menu.tsx"
"use client"

import * as React from "react"
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
import { Check, ChevronRight, Circle } from "lucide-react"

import { cn } from "@/lib/utils"

const DropdownMenu = DropdownMenuPrimitive.Root

const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger

const DropdownMenuGroup = DropdownMenuPrimitive.Group

const DropdownMenuPortal = DropdownMenuPrimitive.Portal

const DropdownMenuSub = DropdownMenuPrimitive.Sub

const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup

const DropdownMenuSubTrigger = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
    inset?: boolean
  }
>(({ className, inset, children, ...props }, ref) => (
  <DropdownMenuPrimitive.SubTrigger
    ref={ref}
    className={cn(
      "flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
      inset && "pl-8",
      className
    )}
    {...props}
  >
    {children}
    <ChevronRight className="ml-auto" />
  </DropdownMenuPrimitive.SubTrigger>
))
DropdownMenuSubTrigger.displayName =
  DropdownMenuPrimitive.SubTrigger.displayName

const DropdownMenuSubContent = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
>(({ className, ...props }, ref) => (
  <DropdownMenuPrimitive.SubContent
    ref={ref}
    className={cn(
      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
      className
    )}
    {...props}
  />
))
DropdownMenuSubContent.displayName =
  DropdownMenuPrimitive.SubContent.displayName

const DropdownMenuContent = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
  <DropdownMenuPrimitive.Portal>
    <DropdownMenuPrimitive.Content
      ref={ref}
      sideOffset={sideOffset}
      className={cn(
        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        className
      )}
      {...props}
    />
  </DropdownMenuPrimitive.Portal>
))
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName

const DropdownMenuItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <DropdownMenuPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
      inset && "pl-8",
      className
    )}
    {...props}
  />
))
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName

const DropdownMenuCheckboxItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
  <DropdownMenuPrimitive.CheckboxItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    checked={checked}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <DropdownMenuPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </DropdownMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </DropdownMenuPrimitive.CheckboxItem>
))
DropdownMenuCheckboxItem.displayName =
  DropdownMenuPrimitive.CheckboxItem.displayName

const DropdownMenuRadioItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
  <DropdownMenuPrimitive.RadioItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <DropdownMenuPrimitive.ItemIndicator>
        <Circle className="h-2 w-2 fill-current" />
      </DropdownMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </DropdownMenuPrimitive.RadioItem>
))
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName

const DropdownMenuLabel = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <DropdownMenuPrimitive.Label
    ref={ref}
    className={cn(
      "px-2 py-1.5 text-sm font-semibold",
      inset && "pl-8",
      className
    )}
    {...props}
  />
))
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName

const DropdownMenuSeparator = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <DropdownMenuPrimitive.Separator
    ref={ref}
    className={cn("-mx-1 my-1 h-px bg-muted", className)}
    {...props}
  />
))
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName

const DropdownMenuShortcut = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
      {...props}
    />
  )
}
DropdownMenuShortcut.displayName = "DropdownMenuShortcut"

export {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuGroup,
  DropdownMenuPortal,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuRadioGroup,
}
[V0_FILE]typescriptreact:file="components/ui/form.tsx"
"use client"

import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { Slot } from "@radix-ui/react-slot"
import {
  Controller,
  ControllerProps,
  FieldPath,
  FieldValues,
  FormProvider,
  useFormContext,
} from "react-hook-form"

import { cn } from "@/lib/utils"
import { Label } from "@/components/ui/label"

const Form = FormProvider

type FormFieldContextValue<
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
> = {
  name: TName
}

const FormFieldContext = React.createContext<FormFieldContextValue>(
  {} as FormFieldContextValue
)

const FormField = <
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
>({
  ...props
}: ControllerProps<TFieldValues, TName>) => {
  return (
    <FormFieldContext.Provider value={{ name: props.name }}>
      <Controller {...props} />
    </FormFieldContext.Provider>
  )
}

const useFormField = () => {
  const fieldContext = React.useContext(FormFieldContext)
  const itemContext = React.useContext(FormItemContext)
  const { getFieldState, formState } = useFormContext()

const fieldState = getFieldState(fieldContext.name, formState)

if (!fieldContext) {
    throw new Error("useFormField should be used within <FormField>")
  }

const { id } = itemContext

return {
    id,
    name: fieldContext.name,
    formItemId: `${id}-form-item`,
    formDescriptionId: `${id}-form-item-description`,
    formMessageId: `${id}-form-item-message`,
    ...fieldState,
  }
}

type FormItemContextValue = {
  id: string
}

const FormItemContext = React.createContext<FormItemContextValue>(
  {} as FormItemContextValue
)

const FormItem = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const id = React.useId()

return (
    <FormItemContext.Provider value={{ id }}>
      <div ref={ref} className={cn("space-y-2", className)} {...props} />
    </FormItemContext.Provider>
  )
})
FormItem.displayName = "FormItem"

const FormLabel = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
>(({ className, ...props }, ref) => {
  const { error, formItemId } = useFormField()

return (
    <Label
      ref={ref}
      className={cn(error && "text-destructive", className)}
      htmlFor={formItemId}
      {...props}
    />
  )
})
FormLabel.displayName = "FormLabel"

const FormControl = React.forwardRef<
  React.ElementRef<typeof Slot>,
  React.ComponentPropsWithoutRef<typeof Slot>
>(({ ...props }, ref) => {
  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()

return (
    <Slot
      ref={ref}
      id={formItemId}
      aria-describedby={
        !error
          ? `${formDescriptionId}`
          : `${formDescriptionId} ${formMessageId}`
      }
      aria-invalid={!!error}
      {...props}
    />
  )
})
FormControl.displayName = "FormControl"

const FormDescription = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => {
  const { formDescriptionId } = useFormField()

return (
    <p
      ref={ref}
      id={formDescriptionId}
      className={cn("text-sm text-muted-foreground", className)}
      {...props}
    />
  )
})
FormDescription.displayName = "FormDescription"

const FormMessage = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, children, ...props }, ref) => {
  const { error, formMessageId } = useFormField()
  const body = error ? String(error?.message) : children

if (!body) {
    return null
  }

return (
    <p
      ref={ref}
      id={formMessageId}
      className={cn("text-sm font-medium text-destructive", className)}
      {...props}
    >
      {body}
    </p>
  )
})
FormMessage.displayName = "FormMessage"

export {
  useFormField,
  Form,
  FormItem,
  FormLabel,
  FormControl,
  FormDescription,
  FormMessage,
  FormField,
}
[V0_FILE]typescriptreact:file="components/ui/hover-card.tsx"
"use client"

import * as React from "react"
import * as HoverCardPrimitive from "@radix-ui/react-hover-card"

import { cn } from "@/lib/utils"

const HoverCard = HoverCardPrimitive.Root

const HoverCardTrigger = HoverCardPrimitive.Trigger

const HoverCardContent = React.forwardRef<
  React.ElementRef<typeof HoverCardPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
  <HoverCardPrimitive.Content
    ref={ref}
    align={align}
    sideOffset={sideOffset}
    className={cn(
      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
      className
    )}
    {...props}
  />
))
HoverCardContent.displayName = HoverCardPrimitive.Content.displayName

export { HoverCard, HoverCardTrigger, HoverCardContent }
[V0_FILE]typescriptreact:file="components/ui/input-otp.tsx"
"use client"

import * as React from "react"
import { OTPInput, OTPInputContext } from "input-otp"
import { Dot } from "lucide-react"

import { cn } from "@/lib/utils"

const InputOTP = React.forwardRef<
  React.ElementRef<typeof OTPInput>,
  React.ComponentPropsWithoutRef<typeof OTPInput>
>(({ className, containerClassName, ...props }, ref) => (
  <OTPInput
    ref={ref}
    containerClassName={cn(
      "flex items-center gap-2 has-[:disabled]:opacity-50",
      containerClassName
    )}
    className={cn("disabled:cursor-not-allowed", className)}
    {...props}
  />
))
InputOTP.displayName = "InputOTP"

const InputOTPGroup = React.forwardRef<
  React.ElementRef<"div">,
  React.ComponentPropsWithoutRef<"div">
>(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("flex items-center", className)} {...props} />
))
InputOTPGroup.displayName = "InputOTPGroup"

const InputOTPSlot = React.forwardRef<
  React.ElementRef<"div">,
  React.ComponentPropsWithoutRef<"div"> & { index: number }
>(({ index, className, ...props }, ref) => {
  const inputOTPContext = React.useContext(OTPInputContext)
  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]

return (
    <div
      ref={ref}
      className={cn(
        "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
        isActive && "z-10 ring-2 ring-ring ring-offset-background",
        className
      )}
      {...props}
    >
      {char}
      {hasFakeCaret && (
        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
        </div>
      )}
    </div>
  )
})
InputOTPSlot.displayName = "InputOTPSlot"

const InputOTPSeparator = React.forwardRef<
  React.ElementRef<"div">,
  React.ComponentPropsWithoutRef<"div">
>(({ ...props }, ref) => (
  <div ref={ref} role="separator" {...props}>
    <Dot />
  </div>
))
InputOTPSeparator.displayName = "InputOTPSeparator"

export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
[V0_FILE]typescriptreact:file="components/ui/input.tsx"
import * as React from "react"

import { cn } from "@/lib/utils"

const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
  ({ className, type, ...props }, ref) => {
    return (
      <input
        type={type}
        className={cn(
          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
          className
        )}
        ref={ref}
        {...props}
      />
    )
  }
)
Input.displayName = "Input"

export { Input }
[V0_FILE]typescriptreact:file="components/ui/label.tsx"
"use client"

import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70")

const Label = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
))
Label.displayName = LabelPrimitive.Root.displayName

export { Label }
[V0_FILE]typescriptreact:file="components/ui/menubar.tsx"
"use client"

import * as React from "react"
import * as MenubarPrimitive from "@radix-ui/react-menubar"
import { Check, ChevronRight, Circle } from "lucide-react"

import { cn } from "@/lib/utils"

const MenubarMenu = MenubarPrimitive.Menu

const MenubarGroup = MenubarPrimitive.Group

const MenubarPortal = MenubarPrimitive.Portal

const MenubarSub = MenubarPrimitive.Sub

const MenubarRadioGroup = MenubarPrimitive.RadioGroup

const Menubar = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
>(({ className, ...props }, ref) => (
  <MenubarPrimitive.Root
    ref={ref}
    className={cn(
      "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
      className
    )}
    {...props}
  />
))
Menubar.displayName = MenubarPrimitive.Root.displayName

const MenubarTrigger = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
>(({ className, ...props }, ref) => (
  <MenubarPrimitive.Trigger
    ref={ref}
    className={cn(
      "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
      className
    )}
    {...props}
  />
))
MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName

const MenubarSubTrigger = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
    inset?: boolean
  }
>(({ className, inset, children, ...props }, ref) => (
  <MenubarPrimitive.SubTrigger
    ref={ref}
    className={cn(
      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
      inset && "pl-8",
      className
    )}
    {...props}
  >
    {children}
    <ChevronRight className="ml-auto h-4 w-4" />
  </MenubarPrimitive.SubTrigger>
))
MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName

const MenubarSubContent = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.SubContent>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
>(({ className, ...props }, ref) => (
  <MenubarPrimitive.SubContent
    ref={ref}
    className={cn(
      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
      className
    )}
    {...props}
  />
))
MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName

const MenubarContent = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
>(
  (
    { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
    ref
  ) => (
    <MenubarPrimitive.Portal>
      <MenubarPrimitive.Content
        ref={ref}
        align={align}
        alignOffset={alignOffset}
        sideOffset={sideOffset}
        className={cn(
          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
          className
        )}
        {...props}
      />
    </MenubarPrimitive.Portal>
  )
)
MenubarContent.displayName = MenubarPrimitive.Content.displayName

const MenubarItem = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <MenubarPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      inset && "pl-8",
      className
    )}
    {...props}
  />
))
MenubarItem.displayName = MenubarPrimitive.Item.displayName

const MenubarCheckboxItem = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
  <MenubarPrimitive.CheckboxItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    checked={checked}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <MenubarPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </MenubarPrimitive.ItemIndicator>
    </span>
    {children}
  </MenubarPrimitive.CheckboxItem>
))
MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName

const MenubarRadioItem = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
  <MenubarPrimitive.RadioItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <MenubarPrimitive.ItemIndicator>
        <Circle className="h-2 w-2 fill-current" />
      </MenubarPrimitive.ItemIndicator>
    </span>
    {children}
  </MenubarPrimitive.RadioItem>
))
MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName

const MenubarLabel = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <MenubarPrimitive.Label
    ref={ref}
    className={cn(
      "px-2 py-1.5 text-sm font-semibold",
      inset && "pl-8",
      className
    )}
    {...props}
  />
))
MenubarLabel.displayName = MenubarPrimitive.Label.displayName

const MenubarSeparator = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <MenubarPrimitive.Separator
    ref={ref}
    className={cn("-mx-1 my-1 h-px bg-muted", className)}
    {...props}
  />
))
MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName

const MenubarShortcut = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn(
        "ml-auto text-xs tracking-widest text-muted-foreground",
        className
      )}
      {...props}
    />
  )
}
MenubarShortcut.displayname = "MenubarShortcut"

export {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
  MenubarLabel,
  MenubarCheckboxItem,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarPortal,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarGroup,
  MenubarSub,
  MenubarShortcut,
}
[V0_FILE]typescriptreact:file="components/ui/navigation-menu.tsx"
import * as React from "react"
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
import { cva } from "class-variance-authority"
import { ChevronDown } from "lucide-react"

import { cn } from "@/lib/utils"

const NavigationMenu = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
>(({ className, children, ...props }, ref) => (
  <NavigationMenuPrimitive.Root
    ref={ref}
    className={cn(
      "relative z-10 flex max-w-max flex-1 items-center justify-center",
      className
    )}
    {...props}
  >
    {children}
    <NavigationMenuViewport />
  </NavigationMenuPrimitive.Root>
))
NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName

const NavigationMenuList = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.List
    ref={ref}
    className={cn(
      "group flex flex-1 list-none items-center justify-center space-x-1",
      className
    )}
    {...props}
  />
))
NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName

const NavigationMenuItem = NavigationMenuPrimitive.Item

const navigationMenuTriggerStyle = cva(
  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
)

const NavigationMenuTrigger = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <NavigationMenuPrimitive.Trigger
    ref={ref}
    className={cn(navigationMenuTriggerStyle(), "group", className)}
    {...props}
  >
    {children}{" "}
    <ChevronDown
      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
      aria-hidden="true"
    />
  </NavigationMenuPrimitive.Trigger>
))
NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName

const NavigationMenuContent = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.Content
    ref={ref}
    className={cn(
      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
      className
    )}
    {...props}
  />
))
NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName

const NavigationMenuLink = NavigationMenuPrimitive.Link

const NavigationMenuViewport = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
>(({ className, ...props }, ref) => (
  <div className={cn("absolute left-0 top-full flex justify-center")}>
    <NavigationMenuPrimitive.Viewport
      className={cn(
        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
        className
      )}
      ref={ref}
      {...props}
    />
  </div>
))
NavigationMenuViewport.displayName =
  NavigationMenuPrimitive.Viewport.displayName

const NavigationMenuIndicator = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.Indicator
    ref={ref}
    className={cn(
      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
      className
    )}
    {...props}
  >
    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
  </NavigationMenuPrimitive.Indicator>
))
NavigationMenuIndicator.displayName =
  NavigationMenuPrimitive.Indicator.displayName

export {
  navigationMenuTriggerStyle,
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuContent,
  NavigationMenuTrigger,
  NavigationMenuLink,
  NavigationMenuIndicator,
  NavigationMenuViewport,
}
[V0_FILE]typescriptreact:file="components/ui/pagination.tsx"
import * as React from "react"
import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"

import { cn } from "@/lib/utils"
import { ButtonProps, buttonVariants } from "@/components/ui/button"

const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
  <nav
    role="navigation"
    aria-label="pagination"
    className={cn("mx-auto flex w-full justify-center", className)}
    {...props}
  />
)
Pagination.displayName = "Pagination"

const PaginationContent = React.forwardRef<
  HTMLUListElement,
  React.ComponentProps<"ul">
>(({ className, ...props }, ref) => (
  <ul
    ref={ref}
    className={cn("flex flex-row items-center gap-1", className)}
    {...props}
  />
))
PaginationContent.displayName = "PaginationContent"

const PaginationItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentProps<"li">
>(({ className, ...props }, ref) => (
  <li ref={ref} className={cn("", className)} {...props} />
))
PaginationItem.displayName = "PaginationItem"

type PaginationLinkProps = {
  isActive?: boolean
} & Pick<ButtonProps, "size"> &
  React.ComponentProps<"a">

const PaginationLink = ({
  className,
  isActive,
  size = "icon",
  ...props
}: PaginationLinkProps) => (
  <a
    aria-current={isActive ? "page" : undefined}
    className={cn(
      buttonVariants({
        variant: isActive ? "outline" : "ghost",
        size,
      }),
      className
    )}
    {...props}
  />
)
PaginationLink.displayName = "PaginationLink"

const PaginationPrevious = ({
  className,
  ...props
}: React.ComponentProps<typeof PaginationLink>) => (
  <PaginationLink
    aria-label="Go to previous page"
    size="default"
    className={cn("gap-1 pl-2.5", className)}
    {...props}
  >
    <ChevronLeft className="h-4 w-4" />
    <span>Previous</span>
  </PaginationLink>
)
PaginationPrevious.displayName = "PaginationPrevious"

const PaginationNext = ({
  className,
  ...props
}: React.ComponentProps<typeof PaginationLink>) => (
  <PaginationLink
    aria-label="Go to next page"
    size="default"
    className={cn("gap-1 pr-2.5", className)}
    {...props}
  >
    <span>Next</span>
    <ChevronRight className="h-4 w-4" />
  </PaginationLink>
)
PaginationNext.displayName = "PaginationNext"

const PaginationEllipsis = ({
  className,
  ...props
}: React.ComponentProps<"span">) => (
  <span
    aria-hidden
    className={cn("flex h-9 w-9 items-center justify-center", className)}
    {...props}
  >
    <MoreHorizontal className="h-4 w-4" />
    <span className="sr-only">More pages</span>
  </span>
)
PaginationEllipsis.displayName = "PaginationEllipsis"

export {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
}
[V0_FILE]typescriptreact:file="components/ui/popover.tsx"
"use client"

import * as React from "react"
import * as PopoverPrimitive from "@radix-ui/react-popover"

import { cn } from "@/lib/utils"

const Popover = PopoverPrimitive.Root

const PopoverTrigger = PopoverPrimitive.Trigger

const PopoverContent = React.forwardRef<
  React.ElementRef<typeof PopoverPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
  <PopoverPrimitive.Portal>
    <PopoverPrimitive.Content
      ref={ref}
      align={align}
      sideOffset={sideOffset}
      className={cn(
        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        className
      )}
      {...props}
    />
  </PopoverPrimitive.Portal>
))
PopoverContent.displayName = PopoverPrimitive.Content.displayName

export { Popover, PopoverTrigger, PopoverContent }
[V0_FILE]typescriptreact:file="components/ui/progress.tsx"
"use client"

import * as React from "react"
import * as ProgressPrimitive from "@radix-ui/react-progress"

import { cn } from "@/lib/utils"

const Progress = React.forwardRef<
  React.ElementRef<typeof ProgressPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
>(({ className, value, ...props }, ref) => (
  <ProgressPrimitive.Root
    ref={ref}
    className={cn(
      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
      className
    )}
    {...props}
  >
    <ProgressPrimitive.Indicator
      className="h-full w-full flex-1 bg-primary transition-all"
      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
    />
  </ProgressPrimitive.Root>
))
Progress.displayName = ProgressPrimitive.Root.displayName

export { Progress }
[V0_FILE]typescriptreact:file="components/ui/radio-group.tsx"
"use client"

import * as React from "react"
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
import { Circle } from "lucide-react"

import { cn } from "@/lib/utils"

const RadioGroup = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
>(({ className, ...props }, ref) => {
  return <RadioGroupPrimitive.Root className={cn("grid gap-2", className)} {...props} ref={ref} />
})
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName

const RadioGroupItem = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
>(({ className, ...props }, ref) => {
  return (
    <RadioGroupPrimitive.Item
      ref={ref}
      className={cn(
        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      {...props}
    >
      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
        <Circle className="h-2.5 w-2.5 fill-current text-current" />
      </RadioGroupPrimitive.Indicator>
    </RadioGroupPrimitive.Item>
  )
})
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName

export { RadioGroup, RadioGroupItem }
[V0_FILE]typescriptreact:file="components/ui/resizable.tsx"
"use client"

import { GripVertical } from "lucide-react"
import * as ResizablePrimitive from "react-resizable-panels"

import { cn } from "@/lib/utils"

const ResizablePanelGroup = ({
  className,
  ...props
}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
  <ResizablePrimitive.PanelGroup
    className={cn(
      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
      className
    )}
    {...props}
  />
)

const ResizablePanel = ResizablePrimitive.Panel

const ResizableHandle = ({
  withHandle,
  className,
  ...props
}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
  withHandle?: boolean
}) => (
  <ResizablePrimitive.PanelResizeHandle
    className={cn(
      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
      className
    )}
    {...props}
  >
    {withHandle && (
      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
        <GripVertical className="h-2.5 w-2.5" />
      </div>
    )}
  </ResizablePrimitive.PanelResizeHandle>
)

export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
[V0_FILE]typescriptreact:file="components/ui/scroll-area.tsx"
"use client"

import * as React from "react"
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"

import { cn } from "@/lib/utils"

const ScrollArea = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
>(({ className, children, ...props }, ref) => (
  <ScrollAreaPrimitive.Root
    ref={ref}
    className={cn("relative overflow-hidden", className)}
    {...props}
  >
    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
      {children}
    </ScrollAreaPrimitive.Viewport>
    <ScrollBar />
    <ScrollAreaPrimitive.Corner />
  </ScrollAreaPrimitive.Root>
))
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName

const ScrollBar = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
>(({ className, orientation = "vertical", ...props }, ref) => (
  <ScrollAreaPrimitive.ScrollAreaScrollbar
    ref={ref}
    orientation={orientation}
    className={cn(
      "flex touch-none select-none transition-colors",
      orientation === "vertical" &&
        "h-full w-2.5 border-l border-l-transparent p-[1px]",
      orientation === "horizontal" &&
        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
      className
    )}
    {...props}
  >
    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
  </ScrollAreaPrimitive.ScrollAreaScrollbar>
))
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName

export { ScrollArea, ScrollBar }
[V0_FILE]typescriptreact:file="components/ui/select.tsx"
"use client"

import * as React from "react"
import * as SelectPrimitive from "@radix-ui/react-select"
import { Check, ChevronDown, ChevronUp } from "lucide-react"

import { cn } from "@/lib/utils"

const Select = SelectPrimitive.Root

const SelectGroup = SelectPrimitive.Group

const SelectValue = SelectPrimitive.Value

const SelectTrigger = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Trigger
    ref={ref}
    className={cn(
      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
      className,
    )}
    {...props}
  >
    {children}
    <SelectPrimitive.Icon asChild>
      <ChevronDown className="h-4 w-4 opacity-50" />
    </SelectPrimitive.Icon>
  </SelectPrimitive.Trigger>
))
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName

const SelectScrollUpButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollUpButton
    ref={ref}
    className={cn("flex cursor-default items-center justify-center py-1", className)}
    {...props}
  >
    <ChevronUp className="h-4 w-4" />
  </SelectPrimitive.ScrollUpButton>
))
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName

const SelectScrollDownButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollDownButton
    ref={ref}
    className={cn("flex cursor-default items-center justify-center py-1", className)}
    {...props}
  >
    <ChevronDown className="h-4 w-4" />
  </SelectPrimitive.ScrollDownButton>
))
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName

const SelectContent = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ className, children, position = "popper", ...props }, ref) => (
  <SelectPrimitive.Portal>
    <SelectPrimitive.Content
      ref={ref}
      className={cn(
        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        position === "popper" &&
          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
        className,
      )}
      position={position}
      {...props}
    >
      <SelectScrollUpButton />
      <SelectPrimitive.Viewport
        className={cn(
          "p-1",
          position === "popper" &&
            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
        )}
      >
        {children}
      </SelectPrimitive.Viewport>
      <SelectScrollDownButton />
    </SelectPrimitive.Content>
  </SelectPrimitive.Portal>
))
SelectContent.displayName = SelectPrimitive.Content.displayName

const SelectLabel = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Label ref={ref} className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)} {...props} />
))
SelectLabel.displayName = SelectPrimitive.Label.displayName

const SelectItem = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className,
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <SelectPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </SelectPrimitive.ItemIndicator>
    </span>

<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
  </SelectPrimitive.Item>
))
SelectItem.displayName = SelectPrimitive.Item.displayName

const SelectSeparator = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
))
SelectSeparator.displayName = SelectPrimitive.Separator.displayName

export {
  Select,
  SelectGroup,
  SelectValue,
  SelectTrigger,
  SelectContent,
  SelectLabel,
  SelectItem,
  SelectSeparator,
  SelectScrollUpButton,
  SelectScrollDownButton,
}
[V0_FILE]typescriptreact:file="components/ui/separator.tsx"
"use client"

import * as React from "react"
import * as SeparatorPrimitive from "@radix-ui/react-separator"

import { cn } from "@/lib/utils"

const Separator = React.forwardRef<
  React.ElementRef<typeof SeparatorPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
  <SeparatorPrimitive.Root
    ref={ref}
    decorative={decorative}
    orientation={orientation}
    className={cn("shrink-0 bg-border", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className)}
    {...props}
  />
))
Separator.displayName = SeparatorPrimitive.Root.displayName

export { Separator }
[V0_FILE]typescriptreact:file="components/ui/sheet.tsx"
"use client"

import * as React from "react"
import * as SheetPrimitive from "@radix-ui/react-dialog"
import { cva, type VariantProps } from "class-variance-authority"
import { X } from "lucide-react"

import { cn } from "@/lib/utils"

const Sheet = SheetPrimitive.Root

const SheetTrigger = SheetPrimitive.Trigger

const SheetClose = SheetPrimitive.Close

const SheetPortal = SheetPrimitive.Portal

const SheetOverlay = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Overlay
    className={cn(
      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className
    )}
    {...props}
    ref={ref}
  />
))
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName

const sheetVariants = cva(
  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
  {
    variants: {
      side: {
        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
        bottom:
          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
        right:
          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
      },
    },
    defaultVariants: {
      side: "right",
    },
  }
)

interface SheetContentProps
  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
    VariantProps<typeof sheetVariants> {}

const SheetContent = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Content>,
  SheetContentProps
>(({ side = "right", className, children, ...props }, ref) => (
  <SheetPortal>
    <SheetOverlay />
    <SheetPrimitive.Content
      ref={ref}
      className={cn(sheetVariants({ side }), className)}
      {...props}
    >
      {children}
      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </SheetPrimitive.Close>
    </SheetPrimitive.Content>
  </SheetPortal>
))
SheetContent.displayName = SheetPrimitive.Content.displayName

const SheetHeader = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col space-y-2 text-center sm:text-left",
      className
    )}
    {...props}
  />
)
SheetHeader.displayName = "SheetHeader"

const SheetFooter = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
      className
    )}
    {...props}
  />
)
SheetFooter.displayName = "SheetFooter"

const SheetTitle = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Title
    ref={ref}
    className={cn("text-lg font-semibold text-foreground", className)}
    {...props}
  />
))
SheetTitle.displayName = SheetPrimitive.Title.displayName

const SheetDescription = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Description
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
))
SheetDescription.displayName = SheetPrimitive.Description.displayName

export {
  Sheet,
  SheetPortal,
  SheetOverlay,
  SheetTrigger,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription,
}
[V0_FILE]typescriptreact:file="components/ui/sidebar.tsx"
"use client"

import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { VariantProps, cva } from "class-variance-authority"
import { PanelLeft } from "lucide-react"

import { useIsMobile } from "@/hooks/use-mobile"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Separator } from "@/components/ui/separator"
import { Sheet, SheetContent } from "@/components/ui/sheet"
import { Skeleton } from "@/components/ui/skeleton"
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"

const SIDEBAR_COOKIE_NAME = "sidebar:state"
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
const SIDEBAR_WIDTH = "16rem"
const SIDEBAR_WIDTH_MOBILE = "18rem"
const SIDEBAR_WIDTH_ICON = "3rem"
const SIDEBAR_KEYBOARD_SHORTCUT = "b"

type SidebarContext = {
  state: "expanded" | "collapsed"
  open: boolean
  setOpen: (open: boolean) => void
  openMobile: boolean
  setOpenMobile: (open: boolean) => void
  isMobile: boolean
  toggleSidebar: () => void
}

const SidebarContext = React.createContext<SidebarContext | null>(null)

function useSidebar() {
  const context = React.useContext(SidebarContext)
  if (!context) {
    throw new Error("useSidebar must be used within a SidebarProvider.")
  }

return context
}

const SidebarProvider = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & {
    defaultOpen?: boolean
    open?: boolean
    onOpenChange?: (open: boolean) => void
  }
>(
  (
    {
      defaultOpen = true,
      open: openProp,
      onOpenChange: setOpenProp,
      className,
      style,
      children,
      ...props
    },
    ref
  ) => {
    const isMobile = useIsMobile()
    const [openMobile, setOpenMobile] = React.useState(false)

// This is the internal state of the sidebar.
    // We use openProp and setOpenProp for control from outside the component.
    const [_open, _setOpen] = React.useState(defaultOpen)
    const open = openProp ?? _open
    const setOpen = React.useCallback(
      (value: boolean | ((value: boolean) => boolean)) => {
        const openState = typeof value === "function" ? value(open) : value
        if (setOpenProp) {
          setOpenProp(openState)
        } else {
          _setOpen(openState)
        }

// This sets the cookie to keep the sidebar state.
        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
      },
      [setOpenProp, open]
    )

// Helper to toggle the sidebar.
    const toggleSidebar = React.useCallback(() => {
      return isMobile
        ? setOpenMobile((open) => !open)
        : setOpen((open) => !open)
    }, [isMobile, setOpen, setOpenMobile])

// Adds a keyboard shortcut to toggle the sidebar.
    React.useEffect(() => {
      const handleKeyDown = (event: KeyboardEvent) => {
        if (
          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
          (event.metaKey || event.ctrlKey)
        ) {
          event.preventDefault()
          toggleSidebar()
        }
      }

window.addEventListener("keydown", handleKeyDown)
      return () => window.removeEventListener("keydown", handleKeyDown)
    }, [toggleSidebar])

// We add a state so that we can do data-state="expanded" or "collapsed".
    // This makes it easier to style the sidebar with Tailwind classes.
    const state = open ? "expanded" : "collapsed"

const contextValue = React.useMemo<SidebarContext>(
      () => ({
        state,
        open,
        setOpen,
        isMobile,
        openMobile,
        setOpenMobile,
        toggleSidebar,
      }),
      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
    )

return (
      <SidebarContext.Provider value={contextValue}>
        <TooltipProvider delayDuration={0}>
          <div
            style={
              {
                "--sidebar-width": SIDEBAR_WIDTH,
                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
                ...style,
              } as React.CSSProperties
            }
            className={cn(
              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
              className
            )}
            ref={ref}
            {...props}
          >
            {children}
          </div>
        </TooltipProvider>
      </SidebarContext.Provider>
    )
  }
)
SidebarProvider.displayName = "SidebarProvider"

const Sidebar = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & {
    side?: "left" | "right"
    variant?: "sidebar" | "floating" | "inset"
    collapsible?: "offcanvas" | "icon" | "none"
  }
>(
  (
    {
      side = "left",
      variant = "sidebar",
      collapsible = "offcanvas",
      className,
      children,
      ...props
    },
    ref
  ) => {
    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()

if (collapsible === "none") {
      return (
        <div
          className={cn(
            "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
            className
          )}
          ref={ref}
          {...props}
        >
          {children}
        </div>
      )
    }

if (isMobile) {
      return (
        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
          <SheetContent
            data-sidebar="sidebar"
            data-mobile="true"
            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
            style={
              {
                "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
              } as React.CSSProperties
            }
            side={side}
          >
            <div className="flex h-full w-full flex-col">{children}</div>
          </SheetContent>
        </Sheet>
      )
    }

return (
      <div
        ref={ref}
        className="group peer hidden md:block text-sidebar-foreground"
        data-state={state}
        data-collapsible={state === "collapsed" ? collapsible : ""}
        data-variant={variant}
        data-side={side}
      >
        {/* This is what handles the sidebar gap on desktop */}
        <div
          className={cn(
            "duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
            "group-data-[collapsible=offcanvas]:w-0",
            "group-data-[side=right]:rotate-180",
            variant === "floating" || variant === "inset"
              ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
          )}
        />
        <div
          className={cn(
            "duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
            side === "left"
              ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
              : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
            // Adjust the padding for floating and inset variants.
            variant === "floating" || variant === "inset"
              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
            className
          )}
          {...props}
        >
          <div
            data-sidebar="sidebar"
            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
          >
            {children}
          </div>
        </div>
      </div>
    )
  }
)
Sidebar.displayName = "Sidebar"

const SidebarTrigger = React.forwardRef<
  React.ElementRef<typeof Button>,
  React.ComponentProps<typeof Button>
>(({ className, onClick, ...props }, ref) => {
  const { toggleSidebar } = useSidebar()

return (
    <Button
      ref={ref}
      data-sidebar="trigger"
      variant="ghost"
      size="icon"
      className={cn("h-7 w-7", className)}
      onClick={(event) => {
        onClick?.(event)
        toggleSidebar()
      }}
      {...props}
    >
      <PanelLeft />
      <span className="sr-only">Toggle Sidebar</span>
    </Button>
  )
})
SidebarTrigger.displayName = "SidebarTrigger"

const SidebarRail = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<"button">
>(({ className, ...props }, ref) => {
  const { toggleSidebar } = useSidebar()

return (
    <button
      ref={ref}
      data-sidebar="rail"
      aria-label="Toggle Sidebar"
      tabIndex={-1}
      onClick={toggleSidebar}
      title="Toggle Sidebar"
      className={cn(
        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
        className
      )}
      {...props}
    />
  )
})
SidebarRail.displayName = "SidebarRail"

const SidebarInset = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"main">
>(({ className, ...props }, ref) => {
  return (
    <main
      ref={ref}
      className={cn(
        "relative flex min-h-svh flex-1 flex-col bg-background",
        "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
        className
      )}
      {...props}
    />
  )
})
SidebarInset.displayName = "SidebarInset"

const SidebarInput = React.forwardRef<
  React.ElementRef<typeof Input>,
  React.ComponentProps<typeof Input>
>(({ className, ...props }, ref) => {
  return (
    <Input
      ref={ref}
      data-sidebar="input"
      className={cn(
        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
        className
      )}
      {...props}
    />
  )
})
SidebarInput.displayName = "SidebarInput"

const SidebarHeader = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      data-sidebar="header"
      className={cn("flex flex-col gap-2 p-2", className)}
      {...props}
    />
  )
})
SidebarHeader.displayName = "SidebarHeader"

const SidebarFooter = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      data-sidebar="footer"
      className={cn("flex flex-col gap-2 p-2", className)}
      {...props}
    />
  )
})
SidebarFooter.displayName = "SidebarFooter"

const SidebarSeparator = React.forwardRef<
  React.ElementRef<typeof Separator>,
  React.ComponentProps<typeof Separator>
>(({ className, ...props }, ref) => {
  return (
    <Separator
      ref={ref}
      data-sidebar="separator"
      className={cn("mx-2 w-auto bg-sidebar-border", className)}
      {...props}
    />
  )
})
SidebarSeparator.displayName = "SidebarSeparator"

const SidebarContent = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      data-sidebar="content"
      className={cn(
        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
        className
      )}
      {...props}
    />
  )
})
SidebarContent.displayName = "SidebarContent"

const SidebarGroup = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      data-sidebar="group"
      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
      {...props}
    />
  )
})
SidebarGroup.displayName = "SidebarGroup"

const SidebarGroupLabel = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & { asChild?: boolean }
>(({ className, asChild = false, ...props }, ref) => {
  const Comp = asChild ? Slot : "div"

return (
    <Comp
      ref={ref}
      data-sidebar="group-label"
      className={cn(
        "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
        className
      )}
      {...props}
    />
  )
})
SidebarGroupLabel.displayName = "SidebarGroupLabel"

const SidebarGroupAction = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<"button"> & { asChild?: boolean }
>(({ className, asChild = false, ...props }, ref) => {
  const Comp = asChild ? Slot : "button"

return (
    <Comp
      ref={ref}
      data-sidebar="group-action"
      className={cn(
        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
        // Increases the hit area of the button on mobile.
        "after:absolute after:-inset-2 after:md:hidden",
        "group-data-[collapsible=icon]:hidden",
        className
      )}
      {...props}
    />
  )
})
SidebarGroupAction.displayName = "SidebarGroupAction"

const SidebarGroupContent = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    data-sidebar="group-content"
    className={cn("w-full text-sm", className)}
    {...props}
  />
))
SidebarGroupContent.displayName = "SidebarGroupContent"

const SidebarMenu = React.forwardRef<
  HTMLUListElement,
  React.ComponentProps<"ul">
>(({ className, ...props }, ref) => (
  <ul
    ref={ref}
    data-sidebar="menu"
    className={cn("flex w-full min-w-0 flex-col gap-1", className)}
    {...props}
  />
))
SidebarMenu.displayName = "SidebarMenu"

const SidebarMenuItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentProps<"li">
>(({ className, ...props }, ref) => (
  <li
    ref={ref}
    data-sidebar="menu-item"
    className={cn("group/menu-item relative", className)}
    {...props}
  />
))
SidebarMenuItem.displayName = "SidebarMenuItem"

const sidebarMenuButtonVariants = cva(
  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
  {
    variants: {
      variant: {
        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
        outline:
          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
      },
      size: {
        default: "h-8 text-sm",
        sm: "h-7 text-xs",
        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

const SidebarMenuButton = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<"button"> & {
    asChild?: boolean
    isActive?: boolean
    tooltip?: string | React.ComponentProps<typeof TooltipContent>
  } & VariantProps<typeof sidebarMenuButtonVariants>
>(
  (
    {
      asChild = false,
      isActive = false,
      variant = "default",
      size = "default",
      tooltip,
      className,
      ...props
    },
    ref
  ) => {
    const Comp = asChild ? Slot : "button"
    const { isMobile, state } = useSidebar()

const button = (
      <Comp
        ref={ref}
        data-sidebar="menu-button"
        data-size={size}
        data-active={isActive}
        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
        {...props}
      />
    )

if (!tooltip) {
      return button
    }

if (typeof tooltip === "string") {
      tooltip = {
        children: tooltip,
      }
    }

return (
      <Tooltip>
        <TooltipTrigger asChild>{button}</TooltipTrigger>
        <TooltipContent
          side="right"
          align="center"
          hidden={state !== "collapsed" || isMobile}
          {...tooltip}
        />
      </Tooltip>
    )
  }
)
SidebarMenuButton.displayName = "SidebarMenuButton"

const SidebarMenuAction = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<"button"> & {
    asChild?: boolean
    showOnHover?: boolean
  }
>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
  const Comp = asChild ? Slot : "button"

return (
    <Comp
      ref={ref}
      data-sidebar="menu-action"
      className={cn(
        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
        // Increases the hit area of the button on mobile.
        "after:absolute after:-inset-2 after:md:hidden",
        "peer-data-[size=sm]/menu-button:top-1",
        "peer-data-[size=default]/menu-button:top-1.5",
        "peer-data-[size=lg]/menu-button:top-2.5",
        "group-data-[collapsible=icon]:hidden",
        showOnHover &&
          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
        className
      )}
      {...props}
    />
  )
})
SidebarMenuAction.displayName = "SidebarMenuAction"

const SidebarMenuBadge = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    data-sidebar="menu-badge"
    className={cn(
      "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none",
      "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
      "peer-data-[size=sm]/menu-button:top-1",
      "peer-data-[size=default]/menu-button:top-1.5",
      "peer-data-[size=lg]/menu-button:top-2.5",
      "group-data-[collapsible=icon]:hidden",
      className
    )}
    {...props}
  />
))
SidebarMenuBadge.displayName = "SidebarMenuBadge"

const SidebarMenuSkeleton = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & {
    showIcon?: boolean
  }
>(({ className, showIcon = false, ...props }, ref) => {
  // Random width between 50 to 90%.
  const width = React.useMemo(() => {
    return `${Math.floor(Math.random() * 40) + 50}%`
  }, [])

return (
    <div
      ref={ref}
      data-sidebar="menu-skeleton"
      className={cn("rounded-md h-8 flex gap-2 px-2 items-center", className)}
      {...props}
    >
      {showIcon && (
        <Skeleton
          className="size-4 rounded-md"
          data-sidebar="menu-skeleton-icon"
        />
      )}
      <Skeleton
        className="h-4 flex-1 max-w-[--skeleton-width]"
        data-sidebar="menu-skeleton-text"
        style={
          {
            "--skeleton-width": width,
          } as React.CSSProperties
        }
      />
    </div>
  )
})
SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton"

const SidebarMenuSub = React.forwardRef<
  HTMLUListElement,
  React.ComponentProps<"ul">
>(({ className, ...props }, ref) => (
  <ul
    ref={ref}
    data-sidebar="menu-sub"
    className={cn(
      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
      "group-data-[collapsible=icon]:hidden",
      className
    )}
    {...props}
  />
))
SidebarMenuSub.displayName = "SidebarMenuSub"

const SidebarMenuSubItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentProps<"li">
>(({ ...props }, ref) => <li ref={ref} {...props} />)
SidebarMenuSubItem.displayName = "SidebarMenuSubItem"

const SidebarMenuSubButton = React.forwardRef<
  HTMLAnchorElement,
  React.ComponentProps<"a"> & {
    asChild?: boolean
    size?: "sm" | "md"
    isActive?: boolean
  }
>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
  const Comp = asChild ? Slot : "a"

return (
    <Comp
      ref={ref}
      data-sidebar="menu-sub-button"
      data-size={size}
      data-active={isActive}
      className={cn(
        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
        size === "sm" && "text-xs",
        size === "md" && "text-sm",
        "group-data-[collapsible=icon]:hidden",
        className
      )}
      {...props}
    />
  )
})
SidebarMenuSubButton.displayName = "SidebarMenuSubButton"

export {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupAction,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInput,
  SidebarInset,
  SidebarMenu,
  SidebarMenuAction,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSkeleton,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarProvider,
  SidebarRail,
  SidebarSeparator,
  SidebarTrigger,
  useSidebar,
}
[V0_FILE]typescriptreact:file="components/ui/skeleton.tsx"
import { cn } from "@/lib/utils"

function Skeleton({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={cn("animate-pulse rounded-md bg-muted", className)}
      {...props}
    />
  )
}

export { Skeleton }
[V0_FILE]typescriptreact:file="components/ui/slider.tsx"
"use client"

import * as React from "react"
import * as SliderPrimitive from "@radix-ui/react-slider"

import { cn } from "@/lib/utils"

const Slider = React.forwardRef<
  React.ElementRef<typeof SliderPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
>(({ className, ...props }, ref) => (
  <SliderPrimitive.Root
    ref={ref}
    className={cn(
      "relative flex w-full touch-none select-none items-center",
      className
    )}
    {...props}
  >
    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
      <SliderPrimitive.Range className="absolute h-full bg-primary" />
    </SliderPrimitive.Track>
    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
  </SliderPrimitive.Root>
))
Slider.displayName = SliderPrimitive.Root.displayName

export { Slider }
[V0_FILE]typescriptreact:file="components/ui/sonner.tsx"
"use client"

import { useTheme } from "next-themes"
import { Toaster as Sonner } from "sonner"

type ToasterProps = React.ComponentProps<typeof Sonner>

const Toaster = ({ ...props }: ToasterProps) => {
  const { theme = "system" } = useTheme()

return (
    <Sonner
      theme={theme as ToasterProps["theme"]}
      className="toaster group"
      toastOptions={{
        classNames: {
          toast:
            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
          description: "group-[.toast]:text-muted-foreground",
          actionButton:
            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
          cancelButton:
            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
        },
      }}
      {...props}
    />
  )
}

export { Toaster }
[V0_FILE]typescriptreact:file="components/ui/switch.tsx"
"use client"

import * as React from "react"
import * as SwitchPrimitives from "@radix-ui/react-switch"

import { cn } from "@/lib/utils"

const Switch = React.forwardRef<
  React.ElementRef<typeof SwitchPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
>(({ className, ...props }, ref) => (
  <SwitchPrimitives.Root
    className={cn(
      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
      className
    )}
    {...props}
    ref={ref}
  >
    <SwitchPrimitives.Thumb
      className={cn(
        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
      )}
    />
  </SwitchPrimitives.Root>
))
Switch.displayName = SwitchPrimitives.Root.displayName

export { Switch }
[V0_FILE]typescriptreact:file="components/ui/table.tsx"
import * as React from "react"

import { cn } from "@/lib/utils"

const Table = React.forwardRef<
  HTMLTableElement,
  React.HTMLAttributes<HTMLTableElement>
>(({ className, ...props }, ref) => (
  <div className="relative w-full overflow-auto">
    <table
      ref={ref}
      className={cn("w-full caption-bottom text-sm", className)}
      {...props}
    />
  </div>
))
Table.displayName = "Table"

const TableHeader = React.forwardRef<
  HTMLTableSectionElement,
  React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
))
TableHeader.displayName = "TableHeader"

const TableBody = React.forwardRef<
  HTMLTableSectionElement,
  React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
  <tbody
    ref={ref}
    className={cn("[&_tr:last-child]:border-0", className)}
    {...props}
  />
))
TableBody.displayName = "TableBody"

const TableFooter = React.forwardRef<
  HTMLTableSectionElement,
  React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
  <tfoot
    ref={ref}
    className={cn(
      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
      className
    )}
    {...props}
  />
))
TableFooter.displayName = "TableFooter"

const TableRow = React.forwardRef<
  HTMLTableRowElement,
  React.HTMLAttributes<HTMLTableRowElement>
>(({ className, ...props }, ref) => (
  <tr
    ref={ref}
    className={cn(
      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
      className
    )}
    {...props}
  />
))
TableRow.displayName = "TableRow"

const TableHead = React.forwardRef<
  HTMLTableCellElement,
  React.ThHTMLAttributes<HTMLTableCellElement>
>(({ className, ...props }, ref) => (
  <th
    ref={ref}
    className={cn(
      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
      className
    )}
    {...props}
  />
))
TableHead.displayName = "TableHead"

const TableCell = React.forwardRef<
  HTMLTableCellElement,
  React.TdHTMLAttributes<HTMLTableCellElement>
>(({ className, ...props }, ref) => (
  <td
    ref={ref}
    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
    {...props}
  />
))
TableCell.displayName = "TableCell"

const TableCaption = React.forwardRef<
  HTMLTableCaptionElement,
  React.HTMLAttributes<HTMLTableCaptionElement>
>(({ className, ...props }, ref) => (
  <caption
    ref={ref}
    className={cn("mt-4 text-sm text-muted-foreground", className)}
    {...props}
  />
))
TableCaption.displayName = "TableCaption"

export {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableHead,
  TableRow,
  TableCell,
  TableCaption,
}
[V0_FILE]typescriptreact:file="components/ui/tabs.tsx"
"use client"

import * as React from "react"
import * as TabsPrimitive from "@radix-ui/react-tabs"

import { cn } from "@/lib/utils"

const Tabs = TabsPrimitive.Root

const TabsList = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.List
    ref={ref}
    className={cn(
      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
      className,
    )}
    {...props}
  />
))
TabsList.displayName = TabsPrimitive.List.displayName

const TabsTrigger = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Trigger
    ref={ref}
    className={cn(
      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
      className,
    )}
    {...props}
  />
))
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName

const TabsContent = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Content
    ref={ref}
    className={cn(
      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
      className,
    )}
    {...props}
  />
))
TabsContent.displayName = TabsPrimitive.Content.displayName

export { Tabs, TabsList, TabsTrigger, TabsContent }
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx"
import * as React from "react"

import { cn } from "@/lib/utils"

export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
  return (
    <textarea
      className={cn(
        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      ref={ref}
      {...props}
    />
  )
})
Textarea.displayName = "Textarea"

export { Textarea }
[V0_FILE]typescriptreact:file="components/ui/toast.tsx"
"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<typeof ToastPrimitives.Viewport>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Viewport
    ref={ref}
    className={cn(
      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
      className
    )}
    {...props}
  />
))
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<typeof ToastPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
    VariantProps<typeof toastVariants>
>(({ className, variant, ...props }, ref) => {
  return (
    <ToastPrimitives.Root
      ref={ref}
      className={cn(toastVariants({ variant }), className)}
      {...props}
    />
  )
})
Toast.displayName = ToastPrimitives.Root.displayName

const ToastAction = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Action>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Action
    ref={ref}
    className={cn(
      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
      className
    )}
    {...props}
  />
))
ToastAction.displayName = ToastPrimitives.Action.displayName

const ToastClose = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Close>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Close
    ref={ref}
    className={cn(
      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
      className
    )}
    toast-close=""
    {...props}
  >
    <X className="h-4 w-4" />
  </ToastPrimitives.Close>
))
ToastClose.displayName = ToastPrimitives.Close.displayName

const ToastTitle = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Title>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Title
    ref={ref}
    className={cn("text-sm font-semibold", className)}
    {...props}
  />
))
ToastTitle.displayName = ToastPrimitives.Title.displayName

const ToastDescription = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Description>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Description
    ref={ref}
    className={cn("text-sm opacity-90", className)}
    {...props}
  />
))
ToastDescription.displayName = ToastPrimitives.Description.displayName

type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>

type ToastActionElement = React.ReactElement<typeof ToastAction>

export {
  type ToastProps,
  type ToastActionElement,
  ToastProvider,
  ToastViewport,
  Toast,
  ToastTitle,
  ToastDescription,
  ToastClose,
  ToastAction,
}
[V0_FILE]typescriptreact:file="components/ui/toaster.tsx"
"use client"

import { useToast } from "@/hooks/use-toast"
import {
  Toast,
  ToastClose,
  ToastDescription,
  ToastProvider,
  ToastTitle,
  ToastViewport,
} from "@/components/ui/toast"

export function Toaster() {
  const { toasts } = useToast()

return (
    <ToastProvider>
      {toasts.map(function ({ id, title, description, action, ...props }) {
        return (
          <Toast key={id} {...props}>
            <div className="grid gap-1">
              {title && <ToastTitle>{title}</ToastTitle>}
              {description && (
                <ToastDescription>{description}</ToastDescription>
              )}
            </div>
            {action}
            <ToastClose />
          </Toast>
        )
      })}
      <ToastViewport />
    </ToastProvider>
  )
}
[V0_FILE]typescriptreact:file="components/ui/toggle-group.tsx"
"use client"

import * as React from "react"
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
import { type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"
import { toggleVariants } from "@/components/ui/toggle"

const ToggleGroupContext = React.createContext<
  VariantProps<typeof toggleVariants>
>({
  size: "default",
  variant: "default",
})

const ToggleGroup = React.forwardRef<
  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
    VariantProps<typeof toggleVariants>
>(({ className, variant, size, children, ...props }, ref) => (
  <ToggleGroupPrimitive.Root
    ref={ref}
    className={cn("flex items-center justify-center gap-1", className)}
    {...props}
  >
    <ToggleGroupContext.Provider value={{ variant, size }}>
      {children}
    </ToggleGroupContext.Provider>
  </ToggleGroupPrimitive.Root>
))

ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName

const ToggleGroupItem = React.forwardRef<
  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
    VariantProps<typeof toggleVariants>
>(({ className, children, variant, size, ...props }, ref) => {
  const context = React.useContext(ToggleGroupContext)

return (
    <ToggleGroupPrimitive.Item
      ref={ref}
      className={cn(
        toggleVariants({
          variant: context.variant || variant,
          size: context.size || size,
        }),
        className
      )}
      {...props}
    >
      {children}
    </ToggleGroupPrimitive.Item>
  )
})

ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName

export { ToggleGroup, ToggleGroupItem }
[V0_FILE]typescriptreact:file="components/ui/toggle.tsx"
"use client"

import * as React from "react"
import * as TogglePrimitive from "@radix-ui/react-toggle"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const toggleVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
  {
    variants: {
      variant: {
        default: "bg-transparent",
        outline:
          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
      },
      size: {
        default: "h-10 px-3 min-w-10",
        sm: "h-9 px-2.5 min-w-9",
        lg: "h-11 px-5 min-w-11",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

const Toggle = React.forwardRef<
  React.ElementRef<typeof TogglePrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
    VariantProps<typeof toggleVariants>
>(({ className, variant, size, ...props }, ref) => (
  <TogglePrimitive.Root
    ref={ref}
    className={cn(toggleVariants({ variant, size, className }))}
    {...props}
  />
))

Toggle.displayName = TogglePrimitive.Root.displayName

export { Toggle, toggleVariants }
[V0_FILE]typescriptreact:file="components/ui/tooltip.tsx"
"use client"

import * as React from "react"
import * as TooltipPrimitive from "@radix-ui/react-tooltip"

import { cn } from "@/lib/utils"

const TooltipProvider = TooltipPrimitive.Provider

const Tooltip = TooltipPrimitive.Root

const TooltipTrigger = TooltipPrimitive.Trigger

const TooltipContent = React.forwardRef<
  React.ElementRef<typeof TooltipPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
  <TooltipPrimitive.Content
    ref={ref}
    sideOffset={sideOffset}
    className={cn(
      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
      className
    )}
    {...props}
  />
))
TooltipContent.displayName = TooltipPrimitive.Content.displayName

export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
[V0_FILE]typescriptreact:file="components/ui/use-mobile.tsx"
import * as React from "react"

const MOBILE_BREAKPOINT = 768

export function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)

React.useEffect(() => {
    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
    const onChange = () => {
      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    }
    mql.addEventListener("change", onChange)
    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    return () => mql.removeEventListener("change", onChange)
  }, [])

return !!isMobile
}
[V0_FILE]typescript:file="components/ui/use-toast.ts"
"use client"

// Inspired by react-hot-toast library
import * as React from "react"

import type {
  ToastActionElement,
  ToastProps,
} from "@/components/ui/toast"

const TOAST_LIMIT = 1
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_SAFE_INTEGER
  return count.toString()
}

type ActionType = typeof actionTypes

type Action =
  | {
      type: ActionType["ADD_TOAST"]
      toast: ToasterToast
    }
  | {
      type: ActionType["UPDATE_TOAST"]
      toast: Partial<ToasterToast>
    }
  | {
      type: ActionType["DISMISS_TOAST"]
      toastId?: ToasterToast["id"]
    }
  | {
      type: ActionType["REMOVE_TOAST"]
      toastId?: ToasterToast["id"]
    }

interface State {
  toasts: ToasterToast[]
}

const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()

const addToRemoveQueue = (toastId: string) => {
  if (toastTimeouts.has(toastId)) {
    return
  }

const timeout = setTimeout(() => {
    toastTimeouts.delete(toastId)
    dispatch({
      type: "REMOVE_TOAST",
      toastId: toastId,
    })
  }, TOAST_REMOVE_DELAY)

toastTimeouts.set(toastId, timeout)
}

export const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case "ADD_TOAST":
      return {
        ...state,
        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
      }

case "UPDATE_TOAST":
      return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === action.toast.id ? { ...t, ...action.toast } : t
        ),
      }

case "DISMISS_TOAST": {
      const { toastId } = action

// ! Side effects ! - This could be extracted into a dismissToast() action,
      // but I'll keep it here for simplicity
      if (toastId) {
        addToRemoveQueue(toastId)
      } else {
        state.toasts.forEach((toast) => {
          addToRemoveQueue(toast.id)
        })
      }

return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === toastId || toastId === undefined
            ? {
                ...t,
                open: false,
              }
            : t
        ),
      }
    }
    case "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<ToasterToast, "id">

function toast({ ...props }: Toast) {
  const id = genId()

const update = (props: ToasterToast) =>
    dispatch({
      type: "UPDATE_TOAST",
      toast: { ...props, id },
    })
  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })

dispatch({
    type: "ADD_TOAST",
    toast: {
      ...props,
      id,
      open: true,
      onOpenChange: (open) => {
        if (!open) dismiss()
      },
    },
  })

return {
    id: id,
    dismiss,
    update,
  }
}

function useToast() {
  const [state, setState] = React.useState<State>(memoryState)

React.useEffect(() => {
    listeners.push(setState)
    return () => {
      const index = listeners.indexOf(setState)
      if (index > -1) {
        listeners.splice(index, 1)
      }
    }
  }, [state])

return {
    ...state,
    toast,
    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
  }
}

export { useToast, toast }
[V0_FILE]typescriptreact:file="hooks/use-mobile.tsx"
import * as React from "react"

const MOBILE_BREAKPOINT = 768

export function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)

return !!isMobile
}
[V0_FILE]typescript:file="hooks/use-toast.ts"
"use client"

// Inspired by react-hot-toast library
import * as React from "react"

import type {
  ToastActionElement,
  ToastProps,
} from "@/components/ui/toast"

const TOAST_LIMIT = 1
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_SAFE_INTEGER
  return count.toString()
}

type ActionType = typeof actionTypes

interface State {
  toasts: ToasterToast[]
}

const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()

const addToRemoveQueue = (toastId: string) => {
  if (toastTimeouts.has(toastId)) {
    return
  }

const timeout = setTimeout(() => {
    toastTimeouts.delete(toastId)
    dispatch({
      type: "REMOVE_TOAST",
      toastId: toastId,
    })
  }, TOAST_REMOVE_DELAY)

toastTimeouts.set(toastId, timeout)
}

case "UPDATE_TOAST":
      return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === action.toast.id ? { ...t, ...action.toast } : t
        ),
      }

case "DISMISS_TOAST": {
      const { toastId } = action

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<ToasterToast, "id">

function toast({ ...props }: Toast) {
  const id = genId()

const update = (props: ToasterToast) =>
    dispatch({
      type: "UPDATE_TOAST",
      toast: { ...props, id },
    })
  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })

dispatch({
    type: "ADD_TOAST",
    toast: {
      ...props,
      id,
      open: true,
      onOpenChange: (open) => {
        if (!open) dismiss()
      },
    },
  })

return {
    id: id,
    dismiss,
    update,
  }
}

function useToast() {
  const [state, setState] = React.useState<State>(memoryState)

return {
    ...state,
    toast,
    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
  }
}

export { useToast, toast }
[V0_FILE]typescript:file="lib/auth.ts"
// Sistema de autenticação simulado com usuários fictícios

export interface User {
  id: number
  name: string
  email: string
  password: string
  isAdmin: boolean
  avatar?: string
  createdAt: string
}

// Usuários fictícios para teste
export const mockUsers: User[] = [
  {
    id: 1,
    name: "João Silva",
    email: "joao@email.com",
    password: "123456",
    isAdmin: false,
    avatar: "/placeholder.svg?height=40&width=40&text=JS",
    createdAt: "2024-01-15",
  },
  {
    id: 2,
    name: "Maria Santos",
    email: "maria@email.com",
    password: "123456",
    isAdmin: false,
    avatar: "/placeholder.svg?height=40&width=40&text=MS",
    createdAt: "2024-01-20",
  },
  {
    id: 3,
    name: "Admin Vitta",
    email: "admin@vitta.com",
    password: "admin123",
    isAdmin: true,
    avatar: "/placeholder.svg?height=40&width=40&text=AV",
    createdAt: "2024-01-01",
  },
  {
    id: 4,
    name: "Carlos Oliveira",
    email: "carlos@email.com",
    password: "123456",
    isAdmin: false,
    avatar: "/placeholder.svg?height=40&width=40&text=CO",
    createdAt: "2024-02-01",
  },
  {
    id: 5,
    name: "Ana Costa",
    email: "ana@email.com",
    password: "123456",
    isAdmin: false,
    avatar: "/placeholder.svg?height=40&width=40&text=AC",
    createdAt: "2024-02-10",
  },
  {
    id: 6,
    name: "Pedro Ferreira",
    email: "pedro@email.com",
    password: "123456",
    isAdmin: false,
    avatar: "/placeholder.svg?height=40&width=40&text=PF",
    createdAt: "2024-02-15",
  },
]

// Simular autenticação
export const authenticateUser = (email: string, password: string): User | null => {
  const user = mockUsers.find((u) => u.email === email && u.password === password)
  return user || null
}

// Simular registro de usuário
export const registerUser = (name: string, email: string, password: string): User | null => {
  // Verificar se email já existe
  if (mockUsers.find((u) => u.email === email)) {
    return null // Email já existe
  }

const newUser: User = {
    id: mockUsers.length + 1,
    name,
    email,
    password,
    isAdmin: false,
    avatar: `/placeholder.svg?height=40&width=40&text=${name
      .split(" ")
      .map((n) => n[0])
      .join("")}`,
    createdAt: new Date().toISOString().split("T")[0],
  }

mockUsers.push(newUser)
  return newUser
}

// Simular busca de usuário por ID
export const getUserById = (id: number): User | null => {
  return mockUsers.find((u) => u.id === id) || null
}

// Simular hash de senha (em produção usar bcrypt)
export const hashPassword = (password: string): string => {
  return `hashed_${password}`
}

// Simular verificação de senha
export const verifyPassword = (password: string, hash: string): boolean => {
  return `hashed_${password}` === hash
}
[V0_FILE]typescript:file="lib/reviews.ts"
// Sistema de avaliações dos produtos
export interface Review {
  id: number
  productId: number
  userId: number
  userName: string
  userAvatar: string
  rating: number
  title: string
  comment: string
  date: string
  helpful: number
  verified: boolean
  size?: string
  color?: string
}

// Avaliações fictícias para demonstração
export const mockReviews: Review[] = [
  {
    id: 1,
    productId: 1,
    userId: 1,
    userName: "João Silva",
    userAvatar: "/placeholder.svg?height=40&width=40&text=JS",
    rating: 5,
    title: "Excelente qualidade!",
    comment:
      "Camiseta muito confortável, tecido de ótima qualidade. Uso para corrida e musculação, não marca suor e seca rapidamente. Recomendo!",
    date: "2024-01-15",
    helpful: 12,
    verified: true,
    size: "M",
    color: "Azul",
  },
  {
    id: 2,
    productId: 1,
    userId: 2,
    userName: "Maria Santos",
    userAvatar: "/placeholder.svg?height=40&width=40&text=MS",
    rating: 4,
    title: "Boa camiseta",
    comment:
      "Produto chegou rápido e conforme descrito. A qualidade é boa, mas achei que poderia ser um pouco mais larga. No geral, estou satisfeita.",
    date: "2024-01-20",
    helpful: 8,
    verified: true,
    size: "P",
    color: "Preto",
  },
  {
    id: 3,
    productId: 2,
    userId: 3,
    userName: "Carlos Oliveira",
    userAvatar: "/placeholder.svg?height=40&width=40&text=CO",
    rating: 5,
    title: "Mantém a temperatura perfeita",
    comment:
      "Comprei para levar para a academia e está sendo perfeita. Mantém a água gelada por muito tempo, mesmo no calor. Material resistente e fácil de limpar.",
    date: "2024-02-01",
    helpful: 15,
    verified: true,
    color: "Azul",
  },
  {
    id: 4,
    productId: 2,
    userId: 4,
    userName: "Ana Costa",
    userAvatar: "/placeholder.svg?height=40&width=40&text=AC",
    rating: 4,
    title: "Muito boa!",
    comment:
      "Garrafa de excelente qualidade. O único ponto negativo é que é um pouco pesada quando cheia, mas isso é normal para garrafas térmicas.",
    date: "2024-02-05",
    helpful: 6,
    verified: true,
    color: "Prata",
  },
  {
    id: 5,
    productId: 3,
    userId: 5,
    userName: "Pedro Ferreira",
    userAvatar: "/placeholder.svg?height=40&width=40&text=PF",
    rating: 5,
    title: "Essencial para treino pesado",
    comment:
      "Uso para levantamento terra e remada. Fazem toda a diferença na pegada e permitem focar no músculo alvo. Material resistente e confortável.",
    date: "2024-02-10",
    helpful: 20,
    verified: true,
    color: "Preto",
  },
  {
    id: 6,
    productId: 4,
    userId: 1,
    userName: "João Silva",
    userAvatar: "/placeholder.svg?height=40&width=40&text=JS",
    rating: 4,
    title: "Confortável para treinar",
    comment:
      "Shorts muito confortável, não incomoda durante os exercícios. Tecido de boa qualidade e secagem rápida. Recomendo para quem treina regularmente.",
    date: "2024-02-12",
    helpful: 9,
    verified: true,
    size: "M",
    color: "Preto",
  },
]

// Funções para gerenciar avaliações
export const getProductReviews = (productId: number): Review[] => {
  return mockReviews.filter((review) => review.productId === productId)
}

export const getProductRating = (productId: number): { average: number; total: number } => {
  const reviews = getProductReviews(productId)
  if (reviews.length === 0) return { average: 0, total: 0 }

const sum = reviews.reduce((acc, review) => acc + review.rating, 0)
  return {
    average: sum / reviews.length,
    total: reviews.length,
  }
}

export const addReview = (review: Omit<Review, "id" | "date" | "helpful">): Review => {
  const newReview: Review = {
    ...review,
    id: mockReviews.length + 1,
    date: new Date().toISOString().split("T")[0],
    helpful: 0,
  }
  mockReviews.push(newReview)
  return newReview
}

export const markReviewHelpful = (reviewId: number): void => {
  const review = mockReviews.find((r) => r.id === reviewId)
  if (review) {
    review.helpful += 1
  }
}
[V0_FILE]typescript:file="lib/sizes.ts"
// Sistema de tamanhos dos produtos
export interface SizeInfo {
  size: string
  measurements: {
    chest?: string
    waist?: string
    length?: string
    inseam?: string
  }
  stock: number
}

export interface SizeGuide {
  productId: number
  category: "roupas" | "acessorios"
  sizes: SizeInfo[]
  sizeChart?: {
    title: string
    headers: string[]
    rows: string[][]
  }
}

// Guias de tamanho para os produtos
export const sizeGuides: SizeGuide[] = [
  {
    productId: 1, // Camiseta Dry Fit Premium
    category: "roupas",
    sizes: [
      { size: "P", measurements: { chest: "88-92cm", length: "66cm" }, stock: 15 },
      { size: "M", measurements: { chest: "96-100cm", length: "68cm" }, stock: 25 },
      { size: "G", measurements: { chest: "104-108cm", length: "70cm" }, stock: 20 },
      { size: "GG", measurements: { chest: "112-116cm", length: "72cm" }, stock: 12 },
      { size: "XG", measurements: { chest: "120-124cm", length: "74cm" }, stock: 8 },
    ],
    sizeChart: {
      title: "Guia de Tamanhos - Camisetas",
      headers: ["Tamanho", "Peito", "Comprimento"],
      rows: [
        ["P", "88-92cm", "66cm"],
        ["M", "96-100cm", "68cm"],
        ["G", "104-108cm", "70cm"],
        ["GG", "112-116cm", "72cm"],
        ["XG", "120-124cm", "74cm"],
      ],
    },
  },
  {
    productId: 4, // Shorts Masculino Fit
    category: "roupas",
    sizes: [
      { size: "P", measurements: { waist: "70-74cm", inseam: "18cm" }, stock: 18 },
      { size: "M", measurements: { waist: "78-82cm", inseam: "19cm" }, stock: 22 },
      { size: "G", measurements: { waist: "86-90cm", inseam: "20cm" }, stock: 16 },
      { size: "GG", measurements: { waist: "94-98cm", inseam: "21cm" }, stock: 10 },
      { size: "XG", measurements: { waist: "102-106cm", inseam: "22cm" }, stock: 6 },
    ],
    sizeChart: {
      title: "Guia de Tamanhos - Shorts",
      headers: ["Tamanho", "Cintura", "Entrepernas"],
      rows: [
        ["P", "70-74cm", "18cm"],
        ["M", "78-82cm", "19cm"],
        ["G", "86-90cm", "20cm"],
        ["GG", "94-98cm", "21cm"],
        ["XG", "102-106cm", "22cm"],
      ],
    },
  },
  {
    productId: 5, // Top Feminino Sport
    category: "roupas",
    sizes: [
      { size: "PP", measurements: { chest: "78-82cm", length: "35cm" }, stock: 12 },
      { size: "P", measurements: { chest: "86-90cm", length: "36cm" }, stock: 20 },
      { size: "M", measurements: { chest: "94-98cm", length: "37cm" }, stock: 25 },
      { size: "G", measurements: { chest: "102-106cm", length: "38cm" }, stock: 15 },
      { size: "GG", measurements: { chest: "110-114cm", length: "39cm" }, stock: 8 },
    ],
    sizeChart: {
      title: "Guia de Tamanhos - Tops Femininos",
      headers: ["Tamanho", "Busto", "Comprimento"],
      rows: [
        ["PP", "78-82cm", "35cm"],
        ["P", "86-90cm", "36cm"],
        ["M", "94-98cm", "37cm"],
        ["G", "102-106cm", "38cm"],
        ["GG", "110-114cm", "39cm"],
      ],
    },
  },
  {
    productId: 7, // Legging Feminina Premium
    category: "roupas",
    sizes: [
      { size: "PP", measurements: { waist: "60-64cm", length: "90cm" }, stock: 14 },
      { size: "P", measurements: { waist: "68-72cm", length: "92cm" }, stock: 22 },
      { size: "M", measurements: { waist: "76-80cm", length: "94cm" }, stock: 28 },
      { size: "G", measurements: { waist: "84-88cm", length: "96cm" }, stock: 18 },
      { size: "GG", measurements: { waist: "92-96cm", length: "98cm" }, stock: 10 },
    ],
    sizeChart: {
      title: "Guia de Tamanhos - Leggings",
      headers: ["Tamanho", "Cintura", "Comprimento"],
      rows: [
        ["PP", "60-64cm", "90cm"],
        ["P", "68-72cm", "92cm"],
        ["M", "76-80cm", "94cm"],
        ["G", "84-88cm", "96cm"],
        ["GG", "92-96cm", "98cm"],
      ],
    },
  },
]

// Funções para gerenciar tamanhos
export const getSizeGuide = (productId: number): SizeGuide | null => {
  return sizeGuides.find((guide) => guide.productId === productId) || null
}

export const getAvailableSizes = (productId: number): SizeInfo[] => {
  const guide = getSizeGuide(productId)
  return guide ? guide.sizes.filter((size) => size.stock > 0) : []
}

export const getSizeStock = (productId: number, size: string): number => {
  const guide = getSizeGuide(productId)
  if (!guide) return 0
  const sizeInfo = guide.sizes.find((s) => s.size === size)
  return sizeInfo ? sizeInfo.stock : 0
}
[V0_FILE]typescript:file="lib/utils.ts"
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
[V0_FILE]typescript:file="lib/wishlist.ts"
// Sistema de lista de desejos
export interface WishlistItem {
  id: number
  productId: number
  userId: number
  addedAt: string
}

// Simular lista de desejos no localStorage
export const getWishlist = (userId: number): number[] => {
  if (typeof window === "undefined") return []
  const wishlist = localStorage.getItem(`wishlist_${userId}`)
  return wishlist ? JSON.parse(wishlist) : []
}

export const addToWishlist = (userId: number, productId: number): boolean => {
  if (typeof window === "undefined") return false
  const wishlist = getWishlist(userId)
  if (!wishlist.includes(productId)) {
    wishlist.push(productId)
    localStorage.setItem(`wishlist_${userId}`, JSON.stringify(wishlist))
    return true
  }
  return false
}

export const removeFromWishlist = (userId: number, productId: number): boolean => {
  if (typeof window === "undefined") return false
  const wishlist = getWishlist(userId)
  const newWishlist = wishlist.filter((id) => id !== productId)
  localStorage.setItem(`wishlist_${userId}`, JSON.stringify(newWishlist))
  return true
}

export const isInWishlist = (userId: number, productId: number): boolean => {
  const wishlist = getWishlist(userId)
  return wishlist.includes(productId)
}
[V0_FILE]javascript:file="next.config.mjs"
/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
  },
}

export default nextConfig
[V0_FILE]json:file="package.json"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "lint": "next lint",
    "start": "next start"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.9.1",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "latest",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "latest",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "latest",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "latest",
    "@radix-ui/react-separator": "latest",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "latest",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "geist": "^1.3.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "15.2.4",
    "next-themes": "^0.4.4",
    "react": "^19",
    "react-day-picker": "9.8.0",
    "react-dom": "^19",
    "react-hook-form": "^7.54.1",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.0",
    "sonner": "^1.7.1",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.6",
    "zod": "^3.24.1"
  },
  "devDependencies": {
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "tailwindcss": "^3.4.17",
    "typescript": "^5"
  }
}
[V0_FILE]javascript:file="postcss.config.mjs"
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    tailwindcss: {},
  },
};

export default config;
[V0_FILE]sql:file="scripts/create-database.sql"
-- Criação do banco de dados para a loja Vitta
-- Execute este script para criar as tabelas necessárias

-- Tabela de usuários
CREATE TABLE IF NOT EXISTS users (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    name VARCHAR(255) NOT NULL,
    email VARCHAR(255) UNIQUE NOT NULL,
    password_hash VARCHAR(255) NOT NULL,
    is_admin BOOLEAN DEFAULT FALSE,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Tabela de categorias
CREATE TABLE IF NOT EXISTS categories (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    name VARCHAR(100) NOT NULL,
    description TEXT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Tabela de produtos
CREATE TABLE IF NOT EXISTS products (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    name VARCHAR(255) NOT NULL,
    description TEXT,
    price DECIMAL(10,2) NOT NULL,
    stock_quantity INTEGER NOT NULL DEFAULT 0,
    category_id INTEGER,
    image_url VARCHAR(500),
    status VARCHAR(20) DEFAULT 'active',
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (category_id) REFERENCES categories(id)
);

-- Tabela de pedidos
CREATE TABLE IF NOT EXISTS orders (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    user_id INTEGER NOT NULL,
    total_amount DECIMAL(10,2) NOT NULL,
    status VARCHAR(50) DEFAULT 'pending',
    shipping_address TEXT,
    payment_method VARCHAR(50),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (user_id) REFERENCES users(id)
);

-- Tabela de itens do pedido
CREATE TABLE IF NOT EXISTS order_items (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    order_id INTEGER NOT NULL,
    product_id INTEGER NOT NULL,
    quantity INTEGER NOT NULL,
    unit_price DECIMAL(10,2) NOT NULL,
    total_price DECIMAL(10,2) NOT NULL,
    FOREIGN KEY (order_id) REFERENCES orders(id),
    FOREIGN KEY (product_id) REFERENCES products(id)
);

-- Tabela de carrinho de compras
CREATE TABLE IF NOT EXISTS cart_items (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    user_id INTEGER NOT NULL,
    product_id INTEGER NOT NULL,
    quantity INTEGER NOT NULL DEFAULT 1,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (user_id) REFERENCES users(id),
    FOREIGN KEY (product_id) REFERENCES products(id),
    UNIQUE(user_id, product_id)
);

-- Índices para melhor performance
CREATE INDEX IF NOT EXISTS idx_products_category ON products(category_id);
CREATE INDEX IF NOT EXISTS idx_products_status ON products(status);
CREATE INDEX IF NOT EXISTS idx_orders_user ON orders(user_id);
CREATE INDEX IF NOT EXISTS idx_orders_status ON orders(status);
CREATE INDEX IF NOT EXISTS idx_cart_user ON cart_items(user_id);
[V0_FILE]sql:file="scripts/seed-database.sql"
-- Script para popular o banco de dados com dados iniciais

-- Inserir categorias
INSERT INTO categories (name, description) VALUES 
('roupas', 'Roupas esportivas e de academia'),
('acessorios', 'Acessórios para treino e fitness'),
('suplementos', 'Suplementos alimentares e proteínas');

-- Inserir usuário administrador (senha: admin123 - deve ser criptografada em produção)
INSERT INTO users (name, email, password_hash, is_admin) VALUES 
('Administrador', 'admin@vitta.com.br', '$2b$10$example_hash_here', TRUE);

-- Inserir usuários fictícios (senhas devem ser criptografadas em produção)
INSERT INTO users (name, email, password_hash, is_admin) VALUES 
('João Silva', 'joao@email.com', '$2b$10$hashed_123456', FALSE),
('Maria Santos', 'maria@email.com', '$2b$10$hashed_123456', FALSE),
('Admin Vitta', 'admin@vitta.com', '$2b$10$hashed_admin123', TRUE),
('Carlos Oliveira', 'carlos@email.com', '$2b$10$hashed_123456', FALSE),
('Ana Costa', 'ana@email.com', '$2b$10$hashed_123456', FALSE),
('Pedro Ferreira', 'pedro@email.com', '$2b$10$hashed_123456', FALSE);

-- Atualizar os produtos para incluir URLs de imagens
INSERT INTO products (name, description, price, stock_quantity, category_id, image_url, status) VALUES 
('Camiseta Dry Fit Premium', 'Camiseta de alta performance com tecnologia dry fit para máximo conforto durante os treinos', 89.90, 25, 1, '/placeholder.svg?height=300&width=300&text=Camiseta+Dry+Fit+Premium', 'active'),
('Garrafa Térmica 1L', 'Garrafa térmica com isolamento duplo, mantém a temperatura por até 12 horas', 45.90, 15, 2, '/placeholder.svg?height=300&width=300&text=Garrafa+Térmica+1L', 'active'),
('Straps de Levantamento', 'Straps profissionais para levantamento de peso, material resistente e durável', 35.90, 8, 2, '/placeholder.svg?height=300&width=300&text=Straps+de+Levantamento', 'active'),
('Shorts Masculino Fit', 'Shorts com tecido respirável e ajuste perfeito para treinos intensos', 69.90, 20, 1, '/placeholder.svg?height=300&width=300&text=Shorts+Masculino+Fit', 'active'),
('Top Feminino Sport', 'Top esportivo com suporte médio, ideal para diversos tipos de exercício', 59.90, 18, 1, '/placeholder.svg?height=300&width=300&text=Top+Feminino+Sport', 'active'),
('Luvas de Treino', 'Luvas com grip antiderrapante e proteção para as palmas das mãos', 29.90, 12, 2, '/placeholder.svg?height=300&width=300&text=Luvas+de+Treino', 'active'),
('Legging Feminina Premium', 'Legging de alta compressão com tecnologia anti-celulite e modelagem perfeita', 99.90, 22, 1, '/placeholder.svg?height=300&width=300&text=Legging+Feminina+Premium', 'active'),
('Shaker Protein 600ml', 'Shaker com compartimento para suplementos e misturador em espiral', 25.90, 30, 2, '/placeholder.svg?height=300&width=300&text=Shaker+Protein+600ml', 'active'),
('Whey Protein 1kg', 'Proteína isolada de alta qualidade, sabor chocolate', 89.90, 10, 3, '/placeholder.svg?height=300&width=300&text=Whey+Protein+1kg', 'active'),
('Creatina Monohidratada 300g', 'Creatina pura para aumento de força e massa muscular', 45.90, 15, 3, '/placeholder.svg?height=300&width=300&text=Creatina+300g', 'active');

-- Inserir alguns pedidos de exemplo
INSERT INTO orders (user_id, total_amount, status, shipping_address, payment_method) VALUES 
(1, 179.80, 'completed', 'Rua das Flores, 123 - São Paulo, SP', 'credit_card'),
(1, 89.90, 'pending', 'Rua das Flores, 123 - São Paulo, SP', 'pix');

-- Inserir itens dos pedidos
INSERT INTO order_items (order_id, product_id, quantity, unit_price, total_price) VALUES 
(1, 1, 2, 89.90, 179.80),
(2, 1, 1, 89.90, 89.90);
[V0_FILE]css:file="styles/globals.css"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]typescript:file="tailwind.config.ts"
import type { Config } from "tailwindcss";

// all in fixtures is set to tailwind v3 as interims solutions

const config: Config = {
    darkMode: ["class"],
    content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "*.{js,ts,jsx,tsx,mdx}"
  ],
  theme: {
  	extend: {
  		colors: {
  			background: 'hsl(var(--background))',
  			foreground: 'hsl(var(--foreground))',
  			card: {
  				DEFAULT: 'hsl(var(--card))',
  				foreground: 'hsl(var(--card-foreground))'
  			},
  			popover: {
  				DEFAULT: 'hsl(var(--popover))',
  				foreground: 'hsl(var(--popover-foreground))'
  			},
  			primary: {
  				DEFAULT: 'hsl(var(--primary))',
  				foreground: 'hsl(var(--primary-foreground))'
  			},
  			secondary: {
  				DEFAULT: 'hsl(var(--secondary))',
  				foreground: 'hsl(var(--secondary-foreground))'
  			},
  			muted: {
  				DEFAULT: 'hsl(var(--muted))',
  				foreground: 'hsl(var(--muted-foreground))'
  			},
  			accent: {
  				DEFAULT: 'hsl(var(--accent))',
  				foreground: 'hsl(var(--accent-foreground))'
  			},
  			destructive: {
  				DEFAULT: 'hsl(var(--destructive))',
  				foreground: 'hsl(var(--destructive-foreground))'
  			},
  			border: 'hsl(var(--border))',
  			input: 'hsl(var(--input))',
  			ring: 'hsl(var(--ring))',
  			chart: {
  				'1': 'hsl(var(--chart-1))',
  				'2': 'hsl(var(--chart-2))',
  				'3': 'hsl(var(--chart-3))',
  				'4': 'hsl(var(--chart-4))',
  				'5': 'hsl(var(--chart-5))'
  			},
  			sidebar: {
  				DEFAULT: 'hsl(var(--sidebar-background))',
  				foreground: 'hsl(var(--sidebar-foreground))',
  				primary: 'hsl(var(--sidebar-primary))',
  				'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
  				accent: 'hsl(var(--sidebar-accent))',
  				'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
  				border: 'hsl(var(--sidebar-border))',
  				ring: 'hsl(var(--sidebar-ring))'
  			}
  		},
  		borderRadius: {
  			lg: 'var(--radius)',
  			md: 'calc(var(--radius) - 2px)',
  			sm: 'calc(var(--radius) - 4px)'
  		},
  		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")],
};
export default config;
[V0_FILE]json:file="tsconfig.json"
{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "target": "ES6",
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
[V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_h2ROeJre3kXqkVkaftsLVmHhzI6N/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png"
[V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_h2ROeJre3kXqkVkaftsLVmHhzI6N/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg"
[V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_h2ROeJre3kXqkVkaftsLVmHhzI6N/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg"
[V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_h2ROeJre3kXqkVkaftsLVmHhzI6N/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg"
[V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_h2ROeJre3kXqkVkaftsLVmHhzI6N/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg"</article></body></html>