Cards

1'use client';
2import { type ReactNode } from 'react';
3import Link from 'next/link';
4import { CheckCircle, TrendingUp, TrendingDown, Users, DollarSign, BarChart3, User, Code2 } from 'lucide-react';
5
6function SectionCard({ title, sourceSlug, children }: { title: string; sourceSlug?: string; children: ReactNode }) {
7  return (
8    <div>
9      <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
10        <h3 className="text-theme-xl font-semibold text-gray-800 dark:text-white/90">{title}</h3>
11        {sourceSlug && (
12          <Link
13            href={sourceSlug}
14            className="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium text-brand-500 transition-colors hover:bg-brand-50 dark:text-brand-400 dark:hover:bg-brand-500/10"
15          >
16            <Code2 className="size-3.5" />
17            View Source
18          </Link>
19        )}
20      </div>
21      <div className="rounded-xl border border-gray-200 bg-white p-6 dark:border-white/5 dark:bg-gray-dark">
22        {children}
23      </div>
24    </div>
25  );
26}
27
28export function CardsSection() {
29  return (
30    <SectionCard title="Cards" sourceSlug="/ui/source/ui-elements/cards">
31      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
32        {/* Basic Card */}
33        <div className="rounded-xl border border-gray-200 bg-white dark:border-white/5 dark:bg-gray-dark overflow-hidden">
34          <div className="border-b border-gray-100 px-5 py-4 dark:border-white/5">
35            <h4 className="font-semibold text-gray-800 dark:text-white/90">Basic Card</h4>
36            <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Card subtitle</p>
37          </div>
38          <div className="px-5 py-4">
39            <p className="text-sm text-gray-600 dark:text-gray-400">This is a basic card with a title, body content, and footer section. Cards are versatile containers.</p>
40          </div>
41          <div className="border-t border-gray-100 px-5 py-3 dark:border-white/5 flex justify-end gap-2">
42            <button className="rounded-lg px-3 py-1.5 text-xs font-medium text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/5 transition-colors">Cancel</button>
43            <button className="rounded-lg bg-brand-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-brand-600 transition-colors">Confirm</button>
44          </div>
45        </div>
46
47        {/* Stat Card */}
48        <div className="rounded-xl border border-gray-200 bg-white dark:border-white/5 dark:bg-gray-dark p-5">
49          <div className="flex items-start justify-between">
50            <div>
51              <p className="text-sm text-gray-500 dark:text-gray-400">Total Revenue</p>
52              <p className="mt-1 text-2xl font-bold text-gray-800 dark:text-white/90">$45,231</p>
53              <div className="mt-2 flex items-center gap-1 text-xs font-medium text-success-500">
54                <TrendingUp className="size-3.5" /> +20.9%
55              </div>
56            </div>
57            <div className="flex size-12 items-center justify-center rounded-xl bg-brand-50 dark:bg-brand-500/15">
58              <DollarSign className="size-6 text-brand-500" />
59            </div>
60          </div>
61        </div>
62
63        {/* Metric Card */}
64        <div className="rounded-xl border border-gray-200 bg-white dark:border-white/5 dark:bg-gray-dark p-5">
65          <p className="text-sm text-gray-500 dark:text-gray-400">Monthly Users</p>
66          <p className="mt-1 text-3xl font-bold text-gray-800 dark:text-white/90">12,847</p>
67          <p className="mt-0.5 text-xs text-gray-400 dark:text-gray-500">vs 11,200 last month</p>
68          <div className="mt-3 flex items-end gap-0.5 h-8">
69            {[40, 55, 35, 65, 50, 70, 45, 80, 60, 75, 90, 85].map((h, i) => (
70              <div key={i} className="flex-1 rounded-sm bg-brand-500" style={{ height: `${h}%`, opacity: 0.4 + (i / 12) * 0.6 }} />
71            ))}
72          </div>
73        </div>
74
75        {/* User Card */}
76        <div className="rounded-xl border border-gray-200 bg-white dark:border-white/5 dark:bg-gray-dark p-5">
77          <div className="flex items-center gap-3">
78            <div className="flex size-12 items-center justify-center rounded-full bg-gradient-to-br from-brand-400 to-brand-600 text-lg font-bold text-white">AM</div>
79            <div>
80              <p className="font-semibold text-gray-800 dark:text-white/90">Alex Morgan</p>
81              <p className="text-xs text-gray-500 dark:text-gray-400">Senior Developer</p>
82            </div>
83          </div>
84          <div className="mt-4 grid grid-cols-3 gap-3 text-center">
85            <div className="rounded-lg bg-gray-50 px-2 py-2 dark:bg-white/5">
86              <p className="text-lg font-bold text-gray-800 dark:text-white/90">142</p>
87              <p className="text-[10px] text-gray-500 dark:text-gray-400">Projects</p>
88            </div>
89            <div className="rounded-lg bg-gray-50 px-2 py-2 dark:bg-white/5">
90              <p className="text-lg font-bold text-gray-800 dark:text-white/90">8.9K</p>
91              <p className="text-[10px] text-gray-500 dark:text-gray-400">Followers</p>
92            </div>
93            <div className="rounded-lg bg-gray-50 px-2 py-2 dark:bg-white/5">
94              <p className="text-lg font-bold text-gray-800 dark:text-white/90">4.8</p>
95              <p className="text-[10px] text-gray-500 dark:text-gray-400">Rating</p>
96            </div>
97          </div>
98        </div>
99
100        {/* Bundle Card */}
101        <div className="rounded-xl border-2 border-brand-500 bg-white dark:bg-gray-dark p-5 relative overflow-hidden">
102          <div className="absolute top-0 right-0 bg-brand-500 px-3 py-0.5 text-xs font-medium text-white rounded-bl-lg">Popular</div>
103          <p className="text-sm font-semibold text-brand-500">All Bundle</p>
104          <div className="mt-2 flex items-baseline gap-1">
105            <span className="text-3xl font-bold text-gray-800 dark:text-white/90">$49</span>
106            <span className="text-sm text-gray-500 dark:text-gray-400">one-time</span>
107          </div>
108          <ul className="mt-4 space-y-2">
109            {['All Dashboard Variants', '500+ Components', 'Priority Support', '12 Months Updates', 'Source Files'].map((f) => (
110              <li key={f} className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
111                <CheckCircle className="size-4 text-success-500 shrink-0" /> {f}
112              </li>
113            ))}
114          </ul>
115          <button className="mt-5 w-full rounded-xl bg-brand-500 py-2.5 text-sm font-medium text-white hover:bg-brand-600 transition-colors">Get Started</button>
116        </div>
117
118        {/* Stat Card - Down trend */}
119        <div className="rounded-xl border border-gray-200 bg-white dark:border-white/5 dark:bg-gray-dark p-5">
120          <div className="flex items-start justify-between">
121            <div>
122              <p className="text-sm text-gray-500 dark:text-gray-400">Bounce Rate</p>
123              <p className="mt-1 text-2xl font-bold text-gray-800 dark:text-white/90">34.2%</p>
124              <div className="mt-2 flex items-center gap-1 text-xs font-medium text-error-500">
125                <TrendingDown className="size-3.5" /> -2.4%
126              </div>
127            </div>
128            <div className="flex size-12 items-center justify-center rounded-xl bg-warning-50 dark:bg-warning-500/15">
129              <BarChart3 className="size-6 text-warning-500" />
130            </div>
131          </div>
132        </div>
133      </div>
134    </SectionCard>
135  );
136}