feat: Implement new settings pages and refactor application layout and navigation with new components and hooks.
This commit is contained in:
syntaxbullet
@@ -1,58 +1,20 @@
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { QuestForm } from "../components/quest-form";
|
||||
import { Badge } from "../components/ui/badge";
|
||||
import { SectionHeader } from "../components/section-header";
|
||||
import { SettingsDrawer } from "../components/settings-drawer";
|
||||
import { ChevronLeft } from "lucide-react";
|
||||
|
||||
export function AdminQuests() {
|
||||
return (
|
||||
<div className="min-h-screen bg-aurora-page text-foreground font-outfit overflow-x-hidden">
|
||||
{/* Navigation */}
|
||||
<nav className="sticky top-0 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">
|
||||
<div className="w-8 h-8 rounded-full bg-aurora sun-flare shadow-sm" />
|
||||
<span className="text-xl font-bold tracking-tight text-primary">Aurora Admin</span>
|
||||
</div>
|
||||
<main className="pt-8 px-8 pb-12 max-w-7xl mx-auto space-y-12">
|
||||
<SectionHeader
|
||||
badge="Quest Management"
|
||||
title="Quests"
|
||||
description="Create and manage quests for the Aurora RPG students."
|
||||
/>
|
||||
|
||||
<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>
|
||||
<Link to="/design-system" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
|
||||
Design System
|
||||
</Link>
|
||||
<div className="h-4 w-px bg-border/50" />
|
||||
<SettingsDrawer />
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main className="pt-12 px-8 pb-12 max-w-7xl mx-auto space-y-12">
|
||||
<div className="space-y-4">
|
||||
<Link
|
||||
to="/dashboard"
|
||||
className="flex items-center gap-2 text-muted-foreground hover:text-primary transition-colors w-fit"
|
||||
>
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
<span className="text-sm font-medium">Back to Dashboard</span>
|
||||
</Link>
|
||||
|
||||
<SectionHeader
|
||||
badge="Quest Management"
|
||||
title="Administrative Tools"
|
||||
description="Create and manage quests for the Aurora RPG students."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="animate-in fade-in slide-up duration-700">
|
||||
<QuestForm />
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<div className="animate-in fade-in slide-up duration-700">
|
||||
<QuestForm />
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,204 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useSocket } from "../hooks/use-socket";
|
||||
import { Badge } from "../components/ui/badge";
|
||||
import { StatCard } from "../components/stat-card";
|
||||
import { RecentActivity } from "../components/recent-activity";
|
||||
import { ActivityChart } from "../components/activity-chart";
|
||||
import { LootdropCard } from "../components/lootdrop-card";
|
||||
import { LeaderboardCard } from "../components/leaderboard-card";
|
||||
import { CommandsDrawer } from "../components/commands-drawer";
|
||||
import { Server, Users, Terminal, Activity, Coins, TrendingUp, Flame, Package } from "lucide-react";
|
||||
import { cn } from "../lib/utils";
|
||||
import { SettingsDrawer } from "../components/settings-drawer";
|
||||
|
||||
export function Dashboard() {
|
||||
const { isConnected, stats } = useSocket();
|
||||
const [commandsDrawerOpen, setCommandsDrawerOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-aurora-page text-foreground font-outfit overflow-x-hidden">
|
||||
{/* Navigation */}
|
||||
<nav className="sticky top-0 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" />
|
||||
)}
|
||||
|
||||
<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>
|
||||
)}
|
||||
<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 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>
|
||||
<Link to="/admin/quests" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
|
||||
Admin
|
||||
</Link>
|
||||
<div className="h-4 w-px bg-border/50" />
|
||||
<SettingsDrawer />
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Dashboard Content */}
|
||||
<main className="pt-8 px-8 pb-8 max-w-7xl mx-auto space-y-8">
|
||||
|
||||
{/* Stats Grid */}
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4 animate-in fade-in slide-up">
|
||||
<StatCard
|
||||
title="Total Servers"
|
||||
icon={Server}
|
||||
isLoading={!stats}
|
||||
value={stats?.guilds.count.toLocaleString()}
|
||||
subtitle={stats?.guilds.changeFromLastMonth
|
||||
? `${stats.guilds.changeFromLastMonth > 0 ? '+' : ''}${stats.guilds.changeFromLastMonth} from last month`
|
||||
: "Active Guilds"
|
||||
}
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
title="Total Users"
|
||||
icon={Users}
|
||||
isLoading={!stats}
|
||||
value={stats?.users.total.toLocaleString()}
|
||||
subtitle={stats ? `${stats.users.active.toLocaleString()} active now` : undefined}
|
||||
className="delay-100"
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
title="Commands"
|
||||
icon={Terminal}
|
||||
isLoading={!stats}
|
||||
value={stats?.commands.total.toLocaleString()}
|
||||
subtitle={stats ? `${stats.commands.active} active · ${stats.commands.disabled} disabled` : undefined}
|
||||
className="delay-200"
|
||||
onClick={() => setCommandsDrawerOpen(true)}
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
title="System Ping"
|
||||
icon={Activity}
|
||||
isLoading={!stats}
|
||||
value={stats ? `${Math.round(stats.ping.avg)}ms` : undefined}
|
||||
subtitle="Average latency"
|
||||
className="delay-300"
|
||||
valueClassName={stats ? cn(
|
||||
"transition-colors duration-300",
|
||||
stats.ping.avg < 100 ? "text-emerald-500" :
|
||||
stats.ping.avg < 200 ? "text-yellow-500" : "text-red-500"
|
||||
) : undefined}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Activity Chart */}
|
||||
<div className="animate-in fade-in slide-up delay-400">
|
||||
<ActivityChart />
|
||||
</div>
|
||||
|
||||
<div className="grid gap-8 lg:grid-cols-3 animate-in fade-in slide-up delay-500">
|
||||
{/* Economy Stats */}
|
||||
<div className="lg:col-span-2 space-y-4">
|
||||
<h2 className="text-xl font-semibold tracking-tight">Economy Overview</h2>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<StatCard
|
||||
title="Total Wealth"
|
||||
icon={Coins}
|
||||
isLoading={!stats}
|
||||
value={stats ? `${Number(stats.economy.totalWealth).toLocaleString()} AU` : undefined}
|
||||
subtitle="Astral Units in circulation"
|
||||
valueClassName="text-primary"
|
||||
iconClassName="text-primary"
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
title="Items Circulating"
|
||||
icon={Package}
|
||||
isLoading={!stats}
|
||||
value={stats?.economy.totalItems?.toLocaleString()}
|
||||
subtitle="Total items owned by users"
|
||||
className="delay-75"
|
||||
valueClassName="text-blue-500"
|
||||
iconClassName="text-blue-500"
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
title="Average Level"
|
||||
icon={TrendingUp}
|
||||
isLoading={!stats}
|
||||
value={stats ? `Lvl ${stats.economy.avgLevel}` : undefined}
|
||||
subtitle="Global player average"
|
||||
className="delay-100"
|
||||
valueClassName="text-secondary"
|
||||
iconClassName="text-secondary"
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
title="Top /daily Streak"
|
||||
icon={Flame}
|
||||
isLoading={!stats}
|
||||
value={stats?.economy.topStreak}
|
||||
subtitle="Days daily streak"
|
||||
className="delay-200"
|
||||
valueClassName="text-destructive"
|
||||
iconClassName="text-destructive"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<LeaderboardCard
|
||||
data={stats?.leaderboards}
|
||||
isLoading={!stats}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Recent Activity & Lootdrops */}
|
||||
<div className="space-y-4">
|
||||
<LootdropCard
|
||||
drop={stats?.activeLootdrops?.[0]}
|
||||
state={stats?.lootdropState}
|
||||
isLoading={!stats}
|
||||
/>
|
||||
<h2 className="text-xl font-semibold tracking-tight">Live Feed</h2>
|
||||
<RecentActivity
|
||||
events={stats?.recentEvents || []}
|
||||
isLoading={!stats}
|
||||
className="h-[calc(100%-2rem)]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</main >
|
||||
|
||||
{/* Commands Drawer */}
|
||||
<CommandsDrawer
|
||||
open={commandsDrawerOpen}
|
||||
onOpenChange={setCommandsDrawerOpen}
|
||||
/>
|
||||
</div >
|
||||
);
|
||||
}
|
||||
@@ -1,25 +1,28 @@
|
||||
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 { Card, CardHeader, CardTitle, CardContent, CardDescription, CardFooter } from "../components/ui/card";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { Switch } from "../components/ui/switch";
|
||||
import { Input } from "../components/ui/input";
|
||||
import { Label } from "../components/ui/label";
|
||||
import { Textarea } from "../components/ui/textarea";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../components/ui/tabs";
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../components/ui/tooltip";
|
||||
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 { StatCard } from "../components/stat-card";
|
||||
import { LootdropCard } from "../components/lootdrop-card";
|
||||
import { Activity, Coins, Flame, Trophy } from "lucide-react";
|
||||
import { SettingsDrawer } from "../components/settings-drawer";
|
||||
import { QuestForm } from "../components/quest-form";
|
||||
|
||||
import { RecentActivity } from "../components/recent-activity";
|
||||
import { type RecentEvent } from "@shared/modules/dashboard/dashboard.types";
|
||||
import { LeaderboardCard, type LeaderboardData } from "../components/leaderboard-card";
|
||||
import { ActivityChart } from "../components/activity-chart";
|
||||
import { type ActivityData } from "@shared/modules/dashboard/dashboard.types";
|
||||
import { RecentActivity } from "../components/recent-activity";
|
||||
import { QuestForm } from "../components/quest-form";
|
||||
import { Activity, Coins, Flame, Trophy, Check, User, Mail, Shield, Bell } from "lucide-react";
|
||||
import { type RecentEvent, type ActivityData } from "@shared/modules/dashboard/dashboard.types";
|
||||
|
||||
// Mock Data
|
||||
const mockEvents: RecentEvent[] = [
|
||||
{ type: 'success', message: 'User leveled up to 5', timestamp: new Date(Date.now() - 1000 * 60 * 5), icon: '⬆️' },
|
||||
{ type: 'info', message: 'New user joined', timestamp: new Date(Date.now() - 1000 * 60 * 15), icon: '👋' },
|
||||
@@ -37,474 +40,326 @@ const mockActivityData: ActivityData[] = Array.from({ length: 24 }).map((_, i) =
|
||||
};
|
||||
});
|
||||
|
||||
const mockManyEvents: RecentEvent[] = Array.from({ length: 15 }).map((_, i) => ({
|
||||
type: i % 3 === 0 ? 'success' : i % 3 === 1 ? 'info' : 'error', // Use string literals matching the type definition
|
||||
message: `Event #${i + 1} generated for testing scroll behavior`,
|
||||
timestamp: new Date(Date.now() - 1000 * 60 * i * 10),
|
||||
icon: i % 3 === 0 ? '✨' : i % 3 === 1 ? 'ℹ️' : '🚨',
|
||||
}));
|
||||
|
||||
const mockLeaderboardData: LeaderboardData = {
|
||||
topLevels: [
|
||||
{ username: "StellarMage", level: 99 },
|
||||
{ username: "MoonWalker", level: 85 },
|
||||
{ username: "SunChaser", level: 72 },
|
||||
{ username: "NebulaKnight", level: 68 },
|
||||
{ username: "CometRider", level: 65 },
|
||||
{ username: "VoidWalker", level: 60 },
|
||||
{ username: "AstroBard", level: 55 },
|
||||
{ username: "StarGazer", level: 50 },
|
||||
{ username: "CosmicDruid", level: 45 },
|
||||
{ username: "GalaxyGuard", level: 42 }
|
||||
],
|
||||
topWealth: [
|
||||
{ username: "GoldHoarder", balance: "1000000" },
|
||||
{ username: "MerchantKing", balance: "750000" },
|
||||
{ username: "LuckyLooter", balance: "500000" },
|
||||
{ username: "CryptoMiner", balance: "450000" },
|
||||
{ username: "MarketMaker", balance: "300000" },
|
||||
{ username: "TradeWind", balance: "250000" },
|
||||
{ username: "CoinKeeper", balance: "150000" },
|
||||
{ username: "GemHunter", balance: "100000" },
|
||||
{ username: "DustCollector", balance: "50000" },
|
||||
{ username: "BrokeBeginner", balance: "100" }
|
||||
],
|
||||
topNetWorth: [
|
||||
{ username: "MerchantKing", netWorth: "1500000" },
|
||||
{ username: "GoldHoarder", netWorth: "1250000" },
|
||||
{ username: "LuckyLooter", netWorth: "850000" },
|
||||
{ username: "MarketMaker", netWorth: "700000" },
|
||||
{ username: "GemHunter", netWorth: "650000" },
|
||||
{ username: "CryptoMiner", netWorth: "550000" },
|
||||
{ username: "TradeWind", netWorth: "400000" },
|
||||
{ username: "CoinKeeper", netWorth: "250000" },
|
||||
{ username: "DustCollector", netWorth: "150000" },
|
||||
{ username: "BrokeBeginner", netWorth: "5000" }
|
||||
]
|
||||
};
|
||||
|
||||
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 className="pt-8 px-8 max-w-7xl mx-auto space-y-8 text-center md:text-left pb-24">
|
||||
{/* Header Section */}
|
||||
<header className="space-y-4 animate-in fade-in">
|
||||
<div className="flex flex-col md:flex-row items-center md:items-start justify-between gap-4">
|
||||
<div className="space-y-2">
|
||||
<Badge variant="aurora" className="mb-2">v2.0.0-solaris</Badge>
|
||||
<h1 className="text-5xl md:text-6xl font-extrabold tracking-tight text-primary glow-text">
|
||||
Aurora Design System
|
||||
</h1>
|
||||
<p className="text-xl text-muted-foreground max-w-2xl">
|
||||
The Solaris design language. A cohesive collection of celestial components,
|
||||
glassmorphic surfaces, and radiant interactions.
|
||||
</p>
|
||||
</div>
|
||||
<div className="hidden md:block">
|
||||
<div className="size-32 rounded-full bg-aurora opacity-20 blur-3xl animate-pulse" />
|
||||
</div>
|
||||
</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>
|
||||
<Link to="/admin/quests" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
|
||||
Admin
|
||||
</Link>
|
||||
</header>
|
||||
|
||||
<Tabs defaultValue="foundations" className="space-y-8 animate-in slide-up delay-100">
|
||||
<div className="flex items-center justify-center md:justify-start">
|
||||
<TabsList className="grid w-full max-w-md grid-cols-3">
|
||||
<TabsTrigger value="foundations">Foundations</TabsTrigger>
|
||||
<TabsTrigger value="components">Components</TabsTrigger>
|
||||
<TabsTrigger value="patterns">Patterns</TabsTrigger>
|
||||
</TabsList>
|
||||
</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>
|
||||
{/* FOUNDATIONS TAB */}
|
||||
<TabsContent value="foundations" className="space-y-12">
|
||||
{/* Color Palette */}
|
||||
<section className="space-y-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="h-px bg-border flex-1" />
|
||||
<h2 className="text-2xl font-bold text-foreground">Color Palette</h2>
|
||||
<div className="h-px bg-border flex-1" />
|
||||
</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 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>
|
||||
<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>
|
||||
</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>
|
||||
{/* Gradients & Special Effects */}
|
||||
<section className="space-y-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="h-px bg-border flex-1" />
|
||||
<h2 className="text-2xl font-bold text-foreground">Gradients & Effects</h2>
|
||||
<div className="h-px bg-border flex-1" />
|
||||
</div>
|
||||
<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</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>
|
||||
<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 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>
|
||||
</div>
|
||||
</section>
|
||||
</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>
|
||||
<div className="flex justify-between items-center">
|
||||
<CardTitle>System Settings</CardTitle>
|
||||
<SettingsDrawer />
|
||||
</div>
|
||||
</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."
|
||||
/>
|
||||
{/* Typography */}
|
||||
<section className="space-y-8">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="h-px bg-border flex-1" />
|
||||
<h2 className="text-2xl font-bold text-foreground">Typography</h2>
|
||||
<div className="h-px bg-border flex-1" />
|
||||
</div>
|
||||
<div className="space-y-2 border border-border/50 rounded-xl p-8 bg-card/50">
|
||||
<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>
|
||||
</section>
|
||||
</TabsContent>
|
||||
|
||||
{/* Feature Cards Demo */}
|
||||
{/* COMPONENTS TAB */}
|
||||
<TabsContent value="components" className="space-y-12">
|
||||
{/* Buttons & Badges */}
|
||||
<section className="space-y-6">
|
||||
<SectionTitle title="Buttons & Badges" />
|
||||
<Card className="p-8">
|
||||
<div className="space-y-8">
|
||||
<div className="space-y-4">
|
||||
<Label>Buttons</Label>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<Button variant="default">Default</Button>
|
||||
<Button variant="secondary">Secondary</Button>
|
||||
<Button variant="outline">Outline</Button>
|
||||
<Button variant="ghost">Ghost</Button>
|
||||
<Button variant="destructive">Destructive</Button>
|
||||
<Button variant="link">Link</Button>
|
||||
<Button variant="aurora">Aurora</Button>
|
||||
<Button variant="glass">Glass</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<Label>Badges</Label>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<Badge>Primary</Badge>
|
||||
<Badge variant="secondary">Secondary</Badge>
|
||||
<Badge variant="outline">Outline</Badge>
|
||||
<Badge variant="destructive">Destructive</Badge>
|
||||
<Badge variant="aurora">Aurora</Badge>
|
||||
<Badge variant="glass">Glass</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</section>
|
||||
|
||||
{/* Form Controls */}
|
||||
<section className="space-y-6">
|
||||
<SectionTitle title="Form Controls" />
|
||||
<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
|
||||
<Card className="p-6 space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email Address</Label>
|
||||
<Input id="email" placeholder="enter@email.com" type="email" />
|
||||
</div>
|
||||
</FeatureCard>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="bio">Bio</Label>
|
||||
<Textarea id="bio" placeholder="Tell us about yourself..." />
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="notifications">Enable Notifications</Label>
|
||||
<Switch id="notifications" />
|
||||
</div>
|
||||
</Card>
|
||||
<Card className="p-6 space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label>Role Selection</Label>
|
||||
<Select>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a role" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="admin">Administrator</SelectItem>
|
||||
<SelectItem value="mod">Moderator</SelectItem>
|
||||
<SelectItem value="user">User</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Tooltip Demo</Label>
|
||||
<div className="p-4 border border-dashed rounded-lg flex items-center justify-center">
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button variant="outline">Hover Me</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>This is a glowing tooltip!</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Info Cards Demo */}
|
||||
{/* Cards & Containers */}
|
||||
<section className="space-y-6">
|
||||
<SectionTitle title="Cards & Containers" />
|
||||
<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>
|
||||
<Card className="hover-lift">
|
||||
<CardHeader>
|
||||
<CardTitle>Standard Card</CardTitle>
|
||||
<CardDescription>Default glassmorphic style</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground">The default card component comes with built-in separation and padding.</p>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button size="sm" variant="secondary" className="w-full">Action</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
|
||||
{/* Stat Cards Demo */}
|
||||
<Card className="bg-aurora/10 border-primary/20 hover-glow">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-primary">Highlighted Card</CardTitle>
|
||||
<CardDescription>Active or featured state</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground">Use this variation to draw attention to specific content blocks.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-dashed shadow-none bg-transparent">
|
||||
<CardHeader>
|
||||
<CardTitle>Ghost/Dashed Card</CardTitle>
|
||||
<CardDescription>Placeholder or empty state</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex items-center justify-center py-8">
|
||||
<div className="bg-muted p-4 rounded-full">
|
||||
<Activity className="size-6 text-muted-foreground" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
</TabsContent>
|
||||
|
||||
{/* PATTERNS TAB */}
|
||||
<TabsContent value="patterns" className="space-y-12">
|
||||
{/* Dashboard Widgets */}
|
||||
<section className="space-y-6">
|
||||
<SectionTitle title="Dashboard Widgets" />
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<StatCard
|
||||
title="Standard Stat"
|
||||
value="1,234"
|
||||
subtitle="Active users"
|
||||
title="Total XP"
|
||||
value="1,240,500"
|
||||
subtitle="+12% from last week"
|
||||
icon={Trophy}
|
||||
isLoading={false}
|
||||
iconClassName="text-yellow-500"
|
||||
/>
|
||||
<StatCard
|
||||
title="Active Users"
|
||||
value="3,405"
|
||||
subtitle="Currently online"
|
||||
icon={User}
|
||||
isLoading={false}
|
||||
iconClassName="text-blue-500"
|
||||
/>
|
||||
<StatCard
|
||||
title="System Load"
|
||||
value="42%"
|
||||
subtitle="Optimal performance"
|
||||
icon={Activity}
|
||||
isLoading={false}
|
||||
iconClassName="text-green-500"
|
||||
/>
|
||||
<StatCard
|
||||
title="Colored Stat"
|
||||
value="9,999 AU"
|
||||
subtitle="Total Wealth"
|
||||
icon={Coins}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Complex Lists */}
|
||||
<section className="space-y-6">
|
||||
<SectionTitle title="Complex Lists & Charts" />
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<RecentActivity
|
||||
events={mockEvents}
|
||||
isLoading={false}
|
||||
valueClassName="text-primary"
|
||||
iconClassName="text-primary"
|
||||
className="h-[400px]"
|
||||
/>
|
||||
<StatCard
|
||||
title="Loading State"
|
||||
value={null}
|
||||
icon={Flame}
|
||||
isLoading={true}
|
||||
<LeaderboardCard
|
||||
data={mockLeaderboardData}
|
||||
isLoading={false}
|
||||
className="h-[400px]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Data Visualization Demo */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-xl font-semibold text-muted-foreground">Data Visualization</h3>
|
||||
<div className="grid grid-cols-1 gap-6">
|
||||
<ActivityChart
|
||||
data={mockActivityData}
|
||||
/>
|
||||
<ActivityChart
|
||||
// Empty charts (loading state)
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* Application Patterns */}
|
||||
<section className="space-y-6">
|
||||
<SectionTitle title="Application Forms" />
|
||||
<div className="max-w-xl mx-auto">
|
||||
<QuestForm />
|
||||
</div>
|
||||
</section>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
{/* Game Event Cards Demo */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-xl font-semibold text-muted-foreground">Game Event Cards</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<LootdropCard
|
||||
isLoading={true}
|
||||
/>
|
||||
<LootdropCard
|
||||
drop={null}
|
||||
state={{
|
||||
monitoredChannels: 3,
|
||||
hottestChannel: {
|
||||
id: "123",
|
||||
messages: 42,
|
||||
progress: 42,
|
||||
cooldown: false
|
||||
},
|
||||
config: { requiredMessages: 100, dropChance: 0.1 }
|
||||
}}
|
||||
isLoading={false}
|
||||
/>
|
||||
<LootdropCard
|
||||
drop={null}
|
||||
state={{
|
||||
monitoredChannels: 3,
|
||||
hottestChannel: {
|
||||
id: "123",
|
||||
messages: 100,
|
||||
progress: 100,
|
||||
cooldown: true
|
||||
},
|
||||
config: { requiredMessages: 100, dropChance: 0.1 }
|
||||
}}
|
||||
isLoading={false}
|
||||
/>
|
||||
<LootdropCard
|
||||
drop={{
|
||||
rewardAmount: 500,
|
||||
currency: "AU",
|
||||
createdAt: new Date().toISOString(),
|
||||
expiresAt: new Date(Date.now() + 60000).toISOString()
|
||||
}}
|
||||
isLoading={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Leaderboard Demo */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-xl font-semibold text-muted-foreground">Leaderboard Cards</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<LeaderboardCard
|
||||
isLoading={true}
|
||||
/>
|
||||
<LeaderboardCard
|
||||
data={mockLeaderboardData}
|
||||
isLoading={false}
|
||||
/>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
{/* Recent Activity Demo */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-xl font-semibold text-muted-foreground">Recent Activity Feed</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6 h-[500px]">
|
||||
<RecentActivity
|
||||
events={[]}
|
||||
isLoading={true}
|
||||
className="h-full"
|
||||
/>
|
||||
<RecentActivity
|
||||
events={[]}
|
||||
isLoading={false}
|
||||
className="h-full"
|
||||
/>
|
||||
<RecentActivity
|
||||
events={mockEvents}
|
||||
isLoading={false}
|
||||
className="h-full"
|
||||
/>
|
||||
<RecentActivity
|
||||
events={mockManyEvents}
|
||||
isLoading={false}
|
||||
className="h-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Administrative Tools Showcase */}
|
||||
<section className="space-y-6 animate-in slide-up delay-700">
|
||||
<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" />
|
||||
Administrative Tools
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 gap-6 text-left">
|
||||
<QuestForm />
|
||||
</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>
|
||||
function SectionTitle({ title }: { title: string }) {
|
||||
return (
|
||||
<div className="flex items-center gap-4 py-4">
|
||||
<div className="h-0.5 bg-gradient-to-r from-transparent via-primary/50 to-transparent flex-1" />
|
||||
<h2 className="text-xl font-bold text-foreground/80 uppercase tracking-widest">{title}</h2>
|
||||
<div className="h-0.5 bg-gradient-to-r from-transparent via-primary/50 to-transparent flex-1" />
|
||||
</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>
|
||||
<div className="flex flex-col md:flex-row md:items-baseline gap-4 border-b border-border/50 pb-4 last:border-0 last:pb-0">
|
||||
<span className="text-xs font-mono text-muted-foreground w-24 shrink-0">var(--step-{step})</span>
|
||||
<p className={`${className} font-medium truncate`}>{label}</p>
|
||||
</div>
|
||||
);
|
||||
@@ -512,9 +367,13 @@ function TypographyRow({ step, className, label }: { step: string, className: st
|
||||
|
||||
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 className="group space-y-2 cursor-pointer">
|
||||
<div className={`h-24 w-full rounded-xl ${color} ${border ? 'border border-border' : ''} flex items-end p-3 shadow-lg group-hover:scale-105 transition-transform duration-300 relative overflow-hidden`}>
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
<span className={`text-xs font-bold uppercase tracking-widest ${text} relative z-10`}>{label}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-xs text-muted-foreground px-1">
|
||||
<span>{color.replace('bg-', '')}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
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";
|
||||
@@ -17,28 +16,9 @@ import {
|
||||
|
||||
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>
|
||||
<Link to="/admin/quests" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
|
||||
Admin
|
||||
</Link>
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
<>
|
||||
{/* Hero Section */}
|
||||
<header className="relative pt-32 pb-20 px-8 text-center max-w-5xl mx-auto space-y-10">
|
||||
<header className="relative pt-16 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>
|
||||
@@ -232,7 +212,7 @@ export function Home() {
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
164
web/src/pages/admin/Overview.tsx
Normal file
164
web/src/pages/admin/Overview.tsx
Normal file
@@ -0,0 +1,164 @@
|
||||
import React, { useState } from "react";
|
||||
import { SectionHeader } from "../../components/section-header";
|
||||
import { useSocket } from "../../hooks/use-socket";
|
||||
import { StatCard } from "../../components/stat-card";
|
||||
import { ActivityChart } from "../../components/activity-chart";
|
||||
import { LootdropCard } from "../../components/lootdrop-card";
|
||||
import { LeaderboardCard } from "../../components/leaderboard-card";
|
||||
import { RecentActivity } from "../../components/recent-activity";
|
||||
import { CommandsDrawer } from "../../components/commands-drawer";
|
||||
import { Server, Users, Terminal, Activity, Coins, TrendingUp, Flame, Package } from "lucide-react";
|
||||
import { cn } from "../../lib/utils";
|
||||
|
||||
export function AdminOverview() {
|
||||
const { isConnected, stats } = useSocket();
|
||||
const [commandsDrawerOpen, setCommandsDrawerOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<main className="pt-8 px-8 pb-12 max-w-7xl mx-auto space-y-8">
|
||||
<SectionHeader
|
||||
badge="Admin Dashboard"
|
||||
title="Overview"
|
||||
description="Monitor your Aurora RPG server statistics and activity."
|
||||
/>
|
||||
|
||||
{/* Stats Grid */}
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4 animate-in fade-in slide-up duration-700">
|
||||
<StatCard
|
||||
title="Total Servers"
|
||||
icon={Server}
|
||||
isLoading={!stats}
|
||||
value={stats?.guilds.count.toLocaleString()}
|
||||
subtitle={stats?.guilds.changeFromLastMonth
|
||||
? `${stats.guilds.changeFromLastMonth > 0 ? '+' : ''}${stats.guilds.changeFromLastMonth} from last month`
|
||||
: "Active Guilds"
|
||||
}
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
title="Total Users"
|
||||
icon={Users}
|
||||
isLoading={!stats}
|
||||
value={stats?.users.total.toLocaleString()}
|
||||
subtitle={stats ? `${stats.users.active.toLocaleString()} active now` : undefined}
|
||||
className="delay-100"
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
title="Commands"
|
||||
icon={Terminal}
|
||||
isLoading={!stats}
|
||||
value={stats?.commands.total.toLocaleString()}
|
||||
subtitle={stats ? `${stats.commands.active} active · ${stats.commands.disabled} disabled` : undefined}
|
||||
className="delay-200"
|
||||
onClick={() => setCommandsDrawerOpen(true)}
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
title="System Ping"
|
||||
icon={Activity}
|
||||
isLoading={!stats}
|
||||
value={stats ? `${Math.round(stats.ping.avg)}ms` : undefined}
|
||||
subtitle="Average latency"
|
||||
className="delay-300"
|
||||
valueClassName={stats ? cn(
|
||||
"transition-colors duration-300",
|
||||
stats.ping.avg < 100 ? "text-emerald-500" :
|
||||
stats.ping.avg < 200 ? "text-yellow-500" : "text-red-500"
|
||||
) : undefined}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Activity Chart */}
|
||||
<div className="animate-in fade-in slide-up delay-400">
|
||||
<ActivityChart />
|
||||
</div>
|
||||
|
||||
<div className="grid gap-8 lg:grid-cols-3 animate-in fade-in slide-up delay-500">
|
||||
{/* Economy Stats */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold tracking-tight mb-4">Economy Overview</h2>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<StatCard
|
||||
title="Total Wealth"
|
||||
icon={Coins}
|
||||
isLoading={!stats}
|
||||
value={stats ? `${Number(stats.economy.totalWealth).toLocaleString()} AU` : undefined}
|
||||
subtitle="Astral Units in circulation"
|
||||
valueClassName="text-primary"
|
||||
iconClassName="text-primary"
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
title="Items Circulating"
|
||||
icon={Package}
|
||||
isLoading={!stats}
|
||||
value={stats?.economy.totalItems?.toLocaleString()}
|
||||
subtitle="Total items owned by users"
|
||||
className="delay-75"
|
||||
valueClassName="text-blue-500"
|
||||
iconClassName="text-blue-500"
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
title="Average Level"
|
||||
icon={TrendingUp}
|
||||
isLoading={!stats}
|
||||
value={stats ? `Lvl ${stats.economy.avgLevel}` : undefined}
|
||||
subtitle="Global player average"
|
||||
className="delay-100"
|
||||
valueClassName="text-secondary"
|
||||
iconClassName="text-secondary"
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
title="Top /daily Streak"
|
||||
icon={Flame}
|
||||
isLoading={!stats}
|
||||
value={stats?.economy.topStreak}
|
||||
subtitle="Days daily streak"
|
||||
className="delay-200"
|
||||
valueClassName="text-destructive"
|
||||
iconClassName="text-destructive"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<LeaderboardCard
|
||||
data={stats?.leaderboards}
|
||||
isLoading={!stats}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Recent Activity & Lootdrops */}
|
||||
<div className="space-y-6">
|
||||
<LootdropCard
|
||||
drop={stats?.activeLootdrops?.[0]}
|
||||
state={stats?.lootdropState}
|
||||
isLoading={!stats}
|
||||
/>
|
||||
<div className="h-[calc(100%-12rem)] min-h-[400px]">
|
||||
<h2 className="text-xl font-semibold tracking-tight mb-4">Live Feed</h2>
|
||||
<RecentActivity
|
||||
events={stats?.recentEvents || []}
|
||||
isLoading={!stats}
|
||||
className="h-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Commands Drawer */}
|
||||
<CommandsDrawer
|
||||
open={commandsDrawerOpen}
|
||||
onOpenChange={setCommandsDrawerOpen}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default AdminOverview;
|
||||
290
web/src/pages/settings/Economy.tsx
Normal file
290
web/src/pages/settings/Economy.tsx
Normal file
@@ -0,0 +1,290 @@
|
||||
import React from "react";
|
||||
import { useSettingsForm } from "./SettingsLayout";
|
||||
import { FormField, FormItem, FormLabel, FormControl, FormDescription } from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
|
||||
import { Users, Backpack, Sparkles, CreditCard, MessageSquare } from "lucide-react";
|
||||
|
||||
export function EconomySettings() {
|
||||
const { form } = useSettingsForm();
|
||||
|
||||
return (
|
||||
<div className="space-y-6 animate-in fade-in slide-up duration-500">
|
||||
<Accordion type="multiple" className="w-full space-y-4" defaultValue={["daily", "inventory"]}>
|
||||
<AccordionItem value="daily" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
|
||||
<AccordionTrigger className="hover:no-underline py-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-full bg-yellow-500/10 flex items-center justify-center text-yellow-500">
|
||||
<Users className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-bold">Daily Rewards</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="space-y-4 pb-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="economy.daily.amount"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Base Amount</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="text" className="bg-background/50" placeholder="100" />
|
||||
</FormControl>
|
||||
<FormDescription className="text-xs">Reward (AU)</FormDescription>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="economy.daily.streakBonus"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Streak Bonus</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="text" className="bg-background/50" placeholder="10" />
|
||||
</FormControl>
|
||||
<FormDescription className="text-xs">Bonus/day</FormDescription>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="economy.daily.weeklyBonus"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Weekly Bonus</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="text" className="bg-background/50" placeholder="50" />
|
||||
</FormControl>
|
||||
<FormDescription className="text-xs">7-day bonus</FormDescription>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="economy.daily.cooldownMs"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Cooldown (ms)</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="inventory" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
|
||||
<AccordionTrigger className="hover:no-underline py-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-full bg-orange-500/10 flex items-center justify-center text-orange-500">
|
||||
<Backpack className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-bold">Inventory</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="space-y-4 pb-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="inventory.maxStackSize"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Max Stack Size</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="text" className="bg-background/50" />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="inventory.maxSlots"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Max Slots</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="leveling" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
|
||||
<AccordionTrigger className="hover:no-underline py-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-full bg-blue-500/10 flex items-center justify-center text-blue-500">
|
||||
<Sparkles className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-bold">Leveling & XP</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="space-y-4 pb-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="leveling.base"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Base XP</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="leveling.exponent"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Exponent</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" step="0.1" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="bg-muted/30 p-4 rounded-lg space-y-3">
|
||||
<h4 className="text-xs font-bold text-muted-foreground uppercase tracking-wider flex items-center gap-2">
|
||||
<MessageSquare className="w-3 h-3" /> Chat XP
|
||||
</h4>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="leveling.chat.minXp"
|
||||
render={({ field }) => (
|
||||
<FormItem className="space-y-1">
|
||||
<FormLabel className="text-xs">Min</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" className="h-9 text-sm" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="leveling.chat.maxXp"
|
||||
render={({ field }) => (
|
||||
<FormItem className="space-y-1">
|
||||
<FormLabel className="text-xs">Max</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" className="h-9 text-sm" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="leveling.chat.cooldownMs"
|
||||
render={({ field }) => (
|
||||
<FormItem className="space-y-1">
|
||||
<FormLabel className="text-xs">Cooldown</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" className="h-9 text-sm" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="transfers" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
|
||||
<AccordionTrigger className="hover:no-underline py-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-full bg-green-500/10 flex items-center justify-center text-green-500">
|
||||
<CreditCard className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-bold">Transfers</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="space-y-4 pb-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="economy.transfers.allowSelfTransfer"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border border-border/50 bg-background/50 p-4">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel className="text-sm font-medium">Allow Self-Transfer</FormLabel>
|
||||
<FormDescription className="text-xs">
|
||||
Permit users to transfer currency to themselves.
|
||||
</FormDescription>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="economy.transfers.minAmount"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Minimum Transfer Amount</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="text" placeholder="1" className="bg-background/50" />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="exam" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
|
||||
<AccordionTrigger className="hover:no-underline py-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-full bg-amber-500/10 flex items-center justify-center text-amber-500">
|
||||
<Sparkles className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-bold">Exams</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="space-y-4 pb-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="economy.exam.multMin"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Min Multiplier</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" step="0.1" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="economy.exam.multMax"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Max Multiplier</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" step="0.1" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
149
web/src/pages/settings/General.tsx
Normal file
149
web/src/pages/settings/General.tsx
Normal file
@@ -0,0 +1,149 @@
|
||||
import React from "react";
|
||||
import { useSettingsForm } from "./SettingsLayout";
|
||||
import { FormField, FormItem, FormLabel, FormControl, FormDescription } from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { MessageSquare, Terminal } from "lucide-react";
|
||||
import { fromSelectValue, toSelectValue, NONE_VALUE } from "@/hooks/use-settings";
|
||||
|
||||
export function GeneralSettings() {
|
||||
const { form, meta } = useSettingsForm();
|
||||
|
||||
return (
|
||||
<div className="space-y-8 animate-in fade-in slide-up duration-500">
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Badge variant="outline" className="bg-primary/5 text-primary border-primary/20">
|
||||
<MessageSquare className="w-3 h-3 mr-1" /> Onboarding
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="welcomeChannelId"
|
||||
render={({ field }) => (
|
||||
<FormItem className="glass-card p-5 rounded-xl border border-border/50">
|
||||
<FormLabel className="text-foreground/80">Welcome Channel</FormLabel>
|
||||
<Select onValueChange={v => field.onChange(fromSelectValue(v))} value={toSelectValue(field.value || null)}>
|
||||
<FormControl>
|
||||
<SelectTrigger className="bg-background/50 border-border/50">
|
||||
<SelectValue placeholder="Select a channel" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value={NONE_VALUE}>None</SelectItem>
|
||||
{meta?.channels
|
||||
.filter(c => c.type === 0)
|
||||
.map(c => (
|
||||
<SelectItem key={c.id} value={c.id}>#{c.name}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormDescription>Where to send welcome messages.</FormDescription>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="welcomeMessage"
|
||||
render={({ field }) => (
|
||||
<FormItem className="glass-card p-5 rounded-xl border border-border/50">
|
||||
<FormLabel className="text-foreground/80">Welcome Message Template</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea
|
||||
{...field}
|
||||
value={field.value || ""}
|
||||
placeholder="Welcome {user}!"
|
||||
className="min-h-[100px] font-mono text-xs bg-background/50 border-border/50 focus:border-primary/50 focus:ring-primary/20 resize-none"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>Available variables: {"{user}"}, {"{count}"}.</FormDescription>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Badge variant="outline" className="bg-primary/5 text-primary border-primary/20">
|
||||
Channels & Features
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="feedbackChannelId"
|
||||
render={({ field }) => (
|
||||
<FormItem className="glass-card p-5 rounded-xl border border-border/50">
|
||||
<FormLabel className="text-foreground/80">Feedback Channel</FormLabel>
|
||||
<Select onValueChange={v => field.onChange(fromSelectValue(v))} value={toSelectValue(field.value || null)}>
|
||||
<FormControl>
|
||||
<SelectTrigger className="bg-background/50 border-border/50">
|
||||
<SelectValue placeholder="Select a channel" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value={NONE_VALUE}>None</SelectItem>
|
||||
{meta?.channels.filter(c => c.type === 0).map(c => (
|
||||
<SelectItem key={c.id} value={c.id}>#{c.name}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormDescription>Where user feedback is sent.</FormDescription>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="glass-card p-5 rounded-xl border border-border/50 space-y-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Terminal className="w-4 h-4 text-muted-foreground" />
|
||||
<h4 className="font-medium text-sm">Terminal Embed</h4>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="terminal.channelId"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="text-xs text-muted-foreground uppercase tracking-wide">Channel</FormLabel>
|
||||
<Select onValueChange={v => field.onChange(fromSelectValue(v))} value={toSelectValue(field.value || null)}>
|
||||
<FormControl>
|
||||
<SelectTrigger className="bg-background/50 border-border/50 h-9 text-xs">
|
||||
<SelectValue placeholder="Select channel" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value={NONE_VALUE}>None</SelectItem>
|
||||
{meta?.channels.filter(c => c.type === 0).map(c => (
|
||||
<SelectItem key={c.id} value={c.id}>#{c.name}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="terminal.messageId"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="text-xs text-muted-foreground uppercase tracking-wide">Message ID</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} value={field.value || ""} placeholder="Message ID" className="font-mono text-xs bg-background/50 border-border/50 h-9" />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
141
web/src/pages/settings/Roles.tsx
Normal file
141
web/src/pages/settings/Roles.tsx
Normal file
@@ -0,0 +1,141 @@
|
||||
import React from "react";
|
||||
import { useSettingsForm } from "./SettingsLayout";
|
||||
import { FormField, FormItem, FormLabel, FormControl, FormDescription } from "@/components/ui/form";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Palette, Users } from "lucide-react";
|
||||
import { fromSelectValue, toSelectValue } from "@/hooks/use-settings";
|
||||
|
||||
export function RolesSettings() {
|
||||
const { form, meta } = useSettingsForm();
|
||||
|
||||
return (
|
||||
<div className="space-y-8 animate-in fade-in slide-up duration-500">
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Badge variant="outline" className="bg-primary/5 text-primary border-primary/20">
|
||||
<Users className="w-3 h-3 mr-1" /> System Roles
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="studentRole"
|
||||
render={({ field }) => (
|
||||
<FormItem className="glass-card p-5 rounded-xl border border-border/50">
|
||||
<FormLabel className="font-bold">Student Role</FormLabel>
|
||||
<Select onValueChange={v => field.onChange(fromSelectValue(v))} value={toSelectValue(field.value || null)}>
|
||||
<FormControl>
|
||||
<SelectTrigger className="bg-background/50">
|
||||
<SelectValue placeholder="Select role" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{meta?.roles.map(r => (
|
||||
<SelectItem key={r.id} value={r.id}>
|
||||
<span className="flex items-center gap-2">
|
||||
<span className="w-3 h-3 rounded-full" style={{ background: r.color }} />
|
||||
{r.name}
|
||||
</span>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormDescription className="text-xs">Default role for new members/students.</FormDescription>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="visitorRole"
|
||||
render={({ field }) => (
|
||||
<FormItem className="glass-card p-5 rounded-xl border border-border/50">
|
||||
<FormLabel className="font-bold">Visitor Role</FormLabel>
|
||||
<Select onValueChange={v => field.onChange(fromSelectValue(v))} value={toSelectValue(field.value || null)}>
|
||||
<FormControl>
|
||||
<SelectTrigger className="bg-background/50">
|
||||
<SelectValue placeholder="Select role" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{meta?.roles.map(r => (
|
||||
<SelectItem key={r.id} value={r.id}>
|
||||
<span className="flex items-center gap-2">
|
||||
<span className="w-3 h-3 rounded-full" style={{ background: r.color }} />
|
||||
{r.name}
|
||||
</span>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormDescription className="text-xs">Role for visitors/guests.</FormDescription>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Badge variant="outline" className="bg-primary/5 text-primary border-primary/20">
|
||||
<Palette className="w-3 h-3 mr-1" /> Color Roles
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="glass-card p-6 rounded-xl border border-border/50 bg-card/30">
|
||||
<div className="mb-4">
|
||||
<FormDescription className="text-sm">
|
||||
Select roles that users can choose from to set their name color in the bot.
|
||||
</FormDescription>
|
||||
</div>
|
||||
<ScrollArea className="h-[400px] pr-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||
{meta?.roles.map((role) => (
|
||||
<FormField
|
||||
key={role.id}
|
||||
control={form.control}
|
||||
name="colorRoles"
|
||||
render={({ field }) => {
|
||||
const isSelected = field.value?.includes(role.id);
|
||||
return (
|
||||
<FormItem
|
||||
key={role.id}
|
||||
className={`flex flex-row items-center space-x-3 space-y-0 p-3 rounded-lg border transition-all cursor-pointer ${
|
||||
isSelected
|
||||
? 'bg-primary/10 border-primary/30 ring-1 ring-primary/20'
|
||||
: 'hover:bg-muted/50 border-transparent'
|
||||
}`}
|
||||
>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={isSelected}
|
||||
onCheckedChange={(checked) => {
|
||||
return checked
|
||||
? field.onChange([...(field.value || []), role.id])
|
||||
: field.onChange(
|
||||
field.value?.filter(
|
||||
(value: string) => value !== role.id
|
||||
)
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel className="font-medium flex items-center gap-2 cursor-pointer w-full text-foreground text-sm">
|
||||
<span className="w-3 h-3 rounded-full shadow-sm" style={{ background: role.color }} />
|
||||
{role.name}
|
||||
</FormLabel>
|
||||
</FormItem>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
65
web/src/pages/settings/SettingsLayout.tsx
Normal file
65
web/src/pages/settings/SettingsLayout.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
import React, { createContext, useContext } from "react";
|
||||
import { Outlet } from "react-router-dom";
|
||||
import { useSettings, type FormValues, type ConfigMeta } from "@/hooks/use-settings";
|
||||
import { Form } from "@/components/ui/form";
|
||||
import { SectionHeader } from "@/components/section-header";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Save, Loader2 } from "lucide-react";
|
||||
|
||||
interface SettingsContextType {
|
||||
form: ReturnType<typeof useSettings>["form"];
|
||||
meta: ConfigMeta | null;
|
||||
}
|
||||
|
||||
const SettingsContext = createContext<SettingsContextType | null>(null);
|
||||
|
||||
export const useSettingsForm = () => {
|
||||
const context = useContext(SettingsContext);
|
||||
if (!context) throw new Error("useSettingsForm must be used within SettingsLayout");
|
||||
return context;
|
||||
};
|
||||
|
||||
export function SettingsLayout() {
|
||||
const { form, meta, loading, isSaving, saveSettings } = useSettings();
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex-1 flex items-center justify-center flex-col gap-4 min-h-[400px]">
|
||||
<Loader2 className="w-10 h-10 animate-spin text-primary" />
|
||||
<p className="text-muted-foreground animate-pulse">Loading configuration...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<SettingsContext.Provider value={{ form, meta }}>
|
||||
<main className="pt-8 px-8 pb-12 max-w-7xl mx-auto space-y-8">
|
||||
<div className="flex justify-between items-end">
|
||||
<SectionHeader
|
||||
badge="System"
|
||||
title="Configuration"
|
||||
description="Manage bot behavior, economy, and game systems."
|
||||
/>
|
||||
<Button
|
||||
onClick={form.handleSubmit(saveSettings)}
|
||||
disabled={isSaving || !form.formState.isDirty}
|
||||
className="shadow-lg hover:shadow-primary/20 transition-all font-bold min-w-[140px]"
|
||||
>
|
||||
{isSaving ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <Save className="w-4 h-4 mr-2" />}
|
||||
Save Changes
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="glass-card rounded-2xl border border-border/50 overflow-hidden">
|
||||
<Form {...form}>
|
||||
<form className="flex flex-col h-full">
|
||||
<div className="p-8">
|
||||
<Outlet />
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</div>
|
||||
</main>
|
||||
</SettingsContext.Provider>
|
||||
);
|
||||
}
|
||||
338
web/src/pages/settings/Systems.tsx
Normal file
338
web/src/pages/settings/Systems.tsx
Normal file
@@ -0,0 +1,338 @@
|
||||
import React from "react";
|
||||
import { useSettingsForm } from "./SettingsLayout";
|
||||
import { FormField, FormItem, FormLabel, FormControl, FormDescription } from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
|
||||
import { CreditCard, Shield } from "lucide-react";
|
||||
import { fromSelectValue, toSelectValue, NONE_VALUE } from "@/hooks/use-settings";
|
||||
|
||||
export function SystemsSettings() {
|
||||
const { form, meta } = useSettingsForm();
|
||||
|
||||
return (
|
||||
<div className="space-y-6 animate-in fade-in slide-up duration-500">
|
||||
<Accordion type="multiple" className="w-full space-y-4" defaultValue={["lootdrop", "moderation"]}>
|
||||
<AccordionItem value="lootdrop" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
|
||||
<AccordionTrigger className="hover:no-underline py-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-full bg-indigo-500/10 flex items-center justify-center text-indigo-500">
|
||||
<CreditCard className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-bold">Loot Drops</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="space-y-4 pb-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="lootdrop.spawnChance"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Spawn Chance (0-1)</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" step="0.01" min="0" max="1" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="lootdrop.minMessages"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Min Messages</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="bg-muted/30 p-4 rounded-lg space-y-3">
|
||||
<h4 className="text-xs font-bold text-muted-foreground uppercase tracking-wider">Rewards</h4>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="lootdrop.reward.min"
|
||||
render={({ field }) => (
|
||||
<FormItem className="space-y-1">
|
||||
<FormLabel className="text-xs">Min</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" className="h-9 text-sm" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="lootdrop.reward.max"
|
||||
render={({ field }) => (
|
||||
<FormItem className="space-y-1">
|
||||
<FormLabel className="text-xs">Max</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" className="h-9 text-sm" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="lootdrop.reward.currency"
|
||||
render={({ field }) => (
|
||||
<FormItem className="space-y-1">
|
||||
<FormLabel className="text-xs">Currency</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} placeholder="AU" className="h-9 text-sm" />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="lootdrop.cooldownMs"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Cooldown (ms)</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="lootdrop.activityWindowMs"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Activity Window (ms)</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="trivia" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
|
||||
<AccordionTrigger className="hover:no-underline py-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-full bg-purple-500/10 flex items-center justify-center text-purple-500 text-sm">
|
||||
🎯
|
||||
</div>
|
||||
<span className="font-bold">Trivia</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="space-y-4 pb-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="trivia.entryFee"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Entry Fee (AU)</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="text" className="bg-background/50" placeholder="50" />
|
||||
</FormControl>
|
||||
<FormDescription className="text-xs">Cost to play</FormDescription>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="trivia.rewardMultiplier"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Reward Multiplier</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" step="0.1" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
<FormDescription className="text-xs">multiplier</FormDescription>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="trivia.timeoutSeconds"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Timeout (seconds)</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="trivia.cooldownMs"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Cooldown (ms)</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="trivia.difficulty"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Difficulty</FormLabel>
|
||||
<Select onValueChange={field.onChange} value={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger className="bg-background/50">
|
||||
<SelectValue placeholder="Select difficulty" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value="easy">Easy</SelectItem>
|
||||
<SelectItem value="medium">Medium</SelectItem>
|
||||
<SelectItem value="hard">Hard</SelectItem>
|
||||
<SelectItem value="random">Random</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="moderation" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
|
||||
<AccordionTrigger className="hover:no-underline py-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center text-red-500">
|
||||
<Shield className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-bold">Moderation</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="space-y-6 pb-4">
|
||||
<div className="space-y-4">
|
||||
<h4 className="font-bold text-sm text-foreground/80 uppercase tracking-wider">Case Management</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="moderation.cases.dmOnWarn"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border border-border/50 bg-background/50 p-4">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel className="text-sm font-medium">DM on Warm</FormLabel>
|
||||
<FormDescription className="text-xs">Notify via DM</FormDescription>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch checked={field.value} onCheckedChange={field.onChange} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="moderation.cases.logChannelId"
|
||||
render={({ field }) => (
|
||||
<FormItem className="glass-card p-4 rounded-xl border border-border/50">
|
||||
<FormLabel className="text-sm">Log Channel</FormLabel>
|
||||
<Select onValueChange={v => field.onChange(fromSelectValue(v))} value={toSelectValue(field.value || null)}>
|
||||
<FormControl>
|
||||
<SelectTrigger className="bg-background/50 h-9">
|
||||
<SelectValue placeholder="Select a channel" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value={NONE_VALUE}>None</SelectItem>
|
||||
{meta?.channels.filter(c => c.type === 0).map(c => (
|
||||
<SelectItem key={c.id} value={c.id}>#{c.name}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="moderation.cases.autoTimeoutThreshold"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Auto Timeout Threshold</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" min="0" className="bg-background/50" onChange={e => field.onChange(e.target.value ? Number(e.target.value) : undefined)} />
|
||||
</FormControl>
|
||||
<FormDescription className="text-xs">Warnings before auto-timeout.</FormDescription>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h4 className="font-bold text-sm text-foreground/80 uppercase tracking-wider">Message Pruning</h4>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="moderation.prune.maxAmount"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="text-xs">Max Amount</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" className="bg-background/50 h-9" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="moderation.prune.confirmThreshold"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="text-xs">Confirm Threshold</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" className="bg-background/50 h-9" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="moderation.prune.batchSize"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="text-xs">Batch Size</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" className="bg-background/50 h-9" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="moderation.prune.batchDelayMs"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="text-xs">Batch Delay (ms)</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="number" className="bg-background/50 h-9" onChange={e => field.onChange(Number(e.target.value))} />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user