HotPlate/discord-rpg-concept
1
0
Fork 0
forked from syntaxbullet/aurorabot
Code Pull Requests Activity

feat: (ui) settings drawers

Browse Source
This commit is contained in:
syntaxbullet
2026-01-09 19:28:14 +01:00
parent d870ef69d5
commit 0d923491b5
17 changed files with 1977 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
web/src/components/stat-card.tsx
View File

@@ -1,7 +1,7 @@
import React, { type ReactNode } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
import { Skeleton } from "./ui/skeleton";
import { type LucideIcon } from "lucide-react";
import { type LucideIcon, ChevronRight } from "lucide-react";
import { cn } from "../lib/utils";
interface StatCardProps {
@@ -13,6 +13,7 @@ interface StatCardProps {
className?: string;
valueClassName?: string;
iconClassName?: string;
onClick?: () => void;
}
export function StatCard({
@@ -24,12 +25,33 @@ export function StatCard({
className,
valueClassName,
iconClassName,
onClick,
}: StatCardProps) {
return (
<Card className={cn("glass-card border-none bg-card/40 hover-glow", className)}>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">{title}</CardTitle>
<Icon className={cn("h-4 w-4", iconClassName || "text-muted-foreground")} />
<Card
className={cn(
"glass-card border-none bg-card/40 hover-glow group transition-all duration-300",
onClick && "cursor-pointer hover:bg-card/60 hover:scale-[1.02] active:scale-[0.98]",
className
)}
onClick={onClick}
>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 relative overflow-hidden">
<CardTitle className="text-sm font-medium text-muted-foreground group-hover:text-foreground transition-colors">
{title}
</CardTitle>
<div className="flex items-center gap-2">
{onClick && (
<span className="text-[10px] font-bold uppercase tracking-widest text-primary opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300 flex items-center gap-1">
Manage <ChevronRight className="w-3 h-3" />
</span>
)}
<Icon className={cn(
"h-4 w-4 transition-all duration-300",
onClick && "group-hover:text-primary group-hover:scale-110",
iconClassName || "text-muted-foreground"
)} />
</div>
</CardHeader>
<CardContent>
{isLoading ? (
@@ -48,6 +70,6 @@ export function StatCard({
</>
)}
</CardContent>
</Card>
</Card >
);
}