mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-10-30 18:22:59 +00:00
zeekay
fb38604140
- Fix missing exports in sidebar.tsx (SidebarFooter, SidebarMenuAction, SidebarMenuBadge, SidebarSeparator, useSidebar) - Remove duplicate imports in sidebar-16.tsx (DropdownMenu components and Sidebar components) - Fix duplicate SettingsDialog function in sidebar-13.tsx - Fix duplicate functions and imports in sidebar-15.tsx (remove external imports, fix TeamSwitcher reference, rename duplicate data) - Fix Calendar imports from default to named exports in calendar-29.tsx - Update both default and new-york theme variants - Rebuild registry after all fixes
324 lines
12 KiB
TypeScript
324 lines
12 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import {
|
|
Activity,
|
|
ArrowDownRight,
|
|
ArrowUpRight,
|
|
Bell,
|
|
CreditCard,
|
|
DollarSign,
|
|
Package,
|
|
Users,
|
|
} from "lucide-react"
|
|
|
|
import {
|
|
Avatar,
|
|
AvatarFallback,
|
|
AvatarImage,
|
|
} from "@/registry/default/ui/avatar"
|
|
import { Badge } from "@/registry/default/ui/badge"
|
|
import { Button } from "@/registry/default/ui/button"
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/registry/default/ui/card"
|
|
import { Progress } from "@/registry/default/ui/progress"
|
|
|
|
export default function Component() {
|
|
return (
|
|
<div className="space-y-8 px-4 md:px-6 lg:px-8">
|
|
{/* Stats Cards Row */}
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Total Revenue</CardTitle>
|
|
<DollarSign className="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">$45,231.89</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
<span className="text-green-500 inline-flex items-center">
|
|
<ArrowUpRight className="mr-1 h-3 w-3" />
|
|
20.1%
|
|
</span>{" "}
|
|
from last month
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Subscriptions</CardTitle>
|
|
<Users className="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">+2350</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
<span className="text-green-500 inline-flex items-center">
|
|
<ArrowUpRight className="mr-1 h-3 w-3" />
|
|
180.1%
|
|
</span>{" "}
|
|
from last month
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Sales</CardTitle>
|
|
<CreditCard className="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">+12,234</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
<span className="text-green-500 inline-flex items-center">
|
|
<ArrowUpRight className="mr-1 h-3 w-3" />
|
|
19%
|
|
</span>{" "}
|
|
from last month
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Active Now</CardTitle>
|
|
<Activity className="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">+573</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
<span className="text-red-500 inline-flex items-center">
|
|
<ArrowDownRight className="mr-1 h-3 w-3" />
|
|
5%
|
|
</span>{" "}
|
|
from last hour
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Main Content Cards */}
|
|
<div className="grid gap-4 lg:grid-cols-7">
|
|
<Card className="col-span-4">
|
|
<CardHeader>
|
|
<CardTitle>Overview</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="pl-2">
|
|
{/* Chart placeholder */}
|
|
<div className="h-[200px] flex items-center justify-center border-2 border-dashed rounded-lg">
|
|
<p className="text-muted-foreground">Revenue Chart</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="col-span-3">
|
|
<CardHeader>
|
|
<CardTitle>Recent Sales</CardTitle>
|
|
<CardDescription>You made 265 sales this month.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-8">
|
|
{[
|
|
{
|
|
name: "Olivia Martin",
|
|
email: "[email protected]",
|
|
amount: "+$1,999.00",
|
|
avatar: "/avatars/01.png",
|
|
},
|
|
{
|
|
name: "Jackson Lee",
|
|
email: "[email protected]",
|
|
amount: "+$39.00",
|
|
avatar: "/avatars/02.png",
|
|
},
|
|
{
|
|
name: "Isabella Nguyen",
|
|
email: "[email protected]",
|
|
amount: "+$299.00",
|
|
avatar: "/avatars/03.png",
|
|
},
|
|
{
|
|
name: "William Kim",
|
|
email: "[email protected]",
|
|
amount: "+$99.00",
|
|
avatar: "/avatars/04.png",
|
|
},
|
|
].map((sale, index) => (
|
|
<div key={index} className="flex items-center">
|
|
<Avatar className="h-9 w-9">
|
|
<AvatarImage src={sale.avatar} alt="Avatar" />
|
|
<AvatarFallback>
|
|
{sale.name
|
|
.split(" ")
|
|
.map((n) => n[0])
|
|
.join("")}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<div className="ml-4 space-y-1">
|
|
<p className="text-sm font-medium leading-none">
|
|
{sale.name}
|
|
</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
{sale.email}
|
|
</p>
|
|
</div>
|
|
<div className="ml-auto font-medium">{sale.amount}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Feature Cards */}
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Notifications</CardTitle>
|
|
<CardDescription>You have 3 unread messages.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="grid gap-4">
|
|
<div className=" flex items-center space-x-4 rounded-md border p-4">
|
|
<Bell />
|
|
<div className="flex-1 space-y-1">
|
|
<p className="text-sm font-medium leading-none">
|
|
Push Notifications
|
|
</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
Send notifications to device.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
{[1, 2, 3].map((item) => (
|
|
<div
|
|
key={item}
|
|
className="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
|
|
>
|
|
<span className="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
|
|
<div className="space-y-1">
|
|
<p className="text-sm font-medium leading-none">
|
|
New notification {item}
|
|
</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
Your call has been confirmed.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button className="w-full">
|
|
<Bell className="mr-2 h-4 w-4" /> Mark all as read
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Team Members</CardTitle>
|
|
<CardDescription>
|
|
Invite your team members to collaborate.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
{[
|
|
{ name: "Sofia Davis", role: "Admin", status: "online" },
|
|
{ name: "Jackson Lee", role: "Member", status: "offline" },
|
|
{ name: "Isabella Nguyen", role: "Member", status: "online" },
|
|
].map((member, i) => (
|
|
<div
|
|
key={i}
|
|
className="flex items-center justify-between space-x-4"
|
|
>
|
|
<div className="flex items-center space-x-4">
|
|
<Avatar>
|
|
<AvatarImage src={`/avatars/0${i + 1}.png`} />
|
|
<AvatarFallback>
|
|
{member.name
|
|
.split(" ")
|
|
.map((n) => n[0])
|
|
.join("")}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<div>
|
|
<p className="text-sm font-medium leading-none">
|
|
{member.name}
|
|
</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
{member.role}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<Badge
|
|
variant={
|
|
member.status === "online" ? "default" : "secondary"
|
|
}
|
|
>
|
|
{member.status}
|
|
</Badge>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button variant="outline" className="w-full">
|
|
<Users className="mr-2 h-4 w-4" />
|
|
Invite Team
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Storage</CardTitle>
|
|
<CardDescription>
|
|
Manage your storage and upgrade your plan.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between text-sm">
|
|
<span>Documents</span>
|
|
<span className="text-muted-foreground">8.5 GB</span>
|
|
</div>
|
|
<Progress value={65} className="h-2" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between text-sm">
|
|
<span>Images</span>
|
|
<span className="text-muted-foreground">3.2 GB</span>
|
|
</div>
|
|
<Progress value={25} className="h-2" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between text-sm">
|
|
<span>Videos</span>
|
|
<span className="text-muted-foreground">1.1 GB</span>
|
|
</div>
|
|
<Progress value={10} className="h-2" />
|
|
</div>
|
|
<div className="pt-4 border-t">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-medium">Total Used</span>
|
|
<span className="text-sm font-medium">12.8 GB of 20 GB</span>
|
|
</div>
|
|
<Progress value={64} className="h-2 mt-2" />
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button variant="outline" className="w-full">
|
|
<Package className="mr-2 h-4 w-4" />
|
|
Upgrade Storage
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|