WishlistCard

Wishlist item cards with product details, stock status, and action buttons

E-commercewishlistfavoritesshopping

Dependencies

shadcn/ui components needed:

npx shadcn@latest add cardnpx shadcn@latest add buttonnpx shadcn@latest add badge

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1"use client";
2
3import { Button } from '@/components/ui/button';
4import { Card, CardContent } from '@/components/ui/card';
5import { Badge } from '@/components/ui/badge';
6import { Trash2 } from 'lucide-react';
7
8const wishlistItems = [
9  { id: 1, name: 'Leather Messenger Bag', price: 189.99, inStock: true },
10  { id: 2, name: 'Premium Wireless Headphones', price: 299.99, inStock: true },
11  { id: 3, name: 'Minimal Desk Lamp', price: 68.00, inStock: false },
12];
13
14export default function WishlistCard() {
15  return (
16    <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 py-12 px-6">
17      <div className="container mx-auto max-w-3xl">
18        <h2 className="text-3xl font-bold text-white mb-8">My Wishlist</h2>
19        
20        <div className="space-y-4">
21          {wishlistItems.map((item) => (
22            <Card
23              key={item.id}
24              className="bg-gradient-to-br from-slate-900 to-slate-800 border-slate-700"
25            >
26              <CardContent className="p-4">
27                <div className="flex gap-4">
28                  <div className="w-24 h-24 bg-gradient-to-br from-slate-700 to-slate-800 rounded-lg flex items-center justify-center flex-shrink-0">
29                    <span className="text-slate-500 text-3xl">👜</span>
30                  </div>
31                  
32                  <div className="flex-1 min-w-0">
33                    <h3 className="text-white font-semibold mb-2">{item.name}</h3>
34                    
35                    <div className="flex items-center gap-2 mb-3">
36                      {item.inStock ? (
37                        <Badge className="bg-green-500/20 text-green-400 border-green-500/30">
38                          In Stock
39                        </Badge>
40                      ) : (
41                        <Badge className="bg-red-500/20 text-red-400 border-red-500/30">
42                          Out of Stock
43                        </Badge>
44                      )}
45                    </div>
46                    
47                    <p className="text-2xl font-bold text-white mb-3">${item.price.toFixed(2)}</p>
48                    
49                    <div className="flex gap-2">
50                      <Button
51                        className="bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white"
52                        disabled={!item.inStock}
53                      >
54                        Move to Cart
55                      </Button>
56                      <Button variant="outline" size="icon" className="border-slate-700 text-slate-400 hover:text-red-400">
57                        <Trash2 className="h-4 w-4" />
58                      </Button>
59                    </div>
60                  </div>
61                </div>
62              </CardContent>
63            </Card>
64          ))}
65        </div>
66      </div>
67    </div>
68  );
69}