Shadcnified leaderboards
This commit is contained in:
+256
-266
@@ -1,305 +1,295 @@
|
||||
"use client";
|
||||
|
||||
import { Trophy, Calendar, Globe, TrendingUp } from "lucide-react";
|
||||
import LeaderboardRow from "@/components/app/LeaderboardRow";
|
||||
import { useState } from "react";
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Pagination,
|
||||
PaginationContent,
|
||||
PaginationItem,
|
||||
PaginationLink,
|
||||
PaginationNext,
|
||||
PaginationPrevious,
|
||||
} from "@/components/ui/pagination";
|
||||
|
||||
import LeaderboardRow from "@/components/app/LeaderboardRow";
|
||||
|
||||
const globalLeaderboard = [
|
||||
{
|
||||
rank: 1,
|
||||
username: "speedmaster_x",
|
||||
pb: "2:34.21",
|
||||
runsCount: 2341,
|
||||
category: "Any%",
|
||||
},
|
||||
{
|
||||
rank: 2,
|
||||
username: "algo_ninja",
|
||||
pb: "2:38.54",
|
||||
runsCount: 1876,
|
||||
category: "Any%",
|
||||
},
|
||||
{
|
||||
rank: 3,
|
||||
username: "clockwork",
|
||||
pb: "2:41.02",
|
||||
runsCount: 3102,
|
||||
category: "Any%",
|
||||
},
|
||||
{
|
||||
rank: 4,
|
||||
username: "fastfingers99",
|
||||
pb: "2:45.33",
|
||||
runsCount: 987,
|
||||
category: "Any%",
|
||||
},
|
||||
{
|
||||
rank: 5,
|
||||
username: "recursion_queen",
|
||||
pb: "2:47.89",
|
||||
runsCount: 1543,
|
||||
category: "Any%",
|
||||
},
|
||||
{
|
||||
rank: 6,
|
||||
username: "bitshifter",
|
||||
pb: "2:52.11",
|
||||
runsCount: 2109,
|
||||
category: "Any%",
|
||||
},
|
||||
{
|
||||
rank: 7,
|
||||
username: "nullpointer",
|
||||
pb: "2:54.67",
|
||||
runsCount: 876,
|
||||
category: "Any%",
|
||||
},
|
||||
{
|
||||
rank: 8,
|
||||
username: "stackattack",
|
||||
pb: "2:58.23",
|
||||
runsCount: 1234,
|
||||
category: "Any%",
|
||||
},
|
||||
{
|
||||
rank: 9,
|
||||
username: "looplegend",
|
||||
pb: "3:01.45",
|
||||
runsCount: 654,
|
||||
category: "Any%",
|
||||
},
|
||||
{
|
||||
rank: 10,
|
||||
username: "coderunner",
|
||||
pb: "3:05.78",
|
||||
runsCount: 1098,
|
||||
category: "Any%",
|
||||
},
|
||||
];
|
||||
const weeklyLeaderboard = [
|
||||
{
|
||||
rank: 1,
|
||||
username: "weekly_warrior",
|
||||
pb: "2:51.33",
|
||||
runsCount: 156,
|
||||
category: "Any%",
|
||||
},
|
||||
{
|
||||
rank: 2,
|
||||
username: "speedmaster_x",
|
||||
pb: "2:53.12",
|
||||
runsCount: 89,
|
||||
category: "Any%",
|
||||
},
|
||||
{
|
||||
rank: 3,
|
||||
username: "newbie_grinder",
|
||||
pb: "2:58.67",
|
||||
runsCount: 234,
|
||||
category: "Any%",
|
||||
},
|
||||
{
|
||||
rank: 4,
|
||||
username: "algo_ninja",
|
||||
pb: "3:02.45",
|
||||
runsCount: 67,
|
||||
category: "Any%",
|
||||
},
|
||||
{
|
||||
rank: 5,
|
||||
username: "fresh_runner",
|
||||
pb: "3:05.89",
|
||||
runsCount: 45,
|
||||
category: "Any%",
|
||||
},
|
||||
{
|
||||
rank: 6,
|
||||
username: "practice_makes",
|
||||
pb: "3:08.12",
|
||||
runsCount: 112,
|
||||
category: "Any%",
|
||||
},
|
||||
{
|
||||
rank: 7,
|
||||
username: "splitmaster",
|
||||
pb: "3:12.34",
|
||||
runsCount: 78,
|
||||
category: "Any%",
|
||||
},
|
||||
{
|
||||
rank: 8,
|
||||
username: "grindtime",
|
||||
pb: "3:15.56",
|
||||
runsCount: 92,
|
||||
category: "Any%",
|
||||
},
|
||||
{
|
||||
rank: 9,
|
||||
username: "pb_hunter",
|
||||
pb: "3:18.90",
|
||||
runsCount: 56,
|
||||
category: "Any%",
|
||||
},
|
||||
{
|
||||
rank: 10,
|
||||
username: "reset_king",
|
||||
pb: "3:22.11",
|
||||
runsCount: 187,
|
||||
category: "Any%",
|
||||
},
|
||||
];
|
||||
|
||||
const Leaderboards = () => {
|
||||
const [activeTab, setActiveTab] = useState<"global" | "weekly">("global");
|
||||
|
||||
const globalLeaderboard = [
|
||||
{
|
||||
rank: 1,
|
||||
username: "speedmaster_x",
|
||||
pb: "2:34.21",
|
||||
runsCount: 2341,
|
||||
category: "Any%",
|
||||
},
|
||||
{
|
||||
rank: 2,
|
||||
username: "algo_ninja",
|
||||
pb: "2:38.54",
|
||||
runsCount: 1876,
|
||||
category: "Any%",
|
||||
},
|
||||
{
|
||||
rank: 3,
|
||||
username: "clockwork",
|
||||
pb: "2:41.02",
|
||||
runsCount: 3102,
|
||||
category: "Any%",
|
||||
},
|
||||
{
|
||||
rank: 4,
|
||||
username: "fastfingers99",
|
||||
pb: "2:45.33",
|
||||
runsCount: 987,
|
||||
category: "Any%",
|
||||
},
|
||||
{
|
||||
rank: 5,
|
||||
username: "recursion_queen",
|
||||
pb: "2:47.89",
|
||||
runsCount: 1543,
|
||||
category: "Any%",
|
||||
},
|
||||
{
|
||||
rank: 6,
|
||||
username: "bitshifter",
|
||||
pb: "2:52.11",
|
||||
runsCount: 2109,
|
||||
category: "Any%",
|
||||
},
|
||||
{
|
||||
rank: 7,
|
||||
username: "nullpointer",
|
||||
pb: "2:54.67",
|
||||
runsCount: 876,
|
||||
category: "Any%",
|
||||
},
|
||||
{
|
||||
rank: 8,
|
||||
username: "stackattack",
|
||||
pb: "2:58.23",
|
||||
runsCount: 1234,
|
||||
category: "Any%",
|
||||
},
|
||||
{
|
||||
rank: 9,
|
||||
username: "looplegend",
|
||||
pb: "3:01.45",
|
||||
runsCount: 654,
|
||||
category: "Any%",
|
||||
},
|
||||
{
|
||||
rank: 10,
|
||||
username: "coderunner",
|
||||
pb: "3:05.78",
|
||||
runsCount: 1098,
|
||||
category: "Any%",
|
||||
},
|
||||
];
|
||||
|
||||
const weeklyLeaderboard = [
|
||||
{
|
||||
rank: 1,
|
||||
username: "weekly_warrior",
|
||||
pb: "2:51.33",
|
||||
runsCount: 156,
|
||||
category: "Any%",
|
||||
},
|
||||
{
|
||||
rank: 2,
|
||||
username: "speedmaster_x",
|
||||
pb: "2:53.12",
|
||||
runsCount: 89,
|
||||
category: "Any%",
|
||||
},
|
||||
{
|
||||
rank: 3,
|
||||
username: "newbie_grinder",
|
||||
pb: "2:58.67",
|
||||
runsCount: 234,
|
||||
category: "Any%",
|
||||
},
|
||||
{
|
||||
rank: 4,
|
||||
username: "algo_ninja",
|
||||
pb: "3:02.45",
|
||||
runsCount: 67,
|
||||
category: "Any%",
|
||||
},
|
||||
{
|
||||
rank: 5,
|
||||
username: "fresh_runner",
|
||||
pb: "3:05.89",
|
||||
runsCount: 45,
|
||||
category: "Any%",
|
||||
},
|
||||
{
|
||||
rank: 6,
|
||||
username: "practice_makes",
|
||||
pb: "3:08.12",
|
||||
runsCount: 112,
|
||||
category: "Any%",
|
||||
},
|
||||
{
|
||||
rank: 7,
|
||||
username: "splitmaster",
|
||||
pb: "3:12.34",
|
||||
runsCount: 78,
|
||||
category: "Any%",
|
||||
},
|
||||
{
|
||||
rank: 8,
|
||||
username: "grindtime",
|
||||
pb: "3:15.56",
|
||||
runsCount: 92,
|
||||
category: "Any%",
|
||||
},
|
||||
{
|
||||
rank: 9,
|
||||
username: "pb_hunter",
|
||||
pb: "3:18.90",
|
||||
runsCount: 56,
|
||||
category: "Any%",
|
||||
},
|
||||
{
|
||||
rank: 10,
|
||||
username: "reset_king",
|
||||
pb: "3:22.11",
|
||||
runsCount: 187,
|
||||
category: "Any%",
|
||||
},
|
||||
];
|
||||
|
||||
const categories = ["Any%", "100%", "Easy Only", "No DP", "Blind"];
|
||||
|
||||
const data = activeTab === "global" ? globalLeaderboard : weeklyLeaderboard;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen pt-24 pb-16">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="container mx-auto px-6 space-y-8">
|
||||
{/* Header */}
|
||||
<div className="mb-10">
|
||||
<h1 className="text-4xl font-bold text-foreground mb-2">
|
||||
Leaderboards
|
||||
</h1>
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold">Leaderboards</h1>
|
||||
<p className="text-muted-foreground">
|
||||
The fastest runners in the game. Will you claim a spot?
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Stats Row */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
|
||||
<div className="bg-card border border-border rounded-xl p-4 text-center">
|
||||
<Globe className="h-5 w-5 text-primary mx-auto mb-2" />
|
||||
<p className="text-2xl font-bold font-mono text-foreground">
|
||||
12,453
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">Total Runners</p>
|
||||
</div>
|
||||
<div className="bg-card border border-border rounded-xl p-4 text-center">
|
||||
<Trophy className="h-5 w-5 text-gold mx-auto mb-2" />
|
||||
<p className="text-2xl font-bold font-mono text-foreground">
|
||||
2:34.21
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">World Record</p>
|
||||
</div>
|
||||
<div className="bg-card border border-border rounded-xl p-4 text-center">
|
||||
<TrendingUp className="h-5 w-5 text-emerald-400 mx-auto mb-2" />
|
||||
<p className="text-2xl font-bold font-mono text-foreground">847K</p>
|
||||
<p className="text-xs text-muted-foreground">Runs This Week</p>
|
||||
</div>
|
||||
<div className="bg-card border border-border rounded-xl p-4 text-center">
|
||||
<Calendar className="h-5 w-5 text-primary mx-auto mb-2" />
|
||||
<p className="text-2xl font-bold font-mono text-foreground">
|
||||
5d 12h
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">Until Reset</p>
|
||||
</div>
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<StatCard icon={Globe} label="Total Runners" value="12,453" />
|
||||
<StatCard icon={Trophy} label="World Record" value="2:34.21" />
|
||||
<StatCard icon={TrendingUp} label="Runs This Week" value="847K" />
|
||||
<StatCard icon={Calendar} label="Until Reset" value="5d 12h" />
|
||||
</div>
|
||||
|
||||
{/* Tabs and Filters */}
|
||||
<div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 mb-6">
|
||||
{/* Global/Weekly Toggle */}
|
||||
<div className="flex gap-1 bg-card border border-border rounded-lg p-1">
|
||||
<button
|
||||
onClick={() => setActiveTab("global")}
|
||||
className={`flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-all ${
|
||||
activeTab === "global"
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "text-muted-foreground hover:text-foreground"
|
||||
}`}
|
||||
>
|
||||
<Globe className="h-4 w-4" />
|
||||
Global
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab("weekly")}
|
||||
className={`flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-all ${
|
||||
activeTab === "weekly"
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "text-muted-foreground hover:text-foreground"
|
||||
}`}
|
||||
>
|
||||
<Calendar className="h-4 w-4" />
|
||||
Weekly
|
||||
</button>
|
||||
</div>
|
||||
{/* Tabs + Filters */}
|
||||
<div className="flex flex-col md:flex-row gap-4 justify-between">
|
||||
<Tabs
|
||||
value={activeTab}
|
||||
onValueChange={(v) => setActiveTab(v as "global" | "weekly")}
|
||||
>
|
||||
<TabsList>
|
||||
<TabsTrigger value="global">
|
||||
<Globe className="mr-2 h-4 w-4" />
|
||||
Global
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="weekly">
|
||||
<Calendar className="mr-2 h-4 w-4" />
|
||||
Weekly
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
|
||||
{/* Category Filter */}
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{categories.map((cat, i) => (
|
||||
<button
|
||||
<Badge
|
||||
key={cat}
|
||||
className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-all ${
|
||||
i === 0
|
||||
? "bg-primary/10 text-primary border border-primary/30"
|
||||
: "bg-card text-muted-foreground hover:text-foreground border border-border hover:border-primary/30"
|
||||
}`}
|
||||
variant={i === 0 ? "default" : "outline"}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
{cat}
|
||||
</button>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Leaderboard Table */}
|
||||
<div className="bg-card border border-border rounded-xl overflow-hidden">
|
||||
<table className="w-full">
|
||||
<thead className="bg-secondary/50">
|
||||
<tr>
|
||||
<th className="py-3 px-4 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">
|
||||
Rank
|
||||
</th>
|
||||
<th className="py-3 px-4 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">
|
||||
Runner
|
||||
</th>
|
||||
<th className="py-3 px-4 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">
|
||||
PB
|
||||
</th>
|
||||
<th className="py-3 px-4 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">
|
||||
Runs
|
||||
</th>
|
||||
<th className="py-3 px-4 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">
|
||||
Category
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(activeTab === "global"
|
||||
? globalLeaderboard
|
||||
: weeklyLeaderboard
|
||||
).map((entry, i) => (
|
||||
{/* Table */}
|
||||
<Card>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Rank</TableHead>
|
||||
<TableHead>Runner</TableHead>
|
||||
<TableHead>PB</TableHead>
|
||||
<TableHead>Runs</TableHead>
|
||||
<TableHead>Category</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{data.map((entry, i) => (
|
||||
<LeaderboardRow key={entry.username} {...entry} index={i} />
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Card>
|
||||
|
||||
{/* Pagination */}
|
||||
<div className="flex items-center justify-center gap-2 mt-6">
|
||||
<button className="px-3 py-1.5 rounded-lg bg-secondary text-muted-foreground hover:text-foreground transition-all">
|
||||
Previous
|
||||
</button>
|
||||
{[1, 2, 3, 50].map((page, i) => (
|
||||
<button
|
||||
key={i}
|
||||
className={`px-3 py-1.5 rounded-lg transition-all ${
|
||||
page === 1
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "bg-secondary text-muted-foreground hover:text-foreground"
|
||||
}`}
|
||||
>
|
||||
{page}
|
||||
</button>
|
||||
))}
|
||||
<button className="px-3 py-1.5 rounded-lg bg-secondary text-muted-foreground hover:text-foreground transition-all">
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
<Pagination>
|
||||
<PaginationContent>
|
||||
<PaginationItem>
|
||||
<PaginationPrevious />
|
||||
</PaginationItem>
|
||||
|
||||
{[1, 2, 3, 50].map((p) => (
|
||||
<PaginationItem key={p}>
|
||||
<PaginationLink isActive={p === 1}>{p}</PaginationLink>
|
||||
</PaginationItem>
|
||||
))}
|
||||
|
||||
<PaginationItem>
|
||||
<PaginationNext />
|
||||
</PaginationItem>
|
||||
</PaginationContent>
|
||||
</Pagination>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Leaderboards;
|
||||
|
||||
/* ---------- helpers ---------- */
|
||||
|
||||
function StatCard({
|
||||
icon: Icon,
|
||||
label,
|
||||
value,
|
||||
}: {
|
||||
icon: any;
|
||||
label: string;
|
||||
value: string;
|
||||
}) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="pb-2 text-center">
|
||||
<Icon className="mx-auto h-5 w-5 text-primary" />
|
||||
<CardTitle className="font-mono text-2xl">{value}</CardTitle>
|
||||
<p className="text-xs text-muted-foreground">{label}</p>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { Slot } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const badgeVariants = cva(
|
||||
"inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
|
||||
destructive:
|
||||
"bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||
outline:
|
||||
"border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
|
||||
ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
|
||||
link: "text-primary underline-offset-4 [a&]:hover:underline",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Badge({
|
||||
className,
|
||||
variant = "default",
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"span"> &
|
||||
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
|
||||
const Comp = asChild ? Slot.Root : "span"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="badge"
|
||||
data-variant={variant}
|
||||
className={cn(badgeVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Badge, badgeVariants }
|
||||
@@ -0,0 +1,92 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Card({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card"
|
||||
className={cn(
|
||||
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-header"
|
||||
className={cn(
|
||||
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-title"
|
||||
className={cn("leading-none font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-action"
|
||||
className={cn(
|
||||
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-content"
|
||||
className={cn("px-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-footer"
|
||||
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardFooter,
|
||||
CardTitle,
|
||||
CardAction,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
}
|
||||
@@ -0,0 +1,127 @@
|
||||
import * as React from "react"
|
||||
import {
|
||||
ChevronLeftIcon,
|
||||
ChevronRightIcon,
|
||||
MoreHorizontalIcon,
|
||||
} from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { buttonVariants, type Button } from "@/components/ui/button"
|
||||
|
||||
function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
|
||||
return (
|
||||
<nav
|
||||
role="navigation"
|
||||
aria-label="pagination"
|
||||
data-slot="pagination"
|
||||
className={cn("mx-auto flex w-full justify-center", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function PaginationContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"ul">) {
|
||||
return (
|
||||
<ul
|
||||
data-slot="pagination-content"
|
||||
className={cn("flex flex-row items-center gap-1", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function PaginationItem({ ...props }: React.ComponentProps<"li">) {
|
||||
return <li data-slot="pagination-item" {...props} />
|
||||
}
|
||||
|
||||
type PaginationLinkProps = {
|
||||
isActive?: boolean
|
||||
} & Pick<React.ComponentProps<typeof Button>, "size"> &
|
||||
React.ComponentProps<"a">
|
||||
|
||||
function PaginationLink({
|
||||
className,
|
||||
isActive,
|
||||
size = "icon",
|
||||
...props
|
||||
}: PaginationLinkProps) {
|
||||
return (
|
||||
<a
|
||||
aria-current={isActive ? "page" : undefined}
|
||||
data-slot="pagination-link"
|
||||
data-active={isActive}
|
||||
className={cn(
|
||||
buttonVariants({
|
||||
variant: isActive ? "outline" : "ghost",
|
||||
size,
|
||||
}),
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function PaginationPrevious({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof PaginationLink>) {
|
||||
return (
|
||||
<PaginationLink
|
||||
aria-label="Go to previous page"
|
||||
size="default"
|
||||
className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronLeftIcon />
|
||||
<span className="hidden sm:block">Previous</span>
|
||||
</PaginationLink>
|
||||
)
|
||||
}
|
||||
|
||||
function PaginationNext({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof PaginationLink>) {
|
||||
return (
|
||||
<PaginationLink
|
||||
aria-label="Go to next page"
|
||||
size="default"
|
||||
className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
|
||||
{...props}
|
||||
>
|
||||
<span className="hidden sm:block">Next</span>
|
||||
<ChevronRightIcon />
|
||||
</PaginationLink>
|
||||
)
|
||||
}
|
||||
|
||||
function PaginationEllipsis({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
aria-hidden
|
||||
data-slot="pagination-ellipsis"
|
||||
className={cn("flex size-9 items-center justify-center", className)}
|
||||
{...props}
|
||||
>
|
||||
<MoreHorizontalIcon className="size-4" />
|
||||
<span className="sr-only">More pages</span>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Pagination,
|
||||
PaginationContent,
|
||||
PaginationLink,
|
||||
PaginationItem,
|
||||
PaginationPrevious,
|
||||
PaginationNext,
|
||||
PaginationEllipsis,
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Table({ className, ...props }: React.ComponentProps<"table">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="table-container"
|
||||
className="relative w-full overflow-x-auto"
|
||||
>
|
||||
<table
|
||||
data-slot="table"
|
||||
className={cn("w-full caption-bottom text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
|
||||
return (
|
||||
<thead
|
||||
data-slot="table-header"
|
||||
className={cn("[&_tr]:border-b", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
|
||||
return (
|
||||
<tbody
|
||||
data-slot="table-body"
|
||||
className={cn("[&_tr:last-child]:border-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
|
||||
return (
|
||||
<tfoot
|
||||
data-slot="table-footer"
|
||||
className={cn(
|
||||
"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
|
||||
return (
|
||||
<tr
|
||||
data-slot="table-row"
|
||||
className={cn(
|
||||
"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableHead({ className, ...props }: React.ComponentProps<"th">) {
|
||||
return (
|
||||
<th
|
||||
data-slot="table-head"
|
||||
className={cn(
|
||||
"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableCell({ className, ...props }: React.ComponentProps<"td">) {
|
||||
return (
|
||||
<td
|
||||
data-slot="table-cell"
|
||||
className={cn(
|
||||
"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableCaption({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"caption">) {
|
||||
return (
|
||||
<caption
|
||||
data-slot="table-caption"
|
||||
className={cn("text-muted-foreground mt-4 text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Table,
|
||||
TableHeader,
|
||||
TableBody,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableRow,
|
||||
TableCell,
|
||||
TableCaption,
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { Tabs as TabsPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Tabs({
|
||||
className,
|
||||
orientation = "horizontal",
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
|
||||
return (
|
||||
<TabsPrimitive.Root
|
||||
data-slot="tabs"
|
||||
data-orientation={orientation}
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const tabsListVariants = cva(
|
||||
"rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-muted",
|
||||
line: "gap-1 bg-transparent",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function TabsList({
|
||||
className,
|
||||
variant = "default",
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.List> &
|
||||
VariantProps<typeof tabsListVariants>) {
|
||||
return (
|
||||
<TabsPrimitive.List
|
||||
data-slot="tabs-list"
|
||||
data-variant={variant}
|
||||
className={cn(tabsListVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TabsTrigger({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
|
||||
return (
|
||||
<TabsPrimitive.Trigger
|
||||
data-slot="tabs-trigger"
|
||||
className={cn(
|
||||
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
|
||||
"data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground",
|
||||
"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TabsContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.Content>) {
|
||||
return (
|
||||
<TabsPrimitive.Content
|
||||
data-slot="tabs-content"
|
||||
className={cn("flex-1 outline-none", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
|
||||
Reference in New Issue
Block a user