forked from syntaxbullet/AuroraBot-discord
feat: (ui) new design
This commit is contained in:
syntaxbullet
@@ -136,7 +136,7 @@ const build = async () => {
|
||||
target: "browser",
|
||||
sourcemap: "linked",
|
||||
define: {
|
||||
"process.env.NODE_ENV": JSON.stringify("production"),
|
||||
"process.env.NODE_ENV": JSON.stringify((cliConfig as any).watch ? "development" : "production"),
|
||||
},
|
||||
...cliConfig,
|
||||
});
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
||||
import { DashboardLayout } from "./layouts/DashboardLayout";
|
||||
import { Dashboard } from "./pages/Dashboard";
|
||||
import { Activity } from "./pages/Activity";
|
||||
import { Settings } from "./pages/Settings";
|
||||
import "./index.css";
|
||||
|
||||
import { Dashboard } from "./pages/Dashboard";
|
||||
import { DesignSystem } from "./pages/DesignSystem";
|
||||
import { Home } from "./pages/Home";
|
||||
import { Toaster } from "sonner";
|
||||
|
||||
export function App() {
|
||||
@@ -12,11 +10,9 @@ export function App() {
|
||||
<BrowserRouter>
|
||||
<Toaster richColors position="top-right" theme="dark" />
|
||||
<Routes>
|
||||
<Route path="/" element={<DashboardLayout />}>
|
||||
<Route index element={<Dashboard />} />
|
||||
<Route path="activity" element={<Activity />} />
|
||||
<Route path="settings" element={<Settings />} />
|
||||
</Route>
|
||||
<Route path="/dashboard" element={<Dashboard />} />
|
||||
<Route path="/design-system" element={<DesignSystem />} />
|
||||
<Route path="/" element={<Home />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
@@ -1,125 +0,0 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
AreaChart,
|
||||
Area,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
} from 'recharts';
|
||||
import type { ActivityData } from '../hooks/use-activity-stats';
|
||||
|
||||
interface ActivityChartProps {
|
||||
data: ActivityData[];
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
const CustomTooltip = ({ active, payload }: any) => {
|
||||
if (active && payload && payload.length) {
|
||||
const data = payload[0].payload;
|
||||
|
||||
return (
|
||||
<div className="glass p-3 rounded-lg border border-white/10 text-sm shadow-xl animate-in fade-in zoom-in duration-200">
|
||||
<p className="font-semibold text-white/90 border-b border-white/10 pb-1 mb-2">
|
||||
{data.displayTime}
|
||||
</p>
|
||||
<div className="space-y-1">
|
||||
<p className="flex items-center justify-between gap-4">
|
||||
<span className="text-primary font-medium">Commands</span>
|
||||
<span className="font-mono">{payload[0].value}</span>
|
||||
</p>
|
||||
<p className="flex items-center justify-between gap-4">
|
||||
<span className="text-[var(--chart-2)] font-medium">Transactions</span>
|
||||
<span className="font-mono">{payload[1].value}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
export const ActivityChart: React.FC<ActivityChartProps> = ({ data, loading }) => {
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="w-full h-[300px] flex items-center justify-center">
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<div className="w-8 h-8 border-4 border-primary/20 border-t-primary rounded-full animate-spin" />
|
||||
<p className="text-muted-foreground animate-pulse text-sm">Aggregating stats...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Format hour for XAxis (e.g., "HH:00")
|
||||
const chartData = data.map(item => ({
|
||||
...item,
|
||||
displayTime: new Date(item.hour).getHours() + ':00'
|
||||
}));
|
||||
|
||||
return (
|
||||
<div className="w-full h-[400px] mt-4">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<AreaChart
|
||||
data={chartData}
|
||||
margin={{ top: 10, right: 10, left: -20, bottom: 0 }}
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="colorCommands" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="var(--color-primary)" stopOpacity={0.3} />
|
||||
<stop offset="95%" stopColor="var(--color-primary)" stopOpacity={0} />
|
||||
</linearGradient>
|
||||
<linearGradient id="colorTransactions" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="var(--chart-2)" stopOpacity={0.3} />
|
||||
<stop offset="95%" stopColor="var(--chart-2)" stopOpacity={0} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
vertical={false}
|
||||
stroke="rgba(255,255,255,0.05)"
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="hour"
|
||||
fontSize={10}
|
||||
tickFormatter={(str) => {
|
||||
const date = new Date(str);
|
||||
return date.getHours() % 4 === 0 ? `${date.getHours()}:00` : '';
|
||||
}}
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
stroke="var(--muted-foreground)"
|
||||
minTickGap={30}
|
||||
/>
|
||||
<YAxis
|
||||
fontSize={10}
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
stroke="var(--muted-foreground)"
|
||||
width={40}
|
||||
/>
|
||||
<Tooltip content={<CustomTooltip />} />
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="commands"
|
||||
stroke="var(--color-primary)"
|
||||
strokeWidth={2}
|
||||
fillOpacity={1}
|
||||
fill="url(#colorCommands)"
|
||||
animationDuration={1500}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="transactions"
|
||||
stroke="var(--chart-2)"
|
||||
strokeWidth={2}
|
||||
fillOpacity={1}
|
||||
fill="url(#colorTransactions)"
|
||||
animationDuration={1500}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,97 +0,0 @@
|
||||
import { LayoutDashboard, Settings, Activity } from "lucide-react";
|
||||
import { Link, useLocation } from "react-router-dom";
|
||||
import {
|
||||
Sidebar,
|
||||
SidebarContent,
|
||||
SidebarGroup,
|
||||
SidebarGroupContent,
|
||||
SidebarGroupLabel,
|
||||
SidebarHeader,
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
SidebarFooter,
|
||||
SidebarRail,
|
||||
} from "@/components/ui/sidebar";
|
||||
import { useDashboardStats } from "@/hooks/use-dashboard-stats";
|
||||
|
||||
// Menu items.
|
||||
const items = [
|
||||
{
|
||||
title: "Dashboard",
|
||||
url: "/",
|
||||
icon: LayoutDashboard,
|
||||
},
|
||||
{
|
||||
title: "Activity",
|
||||
url: "/activity",
|
||||
icon: Activity,
|
||||
},
|
||||
{
|
||||
title: "Settings",
|
||||
url: "/settings",
|
||||
icon: Settings,
|
||||
},
|
||||
];
|
||||
|
||||
export function AppSidebar() {
|
||||
const location = useLocation();
|
||||
const { stats } = useDashboardStats();
|
||||
|
||||
const botName = stats?.bot?.name || "Aurora";
|
||||
const botAvatar = stats?.bot?.avatarUrl;
|
||||
|
||||
return (
|
||||
<Sidebar className="glass-sidebar border-r border-white/5">
|
||||
<SidebarHeader className="p-4">
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton size="lg" asChild className="hover:bg-white/5 transition-all duration-300 rounded-xl hover:scale-[1.02] active:scale-[0.98]">
|
||||
<Link to="/" className="flex items-center gap-3">
|
||||
<div className="flex aspect-square size-10 items-center justify-center rounded-xl bg-gradient-to-br from-primary to-purple-600 text-primary-foreground shadow-lg shadow-primary/20 overflow-hidden border border-white/10">
|
||||
{botAvatar ? (
|
||||
<img src={botAvatar} alt={botName} className="size-full object-cover" />
|
||||
) : (
|
||||
<div className="size-full flex items-center justify-center font-bold text-lg italic">A</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col gap-0 leading-none">
|
||||
<span className="text-lg font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white to-white/70">{botName}</span>
|
||||
<span className="text-[10px] uppercase tracking-widest text-primary font-bold">Admin Portal</span>
|
||||
</div>
|
||||
</Link>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
</SidebarHeader>
|
||||
<SidebarContent className="px-2">
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel className="px-4 text-[10px] font-bold uppercase tracking-[0.2em] text-white/30 mb-2">Main Navigation</SidebarGroupLabel>
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu className="gap-1">
|
||||
{items.map((item) => (
|
||||
<SidebarMenuItem key={item.title}>
|
||||
<SidebarMenuButton
|
||||
asChild
|
||||
isActive={location.pathname === item.url}
|
||||
className={`transition-all duration-200 rounded-lg px-4 py-6 hover:scale-[1.02] active:scale-[0.98] ${location.pathname === item.url
|
||||
? "bg-primary/10 text-primary border border-primary/20 shadow-lg shadow-primary/5"
|
||||
: "hover:bg-white/5 text-white/60 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
<Link to={item.url} className="flex items-center gap-3">
|
||||
<item.icon className={`size-5 ${location.pathname === item.url ? "text-primary" : ""}`} />
|
||||
<span className="font-medium">{item.title}</span>
|
||||
</Link>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
))}
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
</SidebarContent>
|
||||
|
||||
<SidebarRail />
|
||||
</Sidebar>
|
||||
);
|
||||
}
|
||||
@@ -1,116 +0,0 @@
|
||||
import { useState } from "react";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card";
|
||||
import { Button } from "./ui/button";
|
||||
import { RefreshCw, Trash2, ShieldAlert, Loader2, Power } from "lucide-react";
|
||||
|
||||
/**
|
||||
* Props for the ControlPanel component
|
||||
*/
|
||||
interface ControlPanelProps {
|
||||
maintenanceMode: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* ControlPanel component provides quick administrative actions for the bot.
|
||||
* Integrated with the premium glassmorphic theme.
|
||||
*/
|
||||
export function ControlPanel({ maintenanceMode }: ControlPanelProps) {
|
||||
const [loading, setLoading] = useState<string | null>(null);
|
||||
|
||||
/**
|
||||
* Handles triggering an administrative action via the API
|
||||
*/
|
||||
const handleAction = async (action: string, payload?: Record<string, unknown>) => {
|
||||
setLoading(action);
|
||||
try {
|
||||
const response = await fetch(`/api/actions/${action}`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: payload ? JSON.stringify(payload) : undefined,
|
||||
});
|
||||
if (!response.ok) throw new Error(`Action ${action} failed`);
|
||||
} catch (error) {
|
||||
console.error("Action Error:", error);
|
||||
// Ideally we'd show a toast here
|
||||
} finally {
|
||||
setLoading(null);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="glass border-white/5 overflow-hidden group">
|
||||
<CardHeader className="relative">
|
||||
<div className="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
|
||||
<ShieldAlert className="h-12 w-12" />
|
||||
</div>
|
||||
<CardTitle className="text-xl font-bold flex items-center gap-2">
|
||||
<div className="h-5 w-1 bg-primary rounded-full" />
|
||||
System Controls
|
||||
</CardTitle>
|
||||
<CardDescription className="text-white/40">Administrative bot operations</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="grid grid-cols-1 gap-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{/* Reload Commands Button */}
|
||||
<Button
|
||||
variant="outline"
|
||||
className="glass hover:bg-white/10 border-white/10 hover:border-primary/50 flex flex-col items-start gap-2 h-auto py-4 px-4 transition-all group/btn"
|
||||
onClick={() => handleAction("reload-commands")}
|
||||
disabled={!!loading}
|
||||
>
|
||||
<div className="p-2 rounded-lg bg-primary/10 text-primary group-hover/btn:scale-110 transition-transform">
|
||||
{loading === "reload-commands" ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
|
||||
</div>
|
||||
<div className="space-y-0.5 text-left">
|
||||
<p className="text-sm font-bold">Reload</p>
|
||||
<p className="text-[10px] text-white/30">Sync commands</p>
|
||||
</div>
|
||||
</Button>
|
||||
|
||||
{/* Clear Cache Button */}
|
||||
<Button
|
||||
variant="outline"
|
||||
className="glass hover:bg-white/10 border-white/10 hover:border-blue-500/50 flex flex-col items-start gap-2 h-auto py-4 px-4 transition-all group/btn"
|
||||
onClick={() => handleAction("clear-cache")}
|
||||
disabled={!!loading}
|
||||
>
|
||||
<div className="p-2 rounded-lg bg-blue-500/10 text-blue-500 group-hover/btn:scale-110 transition-transform">
|
||||
{loading === "clear-cache" ? <Loader2 className="h-4 w-4 animate-spin" /> : <Trash2 className="h-4 w-4" />}
|
||||
</div>
|
||||
<div className="space-y-0.5 text-left">
|
||||
<p className="text-sm font-bold">Flush</p>
|
||||
<p className="text-[10px] text-white/30">Clear caches</p>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Maintenance Mode Toggle Button */}
|
||||
<Button
|
||||
variant="outline"
|
||||
className={`glass flex items-center justify-between h-auto py-4 px-5 border-white/10 transition-all group/maint ${maintenanceMode
|
||||
? 'bg-red-500/10 border-red-500/50 hover:bg-red-500/20'
|
||||
: 'hover:border-yellow-500/50 hover:bg-yellow-500/5'
|
||||
}`}
|
||||
onClick={() => handleAction("maintenance-mode", { enabled: !maintenanceMode, reason: "Dashboard toggle" })}
|
||||
disabled={!!loading}
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className={`p-2.5 rounded-full transition-all ${maintenanceMode ? 'bg-red-500 text-white animate-pulse shadow-[0_0_15px_rgba(239,68,68,0.4)]' : 'bg-white/5 text-white/40'
|
||||
}`}>
|
||||
{loading === "maintenance-mode" ? <Loader2 className="h-5 w-5 animate-spin" /> : <Power className="h-5 w-5" />}
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<p className="text-sm font-bold">Maintenance Mode</p>
|
||||
<p className="text-[10px] text-white/30">
|
||||
{maintenanceMode ? "Bot is currently restricted" : "Restrict bot access"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`h-2 w-2 rounded-full ${maintenanceMode ? 'bg-red-500 shadow-[0_0_8px_rgba(239,68,68,0.5)]' : 'bg-white/10'}`} />
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
48
web/src/components/feature-card.tsx
Normal file
48
web/src/components/feature-card.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
import React, { type ReactNode } from "react";
|
||||
import { cn } from "../lib/utils";
|
||||
import { Card, CardHeader, CardTitle, CardContent } from "./ui/card";
|
||||
import { Badge } from "./ui/badge";
|
||||
|
||||
interface FeatureCardProps {
|
||||
title: string;
|
||||
category: string;
|
||||
description?: string;
|
||||
icon?: ReactNode;
|
||||
children?: ReactNode;
|
||||
className?: string;
|
||||
delay?: number; // Animation delay in ms or generic unit
|
||||
}
|
||||
|
||||
export function FeatureCard({
|
||||
title,
|
||||
category,
|
||||
description,
|
||||
icon,
|
||||
children,
|
||||
className,
|
||||
}: FeatureCardProps) {
|
||||
return (
|
||||
<Card className={cn(
|
||||
"glass-card border-none hover-lift transition-all animate-in slide-up group overflow-hidden",
|
||||
className
|
||||
)}>
|
||||
{icon && (
|
||||
<div className="absolute top-0 right-0 p-8 opacity-10 group-hover:opacity-20 transition-opacity">
|
||||
{icon}
|
||||
</div>
|
||||
)}
|
||||
<CardHeader>
|
||||
<Badge variant="glass" className="w-fit mb-2">{category}</Badge>
|
||||
<CardTitle className="text-xl text-primary">{title}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{description && (
|
||||
<p className="text-muted-foreground text-step--1">
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
{children}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
30
web/src/components/info-card.tsx
Normal file
30
web/src/components/info-card.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import React, { type ReactNode } from "react";
|
||||
import { cn } from "../lib/utils";
|
||||
|
||||
interface InfoCardProps {
|
||||
icon: ReactNode;
|
||||
title: string;
|
||||
description: string;
|
||||
iconWrapperClassName?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function InfoCard({
|
||||
icon,
|
||||
title,
|
||||
description,
|
||||
iconWrapperClassName,
|
||||
className,
|
||||
}: InfoCardProps) {
|
||||
return (
|
||||
<div className={cn("space-y-4 p-6 glass-card rounded-2xl hover:bg-white/5 transition-colors", className)}>
|
||||
<div className={cn("w-12 h-12 rounded-xl flex items-center justify-center mb-4", iconWrapperClassName)}>
|
||||
{icon}
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-primary">{title}</h3>
|
||||
<p className="text-muted-foreground text-step--1">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
39
web/src/components/section-header.tsx
Normal file
39
web/src/components/section-header.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
import React from "react";
|
||||
import { cn } from "../lib/utils";
|
||||
import { Badge } from "./ui/badge";
|
||||
|
||||
interface SectionHeaderProps {
|
||||
badge: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
align?: "center" | "left" | "right";
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function SectionHeader({
|
||||
badge,
|
||||
title,
|
||||
description,
|
||||
align = "center",
|
||||
className,
|
||||
}: SectionHeaderProps) {
|
||||
const alignClasses = {
|
||||
center: "text-center mx-auto",
|
||||
left: "text-left mr-auto", // reset margin if needed
|
||||
right: "text-right ml-auto",
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={cn("space-y-4 mb-16", alignClasses[align], className)}>
|
||||
<Badge variant="glass" className="py-1.5 px-4">{badge}</Badge>
|
||||
<h2 className="text-3xl md:text-4xl font-black text-primary tracking-tight">
|
||||
{title}
|
||||
</h2>
|
||||
{description && (
|
||||
<p className="text-muted-foreground text-lg max-w-2xl mx-auto">
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
41
web/src/components/testimonial-card.tsx
Normal file
41
web/src/components/testimonial-card.tsx
Normal file
@@ -0,0 +1,41 @@
|
||||
import React from "react";
|
||||
import { cn } from "../lib/utils";
|
||||
import { Card } from "./ui/card";
|
||||
|
||||
interface TestimonialCardProps {
|
||||
quote: string;
|
||||
author: string;
|
||||
role: string;
|
||||
avatarGradient: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function TestimonialCard({
|
||||
quote,
|
||||
author,
|
||||
role,
|
||||
avatarGradient,
|
||||
className,
|
||||
}: TestimonialCardProps) {
|
||||
return (
|
||||
<Card className={cn("glass-card border-none p-6 space-y-4", className)}>
|
||||
<div className="flex gap-1 text-yellow-500">
|
||||
{[1, 2, 3, 4, 5].map((_, i) => (
|
||||
<svg key={i} xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none" className="w-4 h-4">
|
||||
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
|
||||
</svg>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-muted-foreground italic">
|
||||
"{quote}"
|
||||
</p>
|
||||
<div className="flex items-center gap-3 pt-2">
|
||||
<div className={cn("w-10 h-10 rounded-full animate-gradient", avatarGradient)} />
|
||||
<div>
|
||||
<p className="font-bold text-sm text-primary">{author}</p>
|
||||
<p className="text-xs text-muted-foreground">{role}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
37
web/src/components/ui/badge.tsx
Normal file
37
web/src/components/ui/badge.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const badgeVariants = cva(
|
||||
"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"border-transparent bg-primary text-primary-foreground hover:opacity-90",
|
||||
secondary:
|
||||
"border-transparent bg-secondary text-secondary-foreground hover:opacity-80",
|
||||
destructive:
|
||||
"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
|
||||
outline: "text-foreground border-border hover:bg-accent hover:text-accent-foreground",
|
||||
aurora: "border-transparent bg-aurora text-primary-foreground shadow-sm",
|
||||
glass: "glass-card border-border/50 text-foreground",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
export interface BadgeProps
|
||||
extends React.HTMLAttributes<HTMLDivElement>,
|
||||
VariantProps<typeof badgeVariants> { }
|
||||
|
||||
function Badge({ className, variant, ...props }: BadgeProps) {
|
||||
return (
|
||||
<div className={cn(badgeVariants({ variant }), className)} {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
export { Badge, badgeVariants }
|
||||
@@ -19,6 +19,8 @@ const buttonVariants = cva(
|
||||
ghost:
|
||||
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
aurora: "bg-aurora text-primary-foreground shadow-sm hover:opacity-90",
|
||||
glass: "glass-card border-border/50 text-foreground hover:bg-accent/50",
|
||||
},
|
||||
size: {
|
||||
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
||||
|
||||
@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
|
||||
<div
|
||||
data-slot="card"
|
||||
className={cn(
|
||||
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
|
||||
"bg-card text-card-foreground flex flex-col gap-6 rounded-lg border py-6 shadow-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -1,50 +0,0 @@
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
export interface ActivityData {
|
||||
hour: string;
|
||||
commands: number;
|
||||
transactions: number;
|
||||
}
|
||||
|
||||
interface UseActivityStatsResult {
|
||||
data: ActivityData[];
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
refresh: () => Promise<void>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom hook to fetch hourly activity data for charts.
|
||||
* Data is cached on the server for 5 minutes.
|
||||
*/
|
||||
export function useActivityStats(): UseActivityStatsResult {
|
||||
const [data, setData] = useState<ActivityData[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const fetchActivity = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await fetch("/api/stats/activity");
|
||||
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
|
||||
const jsonData = await response.json();
|
||||
setData(jsonData);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch activity stats:", err);
|
||||
setError(err instanceof Error ? err.message : "Failed to fetch activity");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchActivity();
|
||||
|
||||
// Refresh every 5 minutes to match server cache
|
||||
const interval = setInterval(fetchActivity, 5 * 60 * 1000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
return { data, loading, error, refresh: fetchActivity };
|
||||
}
|
||||
@@ -1,143 +0,0 @@
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
interface DashboardStats {
|
||||
bot: {
|
||||
name: string;
|
||||
avatarUrl: string | null;
|
||||
};
|
||||
guilds: {
|
||||
count: number;
|
||||
};
|
||||
users: {
|
||||
active: number;
|
||||
total: number;
|
||||
};
|
||||
commands: {
|
||||
total: number;
|
||||
};
|
||||
ping: {
|
||||
avg: number;
|
||||
};
|
||||
economy: {
|
||||
totalWealth: string;
|
||||
avgLevel: number;
|
||||
topStreak: number;
|
||||
totalItems: number;
|
||||
};
|
||||
activeLootdrops: Array<{
|
||||
rewardAmount: number;
|
||||
currency: string;
|
||||
createdAt: string;
|
||||
expiresAt: string | null;
|
||||
}>;
|
||||
leaderboards: {
|
||||
topLevels: Array<{ username: string; level: number | null }>;
|
||||
topWealth: Array<{ username: string; balance: string }>;
|
||||
};
|
||||
recentEvents: Array<{
|
||||
type: 'success' | 'error' | 'info' | 'warn';
|
||||
message: string;
|
||||
timestamp: string;
|
||||
icon?: string;
|
||||
}>;
|
||||
uptime: number;
|
||||
lastCommandTimestamp: number | null;
|
||||
maintenanceMode: boolean;
|
||||
}
|
||||
|
||||
interface UseDashboardStatsResult {
|
||||
stats: DashboardStats | null;
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom hook to fetch and auto-refresh dashboard statistics using WebSockets with HTTP fallback
|
||||
*/
|
||||
export function useDashboardStats(): UseDashboardStatsResult {
|
||||
const [stats, setStats] = useState<DashboardStats | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const fetchStats = async () => {
|
||||
try {
|
||||
const response = await fetch("/api/stats");
|
||||
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
|
||||
const data = await response.json();
|
||||
setStats(data);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch dashboard stats:", err);
|
||||
setError(err instanceof Error ? err.message : "Failed to fetch stats");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// Initial fetch
|
||||
fetchStats();
|
||||
|
||||
// WebSocket setup
|
||||
const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
|
||||
const wsUrl = `${protocol}//${window.location.host}/ws`;
|
||||
let socket: WebSocket | null = null;
|
||||
let reconnectTimeout: Timer | null = null;
|
||||
|
||||
const connect = () => {
|
||||
socket = new WebSocket(wsUrl);
|
||||
|
||||
socket.onopen = () => {
|
||||
console.log("🟢 [WS] Connected to dashboard live stream");
|
||||
setError(null);
|
||||
if (reconnectTimeout) {
|
||||
clearTimeout(reconnectTimeout);
|
||||
reconnectTimeout = null;
|
||||
}
|
||||
};
|
||||
|
||||
socket.onmessage = (event) => {
|
||||
try {
|
||||
const message = JSON.parse(event.data);
|
||||
|
||||
if (message.type === "STATS_UPDATE") {
|
||||
setStats(message.data);
|
||||
} else if (message.type === "NEW_EVENT") {
|
||||
setStats(prev => {
|
||||
if (!prev) return prev;
|
||||
return {
|
||||
...prev,
|
||||
recentEvents: [message.data, ...prev.recentEvents].slice(0, 10)
|
||||
};
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Error parsing WS message:", e);
|
||||
}
|
||||
};
|
||||
|
||||
socket.onclose = () => {
|
||||
console.log("🟠 [WS] Connection lost. Attempting reconnect in 5s...");
|
||||
reconnectTimeout = setTimeout(connect, 5000);
|
||||
};
|
||||
|
||||
socket.onerror = (err) => {
|
||||
console.error("🔴 [WS] Socket error:", err);
|
||||
socket?.close();
|
||||
};
|
||||
};
|
||||
|
||||
connect();
|
||||
|
||||
// Cleanup on unmount
|
||||
return () => {
|
||||
if (socket) {
|
||||
socket.onclose = null; // Prevent reconnect on intentional close
|
||||
socket.close();
|
||||
}
|
||||
if (reconnectTimeout) clearTimeout(reconnectTimeout);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return { stats, loading, error };
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
import * as React from "react"
|
||||
|
||||
const MOBILE_BREAKPOINT = 768
|
||||
|
||||
export function useIsMobile() {
|
||||
const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
|
||||
|
||||
React.useEffect(() => {
|
||||
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
|
||||
const onChange = () => {
|
||||
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
|
||||
}
|
||||
mql.addEventListener("change", onChange)
|
||||
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
|
||||
return () => mql.removeEventListener("change", onChange)
|
||||
}, [])
|
||||
|
||||
return !!isMobile
|
||||
}
|
||||
61
web/src/hooks/use-socket.ts
Normal file
61
web/src/hooks/use-socket.ts
Normal file
@@ -0,0 +1,61 @@
|
||||
import { useEffect, useState, useRef } from "react";
|
||||
import type { DashboardStats } from "@shared/modules/dashboard/dashboard.types";
|
||||
|
||||
export function useSocket() {
|
||||
const [isConnected, setIsConnected] = useState(false);
|
||||
const [stats, setStats] = useState<DashboardStats | null>(null);
|
||||
const socketRef = useRef<WebSocket | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
// Determine WS protocol based on current page schema
|
||||
const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
|
||||
const host = window.location.host;
|
||||
const wsUrl = `${protocol}//${host}/ws`;
|
||||
|
||||
function connect() {
|
||||
const ws = new WebSocket(wsUrl);
|
||||
socketRef.current = ws;
|
||||
|
||||
ws.onopen = () => {
|
||||
console.log("Connected to dashboard websocket");
|
||||
setIsConnected(true);
|
||||
};
|
||||
|
||||
ws.onmessage = (event) => {
|
||||
try {
|
||||
const payload = JSON.parse(event.data);
|
||||
|
||||
if (payload.type === "STATS_UPDATE") {
|
||||
setStats(payload.data);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to parse WS message", err);
|
||||
}
|
||||
};
|
||||
|
||||
ws.onclose = () => {
|
||||
console.log("Disconnected from dashboard websocket");
|
||||
setIsConnected(false);
|
||||
// Simple reconnect logic
|
||||
setTimeout(connect, 3000);
|
||||
};
|
||||
|
||||
ws.onerror = (err) => {
|
||||
console.error("WebSocket error:", err);
|
||||
ws.close();
|
||||
};
|
||||
}
|
||||
|
||||
connect();
|
||||
|
||||
return () => {
|
||||
if (socketRef.current) {
|
||||
// Prevent reconnect on unmount
|
||||
socketRef.current.onclose = null;
|
||||
socketRef.current.close();
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
return { isConnected, stats };
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
|
||||
import { Outlet } from "react-router-dom";
|
||||
import { AppSidebar } from "../components/AppSidebar";
|
||||
import { SidebarProvider, SidebarInset, SidebarTrigger } from "../components/ui/sidebar";
|
||||
import { Separator } from "../components/ui/separator";
|
||||
|
||||
export function DashboardLayout() {
|
||||
return (
|
||||
<SidebarProvider>
|
||||
<div className="fixed inset-0 -z-10 overflow-hidden pointer-events-none">
|
||||
<div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-primary/20 blur-[120px] rounded-full animate-pulse" />
|
||||
<div className="absolute bottom-[-10%] right-[-10%] w-[30%] h-[30%] bg-purple-500/10 blur-[100px] rounded-full" />
|
||||
</div>
|
||||
|
||||
<AppSidebar />
|
||||
<SidebarInset className="bg-transparent">
|
||||
<header className="flex h-16 shrink-0 items-center gap-2 px-6 backdrop-blur-md bg-background/30 border-b border-white/5 sticky top-0 z-10">
|
||||
<SidebarTrigger className="-ml-1 hover:bg-white/5 transition-colors" />
|
||||
<Separator orientation="vertical" className="mx-4 h-4 bg-white/10" />
|
||||
<div className="flex items-center gap-2">
|
||||
<h1 className="text-lg font-semibold tracking-tight text-glow">Dashboard</h1>
|
||||
</div>
|
||||
<div className="ml-auto flex items-center gap-4">
|
||||
<div className="h-2 w-2 rounded-full bg-emerald-500 shadow-[0_0_10px_rgba(16,185,129,0.5)]" />
|
||||
</div>
|
||||
</header>
|
||||
<main className="flex flex-1 flex-col gap-6 p-6">
|
||||
<div className="flex-1 rounded-2xl md:min-h-min">
|
||||
<Outlet />
|
||||
</div>
|
||||
</main>
|
||||
</SidebarInset>
|
||||
</SidebarProvider>
|
||||
);
|
||||
}
|
||||
@@ -1,113 +0,0 @@
|
||||
import { ActivityChart } from "@/components/ActivityChart";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useActivityStats } from "@/hooks/use-activity-stats";
|
||||
import { useDashboardStats } from "@/hooks/use-dashboard-stats";
|
||||
import { Activity as ActivityIcon, RefreshCw, Terminal } from "lucide-react";
|
||||
|
||||
export function Activity() {
|
||||
const { data: activityData, loading: activityLoading, refresh: refreshActivity } = useActivityStats();
|
||||
const { stats, loading: statsLoading } = useDashboardStats();
|
||||
|
||||
return (
|
||||
<div className="space-y-8 animate-in fade-in duration-700">
|
||||
<div className="flex flex-col gap-2">
|
||||
<h2 className="text-4xl font-extrabold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white via-white to-white/40">
|
||||
Activity Monitoring
|
||||
</h2>
|
||||
<p className="text-white/40 font-medium">Real-time system logs and performance metrics.</p>
|
||||
</div>
|
||||
|
||||
{/* Activity Chart Section */}
|
||||
<Card className="glass border-white/5 overflow-hidden">
|
||||
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
||||
<div>
|
||||
<CardTitle className="text-xl font-bold flex items-center gap-2">
|
||||
<div className="h-5 w-1 bg-emerald-500 rounded-full" />
|
||||
Command & Transaction Volume
|
||||
</CardTitle>
|
||||
<CardDescription className="text-white/40 font-medium tracking-tight">Hourly traffic analysis (Last 24 Hours)</CardDescription>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => refreshActivity()}
|
||||
className="text-white/40 hover:text-white hover:bg-white/5"
|
||||
disabled={activityLoading}
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 ${activityLoading ? 'animate-spin' : ''}`} />
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ActivityChart data={activityData} loading={activityLoading} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Detailed Activity Logs */}
|
||||
<Card className="glass border-white/5 overflow-hidden">
|
||||
<CardHeader className="border-b border-white/5 bg-white/[0.02]">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-primary/10 rounded-lg">
|
||||
<Terminal className="w-5 h-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-xl font-bold">System Logs</CardTitle>
|
||||
<CardDescription className="text-white/40">Recent operational events and alerts</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
{statsLoading && !stats ? (
|
||||
<div className="p-12 text-center">
|
||||
<RefreshCw className="w-8 h-8 text-white/20 animate-spin mx-auto mb-4" />
|
||||
<p className="text-white/40 font-medium">Connecting to event stream...</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="divide-y divide-white/5">
|
||||
{!stats?.recentEvents || stats.recentEvents.length === 0 ? (
|
||||
<div className="p-12 text-center">
|
||||
<ActivityIcon className="w-12 h-12 text-white/10 mx-auto mb-4" />
|
||||
<p className="text-white/30 font-medium">No recent activity recorded</p>
|
||||
</div>
|
||||
) : (
|
||||
stats.recentEvents.map((event, i) => (
|
||||
<div key={i} className="flex gap-4 p-6 hover:bg-white/[0.02] transition-colors group">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<div className={`p-2 rounded-lg ring-1 ring-inset ${event.type === 'success' ? 'bg-emerald-500/10 ring-emerald-500/20 text-emerald-500' :
|
||||
event.type === 'error' ? 'bg-red-500/10 ring-red-500/20 text-red-500' :
|
||||
event.type === 'warn' ? 'bg-yellow-500/10 ring-yellow-500/20 text-yellow-500' :
|
||||
'bg-blue-500/10 ring-blue-500/20 text-blue-500'
|
||||
} group-hover:scale-110 transition-transform duration-300`}>
|
||||
<div className="text-lg leading-none">{event.icon}</div>
|
||||
</div>
|
||||
<div className="h-full w-px bg-white/5 group-last:hidden" />
|
||||
</div>
|
||||
<div className="flex-1 space-y-1 pt-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="font-semibold text-white/90">{event.message}</p>
|
||||
<span className="text-xs font-mono font-medium text-white/30 bg-white/5 px-2 py-1 rounded">
|
||||
{new Date(event.timestamp).toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
{event.type === 'error' && (
|
||||
<p className="text-sm text-red-400/60 font-mono mt-2 pl-3 border-l-2 border-red-500/20">
|
||||
Error: Check system console for stack trace
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,278 +1,67 @@
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Activity, Server, Users, Zap, Package, Trophy, Coins } from "lucide-react";
|
||||
import { useDashboardStats } from "@/hooks/use-dashboard-stats";
|
||||
import { useActivityStats } from "@/hooks/use-activity-stats";
|
||||
import { ControlPanel } from "@/components/ControlPanel";
|
||||
import { ActivityChart } from "@/components/ActivityChart";
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useSocket } from "../hooks/use-socket";
|
||||
import { Badge } from "../components/ui/badge";
|
||||
|
||||
export function Dashboard() {
|
||||
const { stats, loading, error } = useDashboardStats();
|
||||
const { data: activityData, loading: activityLoading } = useActivityStats();
|
||||
|
||||
if (loading && !stats) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold tracking-tight">Dashboard</h2>
|
||||
<p className="text-muted-foreground">Loading dashboard data...</p>
|
||||
</div>
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
{[1, 2, 3, 4].map((i) => (
|
||||
<Card key={i}>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Loading...</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="h-8 w-20 bg-muted animate-pulse rounded" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold tracking-tight">Dashboard</h2>
|
||||
<p className="text-destructive">Error loading dashboard: {error}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!stats) {
|
||||
return null;
|
||||
}
|
||||
const { isConnected, stats } = useSocket();
|
||||
|
||||
return (
|
||||
<div className="space-y-8 animate-in fade-in duration-700">
|
||||
<div className="flex flex-col gap-2">
|
||||
<h2 className="text-4xl font-extrabold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white via-white to-white/40">
|
||||
{stats.bot.name} Overview
|
||||
</h2>
|
||||
<p className="text-white/40 font-medium">Monitoring real-time activity and core bot metrics.</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
|
||||
{/* Metric Cards */}
|
||||
{[
|
||||
{ title: "Active Users", value: stats.users.active.toLocaleString(), label: `${stats.users.total.toLocaleString()} total registered`, icon: Users, color: "from-purple-500 to-pink-500" },
|
||||
{ title: "Items in Circulation", value: stats.economy.totalItems.toLocaleString(), label: "Total items owned", icon: Package, color: "from-blue-500 to-cyan-500" },
|
||||
{ title: "Commands registered", value: stats.commands.total, label: "Total system capabilities", icon: Zap, color: "from-yellow-500 to-orange-500" },
|
||||
{ title: "Avg Latency", value: `${stats.ping.avg}ms`, label: "WebSocket heartbeat", icon: Activity, color: "from-emerald-500 to-teal-500" },
|
||||
].map((metric, i) => (
|
||||
<Card key={i} className="glass group hover:border-primary/50 transition-all duration-300 hover:scale-[1.02]">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-xs font-bold uppercase tracking-widest text-white/50">{metric.title}</CardTitle>
|
||||
<div className={`p-2 rounded-lg bg-gradient-to-br ${metric.color} bg-opacity-10 group-hover:scale-110 transition-transform duration-300`}>
|
||||
<metric.icon className="h-4 w-4 text-white" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-3xl font-bold tracking-tight mb-1">{metric.value}</div>
|
||||
<p className="text-xs font-medium text-white/30">{metric.label}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Activity Chart Section */}
|
||||
<Card className="glass border-white/5 overflow-hidden">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-xl font-bold flex items-center gap-2">
|
||||
<div className="h-5 w-1 bg-emerald-500 rounded-full" />
|
||||
Live Activity Analytics
|
||||
</CardTitle>
|
||||
<CardDescription className="text-white/40 font-medium tracking-tight">Hourly command and transaction volume across the network (last 24h)</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ActivityChart data={activityData} loading={activityLoading} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-7">
|
||||
<Card className="col-span-4 glass border-white/5 h-full">
|
||||
<CardHeader className="flex flex-row items-start justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-xl font-bold flex items-center gap-2">
|
||||
<div className="h-5 w-1 bg-primary rounded-full" />
|
||||
Economy Overview
|
||||
</CardTitle>
|
||||
<CardDescription className="text-white/40">Global wealth and progression statistics</CardDescription>
|
||||
</div>
|
||||
<div className="bg-white/5 px-3 py-1.5 rounded-full border border-white/10 flex items-center gap-2">
|
||||
<div className="h-1.5 w-1.5 rounded-full bg-emerald-500 animate-pulse" />
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest text-white/50">
|
||||
Uptime: {Math.floor(stats.uptime / 3600)}h {Math.floor((stats.uptime % 3600) / 60)}m
|
||||
</span>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid gap-8">
|
||||
<div className="relative group">
|
||||
<div className="absolute -inset-1 bg-gradient-to-r from-primary/20 to-purple-500/20 rounded-2xl blur opacity-0 group-hover:opacity-100 transition duration-1000"></div>
|
||||
<div className="relative bg-white/5 rounded-xl p-6 border border-white/10">
|
||||
<p className="text-sm font-bold uppercase tracking-wider text-white/30 mb-1">Total Distributed Wealth</p>
|
||||
<p className="text-4xl font-black text-glow bg-clip-text text-transparent bg-gradient-to-r from-primary to-purple-400">
|
||||
{BigInt(stats.economy.totalWealth).toLocaleString()} <span className="text-xl font-bold text-white/20">AU</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<div className="bg-white/5 rounded-xl p-4 border border-white/5">
|
||||
<p className="text-xs font-bold text-white/30 uppercase tracking-widest mb-1">Avg Level</p>
|
||||
<p className="text-2xl font-bold">{stats.economy.avgLevel}</p>
|
||||
</div>
|
||||
<div className="bg-white/5 rounded-xl p-4 border border-white/5">
|
||||
<p className="text-xs font-bold text-white/30 uppercase tracking-widest mb-1">Peak Streak</p>
|
||||
<p className="text-2xl font-bold">{stats.economy.topStreak} <span className="text-sm text-white/20">days</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="col-span-3 flex flex-col gap-6">
|
||||
{/* Administrative Control Panel */}
|
||||
<ControlPanel maintenanceMode={stats.maintenanceMode} />
|
||||
|
||||
{/* Active Lootdrop Alert */}
|
||||
{stats.activeLootdrops && stats.activeLootdrops.length > 0 && (
|
||||
<Card className="bg-gradient-to-br from-red-500/10 to-orange-500/10 border-red-500/20 overflow-hidden relative">
|
||||
<div className="absolute top-0 right-0 p-4 opacity-10">
|
||||
<Zap className="w-24 h-24 text-red-500" />
|
||||
</div>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-lg font-bold text-red-400 flex items-center gap-2">
|
||||
<span className="relative flex h-3 w-3">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
|
||||
<span className="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
|
||||
</span>
|
||||
ACTIVE LOOTDROP
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-col gap-1">
|
||||
<p className="text-2xl font-black text-white/90">
|
||||
{stats.activeLootdrops[0]?.rewardAmount} {stats.activeLootdrops[0]?.currency}
|
||||
</p>
|
||||
<p className="text-xs font-medium text-white/50">
|
||||
Expires <span className="text-red-300">{stats.activeLootdrops[0]?.expiresAt ? new Date(stats.activeLootdrops[0].expiresAt).toLocaleTimeString() : 'Never'}</span>
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="min-h-screen bg-aurora-page text-foreground font-outfit overflow-x-hidden">
|
||||
{/* Navigation */}
|
||||
<nav className="fixed top-0 w-full z-50 glass-card border-b border-border/50 py-4 px-8 flex justify-between items-center">
|
||||
<div className="flex items-center gap-3">
|
||||
{/* Bot Avatar */}
|
||||
{stats?.bot?.avatarUrl ? (
|
||||
<img
|
||||
src={stats.bot.avatarUrl}
|
||||
alt="Aurora Avatar"
|
||||
className="w-8 h-8 rounded-full border border-primary/20 shadow-sm object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-8 h-8 rounded-full bg-aurora sun-flare shadow-sm" />
|
||||
)}
|
||||
|
||||
{/* Recent Events Feed */}
|
||||
<Card className="glass border-white/5 overflow-hidden flex-1">
|
||||
<CardHeader className="bg-white/[0.02] border-b border-white/5">
|
||||
<CardTitle className="text-xl font-bold">Recent Events</CardTitle>
|
||||
<CardDescription className="text-white/30">Live system activity feed</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<div className="divide-y divide-white/5">
|
||||
{stats.recentEvents.length === 0 ? (
|
||||
<div className="p-8 text-center bg-transparent">
|
||||
<p className="text-sm text-white/20 font-medium">No activity recorded</p>
|
||||
</div>
|
||||
) : (
|
||||
stats.recentEvents.slice(0, 6).map((event, i) => (
|
||||
<div key={i} className="flex items-start gap-4 p-4 hover:bg-white/[0.03] transition-colors group">
|
||||
<div className={`mt-1 p-2 rounded-lg ${event.type === 'success' ? 'bg-emerald-500/10 text-emerald-500' :
|
||||
event.type === 'error' ? 'bg-red-500/10 text-red-500' :
|
||||
event.type === 'warn' ? 'bg-yellow-500/10 text-yellow-500' :
|
||||
'bg-blue-500/10 text-blue-500'
|
||||
} group-hover:scale-110 transition-transform`}>
|
||||
<div className="text-lg leading-none">{event.icon}</div>
|
||||
</div>
|
||||
<div className="space-y-1 flex-1">
|
||||
<p className="text-sm font-semibold text-white/90 leading-tight">
|
||||
{event.message}
|
||||
</p>
|
||||
<p className="text-[10px] font-bold text-white/20 uppercase tracking-wider">
|
||||
{new Date(event.timestamp).toLocaleTimeString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
{stats.recentEvents.length > 0 && (
|
||||
<button className="w-full py-3 text-[10px] font-bold uppercase tracking-[0.2em] text-white/20 hover:text-primary hover:bg-white/[0.02] transition-all border-t border-white/5">
|
||||
View Event Logs
|
||||
</button>
|
||||
<span className="text-xl font-bold tracking-tight text-primary">Aurora</span>
|
||||
|
||||
{/* Live Status Badge */}
|
||||
<div className={`flex items-center gap-1.5 px-2 py-0.5 rounded-full border transition-colors duration-500 ${isConnected
|
||||
? "bg-emerald-500/10 border-emerald-500/20 text-emerald-500"
|
||||
: "bg-red-500/10 border-red-500/20 text-red-500"
|
||||
}`}>
|
||||
<div className="relative flex h-2 w-2">
|
||||
{isConnected && (
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-500 opacity-75"></span>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
<span className={`relative inline-flex rounded-full h-2 w-2 ${isConnected ? "bg-emerald-500" : "bg-red-500"}`}></span>
|
||||
</div>
|
||||
<span className="text-[10px] font-bold tracking-wider uppercase">
|
||||
{isConnected ? "Live" : "Offline"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Leaderboards Section */}
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<Card className="glass border-white/5">
|
||||
<CardHeader className="flex flex-row items-center gap-4">
|
||||
<div className="p-2 bg-yellow-500/10 rounded-lg">
|
||||
<Trophy className="w-5 h-5 text-yellow-500" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-lg font-bold">Top Levels</CardTitle>
|
||||
<CardDescription className="text-white/40">Highest ranked users</CardDescription>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{stats.leaderboards?.topLevels.map((user, i) => (
|
||||
<div key={i} className="flex items-center justify-between p-3 rounded-lg bg-white/5 border border-white/5">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm ${i === 0 ? 'bg-yellow-500/20 text-yellow-500' : i === 1 ? 'bg-gray-400/20 text-gray-400' : i === 2 ? 'bg-orange-700/20 text-orange-700' : 'bg-white/5 text-white/40'}`}>
|
||||
{i + 1}
|
||||
</div>
|
||||
<span className="font-semibold">{user.username}</span>
|
||||
</div>
|
||||
<span className="font-mono text-sm text-white/60">Lvl {user.level}</span>
|
||||
</div>
|
||||
)) || <p className="text-white/20 text-sm">No data available</p>}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="flex items-center gap-6">
|
||||
<Link to="/" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
|
||||
Home
|
||||
</Link>
|
||||
<Link to="/design-system" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
|
||||
Design System
|
||||
</Link>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<Card className="glass border-white/5">
|
||||
<CardHeader className="flex flex-row items-center gap-4">
|
||||
<div className="p-2 bg-emerald-500/10 rounded-lg">
|
||||
<Coins className="w-5 h-5 text-emerald-500" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-lg font-bold">Richest Users</CardTitle>
|
||||
<CardDescription className="text-white/40">Highest net worth</CardDescription>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{stats.leaderboards?.topWealth.map((user, i) => (
|
||||
<div key={i} className="flex items-center justify-between p-3 rounded-lg bg-white/5 border border-white/5">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm ${i === 0 ? 'bg-yellow-500/20 text-yellow-500' : i === 1 ? 'bg-gray-400/20 text-gray-400' : i === 2 ? 'bg-orange-700/20 text-orange-700' : 'bg-white/5 text-white/40'}`}>
|
||||
{i + 1}
|
||||
</div>
|
||||
<span className="font-semibold">{user.username}</span>
|
||||
</div>
|
||||
<span className="font-mono text-sm text-white/60">{BigInt(user.balance).toLocaleString()} AU</span>
|
||||
</div>
|
||||
)) || <p className="text-white/20 text-sm">No data available</p>}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
{/* Content Placeholder */}
|
||||
<main className="pt-32 px-8 max-w-7xl mx-auto">
|
||||
<div className="glass-card p-6 rounded-lg border border-border/50">
|
||||
<h1 className="text-2xl font-bold text-primary mb-2">Dashboard Overview</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Real-time connection status: <span className={isConnected ? "text-emerald-500 font-medium" : "text-red-500 font-medium"}>
|
||||
{isConnected ? "Connected" : "Disconnected"}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
305
web/src/pages/DesignSystem.tsx
Normal file
305
web/src/pages/DesignSystem.tsx
Normal file
@@ -0,0 +1,305 @@
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Badge } from "../components/ui/badge";
|
||||
import { Card, CardHeader, CardTitle, CardContent } from "../components/ui/card";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { Switch } from "../components/ui/switch";
|
||||
import { FeatureCard } from "../components/feature-card";
|
||||
import { InfoCard } from "../components/info-card";
|
||||
import { SectionHeader } from "../components/section-header";
|
||||
import { TestimonialCard } from "../components/testimonial-card";
|
||||
|
||||
export function DesignSystem() {
|
||||
return (
|
||||
<div className="min-h-screen bg-aurora-page text-foreground font-outfit">
|
||||
{/* Navigation */}
|
||||
<nav className="fixed top-0 w-full z-50 glass-card border-b border-border/50 py-4 px-8 flex justify-between items-center">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-full bg-aurora sun-flare" />
|
||||
<span className="text-xl font-bold tracking-tight text-primary">Aurora</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-6">
|
||||
<Link to="/" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
|
||||
Home
|
||||
</Link>
|
||||
<Link to="/dashboard" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
|
||||
Dashboard
|
||||
</Link>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div className="pt-32 px-8 max-w-6xl mx-auto space-y-12 text-center md:text-left">
|
||||
{/* Header Section */}
|
||||
<header className="space-y-4 animate-in fade-in">
|
||||
<Badge variant="aurora" className="mb-2">v1.2.0-solar</Badge>
|
||||
<h1 className="text-6xl font-extrabold tracking-tight text-primary">
|
||||
Aurora Design System
|
||||
</h1>
|
||||
<p className="text-xl text-muted-foreground max-w-2xl mx-auto md:mx-0">
|
||||
Welcome to the Solaris Dark theme. A warm, celestial-inspired aesthetic designed for the Aurora astrology RPG.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{/* Color Palette */}
|
||||
<section className="space-y-6 animate-in slide-up delay-100">
|
||||
<h2 className="text-3xl font-bold flex items-center justify-center md:justify-start gap-2">
|
||||
<span className="w-8 h-8 rounded-full bg-primary inline-block" />
|
||||
Color Palette
|
||||
</h2>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
|
||||
<ColorSwatch label="Primary" color="bg-primary" text="text-primary-foreground" />
|
||||
<ColorSwatch label="Secondary" color="bg-secondary" text="text-secondary-foreground" />
|
||||
<ColorSwatch label="Background" color="bg-background" border />
|
||||
<ColorSwatch label="Card" color="bg-card" border />
|
||||
<ColorSwatch label="Accent" color="bg-accent" />
|
||||
<ColorSwatch label="Muted" color="bg-muted" />
|
||||
<ColorSwatch label="Destructive" color="bg-destructive" text="text-white" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Badges & Pills */}
|
||||
<section className="space-y-6 animate-in slide-up delay-200">
|
||||
<h2 className="text-3xl font-bold flex items-center justify-center md:justify-start gap-2">
|
||||
<span className="w-8 h-8 rounded-full bg-primary inline-block" />
|
||||
Badges & Tags
|
||||
</h2>
|
||||
<div className="flex flex-wrap gap-4 items-center justify-center md:justify-start">
|
||||
<Badge className="hover-scale cursor-default">Primary</Badge>
|
||||
<Badge variant="secondary" className="hover-scale cursor-default">Secondary</Badge>
|
||||
<Badge variant="aurora" className="hover-scale cursor-default">Solaris</Badge>
|
||||
<Badge variant="glass" className="hover-scale cursor-default">Celestial Glass</Badge>
|
||||
<Badge variant="outline" className="hover-scale cursor-default">Outline</Badge>
|
||||
<Badge variant="destructive" className="hover-scale cursor-default">Destructive</Badge>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Animations & Interactions */}
|
||||
<section className="space-y-6 animate-in slide-up delay-300">
|
||||
<h2 className="text-3xl font-bold flex items-center justify-center md:justify-start gap-2">
|
||||
<span className="w-8 h-8 rounded-full bg-primary inline-block" />
|
||||
Animations & Interactions
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="glass-card p-6 rounded-xl hover-lift cursor-pointer space-y-2">
|
||||
<h3 className="font-bold text-primary">Hover Lift</h3>
|
||||
<p className="text-sm text-muted-foreground">Smooth upward translation with enhanced depth.</p>
|
||||
</div>
|
||||
<div className="glass-card p-6 rounded-xl hover-glow cursor-pointer space-y-2">
|
||||
<h3 className="font-bold text-primary">Hover Glow</h3>
|
||||
<p className="text-sm text-muted-foreground">Subtle border and shadow illumination on hover.</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-center p-6">
|
||||
<Button className="bg-primary text-primary-foreground active-press font-bold px-8 py-6 rounded-xl shadow-lg">
|
||||
Press Interaction
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Gradients & Special Effects */}
|
||||
<section className="space-y-6 animate-in slide-up delay-400">
|
||||
<h2 className="text-3xl font-bold flex items-center justify-center md:justify-start gap-2">
|
||||
<span className="w-8 h-8 rounded-full bg-primary inline-block" />
|
||||
Gradients & Effects
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 text-center">
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-xl font-medium text-muted-foreground">The Solaris Gradient (Background)</h3>
|
||||
<div className="h-32 w-full rounded-xl bg-aurora-page sun-flare flex items-center justify-center border border-border hover-glow transition-all">
|
||||
<span className="text-primary font-bold text-2xl">Celestial Void</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-xl font-medium text-muted-foreground">Glassmorphism</h3>
|
||||
<div className="h-32 w-full rounded-xl glass-card flex items-center justify-center p-6 bg-[url('https://images.unsplash.com/photo-1534796636912-3b95b3ab5986?auto=format&fit=crop&q=80&w=2342')] bg-cover bg-center overflow-hidden">
|
||||
<div className="glass-card p-4 rounded-lg text-center w-full hover-lift transition-all backdrop-blur-md">
|
||||
<span className="font-bold">Frosted Celestial Glass</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Components Showcase */}
|
||||
<section className="space-y-6 animate-in slide-up delay-500">
|
||||
<h2 className="text-3xl font-bold flex items-center justify-center md:justify-start gap-2">
|
||||
<span className="w-8 h-8 rounded-full bg-primary inline-block" />
|
||||
Component Showcase
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Action Card with Tags */}
|
||||
<Card className="glass-card sun-flare overflow-hidden border-none text-left hover-lift transition-all">
|
||||
<div className="h-2 bg-primary w-full" />
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-primary">Celestial Action</CardTitle>
|
||||
<Badge variant="aurora" className="h-5">New</Badge>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex gap-2">
|
||||
<Badge variant="glass" className="text-[10px] uppercase">Quest</Badge>
|
||||
<Badge variant="glass" className="text-[10px] uppercase">Level 15</Badge>
|
||||
</div>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Experience the warmth of the sun in every interaction and claim your rewards.
|
||||
</p>
|
||||
<div className="flex gap-2 pt-2">
|
||||
<Button className="bg-primary text-primary-foreground active-press font-bold px-6">
|
||||
Ascend
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Profile/Entity Card with Tags */}
|
||||
<Card className="glass-card text-left hover-lift transition-all">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="w-12 h-12 rounded-full bg-aurora border-2 border-primary/20 hover-scale transition-transform cursor-pointer" />
|
||||
<Badge variant="secondary" className="bg-green-500/10 text-green-500 border-green-500/20">Online</Badge>
|
||||
</div>
|
||||
<CardTitle className="mt-4">Stellar Navigator</CardTitle>
|
||||
<p className="text-xs text-muted-foreground uppercase tracking-wider">Level 42 Mage</p>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Badge variant="outline" className="text-[10px] py-0 hover-scale cursor-default">Astronomy</Badge>
|
||||
<Badge variant="outline" className="text-[10px] py-0 hover-scale cursor-default">Pyromancy</Badge>
|
||||
<Badge variant="outline" className="text-[10px] py-0 hover-scale cursor-default">Leadership</Badge>
|
||||
</div>
|
||||
<div className="h-1.5 w-full bg-secondary/20 rounded-full overflow-hidden">
|
||||
<div className="h-full bg-aurora w-[75%] animate-in slide-up delay-500" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Interactive Card with Tags */}
|
||||
<Card className="glass-card text-left hover-glow transition-all">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Badge variant="glass" className="bg-primary/10 text-primary border-primary/20">Beta</Badge>
|
||||
</div>
|
||||
<CardTitle>System Settings</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-0.5">
|
||||
<div className="font-medium">Starry Background</div>
|
||||
<div className="text-sm text-muted-foreground">Enable animated SVG stars</div>
|
||||
</div>
|
||||
<Switch defaultChecked />
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-0.5">
|
||||
<div className="font-medium flex items-center gap-2">
|
||||
Solar Flare Glow
|
||||
<Badge className="bg-amber-500/10 text-amber-500 border-amber-500/20 text-[9px] h-4">Pro</Badge>
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">Add bloom to primary elements</div>
|
||||
</div>
|
||||
<Switch defaultChecked />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Refactored Application Components */}
|
||||
<section className="space-y-6 animate-in slide-up delay-600">
|
||||
<h2 className="text-3xl font-bold flex items-center justify-center md:justify-start gap-2">
|
||||
<span className="w-8 h-8 rounded-full bg-primary inline-block" />
|
||||
Application Components
|
||||
</h2>
|
||||
|
||||
<div className="space-y-12">
|
||||
{/* Section Header Demo */}
|
||||
<div className="border border-border/50 rounded-xl p-8 bg-background/50">
|
||||
<SectionHeader
|
||||
badge="Components"
|
||||
title="Section Headers"
|
||||
description="Standardized header component for defining page sections with badge, title, and description."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Feature Cards Demo */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<FeatureCard
|
||||
title="Feature Card"
|
||||
category="UI Element"
|
||||
description="A versatile card component for the bento grid layout."
|
||||
icon={<div className="w-20 h-20 bg-primary/20 rounded-full animate-pulse" />}
|
||||
/>
|
||||
<FeatureCard
|
||||
title="Interactive Feature"
|
||||
category="Interactive"
|
||||
description="Supports custom children nodes for complex content."
|
||||
>
|
||||
<div className="mt-2 p-3 bg-secondary/10 border border-secondary/20 rounded text-center text-secondary text-sm font-bold">
|
||||
Custom Child Content
|
||||
</div>
|
||||
</FeatureCard>
|
||||
</div>
|
||||
|
||||
{/* Info Cards Demo */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<InfoCard
|
||||
icon={<div className="w-6 h-6 rounded-full bg-primary animate-ping" />}
|
||||
title="Info Card"
|
||||
description="Compact card for highlighting features or perks with an icon."
|
||||
iconWrapperClassName="bg-primary/20 text-primary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Testimonial Cards Demo */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<TestimonialCard
|
||||
quote="The testimonial card is perfect for social proof sections."
|
||||
author="Jane Doe"
|
||||
role="Beta Tester"
|
||||
avatarGradient="bg-gradient-to-br from-pink-500 to-rose-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Typography */}
|
||||
<section className="space-y-8 pb-12">
|
||||
<h2 className="text-step-3 font-bold text-center">Fluid Typography</h2>
|
||||
<div className="space-y-6">
|
||||
<TypographyRow step="-2" className="text-step--2" label="Step -2 (Small Print)" />
|
||||
<TypographyRow step="-1" className="text-step--1" label="Step -1 (Small)" />
|
||||
<TypographyRow step="0" className="text-step-0" label="Step 0 (Base / Body)" />
|
||||
<TypographyRow step="1" className="text-step-1" label="Step 1 (H4 / Subhead)" />
|
||||
<TypographyRow step="2" className="text-step-2" label="Step 2 (H3 / Section)" />
|
||||
<TypographyRow step="3" className="text-step-3 text-primary" label="Step 3 (H2 / Header)" />
|
||||
<TypographyRow step="4" className="text-step-4 text-primary" label="Step 4 (H1 / Title)" />
|
||||
<TypographyRow step="5" className="text-step-5 text-primary font-black" label="Step 5 (Display)" />
|
||||
</div>
|
||||
<p className="text-step--1 text-muted-foreground text-center italic">
|
||||
Try resizing your browser window to see the text scale smoothly.
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TypographyRow({ step, className, label }: { step: string, className: string, label: string }) {
|
||||
return (
|
||||
<div className="flex flex-col md:flex-row md:items-baseline gap-4 border-b border-border/50 pb-4">
|
||||
<span className="text-step--2 font-mono text-muted-foreground w-20">Step {step}</span>
|
||||
<p className={`${className} font-medium truncate`}>{label}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ColorSwatch({ label, color, text = "text-foreground", border = false }: { label: string, color: string, text?: string, border?: boolean }) {
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<div className={`h-20 w-full rounded-lg ${color} ${border ? 'border border-border' : ''} flex items-end p-2 shadow-lg`}>
|
||||
<span className={`text-xs font-bold uppercase tracking-widest ${text}`}>{label}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DesignSystem;
|
||||
236
web/src/pages/Home.tsx
Normal file
236
web/src/pages/Home.tsx
Normal file
@@ -0,0 +1,236 @@
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Badge } from "../components/ui/badge";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { FeatureCard } from "../components/feature-card";
|
||||
import { InfoCard } from "../components/info-card";
|
||||
import { SectionHeader } from "../components/section-header";
|
||||
import { TestimonialCard } from "../components/testimonial-card";
|
||||
import {
|
||||
GraduationCap,
|
||||
Coins,
|
||||
Package,
|
||||
ShieldCheck,
|
||||
Zap,
|
||||
Trophy
|
||||
} from "lucide-react";
|
||||
|
||||
export function Home() {
|
||||
return (
|
||||
<div className="min-h-screen bg-aurora-page text-foreground font-outfit overflow-x-hidden">
|
||||
{/* Navigation (Simple) */}
|
||||
<nav className="fixed top-0 w-full z-50 glass-card border-b border-border/50 py-4 px-8 flex justify-between items-center">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-full bg-aurora sun-flare" />
|
||||
<span className="text-xl font-bold tracking-tight text-primary">Aurora</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-6">
|
||||
<Link to="/dashboard" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
|
||||
Dashboard
|
||||
</Link>
|
||||
<Link to="/design-system" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
|
||||
Design System
|
||||
</Link>
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
{/* Hero Section */}
|
||||
<header className="relative pt-32 pb-20 px-8 text-center max-w-5xl mx-auto space-y-10">
|
||||
<Badge variant="glass" className="mb-4 py-1.5 px-4 text-step--1 animate-in zoom-in spin-in-12 duration-700 delay-100">
|
||||
The Ultimate Academic Strategy RPG
|
||||
</Badge>
|
||||
|
||||
<h1 className="flex flex-col items-center justify-center text-step-5 font-black tracking-tighter leading-[0.9] text-primary drop-shadow-sm">
|
||||
<span className="animate-in slide-in-from-bottom-8 fade-in duration-700 delay-200 fill-mode-both">
|
||||
Rise to the Top
|
||||
</span>
|
||||
<span className="animate-in slide-in-from-bottom-8 fade-in duration-700 delay-300 fill-mode-both">
|
||||
of the Elite Academy
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-step--1 md:text-step-0 text-muted-foreground max-w-2xl mx-auto leading-relaxed animate-in slide-in-from-bottom-4 fade-in duration-700 delay-500 fill-mode-both">
|
||||
Aurora is a competitive academic RPG bot where students are assigned to Classes A through D, vying for supremacy in a high-stakes elite school setting.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-6 pt-6 animate-in zoom-in-50 fade-in duration-700 delay-700 fill-mode-both">
|
||||
<Button className="bg-primary text-primary-foreground active-press font-bold px-6">
|
||||
Join our Server
|
||||
</Button>
|
||||
<Button className="bg-secondary text-primary-foreground active-press font-bold px-6">
|
||||
Explore Documentation
|
||||
</Button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Features Section (Bento Grid) */}
|
||||
<section className="px-8 pb-32 max-w-7xl mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-6 lg:grid-cols-4 gap-6">
|
||||
|
||||
{/* Class System */}
|
||||
<FeatureCard
|
||||
className="md:col-span-3 lg:col-span-2 delay-400"
|
||||
title="Class Constellations"
|
||||
category="Immersion"
|
||||
description="You are assigned to one of the four constellations: Class A, B, C, or D. Work with your classmates to rise through the rankings and avoid expulsion."
|
||||
icon={<GraduationCap className="w-32 h-32 text-primary" />}
|
||||
>
|
||||
<div className="flex gap-2 pt-2">
|
||||
<Badge variant="secondary" className="bg-primary/10 text-primary border-primary/20">Constellation Units</Badge>
|
||||
<Badge variant="secondary" className="bg-primary/10 text-primary border-primary/20">Special Exams</Badge>
|
||||
</div>
|
||||
</FeatureCard>
|
||||
|
||||
{/* Economy */}
|
||||
<FeatureCard
|
||||
className="md:col-span-3 lg:col-span-1 delay-500"
|
||||
title="Astral Units"
|
||||
category="Commerce"
|
||||
description="Earn Astral Units through exams, tasks, and achievements. Use them to purchase privileges or influence test results."
|
||||
icon={<Coins className="w-20 h-20 text-secondary" />}
|
||||
/>
|
||||
|
||||
{/* Inventory */}
|
||||
<FeatureCard
|
||||
className="md:col-span-2 lg:col-span-1 delay-500"
|
||||
title="Inventory"
|
||||
category="Management"
|
||||
description="Manage vast collections of items, from common materials to legendary artifacts with unique rarities."
|
||||
icon={<Package className="w-20 h-20 text-primary" />}
|
||||
/>
|
||||
|
||||
{/* Exams */}
|
||||
<FeatureCard
|
||||
className="md:col-span-2 lg:col-span-1 delay-600"
|
||||
title="Special Exams"
|
||||
category="Academics"
|
||||
description="Participate in complex written and physical exams. Strategy and cooperation are key to survival."
|
||||
>
|
||||
<div className="space-y-2 pt-2">
|
||||
<div className="h-1.5 w-full bg-secondary/20 rounded-full overflow-hidden">
|
||||
<div className="h-full bg-aurora w-[65%]" />
|
||||
</div>
|
||||
<div className="flex justify-between text-[10px] text-muted-foreground font-bold uppercase tracking-wider">
|
||||
<span>Island Exam</span>
|
||||
<span>Active</span>
|
||||
</div>
|
||||
</div>
|
||||
</FeatureCard>
|
||||
|
||||
{/* Trading & Social */}
|
||||
<FeatureCard
|
||||
className="md:col-span-3 lg:col-span-2 delay-400"
|
||||
title="Class Constellations"
|
||||
category="Immersion"
|
||||
description="You are assigned to one of the four constellations: Class A, B, C, or D. Work with your classmates to rise through the rankings and avoid expulsion."
|
||||
icon={<GraduationCap className="w-32 h-32 text-primary" />}
|
||||
>
|
||||
<div className="flex gap-2 pt-2">
|
||||
<Badge variant="secondary" className="bg-primary/10 text-primary border-primary/20">Constellation Units</Badge>
|
||||
<Badge variant="secondary" className="bg-primary/10 text-primary border-primary/20">Special Exams</Badge>
|
||||
</div>
|
||||
</FeatureCard>
|
||||
|
||||
{/* Tech Stack */}
|
||||
<FeatureCard
|
||||
className="md:col-span-6 lg:col-span-1 delay-700 bg-primary/5"
|
||||
title="Modern Core"
|
||||
category="Technology"
|
||||
description="Built for speed and reliability using the most modern tech stack."
|
||||
>
|
||||
<div className="flex flex-wrap gap-2 text-[10px] font-bold">
|
||||
<span className="px-2 py-1 bg-black text-white rounded">BUN 1.0+</span>
|
||||
<span className="px-2 py-1 bg-[#5865F2] text-white rounded">DISCORD.JS</span>
|
||||
<span className="px-2 py-1 bg-[#C5F74F] text-black rounded">DRIZZLE</span>
|
||||
<span className="px-2 py-1 bg-[#336791] text-white rounded">POSTGRES</span>
|
||||
</div>
|
||||
</FeatureCard>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Unique Features Section */}
|
||||
<section className="px-8 py-20 bg-primary/5 border-y border-border/50">
|
||||
<div className="max-w-7xl mx-auto space-y-16">
|
||||
<SectionHeader
|
||||
badge="Why Aurora?"
|
||||
title="More Than Just A Game"
|
||||
description="Aurora isn't just about leveling up. It's a social experiment designed to test your strategic thinking, diplomacy, and resource management."
|
||||
/>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<InfoCard
|
||||
icon={<Trophy className="w-6 h-6" />}
|
||||
title="Merit-Based Society"
|
||||
description="Your class standing determines your privileges. Earn points to rise, or lose them and face the consequences of falling behind."
|
||||
iconWrapperClassName="bg-primary/20 text-primary"
|
||||
/>
|
||||
<InfoCard
|
||||
icon={<ShieldCheck className="w-6 h-6" />}
|
||||
title="Psychological Warfare"
|
||||
description="Form alliances, uncover spies, and execute strategies during Special Exams where trust is the most valuable currency."
|
||||
iconWrapperClassName="bg-secondary/20 text-secondary"
|
||||
/>
|
||||
<InfoCard
|
||||
icon={<Zap className="w-6 h-6" />}
|
||||
title="Dynamic World"
|
||||
description="The school rules change based on the actions of the student body. Your decisions shape the future of the academy."
|
||||
iconWrapperClassName="bg-primary/20 text-primary"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Testimonials Section */}
|
||||
<section className="px-8 py-32 max-w-7xl mx-auto">
|
||||
<SectionHeader
|
||||
badge="Student Voices"
|
||||
title="Overheard at the Academy"
|
||||
/>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
<TestimonialCard
|
||||
quote="I thought I could just grind my way to the top like other RPGs. I was wrong. The Class D exams forced me to actually talk to people and strategize."
|
||||
author="Alex K."
|
||||
role="Class D Representative"
|
||||
avatarGradient="bg-gradient-to-br from-blue-500 to-purple-500"
|
||||
/>
|
||||
<TestimonialCard
|
||||
className="mt-8 md:mt-0"
|
||||
quote="The economy systems are surprisingly deep. Manipulating the market during exam week is honestly the most fun I've had in a Discord server."
|
||||
author="Sarah M."
|
||||
role="Class B Treasurer"
|
||||
avatarGradient="bg-gradient-to-br from-emerald-500 to-teal-500"
|
||||
/>
|
||||
<TestimonialCard
|
||||
quote="Aurora creates an environment where 'elite' actually means something. Maintaining Class A status is stressful but incredibly rewarding."
|
||||
author="James R."
|
||||
role="Class A President"
|
||||
avatarGradient="bg-gradient-to-br from-rose-500 to-orange-500"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="py-20 px-8 border-t border-border/50 bg-background/50">
|
||||
<div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-8">
|
||||
<div className="flex flex-col items-center md:items-start gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-6 h-6 rounded-full bg-aurora" />
|
||||
<span className="text-lg font-bold text-primary">Aurora</span>
|
||||
</div>
|
||||
<p className="text-step--1 text-muted-foreground text-center md:text-left">
|
||||
© 2026 Aurora Project. Licensed under MIT.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-8 text-step--1 font-medium text-muted-foreground">
|
||||
<a href="#" className="hover:text-primary transition-colors">Documentation</a>
|
||||
<a href="#" className="hover:text-primary transition-colors">Support Server</a>
|
||||
<a href="#" className="hover:text-primary transition-colors">Privacy Policy</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Home;
|
||||
@@ -1,509 +0,0 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { Loader2, Save, RefreshCw, Smartphone, Coins, Trophy, Shield, Users, Terminal, MessageSquare } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
|
||||
// Types matching the backend response
|
||||
interface RoleOption { id: string; name: string; color: string; }
|
||||
interface ChannelOption { id: string; name: string; type: number; }
|
||||
|
||||
interface SettingsMeta {
|
||||
roles: RoleOption[];
|
||||
channels: ChannelOption[];
|
||||
commands: { name: string; category: string }[];
|
||||
}
|
||||
|
||||
import { type GameConfigType } from "@shared/lib/config";
|
||||
|
||||
// Recursive partial type for nested updates
|
||||
type DeepPartial<T> = {
|
||||
[P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
|
||||
};
|
||||
|
||||
export function Settings() {
|
||||
// We use a DeepPartial type for the local form state to allow for safe updates
|
||||
const [config, setConfig] = useState<DeepPartial<GameConfigType> | null>(null);
|
||||
const [meta, setMeta] = useState<SettingsMeta>({ roles: [], channels: [], commands: [] });
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [activeTab, setActiveTab] = useState("general");
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const fetchData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const [configRes, metaRes] = await Promise.all([
|
||||
fetch("/api/settings"),
|
||||
fetch("/api/settings/meta")
|
||||
]);
|
||||
|
||||
if (configRes.ok && metaRes.ok) {
|
||||
const configData = await configRes.json();
|
||||
const metaData = await metaRes.json();
|
||||
setConfig(configData);
|
||||
setMeta(metaData);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch settings:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
setSaving(true);
|
||||
const toastId = toast.loading("Saving configuration...");
|
||||
try {
|
||||
const response = await fetch("/api/settings", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(config)
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error("Failed to save");
|
||||
// Reload to satisfy any server-side transformations
|
||||
await fetchData();
|
||||
toast.success("Settings saved successfully", { id: toastId });
|
||||
} catch (error) {
|
||||
console.error("Failed to save settings:", error);
|
||||
toast.error("Failed to save settings", {
|
||||
id: toastId,
|
||||
description: "Please check your input and try again."
|
||||
});
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Helper to update nested state
|
||||
const updateConfig = (path: string, value: any) => {
|
||||
if (!path) return;
|
||||
setConfig((prev: any) => {
|
||||
const newConfig = { ...prev };
|
||||
const parts = path.split('.');
|
||||
let current = newConfig;
|
||||
|
||||
for (let i = 0; i < parts.length - 1; i++) {
|
||||
const part = parts[i];
|
||||
if (part === undefined) return prev;
|
||||
// Clone nested objects to ensure immutability
|
||||
if (!current[part]) current[part] = {};
|
||||
current[part] = { ...current[part] };
|
||||
current = current[part];
|
||||
}
|
||||
|
||||
const lastPart = parts[parts.length - 1];
|
||||
if (lastPart !== undefined) {
|
||||
current[lastPart] = value;
|
||||
}
|
||||
|
||||
return newConfig;
|
||||
});
|
||||
};
|
||||
|
||||
if (loading || !config) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-[50vh]">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const tabs = [
|
||||
{ id: "general", label: "General", icon: Smartphone },
|
||||
{ id: "economy", label: "Economy", icon: Coins },
|
||||
{ id: "leveling", label: "Leveling", icon: Trophy },
|
||||
{ id: "moderation", label: "Moderation", icon: Shield },
|
||||
{ id: "roles", label: "Roles", icon: Users },
|
||||
{ id: "system", label: "System", icon: Terminal },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold tracking-tight text-white drop-shadow-md">Settings</h2>
|
||||
<p className="text-white/60">Manage global bot configuration</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" onClick={fetchData} className="glass border-white/10 hover:bg-white/10">
|
||||
<RefreshCw className="h-4 w-4 mr-2" />
|
||||
Reset
|
||||
</Button>
|
||||
<Button onClick={handleSave} disabled={saving} className="bg-primary hover:bg-primary/80 text-primary-foreground shadow-[0_0_15px_rgba(var(--primary),0.3)]">
|
||||
{saving ? <Loader2 className="h-4 w-4 mr-2 animate-spin" /> : <Save className="h-4 w-4 mr-2" />}
|
||||
Save Changes
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tabs Navigation */}
|
||||
<div className="flex items-center gap-2 overflow-x-auto pb-2">
|
||||
{tabs.map((tab) => (
|
||||
<button
|
||||
key={tab.id}
|
||||
onClick={() => setActiveTab(tab.id)}
|
||||
className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-all border ${activeTab === tab.id
|
||||
? "bg-primary/20 border-primary/50 text-white shadow-[0_0_10px_rgba(var(--primary),0.2)]"
|
||||
: "bg-white/5 border-white/5 text-white/50 hover:bg-white/10 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
<tab.icon className="h-4 w-4" />
|
||||
<span className="font-medium">{tab.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Card className="glass border-white/10">
|
||||
<CardContent className="p-6">
|
||||
{activeTab === "general" && (
|
||||
<div className="space-y-6">
|
||||
<SectionTitle icon={MessageSquare} title="Channels" description="Default channels for bot interactions" />
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<SelectField
|
||||
label="Welcome Channel"
|
||||
value={config?.welcomeChannelId}
|
||||
options={meta.channels}
|
||||
onChange={(v) => updateConfig("welcomeChannelId", v)}
|
||||
/>
|
||||
<SelectField
|
||||
label="Feedback Channel"
|
||||
value={config?.feedbackChannelId}
|
||||
options={meta.channels}
|
||||
onChange={(v) => updateConfig("feedbackChannelId", v)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<SectionTitle icon={Terminal} title="Terminal" description="Dedicated channel for CLI-like interactions" />
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<SelectField
|
||||
label="Terminal Channel"
|
||||
value={config?.terminal?.channelId}
|
||||
options={meta.channels}
|
||||
onChange={(v) => updateConfig("terminal.channelId", v)}
|
||||
/>
|
||||
<InputField
|
||||
label="Terminal Message ID"
|
||||
value={config?.terminal?.messageId}
|
||||
onChange={(v) => updateConfig("terminal.messageId", v)}
|
||||
placeholder="ID of the pinned message"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === "economy" && (
|
||||
<div className="space-y-6">
|
||||
<SectionTitle icon={Coins} title="Daily Rewards" description="Configure daily currency claims" />
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<InputField
|
||||
label="Base Amount"
|
||||
type="number"
|
||||
value={config?.economy?.daily?.amount}
|
||||
onChange={(v) => updateConfig("economy.daily.amount", v)}
|
||||
/>
|
||||
<InputField
|
||||
label="Streak Bonus"
|
||||
type="number"
|
||||
value={config?.economy?.daily?.streakBonus}
|
||||
onChange={(v) => updateConfig("economy.daily.streakBonus", v)}
|
||||
/>
|
||||
<InputField
|
||||
label="Weekly Bonus"
|
||||
type="number"
|
||||
value={config?.economy?.daily?.weeklyBonus}
|
||||
onChange={(v) => updateConfig("economy.daily.weeklyBonus", v)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<SectionTitle icon={RefreshCw} title="Transfers" description="Rules for player-to-player transfers" />
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<InputField
|
||||
label="Minimum Amount"
|
||||
type="number"
|
||||
value={config?.economy?.transfers?.minAmount}
|
||||
onChange={(v) => updateConfig("economy.transfers.minAmount", v)}
|
||||
/>
|
||||
<div className="flex items-center justify-between p-4 rounded-lg bg-white/5 border border-white/5">
|
||||
<span className="text-sm font-medium">Allow Self Transfer</span>
|
||||
<Switch
|
||||
checked={config?.economy?.transfers?.allowSelfTransfer ?? false}
|
||||
onCheckedChange={(checked) => updateConfig("economy.transfers.allowSelfTransfer", checked)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SectionTitle icon={Trophy} title="Lootdrops" description="Random event configuration" />
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<InputField
|
||||
label="Spawn Chance"
|
||||
type="number"
|
||||
value={config?.lootdrop?.spawnChance}
|
||||
onChange={(v) => updateConfig("lootdrop.spawnChance", Number(v))}
|
||||
/>
|
||||
<InputField
|
||||
label="Cooldown (ms)"
|
||||
type="number"
|
||||
value={config?.lootdrop?.cooldownMs}
|
||||
onChange={(v) => updateConfig("lootdrop.cooldownMs", Number(v))}
|
||||
/>
|
||||
<InputField
|
||||
label="Min Messages"
|
||||
type="number"
|
||||
value={config?.lootdrop?.minMessages}
|
||||
onChange={(v) => updateConfig("lootdrop.minMessages", Number(v))}
|
||||
/>
|
||||
<InputField
|
||||
label="Reward Min"
|
||||
type="number"
|
||||
value={config?.lootdrop?.reward?.min}
|
||||
onChange={(v) => updateConfig("lootdrop.reward.min", Number(v))}
|
||||
/>
|
||||
<InputField
|
||||
label="Reward Max"
|
||||
type="number"
|
||||
value={config?.lootdrop?.reward?.max}
|
||||
onChange={(v) => updateConfig("lootdrop.reward.max", Number(v))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === "leveling" && (
|
||||
<div className="space-y-6">
|
||||
<SectionTitle icon={Trophy} title="XP Formula" description="Calculate level requirements" />
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<InputField
|
||||
label="Base XP"
|
||||
type="number"
|
||||
value={config?.leveling?.base}
|
||||
onChange={(v) => updateConfig("leveling.base", Number(v))}
|
||||
/>
|
||||
<InputField
|
||||
label="Exponent"
|
||||
type="number"
|
||||
value={config?.leveling?.exponent}
|
||||
onChange={(v) => updateConfig("leveling.exponent", Number(v))}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<SectionTitle icon={MessageSquare} title="Chat XP" description="XP gained from text messages" />
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<InputField
|
||||
label="Min XP"
|
||||
type="number"
|
||||
value={config?.leveling?.chat?.minXp}
|
||||
onChange={(v) => updateConfig("leveling.chat.minXp", Number(v))}
|
||||
/>
|
||||
<InputField
|
||||
label="Max XP"
|
||||
type="number"
|
||||
value={config?.leveling?.chat?.maxXp}
|
||||
onChange={(v) => updateConfig("leveling.chat.maxXp", Number(v))}
|
||||
/>
|
||||
<InputField
|
||||
label="Cooldown (ms)"
|
||||
type="number"
|
||||
value={config?.leveling?.chat?.cooldownMs}
|
||||
onChange={(v) => updateConfig("leveling.chat.cooldownMs", Number(v))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === "roles" && (
|
||||
<div className="space-y-6">
|
||||
<SectionTitle icon={Users} title="System Roles" description="Map discord roles to bot functions" />
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<SelectField
|
||||
label="Student Role"
|
||||
value={config?.studentRole}
|
||||
options={meta.roles}
|
||||
onChange={(v) => updateConfig("studentRole", v)}
|
||||
/>
|
||||
<SelectField
|
||||
label="Visitor Role"
|
||||
value={config?.visitorRole}
|
||||
options={meta.roles}
|
||||
onChange={(v) => updateConfig("visitorRole", v)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<SectionTitle icon={Terminal} title="Color Roles" description="Roles that players can buy/equip for username colors" />
|
||||
{/* Multi-select for color roles is complex, simpler impl for now */}
|
||||
<div className="p-4 rounded-lg bg-white/5 border border-white/5 space-y-2">
|
||||
<p className="text-sm text-white/60 mb-2">Available Color Roles</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{(config?.colorRoles || []).map((roleId: string | undefined) => {
|
||||
if (!roleId) return null;
|
||||
const role = meta.roles.find(r => r.id === roleId);
|
||||
return (
|
||||
<span key={roleId} className="px-2 py-1 rounded bg-white/10 text-xs flex items-center gap-1">
|
||||
<span className="w-2 h-2 rounded-full" style={{ backgroundColor: role?.color || '#999' }} />
|
||||
{role?.name || roleId}
|
||||
<button
|
||||
onClick={() => updateConfig("colorRoles", (config?.colorRoles || []).filter((id: string | undefined) => id !== roleId))}
|
||||
className="hover:text-red-400 ml-1"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<Select
|
||||
value=""
|
||||
onValueChange={(value) => {
|
||||
if (value && !(config?.colorRoles || []).includes(value)) {
|
||||
updateConfig("colorRoles", [...(config?.colorRoles || []), value]);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="w-full bg-black/20 border-white/10 text-white/50 h-9">
|
||||
<SelectValue placeholder="+ Add Color Role" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{meta.roles.map((r) => (
|
||||
<SelectItem key={r.id} value={r.id}>
|
||||
<span className="flex items-center gap-2">
|
||||
<span className="w-2 h-2 rounded-full" style={{ backgroundColor: r.color || '#999' }} />
|
||||
{r.name}
|
||||
</span>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{activeTab === "moderation" && (
|
||||
<div className="space-y-6">
|
||||
<SectionTitle icon={Shield} title="Pruning" description="Batch message deletion config" />
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<InputField
|
||||
label="Max Prune Amount"
|
||||
type="number"
|
||||
value={config?.moderation?.prune?.maxAmount}
|
||||
onChange={(v) => updateConfig("moderation.prune.maxAmount", Number(v))}
|
||||
/>
|
||||
<InputField
|
||||
label="Confirmation Threshold"
|
||||
type="number"
|
||||
value={config?.moderation?.prune?.confirmThreshold}
|
||||
onChange={(v) => updateConfig("moderation.prune.confirmThreshold", Number(v))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === "system" && (
|
||||
<div className="space-y-6">
|
||||
<SectionTitle icon={Terminal} title="Commands" description="Enable or disable specific bot commands" />
|
||||
|
||||
{meta.commands.length === 0 ? (
|
||||
<div className="text-center py-8 text-white/30">
|
||||
No commands found in metadata.
|
||||
</div>
|
||||
) : (
|
||||
Object.entries(
|
||||
meta.commands.reduce((acc, cmd) => {
|
||||
const cat = cmd.category || 'Uncategorized';
|
||||
if (!acc[cat]) acc[cat] = [];
|
||||
acc[cat].push(cmd);
|
||||
return acc;
|
||||
}, {} as Record<string, typeof meta.commands>)
|
||||
).sort(([a], [b]) => a.localeCompare(b)).map(([category, commands]) => (
|
||||
<div key={category} className="mb-6 last:mb-0">
|
||||
<h4 className="text-sm font-semibold text-white/40 uppercase tracking-wider mb-3 px-1">{category}</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{commands.map(cmd => (
|
||||
<div key={cmd.name} className="flex items-center justify-between p-3 rounded-lg bg-white/5 border border-white/5 hover:border-white/10 transition-colors">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-sm font-medium text-white">/{cmd.name}</span>
|
||||
<span className={`text-[10px] ${config?.commands?.[cmd.name] === false ? "text-red-400" : "text-green-400"}`}>
|
||||
{config?.commands?.[cmd.name] === false ? "Disabled" : "Enabled"}
|
||||
</span>
|
||||
</div>
|
||||
<Switch
|
||||
checked={config?.commands?.[cmd.name] !== false}
|
||||
onCheckedChange={(checked) => updateConfig(`commands.${cmd.name}`, checked)}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Sub-components for cleaner code
|
||||
|
||||
function SectionTitle({ icon: Icon, title, description }: { icon: any, title: string, description: string }) {
|
||||
return (
|
||||
<div className="flex items-start gap-3 border-b border-white/5 pb-2 mb-4">
|
||||
<div className="p-2 rounded-lg bg-primary/10 text-primary">
|
||||
<Icon className="h-5 w-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-white leading-none">{title}</h3>
|
||||
<p className="text-sm text-white/40 mt-1">{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function InputField({ label, value, onChange, type = "text", placeholder }: { label: string, value: any, onChange: (val: string) => void, type?: string, placeholder?: string }) {
|
||||
return (
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-medium text-white/60 ml-1">{label}</label>
|
||||
<Input
|
||||
type={type}
|
||||
value={value ?? ""}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
placeholder={placeholder}
|
||||
className="bg-black/20 border-white/10 text-white focus:border-primary/50"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SelectField({ label, value, options, onChange }: { label: string, value: string | undefined, options: any[], onChange: (val: string) => void }) {
|
||||
return (
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-medium text-white/60 ml-1">{label}</label>
|
||||
<Select value={value || ""} onValueChange={onChange}>
|
||||
<SelectTrigger className="w-full bg-black/20 border-white/10 text-white">
|
||||
<SelectValue placeholder="Select..." />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{options.map((opt) => (
|
||||
<SelectItem key={opt.id} value={opt.id}>
|
||||
{opt.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -39,68 +39,178 @@
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
|
||||
--text-step--2: var(--step--2);
|
||||
--text-step--1: var(--step--1);
|
||||
--text-step-0: var(--step-0);
|
||||
--text-step-1: var(--step-1);
|
||||
--text-step-2: var(--step-2);
|
||||
--text-step-3: var(--step-3);
|
||||
--text-step-4: var(--step-4);
|
||||
--text-step-5: var(--step-5);
|
||||
}
|
||||
|
||||
:root {
|
||||
--radius: 1rem;
|
||||
--background: oklch(0.12 0.02 260);
|
||||
--foreground: oklch(0.98 0.01 260);
|
||||
--card: oklch(0.16 0.03 260 / 0.5);
|
||||
--card-foreground: oklch(0.98 0.01 260);
|
||||
--popover: oklch(0.14 0.02 260 / 0.8);
|
||||
--popover-foreground: oklch(0.98 0.01 260);
|
||||
--primary: oklch(0.65 0.18 250);
|
||||
--primary-foreground: oklch(1 0 0);
|
||||
--secondary: oklch(0.25 0.04 260);
|
||||
--secondary-foreground: oklch(0.98 0.01 260);
|
||||
--muted: oklch(0.2 0.03 260 / 0.6);
|
||||
--muted-foreground: oklch(0.7 0.02 260);
|
||||
--accent: oklch(0.3 0.05 250 / 0.4);
|
||||
--accent-foreground: oklch(0.98 0.01 260);
|
||||
--destructive: oklch(0.6 0.18 25);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 5%);
|
||||
--ring: oklch(0.65 0.18 250 / 50%);
|
||||
--chart-1: oklch(0.6 0.18 250);
|
||||
--chart-2: oklch(0.7 0.15 160);
|
||||
--chart-3: oklch(0.8 0.12 80);
|
||||
--chart-4: oklch(0.6 0.2 300);
|
||||
--chart-5: oklch(0.6 0.25 20);
|
||||
--sidebar: oklch(0.14 0.02 260 / 0.6);
|
||||
--sidebar-foreground: oklch(0.98 0.01 260);
|
||||
--sidebar-primary: oklch(0.65 0.18 250);
|
||||
--sidebar-primary-foreground: oklch(1 0 0);
|
||||
--sidebar-accent: oklch(1 0 0 / 5%);
|
||||
--sidebar-accent-foreground: oklch(0.98 0.01 260);
|
||||
--sidebar-border: oklch(1 0 0 / 8%);
|
||||
--sidebar-ring: oklch(0.65 0.18 250 / 50%);
|
||||
}
|
||||
--step--2: clamp(0.5002rem, 0.449rem + 0.2273vw, 0.6252rem);
|
||||
--step--1: clamp(0.7072rem, 0.6349rem + 0.3215vw, 0.884rem);
|
||||
--step-0: clamp(1rem, 0.8977rem + 0.4545vw, 1.25rem);
|
||||
--step-1: clamp(1.414rem, 1.2694rem + 0.6427vw, 1.7675rem);
|
||||
--step-2: clamp(1.9994rem, 1.7949rem + 0.9088vw, 2.4992rem);
|
||||
--step-3: clamp(2.8271rem, 2.538rem + 1.2851vw, 3.5339rem);
|
||||
--step-4: clamp(3.9976rem, 3.5887rem + 1.8171vw, 4.997rem);
|
||||
--step-5: clamp(5.6526rem, 5.0745rem + 2.5694vw, 7.0657rem);
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground selection:bg-primary/30;
|
||||
font-family: 'Outfit', 'Inter', system-ui, sans-serif;
|
||||
background-image:
|
||||
radial-gradient(at 0% 0%, oklch(0.25 0.1 260 / 0.15) 0px, transparent 50%),
|
||||
radial-gradient(at 100% 0%, oklch(0.35 0.12 300 / 0.1) 0px, transparent 50%);
|
||||
background-attachment: fixed;
|
||||
}
|
||||
--radius: 0.5rem;
|
||||
--background: oklch(0.12 0.015 40);
|
||||
--foreground: oklch(0.98 0.01 60);
|
||||
--card: oklch(0.16 0.03 40 / 0.6);
|
||||
--card-foreground: oklch(0.98 0.01 60);
|
||||
--popover: oklch(0.14 0.02 40 / 0.85);
|
||||
--popover-foreground: oklch(0.98 0.01 60);
|
||||
--primary: oklch(0.82 0.18 85);
|
||||
--primary-foreground: oklch(0.12 0.015 40);
|
||||
--secondary: oklch(0.65 0.2 55);
|
||||
--secondary-foreground: oklch(0.98 0.01 60);
|
||||
--muted: oklch(0.22 0.02 40 / 0.6);
|
||||
--muted-foreground: oklch(0.7 0.08 40);
|
||||
--accent: oklch(0.75 0.15 70 / 0.15);
|
||||
--accent-foreground: oklch(0.98 0.01 60);
|
||||
--destructive: oklch(0.55 0.18 25);
|
||||
--border: oklch(1 0 0 / 12%);
|
||||
--input: oklch(1 0 0 / 8%);
|
||||
--ring: oklch(0.82 0.18 85 / 40%);
|
||||
--chart-1: oklch(0.82 0.18 85);
|
||||
--chart-2: oklch(0.65 0.2 55);
|
||||
--chart-3: oklch(0.75 0.15 70);
|
||||
--chart-4: oklch(0.55 0.18 25);
|
||||
--chart-5: oklch(0.9 0.1 95);
|
||||
--sidebar: oklch(0.14 0.02 40 / 0.7);
|
||||
--sidebar-foreground: oklch(0.98 0.01 60);
|
||||
--sidebar-primary: oklch(0.82 0.18 85);
|
||||
--sidebar-primary-foreground: oklch(0.12 0.015 40);
|
||||
--sidebar-accent: oklch(1 0 0 / 8%);
|
||||
--sidebar-accent-foreground: oklch(0.98 0.01 60);
|
||||
--sidebar-border: oklch(1 0 0 / 12%);
|
||||
--sidebar-ring: oklch(0.82 0.18 85 / 40%);
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.glass {
|
||||
@apply bg-card backdrop-blur-xl border border-white/10 shadow-2xl;
|
||||
.bg-aurora-page {
|
||||
background: radial-gradient(circle at 50% -20%, oklch(0.25 0.1 50) 0%, var(--background) 70%);
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.glass-sidebar {
|
||||
@apply bg-sidebar backdrop-blur-2xl border-r border-white/5;
|
||||
.bg-aurora {
|
||||
background-image: linear-gradient(135deg, oklch(0.82 0.18 85) 0%, oklch(0.65 0.2 55) 100%);
|
||||
}
|
||||
|
||||
.text-glow {
|
||||
text-shadow: 0 0 10px oklch(var(--primary) / 0.5);
|
||||
.glass-card {
|
||||
background: var(--card);
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.sun-flare {
|
||||
box-shadow: 0 0 40px oklch(0.82 0.18 85 / 0.12);
|
||||
}
|
||||
|
||||
/* Entrance Animations */
|
||||
.animate-in {
|
||||
animation-duration: 0.6s;
|
||||
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
animation-name: fade-in;
|
||||
}
|
||||
|
||||
.slide-up {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
animation-name: slide-up;
|
||||
}
|
||||
|
||||
.zoom-in {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
animation-name: zoom-in;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-up {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoom-in {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Interaction Utilities */
|
||||
.hover-lift {
|
||||
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.hover-lift:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 10px 25px -5px oklch(0 0 0 / 0.3), 0 0 20px oklch(0.82 0.18 85 / 0.1);
|
||||
}
|
||||
|
||||
.hover-glow {
|
||||
transition: box-shadow 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.hover-glow:hover {
|
||||
border-color: oklch(0.82 0.18 85 / 0.4);
|
||||
box-shadow: 0 0 20px oklch(0.82 0.18 85 / 0.15);
|
||||
}
|
||||
|
||||
.hover-scale {
|
||||
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.hover-scale:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.active-press {
|
||||
transition: transform 0.1s ease;
|
||||
}
|
||||
|
||||
.active-press:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
/* Staggered Delay Utilities */
|
||||
.delay-100 {
|
||||
animation-delay: 100ms;
|
||||
}
|
||||
|
||||
.delay-200 {
|
||||
animation-delay: 200ms;
|
||||
}
|
||||
|
||||
.delay-300 {
|
||||
animation-delay: 300ms;
|
||||
}
|
||||
|
||||
.delay-400 {
|
||||
animation-delay: 400ms;
|
||||
}
|
||||
|
||||
.delay-500 {
|
||||
animation-delay: 500ms;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user