refactor(web): remove frontend dashboard files
Delete all React components, pages, hooks, contexts, styles, and build scripts. The web module now serves as an API-only server.
This commit is contained in:
syntaxbullet
245
web/build.ts
245
web/build.ts
@@ -1,245 +0,0 @@
|
|||||||
#!/usr/bin/env bun
|
|
||||||
import plugin from "bun-plugin-tailwind";
|
|
||||||
import { existsSync } from "fs";
|
|
||||||
import { rm } from "fs/promises";
|
|
||||||
import path from "path";
|
|
||||||
|
|
||||||
if (process.argv.includes("--help") || process.argv.includes("-h")) {
|
|
||||||
console.log(`
|
|
||||||
🏗️ Bun Build Script
|
|
||||||
|
|
||||||
Usage: bun run build.ts [options]
|
|
||||||
|
|
||||||
Common Options:
|
|
||||||
--outdir <path> Output directory (default: "dist")
|
|
||||||
--minify Enable minification (or --minify.whitespace, --minify.syntax, etc)
|
|
||||||
--sourcemap <type> Sourcemap type: none|linked|inline|external
|
|
||||||
--target <target> Build target: browser|bun|node
|
|
||||||
--format <format> Output format: esm|cjs|iife
|
|
||||||
--splitting Enable code splitting
|
|
||||||
--packages <type> Package handling: bundle|external
|
|
||||||
--public-path <path> Public path for assets
|
|
||||||
--env <mode> Environment handling: inline|disable|prefix*
|
|
||||||
--conditions <list> Package.json export conditions (comma separated)
|
|
||||||
--external <list> External packages (comma separated)
|
|
||||||
--banner <text> Add banner text to output
|
|
||||||
--footer <text> Add footer text to output
|
|
||||||
--define <obj> Define global constants (e.g. --define.VERSION=1.0.0)
|
|
||||||
--help, -h Show this help message
|
|
||||||
|
|
||||||
Example:
|
|
||||||
bun run build.ts --outdir=dist --minify --sourcemap=linked --external=react,react-dom
|
|
||||||
`);
|
|
||||||
process.exit(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
const toCamelCase = (str: string): string => str.replace(/-([a-z])/g, g => g[1]?.toUpperCase() || "");
|
|
||||||
|
|
||||||
const parseValue = (value: string): any => {
|
|
||||||
if (value === "true") return true;
|
|
||||||
if (value === "false") return false;
|
|
||||||
|
|
||||||
if (/^\d+$/.test(value)) return parseInt(value, 10);
|
|
||||||
if (/^\d*\.\d+$/.test(value)) return parseFloat(value);
|
|
||||||
|
|
||||||
if (value.includes(",")) return value.split(",").map(v => v.trim());
|
|
||||||
|
|
||||||
return value;
|
|
||||||
};
|
|
||||||
|
|
||||||
function parseArgs(): Partial<Bun.BuildConfig> {
|
|
||||||
const config: Partial<Bun.BuildConfig> = {};
|
|
||||||
const args = process.argv.slice(2);
|
|
||||||
|
|
||||||
for (let i = 0; i < args.length; i++) {
|
|
||||||
const arg = args[i];
|
|
||||||
if (arg === undefined) continue;
|
|
||||||
if (!arg.startsWith("--")) continue;
|
|
||||||
|
|
||||||
if (arg.startsWith("--no-")) {
|
|
||||||
const key = toCamelCase(arg.slice(5));
|
|
||||||
// @ts-ignore
|
|
||||||
config[key] = false;
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!arg.includes("=") && (i === args.length - 1 || args[i + 1]?.startsWith("--"))) {
|
|
||||||
const key = toCamelCase(arg.slice(2));
|
|
||||||
// @ts-ignore
|
|
||||||
config[key] = true;
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
let key: string;
|
|
||||||
let value: string;
|
|
||||||
|
|
||||||
if (arg.includes("=")) {
|
|
||||||
[key, value] = arg.slice(2).split("=", 2) as [string, string];
|
|
||||||
} else {
|
|
||||||
key = arg.slice(2);
|
|
||||||
value = args[++i] ?? "";
|
|
||||||
}
|
|
||||||
|
|
||||||
key = toCamelCase(key);
|
|
||||||
|
|
||||||
if (key.includes(".")) {
|
|
||||||
const [parentKey, childKey] = key.split(".");
|
|
||||||
// @ts-ignore
|
|
||||||
config[parentKey] = config[parentKey] || {};
|
|
||||||
// @ts-ignore
|
|
||||||
config[parentKey][childKey] = parseValue(value);
|
|
||||||
} else {
|
|
||||||
// @ts-ignore
|
|
||||||
config[key] = parseValue(value);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return config;
|
|
||||||
}
|
|
||||||
|
|
||||||
const formatFileSize = (bytes: number): string => {
|
|
||||||
const units = ["B", "KB", "MB", "GB"];
|
|
||||||
let size = bytes;
|
|
||||||
let unitIndex = 0;
|
|
||||||
|
|
||||||
while (size >= 1024 && unitIndex < units.length - 1) {
|
|
||||||
size /= 1024;
|
|
||||||
unitIndex++;
|
|
||||||
}
|
|
||||||
|
|
||||||
return `${size.toFixed(2)} ${units[unitIndex]}`;
|
|
||||||
};
|
|
||||||
|
|
||||||
console.log("\n🚀 Starting build process...\n");
|
|
||||||
|
|
||||||
const cliConfig = parseArgs();
|
|
||||||
const outdir = cliConfig.outdir || path.join(process.cwd(), "dist");
|
|
||||||
|
|
||||||
if (existsSync(outdir)) {
|
|
||||||
console.log(`🗑️ Cleaning previous build at ${outdir}`);
|
|
||||||
await rm(outdir, { recursive: true, force: true });
|
|
||||||
}
|
|
||||||
|
|
||||||
const start = performance.now();
|
|
||||||
|
|
||||||
const entrypoints = [...new Bun.Glob("**.html").scanSync("src")]
|
|
||||||
.map(a => path.resolve("src", a))
|
|
||||||
.filter(dir => !dir.includes("node_modules"));
|
|
||||||
console.log(`📄 Found ${entrypoints.length} HTML ${entrypoints.length === 1 ? "file" : "files"} to process\n`);
|
|
||||||
|
|
||||||
const build = async () => {
|
|
||||||
const result = await Bun.build({
|
|
||||||
entrypoints,
|
|
||||||
outdir,
|
|
||||||
plugins: [plugin],
|
|
||||||
minify: true,
|
|
||||||
target: "browser",
|
|
||||||
sourcemap: "linked",
|
|
||||||
publicPath: "/", // Use absolute paths for SPA routing compatibility
|
|
||||||
define: {
|
|
||||||
"process.env.NODE_ENV": JSON.stringify((cliConfig as any).watch ? "development" : "production"),
|
|
||||||
},
|
|
||||||
...cliConfig,
|
|
||||||
});
|
|
||||||
|
|
||||||
const outputTable = result.outputs.map(output => ({
|
|
||||||
File: path.relative(process.cwd(), output.path),
|
|
||||||
Type: output.kind,
|
|
||||||
Size: formatFileSize(output.size),
|
|
||||||
}));
|
|
||||||
|
|
||||||
console.table(outputTable);
|
|
||||||
return result;
|
|
||||||
};
|
|
||||||
|
|
||||||
const result = await build();
|
|
||||||
|
|
||||||
const end = performance.now();
|
|
||||||
const buildTime = (end - start).toFixed(2);
|
|
||||||
console.log(`\n✅ Build completed in ${buildTime}ms\n`);
|
|
||||||
|
|
||||||
if ((cliConfig as any).watch) {
|
|
||||||
console.log("👀 Watching for changes...\n");
|
|
||||||
|
|
||||||
// Polling-based file watcher for Docker compatibility
|
|
||||||
// Docker volumes don't propagate filesystem events (inotify) reliably
|
|
||||||
const srcDir = path.join(process.cwd(), "src");
|
|
||||||
const POLL_INTERVAL_MS = 1000;
|
|
||||||
let lastMtimes = new Map<string, number>();
|
|
||||||
let isRebuilding = false;
|
|
||||||
|
|
||||||
// Collect all file mtimes in src directory
|
|
||||||
const collectMtimes = async (): Promise<Map<string, number>> => {
|
|
||||||
const mtimes = new Map<string, number>();
|
|
||||||
const glob = new Bun.Glob("**/*.{ts,tsx,js,jsx,css,html}");
|
|
||||||
|
|
||||||
for await (const file of glob.scan({ cwd: srcDir, absolute: true })) {
|
|
||||||
try {
|
|
||||||
const stat = await Bun.file(file).stat();
|
|
||||||
if (stat) {
|
|
||||||
mtimes.set(file, stat.mtime.getTime());
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
// File may have been deleted, skip
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return mtimes;
|
|
||||||
};
|
|
||||||
|
|
||||||
// Initial collection
|
|
||||||
lastMtimes = await collectMtimes();
|
|
||||||
|
|
||||||
// Polling loop
|
|
||||||
const poll = async () => {
|
|
||||||
if (isRebuilding) return;
|
|
||||||
|
|
||||||
const currentMtimes = await collectMtimes();
|
|
||||||
const changedFiles: string[] = [];
|
|
||||||
|
|
||||||
// Check for new or modified files
|
|
||||||
for (const [file, mtime] of currentMtimes) {
|
|
||||||
const lastMtime = lastMtimes.get(file);
|
|
||||||
if (lastMtime === undefined || lastMtime < mtime) {
|
|
||||||
changedFiles.push(path.relative(srcDir, file));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check for deleted files
|
|
||||||
for (const file of lastMtimes.keys()) {
|
|
||||||
if (!currentMtimes.has(file)) {
|
|
||||||
changedFiles.push(path.relative(srcDir, file) + " (deleted)");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (changedFiles.length > 0) {
|
|
||||||
isRebuilding = true;
|
|
||||||
console.log(`\n🔄 Changes detected:`);
|
|
||||||
changedFiles.forEach(f => console.log(` • ${f}`));
|
|
||||||
console.log("");
|
|
||||||
|
|
||||||
try {
|
|
||||||
const rebuildStart = performance.now();
|
|
||||||
await build();
|
|
||||||
const rebuildEnd = performance.now();
|
|
||||||
console.log(`\n✅ Rebuild completed in ${(rebuildEnd - rebuildStart).toFixed(2)}ms\n`);
|
|
||||||
} catch (err) {
|
|
||||||
console.error("❌ Rebuild failed:", err);
|
|
||||||
}
|
|
||||||
|
|
||||||
lastMtimes = currentMtimes;
|
|
||||||
isRebuilding = false;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const interval = setInterval(poll, POLL_INTERVAL_MS);
|
|
||||||
|
|
||||||
// Handle manual exit
|
|
||||||
process.on("SIGINT", () => {
|
|
||||||
clearInterval(interval);
|
|
||||||
console.log("\n👋 Stopping build watcher...");
|
|
||||||
process.exit(0);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Keep process alive
|
|
||||||
process.stdin.resume();
|
|
||||||
}
|
|
||||||
@@ -1,21 +0,0 @@
|
|||||||
{
|
|
||||||
"$schema": "https://ui.shadcn.com/schema.json",
|
|
||||||
"style": "new-york",
|
|
||||||
"rsc": false,
|
|
||||||
"tsx": true,
|
|
||||||
"tailwind": {
|
|
||||||
"config": "",
|
|
||||||
"css": "styles/globals.css",
|
|
||||||
"baseColor": "neutral",
|
|
||||||
"cssVariables": true,
|
|
||||||
"prefix": ""
|
|
||||||
},
|
|
||||||
"aliases": {
|
|
||||||
"components": "@/components",
|
|
||||||
"utils": "@/lib/utils",
|
|
||||||
"ui": "@/components/ui",
|
|
||||||
"lib": "@/lib",
|
|
||||||
"hooks": "@/hooks"
|
|
||||||
},
|
|
||||||
"iconLibrary": "lucide"
|
|
||||||
}
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
|
|
||||||
import "./index.css";
|
|
||||||
|
|
||||||
import { DesignSystem } from "./pages/DesignSystem";
|
|
||||||
import { AdminQuests } from "./pages/AdminQuests";
|
|
||||||
import { AdminOverview } from "./pages/admin/Overview";
|
|
||||||
import { AdminItems } from "./pages/admin/Items";
|
|
||||||
|
|
||||||
import { Home } from "./pages/Home";
|
|
||||||
import { Toaster } from "sonner";
|
|
||||||
import { NavigationProvider } from "./contexts/navigation-context";
|
|
||||||
import { MainLayout } from "./components/layout/main-layout";
|
|
||||||
|
|
||||||
import { SettingsLayout } from "./pages/settings/SettingsLayout";
|
|
||||||
import { GeneralSettings } from "./pages/settings/General";
|
|
||||||
import { EconomySettings } from "./pages/settings/Economy";
|
|
||||||
import { SystemsSettings } from "./pages/settings/Systems";
|
|
||||||
import { RolesSettings } from "./pages/settings/Roles";
|
|
||||||
|
|
||||||
export function App() {
|
|
||||||
return (
|
|
||||||
<BrowserRouter>
|
|
||||||
<NavigationProvider>
|
|
||||||
<Toaster richColors position="top-right" theme="dark" />
|
|
||||||
<MainLayout>
|
|
||||||
<Routes>
|
|
||||||
|
|
||||||
<Route path="/design-system" element={<DesignSystem />} />
|
|
||||||
<Route path="/admin" element={<Navigate to="/admin/overview" replace />} />
|
|
||||||
<Route path="/admin/overview" element={<AdminOverview />} />
|
|
||||||
<Route path="/admin/quests" element={<AdminQuests />} />
|
|
||||||
<Route path="/admin/items" element={<AdminItems />} />
|
|
||||||
|
|
||||||
|
|
||||||
<Route path="/settings" element={<SettingsLayout />}>
|
|
||||||
<Route index element={<Navigate to="/settings/general" replace />} />
|
|
||||||
<Route path="general" element={<GeneralSettings />} />
|
|
||||||
<Route path="economy" element={<EconomySettings />} />
|
|
||||||
<Route path="systems" element={<SystemsSettings />} />
|
|
||||||
<Route path="roles" element={<RolesSettings />} />
|
|
||||||
</Route>
|
|
||||||
|
|
||||||
<Route path="/" element={<Home />} />
|
|
||||||
</Routes>
|
|
||||||
</MainLayout>
|
|
||||||
</NavigationProvider>
|
|
||||||
</BrowserRouter>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default App;
|
|
||||||
|
|
||||||
@@ -1,164 +0,0 @@
|
|||||||
import React, { useEffect, useState } from "react";
|
|
||||||
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts";
|
|
||||||
import { Card, CardHeader, CardTitle, CardContent } from "./ui/card";
|
|
||||||
import { Activity } from "lucide-react";
|
|
||||||
import { cn } from "../lib/utils";
|
|
||||||
import type { ActivityData } from "@shared/modules/dashboard/dashboard.types";
|
|
||||||
|
|
||||||
interface ActivityChartProps {
|
|
||||||
className?: string;
|
|
||||||
data?: ActivityData[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export function ActivityChart({ className, data: providedData }: ActivityChartProps) {
|
|
||||||
const [data, setData] = useState<any[]>([]); // using any[] for the displayTime extension
|
|
||||||
const [isLoading, setIsLoading] = useState(!providedData);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (providedData) {
|
|
||||||
// Process provided data
|
|
||||||
const formatted = providedData.map((item) => ({
|
|
||||||
...item,
|
|
||||||
displayTime: new Date(item.hour).getHours().toString().padStart(2, '0') + ':00',
|
|
||||||
}));
|
|
||||||
setData(formatted);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
let mounted = true;
|
|
||||||
|
|
||||||
async function fetchActivity() {
|
|
||||||
try {
|
|
||||||
const response = await fetch("/api/stats/activity");
|
|
||||||
if (!response.ok) throw new Error("Failed to fetch activity data");
|
|
||||||
const result = await response.json();
|
|
||||||
|
|
||||||
if (mounted) {
|
|
||||||
// Normalize data: ensure we have 24 hours format
|
|
||||||
// The API returns { hour: ISOString, commands: number, transactions: number }
|
|
||||||
// We want to format hour to readable time
|
|
||||||
const formatted = result.map((item: ActivityData) => ({
|
|
||||||
...item,
|
|
||||||
displayTime: new Date(item.hour).getHours().toString().padStart(2, '0') + ':00',
|
|
||||||
}));
|
|
||||||
|
|
||||||
// Sort by time just in case, though API should handle it
|
|
||||||
setData(formatted);
|
|
||||||
|
|
||||||
// Only set loading to false on the first load to avoid flickering
|
|
||||||
setIsLoading(false);
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
if (mounted) {
|
|
||||||
console.error(err);
|
|
||||||
setError("Failed to load activity data");
|
|
||||||
setIsLoading(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
fetchActivity();
|
|
||||||
|
|
||||||
// Refresh every 60 seconds
|
|
||||||
const interval = setInterval(fetchActivity, 60000);
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
mounted = false;
|
|
||||||
clearInterval(interval);
|
|
||||||
};
|
|
||||||
}, [providedData]);
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
return (
|
|
||||||
<Card className={cn("glass-card", className)}>
|
|
||||||
<CardContent className="flex items-center justify-center h-[300px] text-destructive">
|
|
||||||
{error}
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card className={cn("glass-card overflow-hidden", className)}>
|
|
||||||
<CardHeader className="pb-2">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Activity className="w-5 h-5 text-primary" />
|
|
||||||
<CardTitle>24h Activity</CardTitle>
|
|
||||||
</div>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<div className="h-[250px] w-full">
|
|
||||||
{isLoading ? (
|
|
||||||
<div className="h-full w-full flex items-center justify-center">
|
|
||||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<ResponsiveContainer width="100%" height="100%">
|
|
||||||
<AreaChart
|
|
||||||
data={data}
|
|
||||||
margin={{
|
|
||||||
top: 10,
|
|
||||||
right: 10,
|
|
||||||
left: 0,
|
|
||||||
bottom: 0,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<defs>
|
|
||||||
<linearGradient id="colorCommands" x1="0" y1="0" x2="0" y2="1">
|
|
||||||
<stop offset="5%" stopColor="var(--primary)" stopOpacity={0.8} />
|
|
||||||
<stop offset="95%" stopColor="var(--primary)" stopOpacity={0} />
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient id="colorTx" x1="0" y1="0" x2="0" y2="1">
|
|
||||||
<stop offset="5%" stopColor="var(--secondary)" stopOpacity={0.8} />
|
|
||||||
<stop offset="95%" stopColor="var(--secondary)" stopOpacity={0} />
|
|
||||||
</linearGradient>
|
|
||||||
</defs>
|
|
||||||
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="var(--border)" />
|
|
||||||
<XAxis
|
|
||||||
dataKey="displayTime"
|
|
||||||
stroke="var(--muted-foreground)"
|
|
||||||
fontSize={12}
|
|
||||||
tickLine={false}
|
|
||||||
axisLine={false}
|
|
||||||
/>
|
|
||||||
<YAxis
|
|
||||||
stroke="var(--muted-foreground)"
|
|
||||||
fontSize={12}
|
|
||||||
tickLine={false}
|
|
||||||
axisLine={false}
|
|
||||||
tickFormatter={(value) => `${value}`}
|
|
||||||
/>
|
|
||||||
<Tooltip
|
|
||||||
contentStyle={{
|
|
||||||
backgroundColor: "var(--card)",
|
|
||||||
borderColor: "var(--border)",
|
|
||||||
borderRadius: "calc(var(--radius) + 2px)",
|
|
||||||
color: "var(--foreground)"
|
|
||||||
}}
|
|
||||||
itemStyle={{ color: "var(--foreground)" }}
|
|
||||||
/>
|
|
||||||
<Area
|
|
||||||
type="monotone"
|
|
||||||
dataKey="commands"
|
|
||||||
name="Commands"
|
|
||||||
stroke="var(--primary)"
|
|
||||||
fillOpacity={1}
|
|
||||||
fill="url(#colorCommands)"
|
|
||||||
/>
|
|
||||||
<Area
|
|
||||||
type="monotone"
|
|
||||||
dataKey="transactions"
|
|
||||||
name="Transactions"
|
|
||||||
stroke="var(--secondary)"
|
|
||||||
fillOpacity={1}
|
|
||||||
fill="url(#colorTx)"
|
|
||||||
/>
|
|
||||||
</AreaChart>
|
|
||||||
</ResponsiveContainer>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,235 +0,0 @@
|
|||||||
import React, { useEffect, useState, useMemo } from "react";
|
|
||||||
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from "./ui/sheet";
|
|
||||||
import { ScrollArea } from "./ui/scroll-area";
|
|
||||||
import { Switch } from "./ui/switch";
|
|
||||||
import { Badge } from "./ui/badge";
|
|
||||||
import { Loader2, Terminal, Sparkles, Coins, Shield, Backpack, TrendingUp, MessageSquare, User } from "lucide-react";
|
|
||||||
import { cn } from "../lib/utils";
|
|
||||||
import { toast } from "sonner";
|
|
||||||
|
|
||||||
interface Command {
|
|
||||||
name: string;
|
|
||||||
category: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface CommandsDrawerProps {
|
|
||||||
open: boolean;
|
|
||||||
onOpenChange: (open: boolean) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Category metadata for visual styling
|
|
||||||
const CATEGORY_CONFIG: Record<string, { label: string; color: string; icon: React.ElementType }> = {
|
|
||||||
admin: { label: "Admin", color: "bg-red-500/20 text-red-400 border-red-500/30", icon: Shield },
|
|
||||||
economy: { label: "Economy", color: "bg-amber-500/20 text-amber-400 border-amber-500/30", icon: Coins },
|
|
||||||
leveling: { label: "Leveling", color: "bg-emerald-500/20 text-emerald-400 border-emerald-500/30", icon: TrendingUp },
|
|
||||||
inventory: { label: "Inventory", color: "bg-blue-500/20 text-blue-400 border-blue-500/30", icon: Backpack },
|
|
||||||
quest: { label: "Quests", color: "bg-purple-500/20 text-purple-400 border-purple-500/30", icon: Sparkles },
|
|
||||||
feedback: { label: "Feedback", color: "bg-cyan-500/20 text-cyan-400 border-cyan-500/30", icon: MessageSquare },
|
|
||||||
user: { label: "User", color: "bg-pink-500/20 text-pink-400 border-pink-500/30", icon: User },
|
|
||||||
uncategorized: { label: "Other", color: "bg-zinc-500/20 text-zinc-400 border-zinc-500/30", icon: Terminal },
|
|
||||||
};
|
|
||||||
|
|
||||||
export function CommandsDrawer({ open, onOpenChange }: CommandsDrawerProps) {
|
|
||||||
const [commands, setCommands] = useState<Command[]>([]);
|
|
||||||
const [enabledState, setEnabledState] = useState<Record<string, boolean>>({});
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
const [saving, setSaving] = useState<string | null>(null);
|
|
||||||
|
|
||||||
// Fetch commands and their enabled state
|
|
||||||
useEffect(() => {
|
|
||||||
if (open) {
|
|
||||||
setLoading(true);
|
|
||||||
Promise.all([
|
|
||||||
fetch("/api/settings/meta").then(res => res.json()),
|
|
||||||
fetch("/api/settings").then(res => res.json()),
|
|
||||||
]).then(([meta, config]) => {
|
|
||||||
setCommands(meta.commands || []);
|
|
||||||
// Build enabled state from config.commands (undefined = enabled by default)
|
|
||||||
const state: Record<string, boolean> = {};
|
|
||||||
for (const cmd of meta.commands || []) {
|
|
||||||
state[cmd.name] = config.commands?.[cmd.name] !== false;
|
|
||||||
}
|
|
||||||
setEnabledState(state);
|
|
||||||
}).catch(err => {
|
|
||||||
toast.error("Failed to load commands", {
|
|
||||||
description: "Unable to fetch command list. Please try again."
|
|
||||||
});
|
|
||||||
console.error(err);
|
|
||||||
}).finally(() => {
|
|
||||||
setLoading(false);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, [open]);
|
|
||||||
|
|
||||||
// Group commands by category
|
|
||||||
const groupedCommands = useMemo(() => {
|
|
||||||
const groups: Record<string, Command[]> = {};
|
|
||||||
for (const cmd of commands) {
|
|
||||||
const cat = cmd.category || "uncategorized";
|
|
||||||
if (!groups[cat]) groups[cat] = [];
|
|
||||||
groups[cat].push(cmd);
|
|
||||||
}
|
|
||||||
// Sort categories: admin first, then alphabetically
|
|
||||||
const sortedCategories = Object.keys(groups).sort((a, b) => {
|
|
||||||
if (a === "admin") return -1;
|
|
||||||
if (b === "admin") return 1;
|
|
||||||
return a.localeCompare(b);
|
|
||||||
});
|
|
||||||
return sortedCategories.map(cat => ({ category: cat, commands: groups[cat]! }));
|
|
||||||
}, [commands]);
|
|
||||||
|
|
||||||
// Toggle command enabled state
|
|
||||||
const toggleCommand = async (commandName: string, enabled: boolean) => {
|
|
||||||
setSaving(commandName);
|
|
||||||
try {
|
|
||||||
const response = await fetch("/api/settings", {
|
|
||||||
method: "POST",
|
|
||||||
headers: { "Content-Type": "application/json" },
|
|
||||||
body: JSON.stringify({
|
|
||||||
commands: {
|
|
||||||
[commandName]: enabled,
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) throw new Error("Failed to save");
|
|
||||||
|
|
||||||
setEnabledState(prev => ({ ...prev, [commandName]: enabled }));
|
|
||||||
toast.success(`/${commandName} ${enabled ? "enabled" : "disabled"}`, {
|
|
||||||
description: `Command has been ${enabled ? "enabled" : "disabled"} successfully.`,
|
|
||||||
duration: 2000,
|
|
||||||
id: "command-toggle",
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
toast.error("Failed to toggle command", {
|
|
||||||
description: "Unable to update command status. Please try again."
|
|
||||||
});
|
|
||||||
console.error(error);
|
|
||||||
} finally {
|
|
||||||
setSaving(null);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Sheet open={open} onOpenChange={onOpenChange} modal={false}>
|
|
||||||
<SheetContent side="right" className="w-[800px] sm:max-w-[800px] p-0 flex flex-col gap-0 border-l border-border/50 glass-card bg-background/95 text-foreground">
|
|
||||||
<SheetHeader className="p-6 border-b border-border/50">
|
|
||||||
<SheetTitle className="flex items-center gap-2">
|
|
||||||
<Terminal className="w-5 h-5 text-primary" />
|
|
||||||
Command Manager
|
|
||||||
</SheetTitle>
|
|
||||||
<SheetDescription>
|
|
||||||
Enable or disable commands. Changes take effect immediately.
|
|
||||||
</SheetDescription>
|
|
||||||
</SheetHeader>
|
|
||||||
|
|
||||||
{loading ? (
|
|
||||||
<div className="flex-1 flex items-center justify-center">
|
|
||||||
<Loader2 className="w-8 h-8 animate-spin text-primary" />
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="flex-1 min-h-0 overflow-hidden">
|
|
||||||
<ScrollArea className="h-full">
|
|
||||||
<div className="space-y-6 p-6 pb-8">
|
|
||||||
{groupedCommands.map(({ category, commands: cmds }) => {
|
|
||||||
const config = (CATEGORY_CONFIG[category] ?? CATEGORY_CONFIG.uncategorized)!;
|
|
||||||
const IconComponent = config.icon;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div key={category} className="space-y-3">
|
|
||||||
{/* Category Header */}
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<IconComponent className="w-4 h-4 text-muted-foreground" />
|
|
||||||
<h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider">
|
|
||||||
{config.label}
|
|
||||||
</h3>
|
|
||||||
<Badge variant="outline" className="text-[10px] px-1.5 py-0">
|
|
||||||
{cmds.length}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Commands Grid */}
|
|
||||||
<div className="grid grid-cols-2 gap-3">
|
|
||||||
{cmds.map(cmd => {
|
|
||||||
const isEnabled = enabledState[cmd.name] !== false;
|
|
||||||
const isSaving = saving === cmd.name;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={cmd.name}
|
|
||||||
className={cn(
|
|
||||||
"group relative rounded-lg overflow-hidden transition-all duration-300",
|
|
||||||
"bg-gradient-to-r from-card/80 to-card/40",
|
|
||||||
"border border-border/20 hover:border-border/40",
|
|
||||||
"hover:shadow-lg hover:shadow-primary/5",
|
|
||||||
"hover:translate-x-1",
|
|
||||||
!isEnabled && "opacity-40 grayscale",
|
|
||||||
isSaving && "animate-pulse"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{/* Category color accent bar */}
|
|
||||||
<div className={cn(
|
|
||||||
"absolute left-0 top-0 bottom-0 w-1 transition-all duration-300",
|
|
||||||
config.color.split(' ')[0],
|
|
||||||
"group-hover:w-1.5"
|
|
||||||
)} />
|
|
||||||
|
|
||||||
<div className="p-3 pl-4 flex items-center justify-between">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
{/* Icon with glow effect */}
|
|
||||||
<div className={cn(
|
|
||||||
"w-9 h-9 rounded-lg flex items-center justify-center",
|
|
||||||
"bg-gradient-to-br",
|
|
||||||
config.color,
|
|
||||||
"shadow-sm",
|
|
||||||
isEnabled && "group-hover:shadow-md group-hover:scale-105",
|
|
||||||
"transition-all duration-300"
|
|
||||||
)}>
|
|
||||||
<IconComponent className="w-4 h-4" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex flex-col">
|
|
||||||
<span className={cn(
|
|
||||||
"font-mono text-sm font-semibold tracking-tight",
|
|
||||||
"transition-colors duration-300",
|
|
||||||
isEnabled ? "text-foreground" : "text-muted-foreground"
|
|
||||||
)}>
|
|
||||||
/{cmd.name}
|
|
||||||
</span>
|
|
||||||
<span className="text-[10px] text-muted-foreground/70 uppercase tracking-wider">
|
|
||||||
{category}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Switch
|
|
||||||
checked={isEnabled}
|
|
||||||
onCheckedChange={(checked) => toggleCommand(cmd.name, checked)}
|
|
||||||
disabled={isSaving}
|
|
||||||
className={cn(
|
|
||||||
"transition-opacity duration-300",
|
|
||||||
!isEnabled && "opacity-60"
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
|
|
||||||
{groupedCommands.length === 0 && (
|
|
||||||
<div className="text-center text-muted-foreground py-8">
|
|
||||||
No commands found.
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</ScrollArea>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</SheetContent>
|
|
||||||
</Sheet>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,397 +0,0 @@
|
|||||||
/**
|
|
||||||
* EffectEditor Component
|
|
||||||
* Dynamic form for adding/editing item effects with all 7 effect types.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { useState, useCallback } from "react";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { Input } from "@/components/ui/input";
|
|
||||||
import { Textarea } from "@/components/ui/textarea";
|
|
||||||
import { Label } from "@/components/ui/label";
|
|
||||||
import { Card, CardContent } from "@/components/ui/card";
|
|
||||||
import {
|
|
||||||
Select,
|
|
||||||
SelectContent,
|
|
||||||
SelectItem,
|
|
||||||
SelectTrigger,
|
|
||||||
SelectValue,
|
|
||||||
} from "@/components/ui/select";
|
|
||||||
import {
|
|
||||||
Accordion,
|
|
||||||
AccordionContent,
|
|
||||||
AccordionItem,
|
|
||||||
AccordionTrigger,
|
|
||||||
} from "@/components/ui/accordion";
|
|
||||||
import { LootTableBuilder } from "@/components/loot-table-builder";
|
|
||||||
import {
|
|
||||||
Plus,
|
|
||||||
Trash2,
|
|
||||||
Sparkles,
|
|
||||||
Coins,
|
|
||||||
MessageSquare,
|
|
||||||
Zap,
|
|
||||||
Clock,
|
|
||||||
Palette,
|
|
||||||
Package,
|
|
||||||
} from "lucide-react";
|
|
||||||
import { cn } from "@/lib/utils";
|
|
||||||
|
|
||||||
// Effect types matching the backend
|
|
||||||
const EFFECT_TYPES = [
|
|
||||||
{ value: "ADD_XP", label: "Add XP", icon: Sparkles, color: "text-blue-400" },
|
|
||||||
{ value: "ADD_BALANCE", label: "Add Balance", icon: Coins, color: "text-amber-400" },
|
|
||||||
{ value: "REPLY_MESSAGE", label: "Reply Message", icon: MessageSquare, color: "text-green-400" },
|
|
||||||
{ value: "XP_BOOST", label: "XP Boost", icon: Zap, color: "text-purple-400" },
|
|
||||||
{ value: "TEMP_ROLE", label: "Temporary Role", icon: Clock, color: "text-orange-400" },
|
|
||||||
{ value: "COLOR_ROLE", label: "Color Role", icon: Palette, color: "text-pink-400" },
|
|
||||||
{ value: "LOOTBOX", label: "Lootbox", icon: Package, color: "text-yellow-400" },
|
|
||||||
];
|
|
||||||
|
|
||||||
interface Effect {
|
|
||||||
type: string;
|
|
||||||
[key: string]: any;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface EffectEditorProps {
|
|
||||||
effects: Effect[];
|
|
||||||
onChange: (effects: Effect[]) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const getDefaultEffect = (type: string): Effect => {
|
|
||||||
switch (type) {
|
|
||||||
case "ADD_XP":
|
|
||||||
return { type, amount: 100 };
|
|
||||||
case "ADD_BALANCE":
|
|
||||||
return { type, amount: 100 };
|
|
||||||
case "REPLY_MESSAGE":
|
|
||||||
return { type, message: "" };
|
|
||||||
case "XP_BOOST":
|
|
||||||
return { type, multiplier: 2, durationMinutes: 60 };
|
|
||||||
case "TEMP_ROLE":
|
|
||||||
return { type, roleId: "", durationMinutes: 60 };
|
|
||||||
case "COLOR_ROLE":
|
|
||||||
return { type, roleId: "" };
|
|
||||||
case "LOOTBOX":
|
|
||||||
return { type, pool: [] };
|
|
||||||
default:
|
|
||||||
return { type };
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const getEffectSummary = (effect: Effect): string => {
|
|
||||||
switch (effect.type) {
|
|
||||||
case "ADD_XP":
|
|
||||||
return `+${effect.amount} XP`;
|
|
||||||
case "ADD_BALANCE":
|
|
||||||
return `+${effect.amount} coins`;
|
|
||||||
case "REPLY_MESSAGE":
|
|
||||||
return effect.message ? `"${effect.message.slice(0, 30)}..."` : "No message";
|
|
||||||
case "XP_BOOST":
|
|
||||||
return `${effect.multiplier}x for ${effect.durationMinutes || effect.durationHours * 60 || effect.durationSeconds / 60}m`;
|
|
||||||
case "TEMP_ROLE":
|
|
||||||
return `Role for ${effect.durationMinutes || effect.durationHours * 60 || effect.durationSeconds / 60}m`;
|
|
||||||
case "COLOR_ROLE":
|
|
||||||
return effect.roleId ? `Role: ${effect.roleId}` : "No role set";
|
|
||||||
case "LOOTBOX":
|
|
||||||
return `${effect.pool?.length || 0} drops`;
|
|
||||||
default:
|
|
||||||
return effect.type;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export function EffectEditor({ effects, onChange }: EffectEditorProps) {
|
|
||||||
const [expandedItems, setExpandedItems] = useState<string[]>([]);
|
|
||||||
|
|
||||||
const addEffect = useCallback(() => {
|
|
||||||
const newEffect = getDefaultEffect("ADD_XP");
|
|
||||||
const newEffects = [...effects, newEffect];
|
|
||||||
onChange(newEffects);
|
|
||||||
setExpandedItems(prev => [...prev, `effect-${newEffects.length - 1}`]);
|
|
||||||
}, [effects, onChange]);
|
|
||||||
|
|
||||||
const removeEffect = useCallback((index: number) => {
|
|
||||||
const newEffects = effects.filter((_, i) => i !== index);
|
|
||||||
onChange(newEffects);
|
|
||||||
}, [effects, onChange]);
|
|
||||||
|
|
||||||
const updateEffect = useCallback((index: number, updates: Partial<Effect>) => {
|
|
||||||
const newEffects = effects.map((effect, i) =>
|
|
||||||
i === index ? { ...effect, ...updates } : effect
|
|
||||||
);
|
|
||||||
onChange(newEffects);
|
|
||||||
}, [effects, onChange]);
|
|
||||||
|
|
||||||
const changeEffectType = useCallback((index: number, newType: string) => {
|
|
||||||
const newEffects = effects.map((effect, i) =>
|
|
||||||
i === index ? getDefaultEffect(newType) : effect
|
|
||||||
);
|
|
||||||
onChange(newEffects);
|
|
||||||
}, [effects, onChange]);
|
|
||||||
|
|
||||||
if (effects.length === 0) {
|
|
||||||
return (
|
|
||||||
<div className="border border-dashed border-border/50 rounded-lg p-6 text-center">
|
|
||||||
<p className="text-sm text-muted-foreground mb-3">
|
|
||||||
No effects added yet
|
|
||||||
</p>
|
|
||||||
<Button type="button" variant="outline" size="sm" onClick={addEffect}>
|
|
||||||
<Plus className="h-4 w-4 mr-2" />
|
|
||||||
Add Effect
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-3">
|
|
||||||
<Accordion
|
|
||||||
type="multiple"
|
|
||||||
value={expandedItems}
|
|
||||||
onValueChange={setExpandedItems}
|
|
||||||
className="space-y-2"
|
|
||||||
>
|
|
||||||
{effects.map((effect, index) => {
|
|
||||||
const effectType = EFFECT_TYPES.find(t => t.value === effect.type);
|
|
||||||
const Icon = effectType?.icon || Sparkles;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<AccordionItem
|
|
||||||
key={index}
|
|
||||||
value={`effect-${index}`}
|
|
||||||
className="border border-border/50 rounded-lg bg-card/30 overflow-hidden"
|
|
||||||
>
|
|
||||||
<AccordionTrigger className="px-4 py-3 hover:no-underline hover:bg-muted/30">
|
|
||||||
<div className="flex items-center gap-3 flex-1">
|
|
||||||
<Icon className={cn("h-4 w-4", effectType?.color)} />
|
|
||||||
<span className="font-medium">
|
|
||||||
{effectType?.label || effect.type}
|
|
||||||
</span>
|
|
||||||
<span className="text-sm text-muted-foreground">
|
|
||||||
{getEffectSummary(effect)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</AccordionTrigger>
|
|
||||||
<AccordionContent className="px-4 pb-4">
|
|
||||||
<div className="space-y-4 pt-2">
|
|
||||||
{/* Effect Type Selector */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label>Effect Type</Label>
|
|
||||||
<Select
|
|
||||||
value={effect.type}
|
|
||||||
onValueChange={(value) => changeEffectType(index, value)}
|
|
||||||
>
|
|
||||||
<SelectTrigger className="bg-background/50">
|
|
||||||
<SelectValue />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
{EFFECT_TYPES.map((type) => (
|
|
||||||
<SelectItem key={type.value} value={type.value}>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<type.icon className={cn("h-4 w-4", type.color)} />
|
|
||||||
{type.label}
|
|
||||||
</div>
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Dynamic Fields Based on Effect Type */}
|
|
||||||
{effect.type === "ADD_XP" && (
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label>Amount</Label>
|
|
||||||
<Input
|
|
||||||
type="number"
|
|
||||||
value={effect.amount || 0}
|
|
||||||
onChange={(e) => updateEffect(index, { amount: parseInt(e.target.value) || 0 })}
|
|
||||||
className="bg-background/50"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{effect.type === "ADD_BALANCE" && (
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label>Amount</Label>
|
|
||||||
<div className="relative">
|
|
||||||
<Input
|
|
||||||
type="number"
|
|
||||||
value={effect.amount || 0}
|
|
||||||
onChange={(e) => updateEffect(index, { amount: parseInt(e.target.value) || 0 })}
|
|
||||||
className="bg-background/50 pr-10"
|
|
||||||
/>
|
|
||||||
<Coins className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-amber-400" /></div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{effect.type === "REPLY_MESSAGE" && (
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label>Message</Label>
|
|
||||||
<Textarea
|
|
||||||
value={effect.message || ""}
|
|
||||||
onChange={(e) => updateEffect(index, { message: e.target.value })}
|
|
||||||
placeholder="The message to display when used..."
|
|
||||||
className="bg-background/50 min-h-[80px]"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{effect.type === "XP_BOOST" && (
|
|
||||||
<>
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label>Multiplier</Label>
|
|
||||||
<Input
|
|
||||||
type="number"
|
|
||||||
step="0.1"
|
|
||||||
value={effect.multiplier || 2}
|
|
||||||
onChange={(e) => updateEffect(index, { multiplier: parseFloat(e.target.value) || 2 })}
|
|
||||||
className="bg-background/50"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="grid grid-cols-3 gap-2">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label>Hours</Label>
|
|
||||||
<Input
|
|
||||||
type="number"
|
|
||||||
value={effect.durationHours || 0}
|
|
||||||
onChange={(e) => updateEffect(index, {
|
|
||||||
durationHours: parseInt(e.target.value) || 0,
|
|
||||||
durationMinutes: undefined,
|
|
||||||
durationSeconds: undefined,
|
|
||||||
})}
|
|
||||||
className="bg-background/50"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label>Minutes</Label>
|
|
||||||
<Input
|
|
||||||
type="number"
|
|
||||||
value={effect.durationMinutes || 0}
|
|
||||||
onChange={(e) => updateEffect(index, {
|
|
||||||
durationMinutes: parseInt(e.target.value) || 0,
|
|
||||||
durationHours: undefined,
|
|
||||||
durationSeconds: undefined,
|
|
||||||
})}
|
|
||||||
className="bg-background/50"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label>Seconds</Label>
|
|
||||||
<Input
|
|
||||||
type="number"
|
|
||||||
value={effect.durationSeconds || 0}
|
|
||||||
onChange={(e) => updateEffect(index, {
|
|
||||||
durationSeconds: parseInt(e.target.value) || 0,
|
|
||||||
durationHours: undefined,
|
|
||||||
durationMinutes: undefined,
|
|
||||||
})}
|
|
||||||
className="bg-background/50"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{effect.type === "TEMP_ROLE" && (
|
|
||||||
<>
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label>Role ID</Label>
|
|
||||||
<Input
|
|
||||||
value={effect.roleId || ""}
|
|
||||||
onChange={(e) => updateEffect(index, { roleId: e.target.value })}
|
|
||||||
placeholder="Discord Role ID"
|
|
||||||
className="bg-background/50"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="grid grid-cols-3 gap-2">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label>Hours</Label>
|
|
||||||
<Input
|
|
||||||
type="number"
|
|
||||||
value={effect.durationHours || 0}
|
|
||||||
onChange={(e) => updateEffect(index, {
|
|
||||||
durationHours: parseInt(e.target.value) || 0,
|
|
||||||
durationMinutes: undefined,
|
|
||||||
durationSeconds: undefined,
|
|
||||||
})}
|
|
||||||
className="bg-background/50"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label>Minutes</Label>
|
|
||||||
<Input
|
|
||||||
type="number"
|
|
||||||
value={effect.durationMinutes || 0}
|
|
||||||
onChange={(e) => updateEffect(index, {
|
|
||||||
durationMinutes: parseInt(e.target.value) || 0,
|
|
||||||
durationHours: undefined,
|
|
||||||
durationSeconds: undefined,
|
|
||||||
})}
|
|
||||||
className="bg-background/50"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label>Seconds</Label>
|
|
||||||
<Input
|
|
||||||
type="number"
|
|
||||||
value={effect.durationSeconds || 0}
|
|
||||||
onChange={(e) => updateEffect(index, {
|
|
||||||
durationSeconds: parseInt(e.target.value) || 0,
|
|
||||||
durationHours: undefined,
|
|
||||||
durationMinutes: undefined,
|
|
||||||
})}
|
|
||||||
className="bg-background/50"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{effect.type === "COLOR_ROLE" && (
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label>Role ID</Label>
|
|
||||||
<Input
|
|
||||||
value={effect.roleId || ""}
|
|
||||||
onChange={(e) => updateEffect(index, { roleId: e.target.value })}
|
|
||||||
placeholder="Discord Role ID for color"
|
|
||||||
className="bg-background/50"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{effect.type === "LOOTBOX" && (
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label>Loot Table</Label>
|
|
||||||
<LootTableBuilder
|
|
||||||
pool={effect.pool || []}
|
|
||||||
onChange={(pool: unknown[]) => updateEffect(index, { pool })}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Delete Button */}
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="destructive"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => removeEffect(index)}
|
|
||||||
className="mt-2"
|
|
||||||
>
|
|
||||||
<Trash2 className="h-4 w-4 mr-2" />
|
|
||||||
Remove Effect
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</AccordionContent>
|
|
||||||
</AccordionItem>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</Accordion>
|
|
||||||
|
|
||||||
<Button type="button" variant="outline" size="sm" onClick={addEffect}>
|
|
||||||
<Plus className="h-4 w-4 mr-2" />
|
|
||||||
Add Effect
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default EffectEditor;
|
|
||||||
@@ -1,48 +0,0 @@
|
|||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,114 +0,0 @@
|
|||||||
import { useState, useCallback } from "react";
|
|
||||||
import Cropper, { type Area } from "react-easy-crop";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { Slider } from "@/components/ui/slider";
|
|
||||||
import {
|
|
||||||
Dialog,
|
|
||||||
DialogContent,
|
|
||||||
DialogFooter,
|
|
||||||
DialogHeader,
|
|
||||||
DialogTitle,
|
|
||||||
} from "@/components/ui/dialog";
|
|
||||||
import { getCroppedImg } from "@/lib/canvasUtils";
|
|
||||||
import { Loader2 } from "lucide-react";
|
|
||||||
|
|
||||||
interface ImageCropperProps {
|
|
||||||
imageSrc: string | null;
|
|
||||||
isOpen: boolean;
|
|
||||||
onClose: () => void;
|
|
||||||
onCropComplete: (croppedImage: Blob) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function ImageCropper({
|
|
||||||
imageSrc,
|
|
||||||
isOpen,
|
|
||||||
onClose,
|
|
||||||
onCropComplete,
|
|
||||||
}: ImageCropperProps) {
|
|
||||||
const [crop, setCrop] = useState({ x: 0, y: 0 });
|
|
||||||
const [zoom, setZoom] = useState(1);
|
|
||||||
const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null);
|
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
|
||||||
|
|
||||||
const onCropChange = (crop: { x: number; y: number }) => {
|
|
||||||
setCrop(crop);
|
|
||||||
};
|
|
||||||
|
|
||||||
const onZoomChange = (zoom: number) => {
|
|
||||||
setZoom(zoom);
|
|
||||||
};
|
|
||||||
|
|
||||||
const onCropCompleteHandler = useCallback(
|
|
||||||
(_croppedArea: Area, croppedAreaPixels: Area) => {
|
|
||||||
setCroppedAreaPixels(croppedAreaPixels);
|
|
||||||
},
|
|
||||||
[]
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleSave = async () => {
|
|
||||||
if (!imageSrc || !croppedAreaPixels) return;
|
|
||||||
|
|
||||||
setIsLoading(true);
|
|
||||||
try {
|
|
||||||
const croppedImage = await getCroppedImg(imageSrc, croppedAreaPixels);
|
|
||||||
if (croppedImage) {
|
|
||||||
onCropComplete(croppedImage);
|
|
||||||
onClose();
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e);
|
|
||||||
} finally {
|
|
||||||
setIsLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
|
|
||||||
<DialogContent className="sm:max-w-xl">
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle>Crop Image</DialogTitle>
|
|
||||||
</DialogHeader>
|
|
||||||
|
|
||||||
<div className="relative w-full h-80 bg-black/5 rounded-md overflow-hidden mt-4">
|
|
||||||
{imageSrc && (
|
|
||||||
<Cropper
|
|
||||||
image={imageSrc}
|
|
||||||
crop={crop}
|
|
||||||
zoom={zoom}
|
|
||||||
aspect={1}
|
|
||||||
onCropChange={onCropChange}
|
|
||||||
onCropComplete={onCropCompleteHandler}
|
|
||||||
onZoomChange={onZoomChange}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="py-4 space-y-2">
|
|
||||||
<div className="flex items-center justify-between text-sm">
|
|
||||||
<span className="text-muted-foreground">Zoom</span>
|
|
||||||
<span className="text-muted-foreground">{zoom.toFixed(1)}x</span>
|
|
||||||
</div>
|
|
||||||
<Slider
|
|
||||||
value={[zoom]}
|
|
||||||
min={1}
|
|
||||||
max={3}
|
|
||||||
step={0.1}
|
|
||||||
onValueChange={(value) => onZoomChange(value[0] ?? 1)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<DialogFooter>
|
|
||||||
<Button variant="outline" onClick={onClose} disabled={isLoading}>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
<Button onClick={handleSave} disabled={isLoading}>
|
|
||||||
{isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
|
||||||
Crop & Save
|
|
||||||
</Button>
|
|
||||||
</DialogFooter>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ImageCropper;
|
|
||||||
@@ -1,259 +0,0 @@
|
|||||||
/**
|
|
||||||
* ImageUploader Component
|
|
||||||
* Drag-and-drop image upload zone with preview.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { useState, useCallback, useRef } from "react";
|
|
||||||
import { cn } from "@/lib/utils";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { Upload, X, Image as ImageIcon, Loader2, AlertCircle } from "lucide-react";
|
|
||||||
import { ImageCropper } from "@/components/image-cropper";
|
|
||||||
|
|
||||||
interface ImageUploaderProps {
|
|
||||||
existingUrl?: string | null;
|
|
||||||
onFileSelect: (file: File | null) => void;
|
|
||||||
disabled?: boolean;
|
|
||||||
maxSizeMB?: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
const ACCEPTED_TYPES = ["image/png", "image/jpeg", "image/webp", "image/gif"];
|
|
||||||
const MAX_SIZE_DEFAULT = 15; // 15MB
|
|
||||||
|
|
||||||
export function ImageUploader({
|
|
||||||
existingUrl,
|
|
||||||
onFileSelect,
|
|
||||||
disabled,
|
|
||||||
maxSizeMB = MAX_SIZE_DEFAULT,
|
|
||||||
}: ImageUploaderProps) {
|
|
||||||
const [previewUrl, setPreviewUrl] = useState<string | null>(existingUrl || null);
|
|
||||||
const [isDragging, setIsDragging] = useState(false);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
|
||||||
|
|
||||||
// Cropper state
|
|
||||||
const [isCropperOpen, setIsCropperOpen] = useState(false);
|
|
||||||
const [tempImageSrc, setTempImageSrc] = useState<string | null>(null);
|
|
||||||
const [tempFileName, setTempFileName] = useState<string>("image.jpg");
|
|
||||||
|
|
||||||
const inputRef = useRef<HTMLInputElement>(null);
|
|
||||||
|
|
||||||
const validateFile = useCallback((file: File): string | null => {
|
|
||||||
if (!ACCEPTED_TYPES.includes(file.type)) {
|
|
||||||
return "Invalid file type. Please use PNG, JPEG, WebP, or GIF.";
|
|
||||||
}
|
|
||||||
if (file.size > maxSizeMB * 1024 * 1024) {
|
|
||||||
return `File too large. Maximum size is ${maxSizeMB}MB.`;
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
}, [maxSizeMB]);
|
|
||||||
|
|
||||||
const handleFile = useCallback((file: File) => {
|
|
||||||
setError(null);
|
|
||||||
const validationError = validateFile(file);
|
|
||||||
|
|
||||||
if (validationError) {
|
|
||||||
setError(validationError);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setIsLoading(true);
|
|
||||||
setTempFileName(file.name);
|
|
||||||
|
|
||||||
// Read file for cropper
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.onload = () => {
|
|
||||||
setTempImageSrc(reader.result as string);
|
|
||||||
setIsCropperOpen(true);
|
|
||||||
setIsLoading(false);
|
|
||||||
};
|
|
||||||
reader.onerror = () => {
|
|
||||||
setError("Failed to read file");
|
|
||||||
setIsLoading(false);
|
|
||||||
};
|
|
||||||
reader.readAsDataURL(file);
|
|
||||||
}, [validateFile]);
|
|
||||||
|
|
||||||
const handleCropComplete = useCallback((croppedBlob: Blob) => {
|
|
||||||
// Convert blob back to file
|
|
||||||
const file = new File([croppedBlob], tempFileName, { type: "image/jpeg" });
|
|
||||||
|
|
||||||
// Create preview
|
|
||||||
const url = URL.createObjectURL(croppedBlob);
|
|
||||||
setPreviewUrl(url);
|
|
||||||
|
|
||||||
// Pass to parent
|
|
||||||
onFileSelect(file);
|
|
||||||
setIsCropperOpen(false);
|
|
||||||
setTempImageSrc(null);
|
|
||||||
}, [onFileSelect, tempFileName]);
|
|
||||||
|
|
||||||
const handleDragEnter = useCallback((e: React.DragEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
if (!disabled) {
|
|
||||||
setIsDragging(true);
|
|
||||||
}
|
|
||||||
}, [disabled]);
|
|
||||||
|
|
||||||
const handleDragLeave = useCallback((e: React.DragEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
setIsDragging(false);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleDragOver = useCallback((e: React.DragEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleDrop = useCallback((e: React.DragEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
setIsDragging(false);
|
|
||||||
|
|
||||||
if (disabled) return;
|
|
||||||
|
|
||||||
const files = e.dataTransfer.files;
|
|
||||||
const file = files[0];
|
|
||||||
if (file) {
|
|
||||||
handleFile(file);
|
|
||||||
}
|
|
||||||
}, [disabled, handleFile]);
|
|
||||||
|
|
||||||
const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
const files = e.target.files;
|
|
||||||
const file = files?.[0];
|
|
||||||
if (file) {
|
|
||||||
handleFile(file);
|
|
||||||
}
|
|
||||||
}, [handleFile]);
|
|
||||||
|
|
||||||
const handleRemove = useCallback(() => {
|
|
||||||
setPreviewUrl(null);
|
|
||||||
setError(null);
|
|
||||||
onFileSelect(null);
|
|
||||||
if (inputRef.current) {
|
|
||||||
inputRef.current.value = "";
|
|
||||||
}
|
|
||||||
}, [onFileSelect]);
|
|
||||||
|
|
||||||
const handleClick = useCallback(() => {
|
|
||||||
if (!disabled) {
|
|
||||||
inputRef.current?.click();
|
|
||||||
}
|
|
||||||
}, [disabled]);
|
|
||||||
|
|
||||||
// Show preview state
|
|
||||||
if (previewUrl) {
|
|
||||||
return (
|
|
||||||
<div className="relative">
|
|
||||||
<div className="relative aspect-square max-w-[200px] rounded-lg overflow-hidden border border-border/50 bg-muted/30">
|
|
||||||
<img
|
|
||||||
src={previewUrl}
|
|
||||||
alt="Item preview"
|
|
||||||
className="w-full h-full object-contain"
|
|
||||||
/>
|
|
||||||
{!disabled && (
|
|
||||||
<div className="absolute inset-0 bg-black/50 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="secondary"
|
|
||||||
size="sm"
|
|
||||||
onClick={handleClick}
|
|
||||||
>
|
|
||||||
Replace
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="destructive"
|
|
||||||
size="sm"
|
|
||||||
onClick={handleRemove}
|
|
||||||
>
|
|
||||||
<X className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
ref={inputRef}
|
|
||||||
type="file"
|
|
||||||
accept={ACCEPTED_TYPES.join(",")}
|
|
||||||
onChange={handleInputChange}
|
|
||||||
className="hidden"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Show upload zone
|
|
||||||
return (
|
|
||||||
<div className="space-y-2">
|
|
||||||
<div
|
|
||||||
onClick={handleClick}
|
|
||||||
onDragEnter={handleDragEnter}
|
|
||||||
onDragLeave={handleDragLeave}
|
|
||||||
onDragOver={handleDragOver}
|
|
||||||
onDrop={handleDrop}
|
|
||||||
className={cn(
|
|
||||||
"relative flex flex-col items-center justify-center p-8 border-2 border-dashed rounded-lg transition-colors cursor-pointer",
|
|
||||||
isDragging && "border-primary bg-primary/5",
|
|
||||||
error && "border-destructive bg-destructive/5",
|
|
||||||
!isDragging && !error && "border-border/50 hover:border-border bg-muted/10",
|
|
||||||
disabled && "opacity-50 cursor-not-allowed"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{isLoading ? (
|
|
||||||
<Loader2 className="h-8 w-8 text-muted-foreground animate-spin" />
|
|
||||||
) : error ? (
|
|
||||||
<AlertCircle className="h-8 w-8 text-destructive" />
|
|
||||||
) : (
|
|
||||||
<div className="flex flex-col items-center gap-2 text-center">
|
|
||||||
{isDragging ? (
|
|
||||||
<Upload className="h-8 w-8 text-primary animate-bounce" />
|
|
||||||
) : (
|
|
||||||
<ImageIcon className="h-8 w-8 text-muted-foreground" />
|
|
||||||
)}
|
|
||||||
<div className="text-sm text-muted-foreground">
|
|
||||||
{isDragging ? (
|
|
||||||
<p className="text-primary font-medium">Drop to upload</p>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<p className="font-medium">Drop image or click to browse</p>
|
|
||||||
<p className="text-xs mt-1">
|
|
||||||
PNG, JPEG, WebP, GIF • Max {maxSizeMB}MB
|
|
||||||
</p>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<input
|
|
||||||
ref={inputRef}
|
|
||||||
type="file"
|
|
||||||
accept={ACCEPTED_TYPES.join(",")}
|
|
||||||
onChange={handleInputChange}
|
|
||||||
className="hidden"
|
|
||||||
disabled={disabled}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
{error && (
|
|
||||||
<p className="text-sm text-destructive flex items-center gap-1">
|
|
||||||
<AlertCircle className="h-4 w-4" />
|
|
||||||
{error}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<ImageCropper
|
|
||||||
isOpen={isCropperOpen}
|
|
||||||
onClose={() => setIsCropperOpen(false)}
|
|
||||||
onCropComplete={handleCropComplete}
|
|
||||||
imageSrc={tempImageSrc}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ImageUploader;
|
|
||||||
@@ -1,30 +0,0 @@
|
|||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,70 +0,0 @@
|
|||||||
/**
|
|
||||||
* ItemFormSheet Component
|
|
||||||
* Sheet/Drawer wrapper for ItemForm, used for create/edit from the list view.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import {
|
|
||||||
Sheet,
|
|
||||||
SheetContent,
|
|
||||||
SheetDescription,
|
|
||||||
SheetHeader,
|
|
||||||
SheetTitle,
|
|
||||||
} from "@/components/ui/sheet";
|
|
||||||
import { ItemForm } from "@/components/item-form";
|
|
||||||
import type { ItemWithUsage } from "@/hooks/use-items";
|
|
||||||
import { Package, Pencil } from "lucide-react";
|
|
||||||
|
|
||||||
interface ItemFormSheetProps {
|
|
||||||
open: boolean;
|
|
||||||
onOpenChange: (open: boolean) => void;
|
|
||||||
item: ItemWithUsage | null;
|
|
||||||
onSaved: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function ItemFormSheet({ open, onOpenChange, item, onSaved }: ItemFormSheetProps) {
|
|
||||||
const isEditMode = item !== null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Sheet open={open} onOpenChange={onOpenChange}>
|
|
||||||
<SheetContent
|
|
||||||
className="w-full sm:max-w-xl overflow-y-auto p-0"
|
|
||||||
side="right"
|
|
||||||
>
|
|
||||||
{/* Primary accent bar */}
|
|
||||||
<div className="h-1.5 bg-primary w-full" />
|
|
||||||
|
|
||||||
<div className="p-6">
|
|
||||||
<SheetHeader className="mb-8">
|
|
||||||
<SheetTitle className="text-2xl font-bold text-primary flex items-center gap-3">
|
|
||||||
{isEditMode ? (
|
|
||||||
<>
|
|
||||||
<Pencil className="h-5 w-5" />
|
|
||||||
Edit Item
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<Package className="h-5 w-5" />
|
|
||||||
Create Item
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</SheetTitle>
|
|
||||||
<SheetDescription className="text-muted-foreground">
|
|
||||||
{isEditMode
|
|
||||||
? `Update the details for "${item.name}" below.`
|
|
||||||
: "Configure a new item for the Aurora RPG."
|
|
||||||
}
|
|
||||||
</SheetDescription>
|
|
||||||
</SheetHeader>
|
|
||||||
|
|
||||||
<ItemForm
|
|
||||||
initialData={item}
|
|
||||||
onSuccess={onSaved}
|
|
||||||
onCancel={() => onOpenChange(false)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</SheetContent>
|
|
||||||
</Sheet>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ItemFormSheet;
|
|
||||||
@@ -1,380 +0,0 @@
|
|||||||
/**
|
|
||||||
* ItemForm Component
|
|
||||||
* Main form for creating and editing items with all fields and effects.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
import { useForm } from "react-hook-form";
|
|
||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
|
||||||
import { z } from "zod";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { Input } from "@/components/ui/input";
|
|
||||||
import { Textarea } from "@/components/ui/textarea";
|
|
||||||
import { Label } from "@/components/ui/label";
|
|
||||||
import { Switch } from "@/components/ui/switch";
|
|
||||||
import {
|
|
||||||
Select,
|
|
||||||
SelectContent,
|
|
||||||
SelectItem,
|
|
||||||
SelectTrigger,
|
|
||||||
SelectValue,
|
|
||||||
} from "@/components/ui/select";
|
|
||||||
import {
|
|
||||||
Form,
|
|
||||||
FormControl,
|
|
||||||
FormDescription,
|
|
||||||
FormField,
|
|
||||||
FormItem,
|
|
||||||
FormLabel,
|
|
||||||
FormMessage,
|
|
||||||
} from "@/components/ui/form";
|
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
||||||
import { Separator } from "@/components/ui/separator";
|
|
||||||
import { ImageUploader } from "@/components/image-uploader";
|
|
||||||
import { EffectEditor } from "@/components/effect-editor";
|
|
||||||
import { useCreateItem, useUpdateItem, useUploadItemIcon, type ItemWithUsage, type CreateItemData } from "@/hooks/use-items";
|
|
||||||
import { Loader2, Coins, FileText, Image, Zap } from "lucide-react";
|
|
||||||
|
|
||||||
// Form schema
|
|
||||||
const itemFormSchema = z.object({
|
|
||||||
name: z.string().min(1, "Name is required").max(255, "Name is too long"),
|
|
||||||
description: z.string().optional().nullable(),
|
|
||||||
rarity: z.enum(["C", "R", "SR", "SSR"]),
|
|
||||||
type: z.enum(["MATERIAL", "CONSUMABLE", "EQUIPMENT", "QUEST"]),
|
|
||||||
price: z.string().optional().nullable(),
|
|
||||||
consume: z.boolean(),
|
|
||||||
effects: z.array(z.any()).default([]),
|
|
||||||
});
|
|
||||||
|
|
||||||
type FormValues = z.infer<typeof itemFormSchema>;
|
|
||||||
|
|
||||||
interface ItemFormProps {
|
|
||||||
initialData?: ItemWithUsage | null;
|
|
||||||
onSuccess: () => void;
|
|
||||||
onCancel: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const ITEM_TYPES = [
|
|
||||||
{ value: "MATERIAL", label: "Material", description: "Raw materials and crafting components" },
|
|
||||||
{ value: "CONSUMABLE", label: "Consumable", description: "Items that can be used and consumed" },
|
|
||||||
{ value: "EQUIPMENT", label: "Equipment", description: "Equippable items with passive effects" },
|
|
||||||
{ value: "QUEST", label: "Quest", description: "Quest-related items" },
|
|
||||||
];
|
|
||||||
|
|
||||||
const RARITIES = [
|
|
||||||
{ value: "C", label: "C" },
|
|
||||||
{ value: "R", label: "R" },
|
|
||||||
{ value: "SR", label: "SR" },
|
|
||||||
{ value: "SSR", label: "SSR" },
|
|
||||||
];
|
|
||||||
|
|
||||||
export function ItemForm({ initialData, onSuccess, onCancel }: ItemFormProps) {
|
|
||||||
const isEditMode = !!initialData;
|
|
||||||
const { createItem, loading: createLoading } = useCreateItem();
|
|
||||||
const { updateItem, loading: updateLoading } = useUpdateItem();
|
|
||||||
const { uploadIcon, loading: uploadIconLoading } = useUploadItemIcon();
|
|
||||||
const [imageFile, setImageFile] = useState<File | null>(null);
|
|
||||||
const [existingImageUrl, setExistingImageUrl] = useState<string | null>(null);
|
|
||||||
|
|
||||||
const form = useForm({
|
|
||||||
resolver: zodResolver(itemFormSchema),
|
|
||||||
defaultValues: {
|
|
||||||
name: "",
|
|
||||||
description: "",
|
|
||||||
rarity: "C" as const,
|
|
||||||
type: "MATERIAL" as const,
|
|
||||||
price: "",
|
|
||||||
consume: false,
|
|
||||||
effects: [] as unknown[],
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// Populate form when editing
|
|
||||||
useEffect(() => {
|
|
||||||
if (initialData) {
|
|
||||||
form.reset({
|
|
||||||
name: initialData.name,
|
|
||||||
description: initialData.description || "",
|
|
||||||
rarity: (initialData.rarity as FormValues["rarity"]) || "C",
|
|
||||||
type: (initialData.type as FormValues["type"]) || "MATERIAL",
|
|
||||||
price: initialData.price ? String(initialData.price) : "",
|
|
||||||
consume: initialData.usageData?.consume ?? false,
|
|
||||||
effects: initialData.usageData?.effects ?? [],
|
|
||||||
});
|
|
||||||
|
|
||||||
// Set existing image URL for preview
|
|
||||||
if (initialData.iconUrl && !initialData.iconUrl.includes("placeholder")) {
|
|
||||||
setExistingImageUrl(initialData.iconUrl);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [initialData, form]);
|
|
||||||
|
|
||||||
const onSubmit = async (values: FormValues) => {
|
|
||||||
const itemData: CreateItemData = {
|
|
||||||
name: values.name,
|
|
||||||
description: values.description || null,
|
|
||||||
rarity: values.rarity,
|
|
||||||
type: values.type,
|
|
||||||
price: values.price || null,
|
|
||||||
usageData: {
|
|
||||||
consume: values.consume,
|
|
||||||
effects: values.effects,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
if (isEditMode && initialData) {
|
|
||||||
const result = await updateItem(initialData.id, itemData);
|
|
||||||
|
|
||||||
// If update was successful and we have a new image, upload it
|
|
||||||
if (result) {
|
|
||||||
if (imageFile) {
|
|
||||||
await uploadIcon(initialData.id, imageFile);
|
|
||||||
}
|
|
||||||
onSuccess();
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
const result = await createItem(itemData, imageFile || undefined);
|
|
||||||
if (result) {
|
|
||||||
onSuccess();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const isLoading = createLoading || updateLoading || uploadIconLoading;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Form {...form}>
|
|
||||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
|
||||||
{/* Basic Info Section */}
|
|
||||||
<Card className="glass-card overflow-hidden">
|
|
||||||
<CardHeader className="pb-4 border-b border-border/30">
|
|
||||||
<CardTitle className="text-base font-medium flex items-center gap-2">
|
|
||||||
<FileText className="h-4 w-4 text-primary" />
|
|
||||||
Basic Info
|
|
||||||
</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="space-y-5 pt-5">
|
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name="name"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel>Name *</FormLabel>
|
|
||||||
<FormControl>
|
|
||||||
<Input
|
|
||||||
placeholder="Health Potion"
|
|
||||||
{...field}
|
|
||||||
className="bg-background/50"
|
|
||||||
/>
|
|
||||||
</FormControl>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name="description"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel>Description</FormLabel>
|
|
||||||
<FormControl>
|
|
||||||
<Textarea
|
|
||||||
placeholder="A mystical potion that restores vitality..."
|
|
||||||
{...field}
|
|
||||||
value={field.value ?? ""}
|
|
||||||
className="bg-background/50 min-h-[80px]"
|
|
||||||
/>
|
|
||||||
</FormControl>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-2 gap-4">
|
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name="type"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel>Type *</FormLabel>
|
|
||||||
<Select onValueChange={field.onChange} value={field.value}>
|
|
||||||
<FormControl>
|
|
||||||
<SelectTrigger className="bg-background/50">
|
|
||||||
<SelectValue placeholder="Select type" />
|
|
||||||
</SelectTrigger>
|
|
||||||
</FormControl>
|
|
||||||
<SelectContent>
|
|
||||||
{ITEM_TYPES.map((type) => (
|
|
||||||
<SelectItem key={type.value} value={type.value}>
|
|
||||||
{type.label}
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name="rarity"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel>Rarity</FormLabel>
|
|
||||||
<Select onValueChange={field.onChange} value={field.value}>
|
|
||||||
<FormControl>
|
|
||||||
<SelectTrigger className="bg-background/50">
|
|
||||||
<SelectValue placeholder="Select rarity" />
|
|
||||||
</SelectTrigger>
|
|
||||||
</FormControl>
|
|
||||||
<SelectContent>
|
|
||||||
{RARITIES.map((rarity) => (
|
|
||||||
<SelectItem key={rarity.value} value={rarity.value}>
|
|
||||||
{rarity.label}
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Economy Section */}
|
|
||||||
<Card className="glass-card overflow-hidden">
|
|
||||||
<CardHeader className="pb-4 border-b border-border/30">
|
|
||||||
<CardTitle className="text-base font-medium flex items-center gap-2">
|
|
||||||
<Coins className="h-4 w-4 text-amber-400" />
|
|
||||||
Economy
|
|
||||||
</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="pt-5">
|
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name="price"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel>Shop Price</FormLabel>
|
|
||||||
<FormControl>
|
|
||||||
<div className="relative">
|
|
||||||
<Input
|
|
||||||
type="number"
|
|
||||||
placeholder="0"
|
|
||||||
{...field}
|
|
||||||
value={field.value ?? ""}
|
|
||||||
className="bg-background/50 pr-10"
|
|
||||||
/>
|
|
||||||
<Coins className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-amber-400" />
|
|
||||||
</div>
|
|
||||||
</FormControl>
|
|
||||||
<FormDescription>
|
|
||||||
Leave empty if item cannot be purchased in shops
|
|
||||||
</FormDescription>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Visuals Section */}
|
|
||||||
<Card className="glass-card overflow-hidden">
|
|
||||||
<CardHeader className="pb-4 border-b border-border/30">
|
|
||||||
<CardTitle className="text-base font-medium flex items-center gap-2">
|
|
||||||
<Image className="h-4 w-4 text-purple-400" />
|
|
||||||
Visuals
|
|
||||||
</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="pt-5">
|
|
||||||
<ImageUploader
|
|
||||||
existingUrl={existingImageUrl}
|
|
||||||
onFileSelect={setImageFile}
|
|
||||||
/>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Usage Section */}
|
|
||||||
<Card className="glass-card overflow-hidden">
|
|
||||||
<CardHeader className="pb-4 border-b border-border/30">
|
|
||||||
<CardTitle className="text-base font-medium flex items-center gap-2">
|
|
||||||
<Zap className="h-4 w-4 text-green-400" />
|
|
||||||
Usage
|
|
||||||
</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="space-y-5 pt-5">
|
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name="consume"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem className="flex items-center justify-between rounded-lg border border-border/50 p-4">
|
|
||||||
<div className="space-y-0.5">
|
|
||||||
<FormLabel className="text-base">Consume on Use</FormLabel>
|
|
||||||
<FormDescription>
|
|
||||||
Remove one from inventory when used
|
|
||||||
</FormDescription>
|
|
||||||
</div>
|
|
||||||
<FormControl>
|
|
||||||
<Switch
|
|
||||||
checked={field.value}
|
|
||||||
onCheckedChange={field.onChange}
|
|
||||||
/>
|
|
||||||
</FormControl>
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Separator className="my-4" />
|
|
||||||
|
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name="effects"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel>Effects</FormLabel>
|
|
||||||
<FormDescription className="mb-3">
|
|
||||||
Add effects that trigger when the item is used
|
|
||||||
</FormDescription>
|
|
||||||
<FormControl>
|
|
||||||
<EffectEditor
|
|
||||||
effects={field.value ?? []}
|
|
||||||
onChange={field.onChange}
|
|
||||||
/>
|
|
||||||
</FormControl>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Actions */}
|
|
||||||
<div className="flex gap-4 pt-6">
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="outline"
|
|
||||||
onClick={onCancel}
|
|
||||||
className="flex-1 py-6 text-base font-semibold"
|
|
||||||
disabled={isLoading}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type="submit"
|
|
||||||
className="flex-1 bg-primary text-primary-foreground hover:glow-primary active-press py-6 text-base font-semibold"
|
|
||||||
disabled={isLoading}
|
|
||||||
>
|
|
||||||
{isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
|
||||||
{isEditMode ? "Update Item" : "Create Item"}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</Form>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ItemForm;
|
|
||||||
@@ -1,139 +0,0 @@
|
|||||||
/**
|
|
||||||
* ItemsFilter Component
|
|
||||||
* Filter bar for the items list with search, type, and rarity filters.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { useState, useEffect, useCallback } from "react";
|
|
||||||
import { Input } from "@/components/ui/input";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import {
|
|
||||||
Select,
|
|
||||||
SelectContent,
|
|
||||||
SelectItem,
|
|
||||||
SelectTrigger,
|
|
||||||
SelectValue,
|
|
||||||
} from "@/components/ui/select";
|
|
||||||
import { Search, X, Filter, Package, Zap, Hammer, Scroll, Gem } from "lucide-react";
|
|
||||||
import { cn } from "@/lib/utils";
|
|
||||||
import type { ItemFilters } from "@/hooks/use-items";
|
|
||||||
|
|
||||||
interface ItemsFilterProps {
|
|
||||||
filters: ItemFilters;
|
|
||||||
onFilterChange: (filters: Partial<ItemFilters>) => void;
|
|
||||||
onClearFilters: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const ITEM_TYPES = [
|
|
||||||
{ value: "MATERIAL", label: "Material", icon: Package },
|
|
||||||
{ value: "CONSUMABLE", label: "Consumable", icon: Zap },
|
|
||||||
{ value: "EQUIPMENT", label: "Equipment", icon: Hammer },
|
|
||||||
{ value: "QUEST", label: "Quest", icon: Scroll },
|
|
||||||
];
|
|
||||||
|
|
||||||
const RARITIES = [
|
|
||||||
{ value: "C", label: "C", color: "text-zinc-400" },
|
|
||||||
{ value: "R", label: "R", color: "text-blue-400" },
|
|
||||||
{ value: "SR", label: "SR", color: "text-purple-400" },
|
|
||||||
{ value: "SSR", label: "SSR", color: "text-amber-400" },
|
|
||||||
];
|
|
||||||
|
|
||||||
export function ItemsFilter({ filters, onFilterChange, onClearFilters }: ItemsFilterProps) {
|
|
||||||
const [searchValue, setSearchValue] = useState(filters.search || "");
|
|
||||||
|
|
||||||
// Debounced search
|
|
||||||
useEffect(() => {
|
|
||||||
const timeout = setTimeout(() => {
|
|
||||||
if (searchValue !== filters.search) {
|
|
||||||
onFilterChange({ search: searchValue || undefined });
|
|
||||||
}
|
|
||||||
}, 300);
|
|
||||||
|
|
||||||
return () => clearTimeout(timeout);
|
|
||||||
}, [searchValue, filters.search, onFilterChange]);
|
|
||||||
|
|
||||||
const handleTypeChange = useCallback((value: string) => {
|
|
||||||
onFilterChange({ type: value === "__all__" ? undefined : value });
|
|
||||||
}, [onFilterChange]);
|
|
||||||
|
|
||||||
const handleRarityChange = useCallback((value: string) => {
|
|
||||||
onFilterChange({ rarity: value === "__all__" ? undefined : value });
|
|
||||||
}, [onFilterChange]);
|
|
||||||
|
|
||||||
const hasActiveFilters = !!(filters.search || filters.type || filters.rarity);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col sm:flex-row gap-3 items-stretch sm:items-center">
|
|
||||||
{/* Search Input */}
|
|
||||||
<div className="relative flex-1 max-w-md">
|
|
||||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
|
||||||
<Input
|
|
||||||
placeholder="Search items..."
|
|
||||||
value={searchValue}
|
|
||||||
onChange={(e) => setSearchValue(e.target.value)}
|
|
||||||
className="pl-9 bg-card/50 border-border/50"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Type Filter */}
|
|
||||||
<Select
|
|
||||||
value={filters.type || "__all__"}
|
|
||||||
onValueChange={handleTypeChange}
|
|
||||||
>
|
|
||||||
<SelectTrigger className="w-full sm:w-40 bg-card/50 border-border/50">
|
|
||||||
<Filter className="h-4 w-4 mr-2 text-muted-foreground" />
|
|
||||||
<SelectValue placeholder="Type" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectItem value="__all__">All Types</SelectItem>
|
|
||||||
{ITEM_TYPES.map((type) => (
|
|
||||||
<SelectItem key={type.value} value={type.value}>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<type.icon className="h-4 w-4 text-muted-foreground" />
|
|
||||||
{type.label}
|
|
||||||
</div>
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
|
|
||||||
{/* Rarity Filter */}
|
|
||||||
<Select
|
|
||||||
value={filters.rarity || "__all__"}
|
|
||||||
onValueChange={handleRarityChange}
|
|
||||||
>
|
|
||||||
<SelectTrigger className="w-full sm:w-40 bg-card/50 border-border/50">
|
|
||||||
<SelectValue placeholder="Rarity" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectItem value="__all__">All Rarities</SelectItem>
|
|
||||||
{RARITIES.map((rarity) => (
|
|
||||||
<SelectItem key={rarity.value} value={rarity.value}>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Gem className={cn("h-4 w-4", rarity.color)} />
|
|
||||||
<span className={rarity.color}>{rarity.label}</span>
|
|
||||||
</div>
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
|
|
||||||
{/* Clear Button */}
|
|
||||||
{hasActiveFilters && (
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => {
|
|
||||||
setSearchValue("");
|
|
||||||
onClearFilters();
|
|
||||||
}}
|
|
||||||
className="text-muted-foreground hover:text-foreground"
|
|
||||||
>
|
|
||||||
<X className="h-4 w-4 mr-1" />
|
|
||||||
Clear
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ItemsFilter;
|
|
||||||
@@ -1,342 +0,0 @@
|
|||||||
/**
|
|
||||||
* ItemsTable Component
|
|
||||||
* Data table displaying all items with key information and actions.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { useState } from "react";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
||||||
import { Skeleton } from "@/components/ui/skeleton";
|
|
||||||
import { RarityBadge } from "@/components/rarity-badge";
|
|
||||||
import {
|
|
||||||
DropdownMenu,
|
|
||||||
DropdownMenuContent,
|
|
||||||
DropdownMenuItem,
|
|
||||||
DropdownMenuTrigger,
|
|
||||||
} from "@/components/ui/dropdown-menu";
|
|
||||||
import {
|
|
||||||
MoreHorizontal,
|
|
||||||
Pencil,
|
|
||||||
Trash2,
|
|
||||||
RefreshCw,
|
|
||||||
Package,
|
|
||||||
ChevronUp,
|
|
||||||
ChevronDown,
|
|
||||||
Coins,
|
|
||||||
} from "lucide-react";
|
|
||||||
import type { ItemWithUsage } from "@/hooks/use-items";
|
|
||||||
import { cn } from "@/lib/utils";
|
|
||||||
|
|
||||||
interface ItemsTableProps {
|
|
||||||
items: ItemWithUsage[];
|
|
||||||
isLoading: boolean;
|
|
||||||
isRefreshing?: boolean;
|
|
||||||
total: number;
|
|
||||||
onRefresh: () => void;
|
|
||||||
onEdit: (item: ItemWithUsage) => void;
|
|
||||||
onDelete: (item: ItemWithUsage) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
type SortField = 'name' | 'type' | 'rarity' | 'price';
|
|
||||||
type SortDirection = 'asc' | 'desc';
|
|
||||||
|
|
||||||
const TYPE_LABELS: Record<string, string> = {
|
|
||||||
MATERIAL: 'Material',
|
|
||||||
CONSUMABLE: 'Consumable',
|
|
||||||
EQUIPMENT: 'Equipment',
|
|
||||||
QUEST: 'Quest',
|
|
||||||
};
|
|
||||||
|
|
||||||
const TYPE_COLORS: Record<string, string> = {
|
|
||||||
MATERIAL: 'text-zinc-400',
|
|
||||||
CONSUMABLE: 'text-green-400',
|
|
||||||
EQUIPMENT: 'text-blue-400',
|
|
||||||
QUEST: 'text-yellow-400',
|
|
||||||
};
|
|
||||||
|
|
||||||
export function ItemsTable({
|
|
||||||
items,
|
|
||||||
isLoading,
|
|
||||||
isRefreshing,
|
|
||||||
total,
|
|
||||||
onRefresh,
|
|
||||||
onEdit,
|
|
||||||
onDelete,
|
|
||||||
}: ItemsTableProps) {
|
|
||||||
const [sortField, setSortField] = useState<SortField>('name');
|
|
||||||
const [sortDirection, setSortDirection] = useState<SortDirection>('asc');
|
|
||||||
const [deleteConfirm, setDeleteConfirm] = useState<number | null>(null);
|
|
||||||
|
|
||||||
const handleSort = (field: SortField) => {
|
|
||||||
if (sortField === field) {
|
|
||||||
setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc');
|
|
||||||
} else {
|
|
||||||
setSortField(field);
|
|
||||||
setSortDirection('asc');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const sortedItems = [...items].sort((a, b) => {
|
|
||||||
const direction = sortDirection === 'asc' ? 1 : -1;
|
|
||||||
|
|
||||||
switch (sortField) {
|
|
||||||
case 'name':
|
|
||||||
return direction * a.name.localeCompare(b.name);
|
|
||||||
case 'type':
|
|
||||||
return direction * (a.type || '').localeCompare(b.type || '');
|
|
||||||
case 'rarity': {
|
|
||||||
const rarityOrder = ['C', 'R', 'SR', 'SSR'];
|
|
||||||
const aIndex = rarityOrder.indexOf(a.rarity || 'C');
|
|
||||||
const bIndex = rarityOrder.indexOf(b.rarity || 'C');
|
|
||||||
return direction * (aIndex - bIndex);
|
|
||||||
}
|
|
||||||
case 'price': {
|
|
||||||
const aPrice = a.price ?? 0n;
|
|
||||||
const bPrice = b.price ?? 0n;
|
|
||||||
if (aPrice < bPrice) return -direction;
|
|
||||||
if (aPrice > bPrice) return direction;
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
default:
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const SortIcon = ({ field }: { field: SortField }) => {
|
|
||||||
if (sortField !== field) return null;
|
|
||||||
return sortDirection === 'asc'
|
|
||||||
? <ChevronUp className="h-4 w-4 ml-1" />
|
|
||||||
: <ChevronDown className="h-4 w-4 ml-1" />;
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDeleteClick = (item: ItemWithUsage) => {
|
|
||||||
if (deleteConfirm === item.id) {
|
|
||||||
onDelete(item);
|
|
||||||
setDeleteConfirm(null);
|
|
||||||
} else {
|
|
||||||
setDeleteConfirm(item.id);
|
|
||||||
// Auto-reset after 3 seconds
|
|
||||||
setTimeout(() => setDeleteConfirm(null), 3000);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (isLoading) {
|
|
||||||
return (
|
|
||||||
<Card className="bg-card/50 border-border/50">
|
|
||||||
<CardHeader className="flex flex-row items-center justify-between">
|
|
||||||
<CardTitle className="text-lg font-medium flex items-center gap-2">
|
|
||||||
<Package className="h-5 w-5" />
|
|
||||||
Items
|
|
||||||
</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<div className="space-y-3">
|
|
||||||
{[...Array(5)].map((_, i) => (
|
|
||||||
<div key={i} className="flex items-center gap-4">
|
|
||||||
<Skeleton className="h-10 w-10 rounded-lg" />
|
|
||||||
<div className="flex-1 space-y-2">
|
|
||||||
<Skeleton className="h-4 w-32" />
|
|
||||||
<Skeleton className="h-3 w-20" />
|
|
||||||
</div>
|
|
||||||
<Skeleton className="h-6 w-16 rounded-full" />
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (items.length === 0) {
|
|
||||||
return (
|
|
||||||
<Card className="bg-card/50 border-border/50">
|
|
||||||
<CardHeader className="flex flex-row items-center justify-between">
|
|
||||||
<CardTitle className="text-lg font-medium flex items-center gap-2">
|
|
||||||
<Package className="h-5 w-5" />
|
|
||||||
Items
|
|
||||||
</CardTitle>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={onRefresh}
|
|
||||||
disabled={isRefreshing}
|
|
||||||
>
|
|
||||||
<RefreshCw className={cn("h-4 w-4", isRefreshing && "animate-spin")} />
|
|
||||||
</Button>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<div className="flex flex-col items-center justify-center py-12 text-center">
|
|
||||||
<Package className="h-12 w-12 text-muted-foreground/50 mb-4" />
|
|
||||||
<p className="text-muted-foreground">No items found</p>
|
|
||||||
<p className="text-sm text-muted-foreground/70">
|
|
||||||
Create your first item to get started
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card className="bg-card/50 border-border/50">
|
|
||||||
<CardHeader className="flex flex-row items-center justify-between">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<CardTitle className="text-lg font-medium flex items-center gap-2">
|
|
||||||
<Package className="h-5 w-5" />
|
|
||||||
Items
|
|
||||||
</CardTitle>
|
|
||||||
<span className="text-sm text-muted-foreground">
|
|
||||||
({total} total)
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={onRefresh}
|
|
||||||
disabled={isRefreshing}
|
|
||||||
>
|
|
||||||
<RefreshCw className={cn("h-4 w-4", isRefreshing && "animate-spin")} />
|
|
||||||
</Button>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
{/* Table Header */}
|
|
||||||
<div className="hidden md:grid grid-cols-[48px_1fr_120px_100px_100px_48px] gap-4 px-4 py-2 text-sm font-medium text-muted-foreground border-b border-border/50">
|
|
||||||
<div></div>
|
|
||||||
<button
|
|
||||||
onClick={() => handleSort('name')}
|
|
||||||
className="flex items-center hover:text-foreground transition-colors text-left"
|
|
||||||
>
|
|
||||||
Name
|
|
||||||
<SortIcon field="name" />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => handleSort('type')}
|
|
||||||
className="flex items-center hover:text-foreground transition-colors"
|
|
||||||
>
|
|
||||||
Type
|
|
||||||
<SortIcon field="type" />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => handleSort('rarity')}
|
|
||||||
className="flex items-center hover:text-foreground transition-colors"
|
|
||||||
>
|
|
||||||
Rarity
|
|
||||||
<SortIcon field="rarity" />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => handleSort('price')}
|
|
||||||
className="flex items-center hover:text-foreground transition-colors"
|
|
||||||
>
|
|
||||||
Price
|
|
||||||
<SortIcon field="price" />
|
|
||||||
</button>
|
|
||||||
<div></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Table Body */}
|
|
||||||
<div className="divide-y divide-border/30">
|
|
||||||
{sortedItems.map((item) => (
|
|
||||||
<div
|
|
||||||
key={item.id}
|
|
||||||
id={`item-row-${item.id}`}
|
|
||||||
className="grid grid-cols-[48px_1fr_auto] md:grid-cols-[48px_1fr_120px_100px_100px_48px] gap-4 px-4 py-3 items-center hover:bg-muted/30 transition-colors group cursor-pointer"
|
|
||||||
onClick={() => onEdit(item)}
|
|
||||||
>
|
|
||||||
{/* Icon */}
|
|
||||||
<div className="relative h-10 w-10 rounded-lg overflow-hidden bg-muted/50">
|
|
||||||
{item.iconUrl && !item.iconUrl.includes('placeholder') ? (
|
|
||||||
<img
|
|
||||||
src={item.iconUrl}
|
|
||||||
alt={item.name}
|
|
||||||
className="h-full w-full object-cover"
|
|
||||||
onError={(e) => {
|
|
||||||
(e.target as HTMLImageElement).src = '';
|
|
||||||
(e.target as HTMLImageElement).classList.add('hidden');
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div className="h-full w-full flex items-center justify-center">
|
|
||||||
<Package className="h-5 w-5 text-muted-foreground" />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Name & Description */}
|
|
||||||
<div className="min-w-0">
|
|
||||||
<p className="font-medium truncate">{item.name}</p>
|
|
||||||
{item.description && (
|
|
||||||
<p className="text-sm text-muted-foreground truncate">
|
|
||||||
{item.description}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Type (hidden on mobile) */}
|
|
||||||
<div className="hidden md:block">
|
|
||||||
<span className={cn("text-sm", TYPE_COLORS[item.type || 'MATERIAL'])}>
|
|
||||||
{TYPE_LABELS[item.type || 'MATERIAL']}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Rarity (hidden on mobile) */}
|
|
||||||
<div className="hidden md:block">
|
|
||||||
<RarityBadge rarity={item.rarity || 'C'} size="sm" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Price (hidden on mobile) */}
|
|
||||||
<div className="hidden md:block text-sm">
|
|
||||||
{item.price ? (
|
|
||||||
<span className="text-amber-400 flex items-center gap-1">
|
|
||||||
{item.price.toLocaleString()}
|
|
||||||
<Coins className="h-3.5 w-3.5" />
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
<span className="text-muted-foreground">-</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Mobile: badges */}
|
|
||||||
<div className="flex md:hidden items-center gap-2">
|
|
||||||
<RarityBadge rarity={item.rarity || 'C'} size="sm" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Actions */}
|
|
||||||
<div onClick={(e) => e.stopPropagation()}>
|
|
||||||
<DropdownMenu>
|
|
||||||
<DropdownMenuTrigger asChild>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
className="h-8 w-8 p-0 opacity-0 group-hover:opacity-100 transition-opacity"
|
|
||||||
>
|
|
||||||
<MoreHorizontal className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</DropdownMenuTrigger>
|
|
||||||
<DropdownMenuContent align="end">
|
|
||||||
<DropdownMenuItem onClick={() => onEdit(item)}>
|
|
||||||
<Pencil className="h-4 w-4 mr-2" />
|
|
||||||
Edit
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuItem
|
|
||||||
onClick={() => handleDeleteClick(item)}
|
|
||||||
className={cn(
|
|
||||||
deleteConfirm === item.id
|
|
||||||
? "bg-destructive text-destructive-foreground"
|
|
||||||
: "text-destructive focus:text-destructive"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<Trash2 className="h-4 w-4 mr-2" />
|
|
||||||
{deleteConfirm === item.id ? "Click to confirm" : "Delete"}
|
|
||||||
</DropdownMenuItem>
|
|
||||||
</DropdownMenuContent>
|
|
||||||
</DropdownMenu>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ItemsTable;
|
|
||||||
@@ -1,220 +0,0 @@
|
|||||||
import { Link } from "react-router-dom"
|
|
||||||
import { ChevronRight } from "lucide-react"
|
|
||||||
import {
|
|
||||||
Sidebar,
|
|
||||||
SidebarContent,
|
|
||||||
|
|
||||||
SidebarHeader,
|
|
||||||
SidebarMenu,
|
|
||||||
SidebarMenuButton,
|
|
||||||
SidebarMenuItem,
|
|
||||||
SidebarMenuSub,
|
|
||||||
SidebarMenuSubItem,
|
|
||||||
SidebarMenuSubButton,
|
|
||||||
SidebarGroup,
|
|
||||||
SidebarGroupLabel,
|
|
||||||
SidebarGroupContent,
|
|
||||||
SidebarRail,
|
|
||||||
useSidebar,
|
|
||||||
} from "@/components/ui/sidebar"
|
|
||||||
import { useNavigation, type NavItem } from "@/contexts/navigation-context"
|
|
||||||
|
|
||||||
import { cn } from "@/lib/utils"
|
|
||||||
import {
|
|
||||||
Collapsible,
|
|
||||||
CollapsibleContent,
|
|
||||||
CollapsibleTrigger,
|
|
||||||
} from "@/components/ui/collapsible"
|
|
||||||
import {
|
|
||||||
DropdownMenu,
|
|
||||||
DropdownMenuContent,
|
|
||||||
DropdownMenuItem,
|
|
||||||
DropdownMenuTrigger,
|
|
||||||
} from "@/components/ui/dropdown-menu"
|
|
||||||
import { useSocket } from "@/hooks/use-socket"
|
|
||||||
|
|
||||||
function NavItemWithSubMenu({ item }: { item: NavItem }) {
|
|
||||||
const { state } = useSidebar()
|
|
||||||
const isCollapsed = state === "collapsed"
|
|
||||||
|
|
||||||
// When collapsed, show a dropdown menu on hover/click
|
|
||||||
if (isCollapsed) {
|
|
||||||
return (
|
|
||||||
<SidebarMenuItem>
|
|
||||||
<DropdownMenu>
|
|
||||||
<DropdownMenuTrigger asChild>
|
|
||||||
<SidebarMenuButton
|
|
||||||
tooltip={item.title}
|
|
||||||
className={cn(
|
|
||||||
"transition-all duration-200 ease-in-out font-medium py-4 min-h-10",
|
|
||||||
item.isActive
|
|
||||||
? "bg-primary/10 text-primary shadow-[inset_4px_0_0_0_hsl(var(--primary))] hover:bg-primary/15 hover:text-primary"
|
|
||||||
: "text-muted-foreground hover:text-foreground hover:bg-white/5"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<item.icon className={cn("size-5", item.isActive && "text-primary fill-primary/20")} />
|
|
||||||
</SidebarMenuButton>
|
|
||||||
</DropdownMenuTrigger>
|
|
||||||
<DropdownMenuContent
|
|
||||||
side="right"
|
|
||||||
align="start"
|
|
||||||
sideOffset={8}
|
|
||||||
className="min-w-[180px] bg-background/95 backdrop-blur-xl border-border/50"
|
|
||||||
>
|
|
||||||
<div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
|
|
||||||
{item.title}
|
|
||||||
</div>
|
|
||||||
{item.subItems?.map((subItem) => (
|
|
||||||
<DropdownMenuItem key={subItem.title} asChild className="group/dropitem">
|
|
||||||
<Link
|
|
||||||
to={subItem.url}
|
|
||||||
className={cn(
|
|
||||||
"cursor-pointer py-4 min-h-10 flex items-center gap-2",
|
|
||||||
subItem.isActive
|
|
||||||
? "text-primary bg-primary/10"
|
|
||||||
: "text-muted-foreground hover:text-inherit"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<subItem.icon className={cn("size-4", subItem.isActive ? "text-primary" : "text-muted-foreground group-hover/dropitem:text-inherit")} />
|
|
||||||
{subItem.title}
|
|
||||||
</Link>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
))}
|
|
||||||
</DropdownMenuContent>
|
|
||||||
</DropdownMenu>
|
|
||||||
</SidebarMenuItem>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
// When expanded, show collapsible sub-menu
|
|
||||||
return (
|
|
||||||
<Collapsible defaultOpen={item.isActive} className="group/collapsible">
|
|
||||||
<SidebarMenuItem className="flex flex-col">
|
|
||||||
<CollapsibleTrigger asChild>
|
|
||||||
<SidebarMenuButton
|
|
||||||
tooltip={item.title}
|
|
||||||
className={cn(
|
|
||||||
"transition-all duration-200 ease-in-out font-medium py-4 min-h-10",
|
|
||||||
item.isActive
|
|
||||||
? "bg-primary/10 text-primary shadow-[inset_4px_0_0_0_hsl(var(--primary))] hover:bg-primary/15 hover:text-primary"
|
|
||||||
: "text-muted-foreground hover:text-foreground hover:bg-white/5"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<item.icon className={cn("size-5", item.isActive && "text-primary fill-primary/20")} />
|
|
||||||
<span className={cn("group-data-[collapsible=icon]:hidden", item.isActive && "text-primary")}>
|
|
||||||
{item.title}
|
|
||||||
</span>
|
|
||||||
<ChevronRight className="ml-auto size-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90 group-data-[collapsible=icon]:hidden" />
|
|
||||||
</SidebarMenuButton>
|
|
||||||
</CollapsibleTrigger>
|
|
||||||
<CollapsibleContent className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
|
|
||||||
<SidebarMenuSub>
|
|
||||||
{item.subItems?.map((subItem) => (
|
|
||||||
<SidebarMenuSubItem key={subItem.title}>
|
|
||||||
<SidebarMenuSubButton
|
|
||||||
asChild
|
|
||||||
isActive={subItem.isActive}
|
|
||||||
className={cn(
|
|
||||||
"transition-all duration-200 py-4 min-h-10 group/subitem",
|
|
||||||
subItem.isActive
|
|
||||||
? "text-primary bg-primary/10"
|
|
||||||
: "text-muted-foreground hover:text-inherit"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<Link to={subItem.url}>
|
|
||||||
<subItem.icon className={cn("size-4", subItem.isActive ? "text-primary" : "text-muted-foreground group-hover/subitem:text-inherit")} />
|
|
||||||
<span>{subItem.title}</span>
|
|
||||||
</Link>
|
|
||||||
</SidebarMenuSubButton>
|
|
||||||
</SidebarMenuSubItem>
|
|
||||||
))}
|
|
||||||
</SidebarMenuSub>
|
|
||||||
</CollapsibleContent>
|
|
||||||
</SidebarMenuItem>
|
|
||||||
</Collapsible>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function NavItemLink({ item }: { item: NavItem }) {
|
|
||||||
return (
|
|
||||||
<SidebarMenuItem>
|
|
||||||
<SidebarMenuButton
|
|
||||||
asChild
|
|
||||||
isActive={item.isActive}
|
|
||||||
tooltip={item.title}
|
|
||||||
className={cn(
|
|
||||||
"transition-all duration-200 ease-in-out font-medium",
|
|
||||||
item.isActive
|
|
||||||
? "bg-primary/10 text-primary shadow-[inset_4px_0_0_0_hsl(var(--primary))] hover:bg-primary/15 hover:text-primary"
|
|
||||||
: "text-muted-foreground hover:text-foreground hover:bg-white/5"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<Link to={item.url} className="flex items-center gap-3 py-4 min-h-10 group-data-[collapsible=icon]:justify-center">
|
|
||||||
<item.icon className={cn("size-5", item.isActive && "text-primary fill-primary/20")} />
|
|
||||||
<span className={cn("group-data-[collapsible=icon]:hidden", item.isActive && "text-primary")}>{item.title}</span>
|
|
||||||
</Link>
|
|
||||||
</SidebarMenuButton>
|
|
||||||
</SidebarMenuItem>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export function AppSidebar() {
|
|
||||||
const { navItems } = useNavigation()
|
|
||||||
const { stats } = useSocket()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Sidebar collapsible="icon" className="border-r border-border/50 bg-background/60 backdrop-blur-xl supports-backdrop-filter:bg-background/60">
|
|
||||||
<SidebarHeader className="pb-4 pt-4">
|
|
||||||
<SidebarMenu>
|
|
||||||
<SidebarMenuItem>
|
|
||||||
<SidebarMenuButton size="lg" asChild className="hover:bg-primary/10 transition-colors">
|
|
||||||
<Link to="/">
|
|
||||||
{stats?.bot?.avatarUrl ? (
|
|
||||||
<img
|
|
||||||
src={stats.bot.avatarUrl}
|
|
||||||
alt={stats.bot.name}
|
|
||||||
className="size-10 rounded-full group-data-[collapsible=icon]:size-8 object-cover shadow-lg"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div className="flex aspect-square size-10 items-center justify-center rounded-full bg-aurora sun-flare shadow-lg group-data-[collapsible=icon]:size-8">
|
|
||||||
<span className="sr-only">Aurora</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="grid flex-1 text-left text-sm leading-tight ml-2 group-data-[collapsible=icon]:hidden">
|
|
||||||
<span className="truncate font-bold text-primary text-base">Aurora</span>
|
|
||||||
<span className="truncate text-xs text-muted-foreground font-medium">
|
|
||||||
{stats?.bot?.status || "Online"}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
</SidebarMenuButton>
|
|
||||||
</SidebarMenuItem>
|
|
||||||
</SidebarMenu>
|
|
||||||
</SidebarHeader>
|
|
||||||
|
|
||||||
<SidebarContent className="px-2 group-data-[collapsible=icon]:px-0">
|
|
||||||
<SidebarGroup>
|
|
||||||
<SidebarGroupLabel className="text-muted-foreground/70 uppercase tracking-wider text-xs font-bold mb-2 px-2 group-data-[collapsible=icon]:hidden">
|
|
||||||
Menu
|
|
||||||
</SidebarGroupLabel>
|
|
||||||
<SidebarGroupContent>
|
|
||||||
<SidebarMenu className="gap-2 group-data-[collapsible=icon]:items-center">
|
|
||||||
{navItems.map((item) => (
|
|
||||||
item.subItems ? (
|
|
||||||
<NavItemWithSubMenu key={item.title} item={item} />
|
|
||||||
) : (
|
|
||||||
<NavItemLink key={item.title} item={item} />
|
|
||||||
)
|
|
||||||
))}
|
|
||||||
</SidebarMenu>
|
|
||||||
</SidebarGroupContent>
|
|
||||||
</SidebarGroup>
|
|
||||||
</SidebarContent>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<SidebarRail />
|
|
||||||
</Sidebar>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -1,56 +0,0 @@
|
|||||||
import { SidebarProvider, SidebarInset, SidebarTrigger } from "@/components/ui/sidebar"
|
|
||||||
import { AppSidebar } from "./app-sidebar"
|
|
||||||
import { MobileNav } from "@/components/navigation/mobile-nav"
|
|
||||||
import { useIsMobile } from "@/hooks/use-mobile"
|
|
||||||
import { Separator } from "@/components/ui/separator"
|
|
||||||
import { useNavigation } from "@/contexts/navigation-context"
|
|
||||||
|
|
||||||
interface MainLayoutProps {
|
|
||||||
children: React.ReactNode
|
|
||||||
}
|
|
||||||
|
|
||||||
export function MainLayout({ children }: MainLayoutProps) {
|
|
||||||
const isMobile = useIsMobile()
|
|
||||||
const { breadcrumbs, currentTitle } = useNavigation()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<SidebarProvider>
|
|
||||||
<AppSidebar />
|
|
||||||
<SidebarInset>
|
|
||||||
{/* Header with breadcrumbs */}
|
|
||||||
<header className="flex h-16 shrink-0 items-center gap-2 border-b border-border/50 bg-background/60 backdrop-blur-xl supports-backdrop-filter:bg-background/60 transition-all duration-300 ease-in-out">
|
|
||||||
<div className="flex items-center gap-2 px-4 w-full">
|
|
||||||
<SidebarTrigger className="-ml-1 text-muted-foreground hover:text-primary transition-colors" />
|
|
||||||
<Separator orientation="vertical" className="mr-2 h-4 bg-border/50" />
|
|
||||||
<nav aria-label="Breadcrumb" className="flex items-center gap-1 text-sm bg-muted/30 px-3 py-1.5 rounded-full border border-border/30">
|
|
||||||
{breadcrumbs.length === 0 ? (
|
|
||||||
<span className="text-sm font-medium text-primary px-1">{currentTitle}</span>
|
|
||||||
) : (
|
|
||||||
breadcrumbs.map((crumb, index) => (
|
|
||||||
<span key={crumb.url} className="flex items-center gap-1">
|
|
||||||
{index > 0 && (
|
|
||||||
<span className="text-muted-foreground/50">/</span>
|
|
||||||
)}
|
|
||||||
{index === breadcrumbs.length - 1 ? (
|
|
||||||
<span className="text-sm font-medium text-primary px-1">{crumb.title}</span>
|
|
||||||
) : (
|
|
||||||
<span className="text-sm text-muted-foreground hover:text-foreground transition-colors px-1">{crumb.title}</span>
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
{/* Main content */}
|
|
||||||
<div className="flex-1 overflow-auto">
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Mobile bottom navigation */}
|
|
||||||
{isMobile && <MobileNav />}
|
|
||||||
</SidebarInset>
|
|
||||||
</SidebarProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,170 +0,0 @@
|
|||||||
import React, { useState } from "react";
|
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
|
|
||||||
import { Trophy, Coins, Award, Crown, Target } from "lucide-react";
|
|
||||||
import { cn } from "../lib/utils";
|
|
||||||
import { Skeleton } from "./ui/skeleton";
|
|
||||||
import { Badge } from "./ui/badge";
|
|
||||||
import { Button } from "./ui/button";
|
|
||||||
|
|
||||||
interface LocalUser {
|
|
||||||
username: string;
|
|
||||||
value: string | number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface LeaderboardData {
|
|
||||||
topLevels: { username: string; level: number }[];
|
|
||||||
topWealth: { username: string; balance: string }[];
|
|
||||||
topNetWorth: { username: string; netWorth: string }[];
|
|
||||||
}
|
|
||||||
|
|
||||||
interface LeaderboardCardProps {
|
|
||||||
data?: LeaderboardData;
|
|
||||||
isLoading?: boolean;
|
|
||||||
className?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function LeaderboardCard({ data, isLoading, className }: LeaderboardCardProps) {
|
|
||||||
const [view, setView] = useState<"wealth" | "levels" | "networth">("wealth");
|
|
||||||
|
|
||||||
if (isLoading) {
|
|
||||||
return (
|
|
||||||
<Card className={cn("glass-card border-none bg-card/40", className)}>
|
|
||||||
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
|
||||||
<CardTitle className="text-sm font-medium">Top Players</CardTitle>
|
|
||||||
<Trophy className="h-4 w-4 text-muted-foreground" />
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<div className="space-y-4">
|
|
||||||
{[1, 2, 3].map((i) => (
|
|
||||||
<div key={i} className="flex items-center gap-3">
|
|
||||||
<Skeleton className="h-8 w-8 rounded-full" />
|
|
||||||
<div className="space-y-1 flex-1">
|
|
||||||
<Skeleton className="h-4 w-24" />
|
|
||||||
<Skeleton className="h-3 w-12" />
|
|
||||||
</div>
|
|
||||||
<Skeleton className="h-4 w-16" />
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const currentList = view === "wealth" ? data?.topWealth : view === "networth" ? data?.topNetWorth : data?.topLevels;
|
|
||||||
|
|
||||||
const getTitle = () => {
|
|
||||||
switch (view) {
|
|
||||||
case "wealth": return "Richest Users";
|
|
||||||
case "networth": return "Highest Net Worth";
|
|
||||||
case "levels": return "Top Levels";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card className={cn("glass-card border-none transition-all duration-300", className)}>
|
|
||||||
<CardHeader className="pb-2">
|
|
||||||
<div className="flex flex-wrap items-center justify-between gap-4">
|
|
||||||
<CardTitle className="text-sm font-medium flex items-center gap-2 whitespace-nowrap">
|
|
||||||
{getTitle()}
|
|
||||||
</CardTitle>
|
|
||||||
<div className="flex bg-muted/50 rounded-lg p-0.5">
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
className={cn(
|
|
||||||
"h-6 px-2 text-xs rounded-md transition-all",
|
|
||||||
view === "wealth" ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
|
|
||||||
)}
|
|
||||||
onClick={() => setView("wealth")}
|
|
||||||
>
|
|
||||||
<Coins className="w-3 h-3 mr-1" />
|
|
||||||
Wealth
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
className={cn(
|
|
||||||
"h-6 px-2 text-xs rounded-md transition-all",
|
|
||||||
view === "levels" ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
|
|
||||||
)}
|
|
||||||
onClick={() => setView("levels")}
|
|
||||||
>
|
|
||||||
<Award className="w-3 h-3 mr-1" />
|
|
||||||
Levels
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
className={cn(
|
|
||||||
"h-6 px-2 text-xs rounded-md transition-all",
|
|
||||||
view === "networth" ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
|
|
||||||
)}
|
|
||||||
onClick={() => setView("networth")}
|
|
||||||
>
|
|
||||||
<Target className="w-3 h-3 mr-1" />
|
|
||||||
Net Worth
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<div className="space-y-4 animate-in fade-in slide-up duration-300 max-h-[300px] overflow-y-auto pr-2 custom-scrollbar" key={view}>
|
|
||||||
{currentList?.map((user, index) => {
|
|
||||||
const isTop = index === 0;
|
|
||||||
const RankIcon = index === 0 ? Crown : index === 1 ? Trophy : Award;
|
|
||||||
const rankColor = index === 0 ? "text-yellow-500" : index === 1 ? "text-slate-400" : "text-orange-500";
|
|
||||||
const bgColor = index === 0 ? "bg-yellow-500/10 border-yellow-500/20" : index === 1 ? "bg-slate-400/10 border-slate-400/20" : "bg-orange-500/10 border-orange-500/20";
|
|
||||||
|
|
||||||
// Type guard or simple check because structure differs slightly or we can normalize
|
|
||||||
let valueDisplay = "";
|
|
||||||
if (view === "wealth") {
|
|
||||||
valueDisplay = `${Number((user as any).balance).toLocaleString()} AU`;
|
|
||||||
} else if (view === "networth") {
|
|
||||||
valueDisplay = `${Number((user as any).netWorth).toLocaleString()} AU`;
|
|
||||||
} else {
|
|
||||||
valueDisplay = `Lvl ${(user as any).level}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div key={user.username} className={cn(
|
|
||||||
"flex items-center gap-3 p-2 rounded-lg border transition-colors",
|
|
||||||
"hover:bg-muted/50 border-transparent hover:border-border/50",
|
|
||||||
isTop && "bg-primary/5 border-primary/10"
|
|
||||||
)}>
|
|
||||||
<div className={cn(
|
|
||||||
"w-8 h-8 flex items-center justify-center rounded-full border text-xs font-bold",
|
|
||||||
bgColor, rankColor
|
|
||||||
)}>
|
|
||||||
{index + 1}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<p className="text-sm font-medium truncate flex items-center gap-1.5">
|
|
||||||
{user.username}
|
|
||||||
{isTop && <Crown className="w-3 h-3 text-yellow-500 fill-yellow-500" />}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="text-right">
|
|
||||||
<span className={cn(
|
|
||||||
"text-xs font-bold font-mono",
|
|
||||||
view === "wealth" ? "text-emerald-500" : view === "networth" ? "text-purple-500" : "text-blue-500"
|
|
||||||
)}>
|
|
||||||
{valueDisplay}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
|
|
||||||
{(!currentList || currentList.length === 0) && (
|
|
||||||
<div className="text-center py-4 text-muted-foreground text-sm">
|
|
||||||
No data available
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card >
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,281 +0,0 @@
|
|||||||
/**
|
|
||||||
* LootTableBuilder Component
|
|
||||||
* Visual editor for configuring lootbox drop pools with items and currencies.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { useState, useCallback, useEffect } from "react";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { Input } from "@/components/ui/input";
|
|
||||||
import { Label } from "@/components/ui/label";
|
|
||||||
import { Card, CardContent } from "@/components/ui/card";
|
|
||||||
import {
|
|
||||||
Select,
|
|
||||||
SelectContent,
|
|
||||||
SelectItem,
|
|
||||||
SelectTrigger,
|
|
||||||
SelectValue,
|
|
||||||
} from "@/components/ui/select";
|
|
||||||
import { Slider } from "@/components/ui/slider";
|
|
||||||
import { Plus, Trash2, Package, Coins, Sparkles, GripVertical, Percent } from "lucide-react";
|
|
||||||
import { cn } from "@/lib/utils";
|
|
||||||
|
|
||||||
// Loot drop types
|
|
||||||
type LootType = "ITEM" | "CURRENCY" | "XP";
|
|
||||||
|
|
||||||
interface LootDrop {
|
|
||||||
type: LootType;
|
|
||||||
itemId?: number;
|
|
||||||
itemName?: string;
|
|
||||||
amount?: number;
|
|
||||||
minAmount?: number;
|
|
||||||
maxAmount?: number;
|
|
||||||
weight: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface LootTableBuilderProps {
|
|
||||||
pool: LootDrop[];
|
|
||||||
onChange: (pool: LootDrop[]) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const LOOT_TYPES = [
|
|
||||||
{ value: "ITEM" as LootType, label: "Item", icon: Package, color: "text-purple-400" },
|
|
||||||
{ value: "CURRENCY" as LootType, label: "Currency", icon: Coins, color: "text-amber-400" },
|
|
||||||
{ value: "XP" as LootType, label: "XP", icon: Sparkles, color: "text-blue-400" },
|
|
||||||
];
|
|
||||||
|
|
||||||
const getDefaultDrop = (type: LootType): LootDrop => {
|
|
||||||
switch (type) {
|
|
||||||
case "ITEM":
|
|
||||||
return { type: "ITEM", itemId: 0, itemName: "", weight: 10 };
|
|
||||||
case "CURRENCY":
|
|
||||||
return { type: "CURRENCY", minAmount: 100, maxAmount: 500, weight: 30 };
|
|
||||||
case "XP":
|
|
||||||
return { type: "XP", minAmount: 50, maxAmount: 200, weight: 20 };
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export function LootTableBuilder({ pool, onChange }: LootTableBuilderProps) {
|
|
||||||
// Calculate total weight for probability display
|
|
||||||
const totalWeight = pool.reduce((sum, drop) => sum + drop.weight, 0);
|
|
||||||
|
|
||||||
const addDrop = useCallback(() => {
|
|
||||||
onChange([...pool, getDefaultDrop("CURRENCY")]);
|
|
||||||
}, [pool, onChange]);
|
|
||||||
|
|
||||||
const removeDrop = useCallback((index: number) => {
|
|
||||||
onChange(pool.filter((_, i) => i !== index));
|
|
||||||
}, [pool, onChange]);
|
|
||||||
|
|
||||||
const updateDrop = useCallback((index: number, updates: Partial<LootDrop>) => {
|
|
||||||
onChange(pool.map((drop, i) => i === index ? { ...drop, ...updates } : drop));
|
|
||||||
}, [pool, onChange]);
|
|
||||||
|
|
||||||
const changeDropType = useCallback((index: number, newType: LootType) => {
|
|
||||||
onChange(pool.map((drop, i) => i === index ? getDefaultDrop(newType) : drop));
|
|
||||||
}, [pool, onChange]);
|
|
||||||
|
|
||||||
const getProbability = (weight: number): string => {
|
|
||||||
if (totalWeight === 0) return "0%";
|
|
||||||
return ((weight / totalWeight) * 100).toFixed(1) + "%";
|
|
||||||
};
|
|
||||||
|
|
||||||
if (pool.length === 0) {
|
|
||||||
return (
|
|
||||||
<div className="border border-dashed border-border/50 rounded-lg p-6 text-center">
|
|
||||||
<Package className="h-8 w-8 text-muted-foreground mx-auto mb-2" />
|
|
||||||
<p className="text-sm text-muted-foreground mb-3">
|
|
||||||
No drops configured yet
|
|
||||||
</p>
|
|
||||||
<Button type="button" variant="outline" size="sm" onClick={addDrop}>
|
|
||||||
<Plus className="h-4 w-4 mr-2" />
|
|
||||||
Add Drop
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-3">
|
|
||||||
{/* Probability Summary Bar */}
|
|
||||||
{pool.length > 0 && (
|
|
||||||
<div className="flex h-6 rounded-lg overflow-hidden">
|
|
||||||
{pool.map((drop, index) => {
|
|
||||||
const lootType = LOOT_TYPES.find(t => t.value === drop.type);
|
|
||||||
const probability = totalWeight > 0 ? (drop.weight / totalWeight) * 100 : 0;
|
|
||||||
|
|
||||||
if (probability < 1) return null;
|
|
||||||
|
|
||||||
const colors: Record<LootType, string> = {
|
|
||||||
ITEM: "bg-purple-500",
|
|
||||||
CURRENCY: "bg-amber-500",
|
|
||||||
XP: "bg-blue-500",
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={index}
|
|
||||||
className={cn(
|
|
||||||
"h-full transition-all duration-300 relative group cursor-pointer",
|
|
||||||
colors[drop.type]
|
|
||||||
)}
|
|
||||||
style={{ width: `${probability}%` }}
|
|
||||||
title={`${lootType?.label}: ${probability.toFixed(1)}%`}
|
|
||||||
>
|
|
||||||
{probability > 10 && (
|
|
||||||
<span className="absolute inset-0 flex items-center justify-center text-xs font-medium text-white">
|
|
||||||
{probability.toFixed(0)}%
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Drop List */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
{pool.map((drop, index) => {
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card key={index} className="bg-muted/20 border-border/30">
|
|
||||||
<CardContent className="p-4 space-y-3">
|
|
||||||
{/* Header Row */}
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<GripVertical className="h-4 w-4 text-muted-foreground/50 cursor-grab" />
|
|
||||||
|
|
||||||
{/* Type Selector */}
|
|
||||||
<Select
|
|
||||||
value={drop.type}
|
|
||||||
onValueChange={(value) => changeDropType(index, value as LootType)}
|
|
||||||
>
|
|
||||||
<SelectTrigger className="w-32 bg-background/50">
|
|
||||||
<SelectValue />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
{LOOT_TYPES.map((type) => (
|
|
||||||
<SelectItem key={type.value} value={type.value}>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<type.icon className={cn("h-4 w-4", type.color)} />
|
|
||||||
{type.label}
|
|
||||||
</div>
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
|
|
||||||
{/* Probability Badge */}
|
|
||||||
<div className="flex items-center gap-1 text-sm text-muted-foreground ml-auto">
|
|
||||||
<Percent className="h-3 w-3" />
|
|
||||||
{getProbability(drop.weight)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Delete Button */}
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => removeDrop(index)}
|
|
||||||
className="h-8 w-8 p-0 text-muted-foreground hover:text-destructive"
|
|
||||||
>
|
|
||||||
<Trash2 className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Type-Specific Fields */}
|
|
||||||
<div className="grid grid-cols-2 gap-3">
|
|
||||||
{drop.type === "ITEM" && (
|
|
||||||
<>
|
|
||||||
<div className="space-y-1.5">
|
|
||||||
<Label className="text-xs">Item ID</Label>
|
|
||||||
<Input
|
|
||||||
type="number"
|
|
||||||
value={drop.itemId || ""}
|
|
||||||
onChange={(e) => updateDrop(index, { itemId: parseInt(e.target.value) || 0 })}
|
|
||||||
placeholder="Item ID"
|
|
||||||
className="bg-background/50 h-8 text-sm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-1.5">
|
|
||||||
<Label className="text-xs">Item Name (Optional)</Label>
|
|
||||||
<Input
|
|
||||||
value={drop.itemName || ""}
|
|
||||||
onChange={(e) => updateDrop(index, { itemName: e.target.value })}
|
|
||||||
placeholder="For reference only"
|
|
||||||
className="bg-background/50 h-8 text-sm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{(drop.type === "CURRENCY" || drop.type === "XP") && (
|
|
||||||
<>
|
|
||||||
<div className="space-y-1.5">
|
|
||||||
<Label className="text-xs">Min Amount</Label>
|
|
||||||
<Input
|
|
||||||
type="number"
|
|
||||||
value={drop.minAmount ?? drop.amount ?? 0}
|
|
||||||
onChange={(e) => {
|
|
||||||
const min = parseInt(e.target.value) || 0;
|
|
||||||
const currentMax = drop.maxAmount ?? drop.amount ?? min;
|
|
||||||
updateDrop(index, {
|
|
||||||
minAmount: min,
|
|
||||||
maxAmount: Math.max(min, currentMax),
|
|
||||||
amount: undefined // Clear amount
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
className="bg-background/50 h-8 text-sm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-1.5">
|
|
||||||
<Label className="text-xs">Max Amount</Label>
|
|
||||||
<Input
|
|
||||||
type="number"
|
|
||||||
value={drop.maxAmount ?? drop.amount ?? 0}
|
|
||||||
onChange={(e) => {
|
|
||||||
const max = parseInt(e.target.value) || 0;
|
|
||||||
const currentMin = drop.minAmount ?? drop.amount ?? max;
|
|
||||||
updateDrop(index, {
|
|
||||||
minAmount: Math.min(currentMin, max),
|
|
||||||
maxAmount: max,
|
|
||||||
amount: undefined // Clear amount
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
className="bg-background/50 h-8 text-sm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Weight Slider */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<Label className="text-xs">Weight</Label>
|
|
||||||
<span className="text-xs text-muted-foreground">{drop.weight}</span>
|
|
||||||
</div>
|
|
||||||
<Slider
|
|
||||||
value={[drop.weight]}
|
|
||||||
onValueChange={(values) => updateDrop(index, { weight: values[0] ?? drop.weight })}
|
|
||||||
min={1}
|
|
||||||
max={100}
|
|
||||||
step={1}
|
|
||||||
className="py-1"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Add Button */}
|
|
||||||
<Button type="button" variant="outline" size="sm" onClick={addDrop}>
|
|
||||||
<Plus className="h-4 w-4 mr-2" />
|
|
||||||
Add Drop
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default LootTableBuilder;
|
|
||||||
@@ -1,128 +0,0 @@
|
|||||||
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
|
|
||||||
import { Progress } from "./ui/progress";
|
|
||||||
import { Gift, Clock, Sparkles, Zap, Timer } from "lucide-react";
|
|
||||||
import { cn } from "../lib/utils";
|
|
||||||
import { Skeleton } from "./ui/skeleton";
|
|
||||||
|
|
||||||
export interface LootdropData {
|
|
||||||
rewardAmount: number;
|
|
||||||
currency: string;
|
|
||||||
createdAt: string;
|
|
||||||
expiresAt: string | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface LootdropState {
|
|
||||||
monitoredChannels: number;
|
|
||||||
hottestChannel: {
|
|
||||||
id: string;
|
|
||||||
messages: number;
|
|
||||||
progress: number;
|
|
||||||
cooldown: boolean;
|
|
||||||
} | null;
|
|
||||||
config: {
|
|
||||||
requiredMessages: number;
|
|
||||||
dropChance: number;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
interface LootdropCardProps {
|
|
||||||
drop?: LootdropData | null;
|
|
||||||
state?: LootdropState;
|
|
||||||
isLoading?: boolean;
|
|
||||||
className?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function LootdropCard({ drop, state, isLoading, className }: LootdropCardProps) {
|
|
||||||
if (isLoading) {
|
|
||||||
return (
|
|
||||||
<Card className={cn("glass-card border-none bg-card/40", className)}>
|
|
||||||
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
|
||||||
<CardTitle className="text-sm font-medium">Lootdrop Status</CardTitle>
|
|
||||||
<Gift className="h-4 w-4 text-muted-foreground" />
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<div className="space-y-3">
|
|
||||||
<Skeleton className="h-8 w-[120px]" />
|
|
||||||
<Skeleton className="h-4 w-[80px]" />
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const isActive = !!drop;
|
|
||||||
const progress = state?.hottestChannel?.progress || 0;
|
|
||||||
const isCooldown = state?.hottestChannel?.cooldown || false;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card className={cn(
|
|
||||||
"glass-card border-none transition-all duration-500 overflow-hidden relative",
|
|
||||||
isActive ? "bg-primary/5 border-primary/20 hover-glow ring-1 ring-primary/20" : "bg-card/40",
|
|
||||||
className
|
|
||||||
)}>
|
|
||||||
{/* Ambient Background Effect */}
|
|
||||||
{isActive && (
|
|
||||||
<div className="absolute -right-4 -top-4 w-24 h-24 bg-primary/20 blur-3xl rounded-full pointer-events-none animate-pulse" />
|
|
||||||
)}
|
|
||||||
|
|
||||||
<CardHeader className="flex flex-row items-center justify-between pb-2 relative z-10">
|
|
||||||
<CardTitle className="text-sm font-medium flex items-center gap-2">
|
|
||||||
{isActive ? "Active Lootdrop" : "Lootdrop Potential"}
|
|
||||||
{isActive && (
|
|
||||||
<span className="relative flex h-2 w-2">
|
|
||||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
|
|
||||||
<span className="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</CardTitle>
|
|
||||||
<Gift className={cn("h-4 w-4 transition-colors", isActive ? "text-primary " : "text-muted-foreground")} />
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="relative z-10">
|
|
||||||
{isActive ? (
|
|
||||||
<div className="space-y-3 animate-in fade-in slide-up">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<span className="text-2xl font-bold text-primary flex items-center gap-2">
|
|
||||||
<Sparkles className="w-5 h-5 text-yellow-500 fill-yellow-500 animate-pulse" />
|
|
||||||
{drop.rewardAmount.toLocaleString()} {drop.currency}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
|
||||||
<Clock className="w-3 h-3" />
|
|
||||||
<span>Dropped {new Date(drop.createdAt).toLocaleTimeString()}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="space-y-4">
|
|
||||||
{isCooldown ? (
|
|
||||||
<div className="flex flex-col items-center justify-center py-2 text-muted-foreground space-y-1">
|
|
||||||
<Timer className="w-6 h-6 text-yellow-500 opacity-80" />
|
|
||||||
<p className="text-sm font-medium text-yellow-500/80">Cooling Down...</p>
|
|
||||||
<p className="text-xs opacity-50">Channels are recovering.</p>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="space-y-2">
|
|
||||||
<div className="flex items-center justify-between text-xs text-muted-foreground">
|
|
||||||
<div className="flex items-center gap-1.5">
|
|
||||||
<Zap className={cn("w-3 h-3", progress > 80 ? "text-yellow-500" : "text-muted-foreground")} />
|
|
||||||
<span>Next Drop Chance</span>
|
|
||||||
</div>
|
|
||||||
<span className="font-mono">{Math.round(progress)}%</span>
|
|
||||||
</div>
|
|
||||||
<Progress value={progress} className="h-1.5" indicatorClassName={cn(progress > 80 ? "bg-yellow-500" : "bg-primary")} />
|
|
||||||
{state?.hottestChannel ? (
|
|
||||||
<p className="text-[10px] text-muted-foreground text-right opacity-70">
|
|
||||||
{state.hottestChannel.messages} / {state.config.requiredMessages} msgs
|
|
||||||
</p>
|
|
||||||
) : (
|
|
||||||
<p className="text-[10px] text-muted-foreground text-center opacity-50 pt-1">
|
|
||||||
No recent activity
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,41 +0,0 @@
|
|||||||
import { Link } from "react-router-dom"
|
|
||||||
import { useNavigation } from "@/contexts/navigation-context"
|
|
||||||
import { cn } from "@/lib/utils"
|
|
||||||
|
|
||||||
export function MobileNav() {
|
|
||||||
const { navItems } = useNavigation()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<nav className="fixed bottom-4 left-4 right-4 z-50 rounded-2xl border border-border/40 bg-background/60 backdrop-blur-xl supports-backdrop-filter:bg-background/60 md:hidden shadow-lg shadow-black/5">
|
|
||||||
<div className="flex h-16 items-center justify-around px-2">
|
|
||||||
{navItems.map((item) => (
|
|
||||||
<Link
|
|
||||||
key={item.title}
|
|
||||||
to={item.url}
|
|
||||||
className={cn(
|
|
||||||
"flex flex-col items-center justify-center gap-1 rounded-xl px-4 py-2 text-xs font-medium transition-all duration-200",
|
|
||||||
"min-w-[48px] min-h-[48px]",
|
|
||||||
item.isActive
|
|
||||||
? "text-primary bg-primary/10 shadow-[inset_0_2px_4px_rgba(0,0,0,0.05)]"
|
|
||||||
: "text-muted-foreground/80 hover:text-foreground hover:bg-white/5"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<item.icon className={cn(
|
|
||||||
"size-5 transition-transform duration-200",
|
|
||||||
item.isActive && "scale-110 fill-primary/20"
|
|
||||||
)} />
|
|
||||||
<span className={cn(
|
|
||||||
"truncate max-w-[60px] text-[10px]",
|
|
||||||
item.isActive && "font-bold"
|
|
||||||
)}>
|
|
||||||
{item.title}
|
|
||||||
</span>
|
|
||||||
{item.isActive && (
|
|
||||||
<span className="absolute bottom-1 h-0.5 w-4 rounded-full bg-primary/50 blur-[1px]" />
|
|
||||||
)}
|
|
||||||
</Link>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,297 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import { useForm } from "react-hook-form";
|
|
||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
|
||||||
import * as z from "zod";
|
|
||||||
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "./ui/card";
|
|
||||||
import { Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage } from "./ui/form";
|
|
||||||
import { Input } from "./ui/input";
|
|
||||||
import { Button } from "./ui/button";
|
|
||||||
import { Textarea } from "./ui/textarea";
|
|
||||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
|
|
||||||
import { toast } from "sonner";
|
|
||||||
import { ScrollArea } from "./ui/scroll-area";
|
|
||||||
import { Star, Coins } from "lucide-react";
|
|
||||||
|
|
||||||
interface QuestListItem {
|
|
||||||
id: number;
|
|
||||||
name: string;
|
|
||||||
description: string | null;
|
|
||||||
triggerEvent: string;
|
|
||||||
requirements: { target?: number };
|
|
||||||
rewards: { xp?: number; balance?: number };
|
|
||||||
}
|
|
||||||
|
|
||||||
const questSchema = z.object({
|
|
||||||
name: z.string().min(3, "Name must be at least 3 characters"),
|
|
||||||
description: z.string().optional(),
|
|
||||||
triggerEvent: z.string().min(1, "Trigger event is required"),
|
|
||||||
target: z.number().min(1, "Target must be at least 1"),
|
|
||||||
xpReward: z.number().min(0).optional(),
|
|
||||||
balanceReward: z.number().min(0).optional(),
|
|
||||||
});
|
|
||||||
|
|
||||||
type QuestFormValues = z.infer<typeof questSchema>;
|
|
||||||
|
|
||||||
interface QuestFormProps {
|
|
||||||
initialData?: QuestListItem;
|
|
||||||
onUpdate?: () => void;
|
|
||||||
onCancel?: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const TRIGGER_EVENTS = [
|
|
||||||
{ label: "XP Gain", value: "XP_GAIN" },
|
|
||||||
{ label: "Item Collect", value: "ITEM_COLLECT" },
|
|
||||||
{ label: "Item Use", value: "ITEM_USE" },
|
|
||||||
{ label: "Daily Reward", value: "DAILY_REWARD" },
|
|
||||||
{ label: "Lootbox Currency Reward", value: "LOOTBOX" },
|
|
||||||
{ label: "Exam Reward", value: "EXAM_REWARD" },
|
|
||||||
{ label: "Purchase", value: "PURCHASE" },
|
|
||||||
{ label: "Transfer In", value: "TRANSFER_IN" },
|
|
||||||
{ label: "Transfer Out", value: "TRANSFER_OUT" },
|
|
||||||
{ label: "Trade In", value: "TRADE_IN" },
|
|
||||||
{ label: "Trade Out", value: "TRADE_OUT" },
|
|
||||||
{ label: "Quest Reward", value: "QUEST_REWARD" },
|
|
||||||
{ label: "Trivia Entry", value: "TRIVIA_ENTRY" },
|
|
||||||
{ label: "Trivia Win", value: "TRIVIA_WIN" },
|
|
||||||
];
|
|
||||||
|
|
||||||
export function QuestForm({ initialData, onUpdate, onCancel }: QuestFormProps) {
|
|
||||||
const isEditMode = initialData !== undefined;
|
|
||||||
const [isSubmitting, setIsSubmitting] = React.useState(false);
|
|
||||||
const form = useForm<QuestFormValues>({
|
|
||||||
resolver: zodResolver(questSchema),
|
|
||||||
defaultValues: {
|
|
||||||
name: initialData?.name || "",
|
|
||||||
description: initialData?.description || "",
|
|
||||||
triggerEvent: initialData?.triggerEvent || "XP_GAIN",
|
|
||||||
target: (initialData?.requirements as { target?: number })?.target || 1,
|
|
||||||
xpReward: (initialData?.rewards as { xp?: number })?.xp || 100,
|
|
||||||
balanceReward: (initialData?.rewards as { balance?: number })?.balance || 500,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
if (initialData) {
|
|
||||||
form.reset({
|
|
||||||
name: initialData.name || "",
|
|
||||||
description: initialData.description || "",
|
|
||||||
triggerEvent: initialData.triggerEvent || "XP_GAIN",
|
|
||||||
target: (initialData.requirements as { target?: number })?.target || 1,
|
|
||||||
xpReward: (initialData.rewards as { xp?: number })?.xp || 100,
|
|
||||||
balanceReward: (initialData.rewards as { balance?: number })?.balance || 500,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, [initialData, form]);
|
|
||||||
|
|
||||||
const onSubmit = async (data: QuestFormValues) => {
|
|
||||||
setIsSubmitting(true);
|
|
||||||
try {
|
|
||||||
const url = isEditMode ? `/api/quests/${initialData.id}` : "/api/quests";
|
|
||||||
const method = isEditMode ? "PUT" : "POST";
|
|
||||||
|
|
||||||
const response = await fetch(url, {
|
|
||||||
method: method,
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
},
|
|
||||||
body: JSON.stringify(data),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
const errorData = await response.json();
|
|
||||||
throw new Error(errorData.error || (isEditMode ? "Failed to update quest" : "Failed to create quest"));
|
|
||||||
}
|
|
||||||
|
|
||||||
toast.success(isEditMode ? "Quest updated successfully!" : "Quest created successfully!", {
|
|
||||||
description: `${data.name} has been ${isEditMode ? "updated" : "added to the database"}.`,
|
|
||||||
});
|
|
||||||
form.reset({
|
|
||||||
name: "",
|
|
||||||
description: "",
|
|
||||||
triggerEvent: "XP_GAIN",
|
|
||||||
target: 1,
|
|
||||||
xpReward: 100,
|
|
||||||
balanceReward: 500,
|
|
||||||
});
|
|
||||||
onUpdate?.();
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Submission error:", error);
|
|
||||||
toast.error(isEditMode ? "Failed to update quest" : "Failed to create quest", {
|
|
||||||
description: error instanceof Error ? error.message : "An unknown error occurred",
|
|
||||||
});
|
|
||||||
} finally {
|
|
||||||
setIsSubmitting(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card className="glass-card overflow-hidden">
|
|
||||||
<div className="h-1.5 bg-primary w-full" />
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle className="text-2xl font-bold text-primary">{isEditMode ? "Edit Quest" : "Create New Quest"}</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
{isEditMode ? "Update the quest configuration." : "Configure a new quest for the Aurora RPG academy."}
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<Form {...form}>
|
|
||||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name="name"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel>Quest Name</FormLabel>
|
|
||||||
<FormControl>
|
|
||||||
<Input placeholder="Collector's Journey" {...field} className="bg-background/50" />
|
|
||||||
</FormControl>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name="triggerEvent"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel>Trigger Event</FormLabel>
|
|
||||||
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
|
||||||
<FormControl>
|
|
||||||
<SelectTrigger className="bg-background/50">
|
|
||||||
<SelectValue placeholder="Select an event" />
|
|
||||||
</SelectTrigger>
|
|
||||||
</FormControl>
|
|
||||||
<SelectContent className="glass-card border-border/50">
|
|
||||||
<ScrollArea className="h-48">
|
|
||||||
{TRIGGER_EVENTS.map((event) => (
|
|
||||||
<SelectItem key={event.value} value={event.value}>
|
|
||||||
{event.label}
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</ScrollArea>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name="description"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel>Description</FormLabel>
|
|
||||||
<FormControl>
|
|
||||||
<Textarea
|
|
||||||
placeholder="Assigns a task to the student..."
|
|
||||||
{...field}
|
|
||||||
className="min-h-[100px] bg-background/50"
|
|
||||||
/>
|
|
||||||
</FormControl>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name="target"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel>Target Value</FormLabel>
|
|
||||||
<FormControl>
|
|
||||||
<Input
|
|
||||||
type="number"
|
|
||||||
{...field}
|
|
||||||
onChange={e => field.onChange(parseInt(e.target.value))}
|
|
||||||
className="bg-background/50"
|
|
||||||
/>
|
|
||||||
</FormControl>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name="xpReward"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel className="flex items-center gap-2">
|
|
||||||
<Star className="w-4 h-4 text-amber-400" />
|
|
||||||
XP Reward
|
|
||||||
</FormLabel>
|
|
||||||
<FormControl>
|
|
||||||
<Input
|
|
||||||
type="number"
|
|
||||||
{...field}
|
|
||||||
onChange={e => field.onChange(parseInt(e.target.value))}
|
|
||||||
className="bg-background/50"
|
|
||||||
/>
|
|
||||||
</FormControl>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name="balanceReward"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel className="flex items-center gap-2">
|
|
||||||
<Coins className="w-4 h-4 text-amber-500" />
|
|
||||||
AU Reward
|
|
||||||
</FormLabel>
|
|
||||||
<FormControl>
|
|
||||||
<Input
|
|
||||||
type="number"
|
|
||||||
{...field}
|
|
||||||
onChange={e => field.onChange(parseInt(e.target.value))}
|
|
||||||
className="bg-background/50"
|
|
||||||
/>
|
|
||||||
</FormControl>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{isEditMode ? (
|
|
||||||
<div className="flex gap-4">
|
|
||||||
<Button
|
|
||||||
type="submit"
|
|
||||||
disabled={isSubmitting}
|
|
||||||
className="flex-1 bg-primary text-primary-foreground hover:glow-primary active-press py-6 text-lg font-bold"
|
|
||||||
>
|
|
||||||
{isSubmitting ? "Updating..." : "Update Quest"}
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="outline"
|
|
||||||
onClick={onCancel}
|
|
||||||
className="flex-1 py-6 text-lg font-bold"
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<Button
|
|
||||||
type="submit"
|
|
||||||
disabled={isSubmitting}
|
|
||||||
className="w-full bg-primary text-primary-foreground hover:glow-primary active-press py-6 text-lg font-bold"
|
|
||||||
>
|
|
||||||
{isSubmitting ? "Creating..." : "Create Quest"}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</form>
|
|
||||||
</Form>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,288 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import { toast } from "sonner";
|
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
|
|
||||||
import { Badge } from "./ui/badge";
|
|
||||||
import { Skeleton } from "./ui/skeleton";
|
|
||||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
|
|
||||||
import { cn } from "../lib/utils";
|
|
||||||
import { FileText, RefreshCw, Trash2, Pencil, Star, Coins } from "lucide-react";
|
|
||||||
|
|
||||||
interface QuestListItem {
|
|
||||||
id: number;
|
|
||||||
name: string;
|
|
||||||
description: string | null;
|
|
||||||
triggerEvent: string;
|
|
||||||
requirements: { target?: number };
|
|
||||||
rewards: { xp?: number; balance?: number };
|
|
||||||
}
|
|
||||||
|
|
||||||
interface QuestTableProps {
|
|
||||||
quests: QuestListItem[];
|
|
||||||
isInitialLoading: boolean;
|
|
||||||
isRefreshing: boolean;
|
|
||||||
onRefresh?: () => void;
|
|
||||||
onDelete?: (id: number) => void;
|
|
||||||
onEdit?: (id: number) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const TRIGGER_EVENT_LABELS: Record<string, string> = {
|
|
||||||
XP_GAIN: "XP Gain",
|
|
||||||
ITEM_COLLECT: "Item Collect",
|
|
||||||
ITEM_USE: "Item Use",
|
|
||||||
DAILY_REWARD: "Daily Reward",
|
|
||||||
LOOTBOX: "Lootbox Currency Reward",
|
|
||||||
EXAM_REWARD: "Exam Reward",
|
|
||||||
PURCHASE: "Purchase",
|
|
||||||
TRANSFER_IN: "Transfer In",
|
|
||||||
TRANSFER_OUT: "Transfer Out",
|
|
||||||
TRADE_IN: "Trade In",
|
|
||||||
TRADE_OUT: "Trade Out",
|
|
||||||
QUEST_REWARD: "Quest Reward",
|
|
||||||
TRIVIA_ENTRY: "Trivia Entry",
|
|
||||||
TRIVIA_WIN: "Trivia Win",
|
|
||||||
};
|
|
||||||
|
|
||||||
function getTriggerEventLabel(triggerEvent: string): string {
|
|
||||||
return TRIGGER_EVENT_LABELS[triggerEvent] || triggerEvent;
|
|
||||||
}
|
|
||||||
|
|
||||||
function TruncatedText({ text, maxLength = 100 }: { text: string; maxLength?: number }) {
|
|
||||||
if (!text || text.length <= maxLength) {
|
|
||||||
return <span>{text || "-"}</span>;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<TooltipProvider>
|
|
||||||
<Tooltip>
|
|
||||||
<TooltipTrigger asChild>
|
|
||||||
<span className="cursor-help border-b border-dashed border-muted-foreground/50">
|
|
||||||
{text.slice(0, maxLength)}...
|
|
||||||
</span>
|
|
||||||
</TooltipTrigger>
|
|
||||||
<TooltipContent className="max-w-md">
|
|
||||||
<p>{text}</p>
|
|
||||||
</TooltipContent>
|
|
||||||
</Tooltip>
|
|
||||||
</TooltipProvider>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function QuestTableSkeleton() {
|
|
||||||
return (
|
|
||||||
<div className="space-y-3 animate-pulse">
|
|
||||||
<div className="grid grid-cols-8 gap-4 px-4 py-2 text-sm font-medium text-muted-foreground">
|
|
||||||
<Skeleton className="h-4 w-8" />
|
|
||||||
<Skeleton className="h-4 w-32" />
|
|
||||||
<Skeleton className="h-4 w-48" />
|
|
||||||
<Skeleton className="h-4 w-24" />
|
|
||||||
<Skeleton className="h-4 w-16" />
|
|
||||||
<Skeleton className="h-4 w-24" />
|
|
||||||
<Skeleton className="h-4 w-24" />
|
|
||||||
</div>
|
|
||||||
{Array.from({ length: 5 }).map((_, i) => (
|
|
||||||
<div key={i} className="grid grid-cols-8 gap-4 px-4 py-3 border-t border-border/50">
|
|
||||||
<Skeleton className="h-5 w-8" />
|
|
||||||
<Skeleton className="h-5 w-32" />
|
|
||||||
<Skeleton className="h-5 w-48" />
|
|
||||||
<Skeleton className="h-5 w-24" />
|
|
||||||
<Skeleton className="h-5 w-16" />
|
|
||||||
<Skeleton className="h-5 w-24" />
|
|
||||||
<Skeleton className="h-5 w-24" />
|
|
||||||
<Skeleton className="h-5 w-16" />
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function EmptyQuestState() {
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col items-center justify-center py-12 text-center animate-in fade-in duration-500">
|
|
||||||
<div className="rounded-full bg-muted/50 p-4 mb-4">
|
|
||||||
<FileText className="w-8 h-8 text-muted-foreground" />
|
|
||||||
</div>
|
|
||||||
<h3 className="text-lg font-semibold text-foreground">No quests available</h3>
|
|
||||||
<p className="text-muted-foreground mt-1 max-w-sm">
|
|
||||||
There are no quests in the database yet. Create your first quest using the form below.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function QuestTableContent({ quests, onDelete, onEdit }: { quests: QuestListItem[]; onDelete?: (id: number) => void; onEdit?: (id: number) => void }) {
|
|
||||||
if (quests.length === 0) {
|
|
||||||
return <EmptyQuestState />;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="overflow-x-auto animate-in fade-in slide-in-from-bottom-2 duration-300">
|
|
||||||
<table className="w-full">
|
|
||||||
<thead>
|
|
||||||
<tr className="border-b border-border/50">
|
|
||||||
<th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground w-16">
|
|
||||||
ID
|
|
||||||
</th>
|
|
||||||
<th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground w-40">
|
|
||||||
Name
|
|
||||||
</th>
|
|
||||||
<th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground w-64">
|
|
||||||
Description
|
|
||||||
</th>
|
|
||||||
<th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground w-36">
|
|
||||||
Trigger Event
|
|
||||||
</th>
|
|
||||||
<th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground w-20">
|
|
||||||
Target
|
|
||||||
</th>
|
|
||||||
<th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground w-32">
|
|
||||||
XP Reward
|
|
||||||
</th>
|
|
||||||
<th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground w-32">
|
|
||||||
AU Reward
|
|
||||||
</th>
|
|
||||||
<th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground w-24">
|
|
||||||
Actions
|
|
||||||
</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{quests.map((quest) => {
|
|
||||||
const requirements = quest.requirements as { target?: number };
|
|
||||||
const rewards = quest.rewards as { xp?: number; balance?: number };
|
|
||||||
const target = requirements?.target || 1;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<tr
|
|
||||||
key={quest.id}
|
|
||||||
id={`quest-row-${quest.id}`}
|
|
||||||
className="border-b border-border/30 hover:bg-muted/20 transition-colors animate-in fade-in slide-in-from-left-2 duration-300"
|
|
||||||
>
|
|
||||||
<td className="py-3 px-4 text-sm text-muted-foreground font-mono">
|
|
||||||
#{quest.id}
|
|
||||||
</td>
|
|
||||||
<td className="py-3 px-4 text-sm font-medium text-foreground">
|
|
||||||
{quest.name}
|
|
||||||
</td>
|
|
||||||
<td className="py-3 px-4 text-sm text-muted-foreground">
|
|
||||||
<TruncatedText text={quest.description || ""} maxLength={50} />
|
|
||||||
</td>
|
|
||||||
<td className="py-3 px-4">
|
|
||||||
<Badge variant="outline" className="text-xs border-border/50">
|
|
||||||
{getTriggerEventLabel(quest.triggerEvent)}
|
|
||||||
</Badge>
|
|
||||||
</td>
|
|
||||||
<td className="py-3 px-4 text-sm text-foreground font-mono">
|
|
||||||
{target}
|
|
||||||
</td>
|
|
||||||
<td className="py-3 px-4 text-sm text-foreground">
|
|
||||||
{rewards?.xp ? (
|
|
||||||
<span className="flex items-center gap-1">
|
|
||||||
<Star className="w-4 h-4 text-amber-400" />
|
|
||||||
<span className="font-mono">{rewards.xp}</span>
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
<span className="text-muted-foreground">-</span>
|
|
||||||
)}
|
|
||||||
</td>
|
|
||||||
<td className="py-3 px-4 text-sm text-foreground">
|
|
||||||
{rewards?.balance ? (
|
|
||||||
<span className="flex items-center gap-1">
|
|
||||||
<Coins className="w-4 h-4 text-amber-500" />
|
|
||||||
<span className="font-mono">{rewards.balance}</span>
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
<span className="text-muted-foreground">-</span>
|
|
||||||
)}
|
|
||||||
</td>
|
|
||||||
<td className="py-3 px-4">
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
<button
|
|
||||||
onClick={() => onEdit?.(quest.id)}
|
|
||||||
className="p-1.5 rounded-md hover:bg-muted/50 transition-colors text-muted-foreground hover:text-foreground"
|
|
||||||
title="Edit quest"
|
|
||||||
>
|
|
||||||
<Pencil className="w-4 h-4" />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
toast("Delete this quest?", {
|
|
||||||
description: "This action cannot be undone.",
|
|
||||||
action: {
|
|
||||||
label: "Delete",
|
|
||||||
onClick: () => onDelete?.(quest.id)
|
|
||||||
},
|
|
||||||
cancel: {
|
|
||||||
label: "Cancel",
|
|
||||||
onClick: () => {}
|
|
||||||
},
|
|
||||||
style: {
|
|
||||||
background: "var(--destructive)",
|
|
||||||
color: "var(--destructive-foreground)"
|
|
||||||
},
|
|
||||||
actionButtonStyle: {
|
|
||||||
background: "var(--destructive)",
|
|
||||||
color: "var(--destructive-foreground)"
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
className="p-1.5 rounded-md hover:bg-muted/50 transition-colors text-muted-foreground hover:text-destructive"
|
|
||||||
title="Delete quest"
|
|
||||||
>
|
|
||||||
<Trash2 className="w-4 h-4" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function QuestTable({ quests, isInitialLoading, isRefreshing, onRefresh, onDelete, onEdit }: QuestTableProps) {
|
|
||||||
const showSkeleton = isInitialLoading && quests.length === 0;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card className="glass-card overflow-hidden">
|
|
||||||
<CardHeader className="pb-3">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<CardTitle className="text-xl font-bold text-primary">Quest Inventory</CardTitle>
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
{showSkeleton ? (
|
|
||||||
<Badge variant="secondary" className="animate-pulse">
|
|
||||||
Loading...
|
|
||||||
</Badge>
|
|
||||||
) : (
|
|
||||||
<Badge variant="outline" className="border-border/50">
|
|
||||||
{quests.length} quest{quests.length !== 1 ? "s" : ""}
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
<button
|
|
||||||
onClick={onRefresh}
|
|
||||||
disabled={isRefreshing}
|
|
||||||
className={cn(
|
|
||||||
"p-2 rounded-md hover:bg-muted/50 transition-colors",
|
|
||||||
isRefreshing && "cursor-wait"
|
|
||||||
)}
|
|
||||||
title="Refresh quests"
|
|
||||||
>
|
|
||||||
<RefreshCw className={cn(
|
|
||||||
"w-[18px] h-[18px] text-muted-foreground transition-transform",
|
|
||||||
isRefreshing && "animate-spin"
|
|
||||||
)} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
{showSkeleton ? (
|
|
||||||
<QuestTableSkeleton />
|
|
||||||
) : (
|
|
||||||
<QuestTableContent quests={quests} onDelete={onDelete} onEdit={onEdit} />
|
|
||||||
)}
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,62 +0,0 @@
|
|||||||
/**
|
|
||||||
* RarityBadge Component
|
|
||||||
* Displays item rarity with appropriate colors and optional glow effect.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { cn } from "@/lib/utils";
|
|
||||||
|
|
||||||
export type Rarity = 'C' | 'R' | 'SR' | 'SSR';
|
|
||||||
|
|
||||||
interface RarityBadgeProps {
|
|
||||||
rarity: Rarity | string;
|
|
||||||
className?: string;
|
|
||||||
size?: 'sm' | 'md' | 'lg';
|
|
||||||
}
|
|
||||||
|
|
||||||
const rarityStyles: Record<Rarity, { bg: string; text: string; glow?: string }> = {
|
|
||||||
C: {
|
|
||||||
bg: 'bg-zinc-600/30',
|
|
||||||
text: 'text-zinc-300',
|
|
||||||
},
|
|
||||||
R: {
|
|
||||||
bg: 'bg-blue-600/30',
|
|
||||||
text: 'text-blue-400',
|
|
||||||
},
|
|
||||||
SR: {
|
|
||||||
bg: 'bg-purple-600/30',
|
|
||||||
text: 'text-purple-400',
|
|
||||||
},
|
|
||||||
SSR: {
|
|
||||||
bg: 'bg-amber-600/30',
|
|
||||||
text: 'text-amber-400',
|
|
||||||
glow: 'shadow-[0_0_10px_rgba(251,191,36,0.4)]',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const sizeStyles = {
|
|
||||||
sm: 'text-xs px-1.5 py-0.5',
|
|
||||||
md: 'text-xs px-2 py-1',
|
|
||||||
lg: 'text-sm px-2.5 py-1',
|
|
||||||
};
|
|
||||||
|
|
||||||
export function RarityBadge({ rarity, className, size = 'md' }: RarityBadgeProps) {
|
|
||||||
const validRarity = (rarity in rarityStyles ? rarity : 'C') as Rarity;
|
|
||||||
const styles = rarityStyles[validRarity];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<span
|
|
||||||
className={cn(
|
|
||||||
'inline-flex items-center font-medium rounded-full',
|
|
||||||
styles.bg,
|
|
||||||
styles.text,
|
|
||||||
styles.glow,
|
|
||||||
sizeStyles[size],
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{validRarity}
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default RarityBadge;
|
|
||||||
@@ -1,98 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import { Card, CardHeader, CardTitle, CardContent } from "./ui/card";
|
|
||||||
import { Badge } from "./ui/badge";
|
|
||||||
import { type RecentEvent } from "@shared/modules/dashboard/dashboard.types";
|
|
||||||
import { cn } from "../lib/utils";
|
|
||||||
import { Skeleton } from "./ui/skeleton";
|
|
||||||
|
|
||||||
function timeAgo(dateInput: Date | string) {
|
|
||||||
const date = new Date(dateInput);
|
|
||||||
const now = new Date();
|
|
||||||
const seconds = Math.floor((now.getTime() - date.getTime()) / 1000);
|
|
||||||
|
|
||||||
if (seconds < 60) return "just now";
|
|
||||||
const minutes = Math.floor(seconds / 60);
|
|
||||||
if (minutes < 60) return `${minutes}m ago`;
|
|
||||||
const hours = Math.floor(minutes / 60);
|
|
||||||
if (hours < 24) return `${hours}h ago`;
|
|
||||||
return date.toLocaleDateString();
|
|
||||||
}
|
|
||||||
|
|
||||||
interface RecentActivityProps {
|
|
||||||
events: RecentEvent[];
|
|
||||||
isLoading?: boolean;
|
|
||||||
className?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function RecentActivity({ events, isLoading, className }: RecentActivityProps) {
|
|
||||||
return (
|
|
||||||
<Card className={cn("glass-card border-none bg-card/40 h-full", className)}>
|
|
||||||
<CardHeader className="pb-2">
|
|
||||||
<CardTitle className="flex items-center justify-between text-lg font-medium">
|
|
||||||
<span className="flex items-center gap-2">
|
|
||||||
<span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
|
|
||||||
Live Activity
|
|
||||||
</span>
|
|
||||||
{!isLoading && events.length > 0 && (
|
|
||||||
<Badge variant="glass" className="text-[10px] font-mono">
|
|
||||||
{events.length} EVENTS
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
{isLoading ? (
|
|
||||||
<div className="space-y-4 pt-2">
|
|
||||||
{[1, 2, 3].map((i) => (
|
|
||||||
<div key={i} className="flex items-center gap-4">
|
|
||||||
<Skeleton className="h-10 w-10 rounded-lg" />
|
|
||||||
<div className="space-y-2 flex-1">
|
|
||||||
<Skeleton className="h-4 w-3/4" />
|
|
||||||
<Skeleton className="h-3 w-1/2" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
) : events.length === 0 ? (
|
|
||||||
<div className="flex flex-col items-center justify-center py-12 text-muted-foreground space-y-2">
|
|
||||||
<div className="text-4xl">😴</div>
|
|
||||||
<p>No recent activity</p>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="space-y-3 max-h-[400px] overflow-y-auto pr-2 -mr-2 custom-scrollbar">
|
|
||||||
{events.map((event, i) => (
|
|
||||||
<div
|
|
||||||
key={i}
|
|
||||||
className="group flex items-start gap-3 p-3 rounded-xl bg-background/30 hover:bg-background/50 border border-transparent hover:border-border/50 transition-all duration-300"
|
|
||||||
>
|
|
||||||
<div className="text-2xl p-2 rounded-lg bg-background/50 group-hover:scale-110 transition-transform">
|
|
||||||
{event.icon || "📝"}
|
|
||||||
</div>
|
|
||||||
<div className="flex-1 min-w-0 py-1">
|
|
||||||
<p className="text-sm font-medium leading-none truncate mb-1.5 text-foreground/90">
|
|
||||||
{event.message}
|
|
||||||
</p>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Badge
|
|
||||||
variant={
|
|
||||||
event.type === 'error' ? 'destructive' :
|
|
||||||
event.type === 'warn' ? 'destructive' :
|
|
||||||
event.type === 'success' ? 'aurora' : 'secondary'
|
|
||||||
}
|
|
||||||
className="text-[10px] h-4 px-1.5"
|
|
||||||
>
|
|
||||||
{event.type}
|
|
||||||
</Badge>
|
|
||||||
<span className="text-[10px] text-muted-foreground font-mono">
|
|
||||||
{timeAgo(event.timestamp)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,39 +0,0 @@
|
|||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,77 +0,0 @@
|
|||||||
import React, { type ReactNode } from "react";
|
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
|
|
||||||
import { Skeleton } from "./ui/skeleton";
|
|
||||||
import { type LucideIcon, ChevronRight } from "lucide-react";
|
|
||||||
import { cn } from "../lib/utils";
|
|
||||||
|
|
||||||
interface StatCardProps {
|
|
||||||
title: string;
|
|
||||||
value: ReactNode;
|
|
||||||
subtitle?: ReactNode;
|
|
||||||
icon: LucideIcon;
|
|
||||||
isLoading?: boolean;
|
|
||||||
className?: string;
|
|
||||||
valueClassName?: string;
|
|
||||||
iconClassName?: string;
|
|
||||||
onClick?: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function StatCard({
|
|
||||||
title,
|
|
||||||
value,
|
|
||||||
subtitle,
|
|
||||||
icon: Icon,
|
|
||||||
isLoading = false,
|
|
||||||
className,
|
|
||||||
valueClassName,
|
|
||||||
iconClassName,
|
|
||||||
onClick,
|
|
||||||
}: StatCardProps) {
|
|
||||||
return (
|
|
||||||
<Card
|
|
||||||
className={cn(
|
|
||||||
"glass-card border-none bg-card/40 hover-glow group transition-all duration-300",
|
|
||||||
onClick && "cursor-pointer hover:bg-card/60 hover:scale-[1.02] active:scale-[0.98]",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
onClick={onClick}
|
|
||||||
>
|
|
||||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 relative overflow-hidden">
|
|
||||||
<CardTitle className="text-sm font-medium text-muted-foreground group-hover:text-foreground transition-colors">
|
|
||||||
{title}
|
|
||||||
</CardTitle>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
{onClick && (
|
|
||||||
<span className="text-[10px] font-bold uppercase tracking-widest text-primary opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300 flex items-center gap-1">
|
|
||||||
Manage <ChevronRight className="w-3 h-3" />
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
<div className="h-8 w-8 rounded-lg bg-primary/10 flex items-center justify-center ring-1 ring-primary/20">
|
|
||||||
<Icon className={cn(
|
|
||||||
"h-4 w-4 transition-all duration-300 text-primary",
|
|
||||||
onClick && "group-hover:scale-110",
|
|
||||||
iconClassName
|
|
||||||
)} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
{isLoading ? (
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Skeleton className="h-8 w-[60px]" />
|
|
||||||
<Skeleton className="h-3 w-[100px]" />
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<div className={cn("text-2xl font-bold", valueClassName)}>{value}</div>
|
|
||||||
{subtitle && (
|
|
||||||
<p className="text-xs text-muted-foreground mt-1">
|
|
||||||
{subtitle}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</CardContent>
|
|
||||||
</Card >
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,41 +0,0 @@
|
|||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,66 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import * as React from "react"
|
|
||||||
import * as AccordionPrimitive from "@radix-ui/react-accordion"
|
|
||||||
import { ChevronDownIcon } from "lucide-react"
|
|
||||||
|
|
||||||
import { cn } from "@/lib/utils"
|
|
||||||
|
|
||||||
function Accordion({
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
|
|
||||||
return <AccordionPrimitive.Root data-slot="accordion" {...props} />
|
|
||||||
}
|
|
||||||
|
|
||||||
function AccordionItem({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
|
|
||||||
return (
|
|
||||||
<AccordionPrimitive.Item
|
|
||||||
data-slot="accordion-item"
|
|
||||||
className={cn("border-b last:border-b-0", className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function AccordionTrigger({
|
|
||||||
className,
|
|
||||||
children,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
|
|
||||||
return (
|
|
||||||
<AccordionPrimitive.Header className="flex">
|
|
||||||
<AccordionPrimitive.Trigger
|
|
||||||
data-slot="accordion-trigger"
|
|
||||||
className={cn(
|
|
||||||
"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
<ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
|
|
||||||
</AccordionPrimitive.Trigger>
|
|
||||||
</AccordionPrimitive.Header>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function AccordionContent({
|
|
||||||
className,
|
|
||||||
children,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
|
|
||||||
return (
|
|
||||||
<AccordionPrimitive.Content
|
|
||||||
data-slot="accordion-content"
|
|
||||||
className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<div className={cn("pt-0 pb-4", className)}>{children}</div>
|
|
||||||
</AccordionPrimitive.Content>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
|
|
||||||
@@ -1,37 +0,0 @@
|
|||||||
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 hover-scale shadow-sm",
|
|
||||||
secondary:
|
|
||||||
"border-transparent bg-secondary text-secondary-foreground hover:opacity-80 hover-scale",
|
|
||||||
destructive:
|
|
||||||
"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80 hover-scale",
|
|
||||||
outline: "text-foreground border-border hover:bg-accent hover:text-accent-foreground transition-colors",
|
|
||||||
aurora: "border-transparent bg-aurora text-primary-foreground shadow-sm hover-scale",
|
|
||||||
glass: "glass-card border-border/50 text-foreground hover:bg-accent/50 backdrop-blur-md",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
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 }
|
|
||||||
@@ -1,64 +0,0 @@
|
|||||||
import * as React from "react"
|
|
||||||
import { Slot } from "@radix-ui/react-slot"
|
|
||||||
import { cva, type VariantProps } from "class-variance-authority"
|
|
||||||
|
|
||||||
import { cn } from "@/lib/utils"
|
|
||||||
|
|
||||||
const buttonVariants = cva(
|
|
||||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
|
||||||
{
|
|
||||||
variants: {
|
|
||||||
variant: {
|
|
||||||
default: "bg-primary text-primary-foreground hover:bg-primary/90 hover-glow active-press shadow-md",
|
|
||||||
destructive:
|
|
||||||
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 active-press shadow-sm",
|
|
||||||
outline:
|
|
||||||
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 active-press",
|
|
||||||
secondary:
|
|
||||||
"bg-secondary text-secondary-foreground hover:bg-secondary/80 active-press shadow-sm",
|
|
||||||
ghost:
|
|
||||||
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 active-press",
|
|
||||||
link: "text-primary underline-offset-4 hover:underline",
|
|
||||||
aurora: "bg-aurora text-primary-foreground shadow-sm hover:opacity-90 hover-glow active-press",
|
|
||||||
glass: "glass-card border-border/50 text-foreground hover:bg-accent/50 hover-lift active-press",
|
|
||||||
},
|
|
||||||
size: {
|
|
||||||
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
|
||||||
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
|
||||||
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
|
||||||
icon: "size-9",
|
|
||||||
"icon-sm": "size-8",
|
|
||||||
"icon-lg": "size-10",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
defaultVariants: {
|
|
||||||
variant: "default",
|
|
||||||
size: "default",
|
|
||||||
},
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
function Button({
|
|
||||||
className,
|
|
||||||
variant = "default",
|
|
||||||
size = "default",
|
|
||||||
asChild = false,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<"button"> &
|
|
||||||
VariantProps<typeof buttonVariants> & {
|
|
||||||
asChild?: boolean
|
|
||||||
}) {
|
|
||||||
const Comp = asChild ? Slot : "button"
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Comp
|
|
||||||
data-slot="button"
|
|
||||||
data-variant={variant}
|
|
||||||
data-size={size}
|
|
||||||
className={cn(buttonVariants({ variant, size, className }))}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { Button, buttonVariants }
|
|
||||||
@@ -1,92 +0,0 @@
|
|||||||
import * as React from "react"
|
|
||||||
|
|
||||||
import { cn } from "@/lib/utils"
|
|
||||||
|
|
||||||
function Card({ className, ...props }: React.ComponentProps<"div">) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="card"
|
|
||||||
className={cn(
|
|
||||||
"glass-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm transition-all",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="card-header"
|
|
||||||
className={cn(
|
|
||||||
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="card-title"
|
|
||||||
className={cn("leading-none font-semibold", className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="card-description"
|
|
||||||
className={cn("text-muted-foreground text-sm", className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="card-action"
|
|
||||||
className={cn(
|
|
||||||
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="card-content"
|
|
||||||
className={cn("px-6", className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="card-footer"
|
|
||||||
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export {
|
|
||||||
Card,
|
|
||||||
CardHeader,
|
|
||||||
CardFooter,
|
|
||||||
CardTitle,
|
|
||||||
CardAction,
|
|
||||||
CardDescription,
|
|
||||||
CardContent,
|
|
||||||
}
|
|
||||||
@@ -1,34 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import * as React from "react"
|
|
||||||
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
|
|
||||||
|
|
||||||
function Collapsible({
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
|
|
||||||
return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
|
|
||||||
}
|
|
||||||
|
|
||||||
function CollapsibleTrigger({
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
|
|
||||||
return (
|
|
||||||
<CollapsiblePrimitive.CollapsibleTrigger
|
|
||||||
data-slot="collapsible-trigger"
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function CollapsibleContent({
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
|
|
||||||
return (
|
|
||||||
<CollapsiblePrimitive.CollapsibleContent
|
|
||||||
data-slot="collapsible-content"
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { Collapsible, CollapsibleTrigger, CollapsibleContent }
|
|
||||||
@@ -1,122 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import * as React from "react"
|
|
||||||
import * as DialogPrimitive from "@radix-ui/react-dialog"
|
|
||||||
import { X } from "lucide-react"
|
|
||||||
|
|
||||||
import { cn } from "@/lib/utils"
|
|
||||||
|
|
||||||
const Dialog = DialogPrimitive.Root
|
|
||||||
|
|
||||||
const DialogTrigger = DialogPrimitive.Trigger
|
|
||||||
|
|
||||||
const DialogPortal = DialogPrimitive.Portal
|
|
||||||
|
|
||||||
const DialogClose = DialogPrimitive.Close
|
|
||||||
|
|
||||||
const DialogOverlay = React.forwardRef<
|
|
||||||
React.ElementRef<typeof DialogPrimitive.Overlay>,
|
|
||||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
|
|
||||||
>(({ className, ...props }, ref) => (
|
|
||||||
<DialogPrimitive.Overlay
|
|
||||||
ref={ref}
|
|
||||||
className={cn(
|
|
||||||
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
))
|
|
||||||
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
|
|
||||||
|
|
||||||
const DialogContent = React.forwardRef<
|
|
||||||
React.ElementRef<typeof DialogPrimitive.Content>,
|
|
||||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
|
|
||||||
>(({ className, children, ...props }, ref) => (
|
|
||||||
<DialogPortal>
|
|
||||||
<DialogOverlay />
|
|
||||||
<DialogPrimitive.Content
|
|
||||||
ref={ref}
|
|
||||||
className={cn(
|
|
||||||
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
|
|
||||||
<X className="h-4 w-4" />
|
|
||||||
<span className="sr-only">Close</span>
|
|
||||||
</DialogPrimitive.Close>
|
|
||||||
</DialogPrimitive.Content>
|
|
||||||
</DialogPortal>
|
|
||||||
))
|
|
||||||
DialogContent.displayName = DialogPrimitive.Content.displayName
|
|
||||||
|
|
||||||
const DialogHeader = ({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
|
||||||
<div
|
|
||||||
className={cn(
|
|
||||||
"flex flex-col space-y-1.5 text-center sm:text-left",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
DialogHeader.displayName = "DialogHeader"
|
|
||||||
|
|
||||||
const DialogFooter = ({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
|
||||||
<div
|
|
||||||
className={cn(
|
|
||||||
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
DialogFooter.displayName = "DialogFooter"
|
|
||||||
|
|
||||||
const DialogTitle = React.forwardRef<
|
|
||||||
React.ElementRef<typeof DialogPrimitive.Title>,
|
|
||||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
|
|
||||||
>(({ className, ...props }, ref) => (
|
|
||||||
<DialogPrimitive.Title
|
|
||||||
ref={ref}
|
|
||||||
className={cn(
|
|
||||||
"text-lg font-semibold leading-none tracking-tight",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
))
|
|
||||||
DialogTitle.displayName = DialogPrimitive.Title.displayName
|
|
||||||
|
|
||||||
const DialogDescription = React.forwardRef<
|
|
||||||
React.ElementRef<typeof DialogPrimitive.Description>,
|
|
||||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
|
|
||||||
>(({ className, ...props }, ref) => (
|
|
||||||
<DialogPrimitive.Description
|
|
||||||
ref={ref}
|
|
||||||
className={cn("text-sm text-muted-foreground", className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
))
|
|
||||||
DialogDescription.displayName = DialogPrimitive.Description.displayName
|
|
||||||
|
|
||||||
export {
|
|
||||||
Dialog,
|
|
||||||
DialogPortal,
|
|
||||||
DialogOverlay,
|
|
||||||
DialogClose,
|
|
||||||
DialogTrigger,
|
|
||||||
DialogContent,
|
|
||||||
DialogHeader,
|
|
||||||
DialogFooter,
|
|
||||||
DialogTitle,
|
|
||||||
DialogDescription,
|
|
||||||
}
|
|
||||||
@@ -1,255 +0,0 @@
|
|||||||
import * as React from "react"
|
|
||||||
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
|
|
||||||
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
|
|
||||||
|
|
||||||
import { cn } from "@/lib/utils"
|
|
||||||
|
|
||||||
function DropdownMenu({
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
|
|
||||||
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
|
|
||||||
}
|
|
||||||
|
|
||||||
function DropdownMenuPortal({
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
|
|
||||||
return (
|
|
||||||
<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function DropdownMenuTrigger({
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
|
|
||||||
return (
|
|
||||||
<DropdownMenuPrimitive.Trigger
|
|
||||||
data-slot="dropdown-menu-trigger"
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function DropdownMenuContent({
|
|
||||||
className,
|
|
||||||
sideOffset = 4,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
|
|
||||||
return (
|
|
||||||
<DropdownMenuPrimitive.Portal>
|
|
||||||
<DropdownMenuPrimitive.Content
|
|
||||||
data-slot="dropdown-menu-content"
|
|
||||||
sideOffset={sideOffset}
|
|
||||||
className={cn(
|
|
||||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
</DropdownMenuPrimitive.Portal>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function DropdownMenuGroup({
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
|
|
||||||
return (
|
|
||||||
<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function DropdownMenuItem({
|
|
||||||
className,
|
|
||||||
inset,
|
|
||||||
variant = "default",
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
|
|
||||||
inset?: boolean
|
|
||||||
variant?: "default" | "destructive"
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<DropdownMenuPrimitive.Item
|
|
||||||
data-slot="dropdown-menu-item"
|
|
||||||
data-inset={inset}
|
|
||||||
data-variant={variant}
|
|
||||||
className={cn(
|
|
||||||
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function DropdownMenuCheckboxItem({
|
|
||||||
className,
|
|
||||||
children,
|
|
||||||
checked,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
|
|
||||||
return (
|
|
||||||
<DropdownMenuPrimitive.CheckboxItem
|
|
||||||
data-slot="dropdown-menu-checkbox-item"
|
|
||||||
className={cn(
|
|
||||||
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
checked={checked}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
|
||||||
<DropdownMenuPrimitive.ItemIndicator>
|
|
||||||
<CheckIcon className="size-4" />
|
|
||||||
</DropdownMenuPrimitive.ItemIndicator>
|
|
||||||
</span>
|
|
||||||
{children}
|
|
||||||
</DropdownMenuPrimitive.CheckboxItem>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function DropdownMenuRadioGroup({
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
|
|
||||||
return (
|
|
||||||
<DropdownMenuPrimitive.RadioGroup
|
|
||||||
data-slot="dropdown-menu-radio-group"
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function DropdownMenuRadioItem({
|
|
||||||
className,
|
|
||||||
children,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
|
|
||||||
return (
|
|
||||||
<DropdownMenuPrimitive.RadioItem
|
|
||||||
data-slot="dropdown-menu-radio-item"
|
|
||||||
className={cn(
|
|
||||||
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
|
||||||
<DropdownMenuPrimitive.ItemIndicator>
|
|
||||||
<CircleIcon className="size-2 fill-current" />
|
|
||||||
</DropdownMenuPrimitive.ItemIndicator>
|
|
||||||
</span>
|
|
||||||
{children}
|
|
||||||
</DropdownMenuPrimitive.RadioItem>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function DropdownMenuLabel({
|
|
||||||
className,
|
|
||||||
inset,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
|
|
||||||
inset?: boolean
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<DropdownMenuPrimitive.Label
|
|
||||||
data-slot="dropdown-menu-label"
|
|
||||||
data-inset={inset}
|
|
||||||
className={cn(
|
|
||||||
"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function DropdownMenuSeparator({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
|
|
||||||
return (
|
|
||||||
<DropdownMenuPrimitive.Separator
|
|
||||||
data-slot="dropdown-menu-separator"
|
|
||||||
className={cn("bg-border -mx-1 my-1 h-px", className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function DropdownMenuShortcut({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<"span">) {
|
|
||||||
return (
|
|
||||||
<span
|
|
||||||
data-slot="dropdown-menu-shortcut"
|
|
||||||
className={cn(
|
|
||||||
"text-muted-foreground ml-auto text-xs tracking-widest",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function DropdownMenuSub({
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
|
|
||||||
return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
|
|
||||||
}
|
|
||||||
|
|
||||||
function DropdownMenuSubTrigger({
|
|
||||||
className,
|
|
||||||
inset,
|
|
||||||
children,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
|
|
||||||
inset?: boolean
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<DropdownMenuPrimitive.SubTrigger
|
|
||||||
data-slot="dropdown-menu-sub-trigger"
|
|
||||||
data-inset={inset}
|
|
||||||
className={cn(
|
|
||||||
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
<ChevronRightIcon className="ml-auto size-4" />
|
|
||||||
</DropdownMenuPrimitive.SubTrigger>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function DropdownMenuSubContent({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
|
|
||||||
return (
|
|
||||||
<DropdownMenuPrimitive.SubContent
|
|
||||||
data-slot="dropdown-menu-sub-content"
|
|
||||||
className={cn(
|
|
||||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export {
|
|
||||||
DropdownMenu,
|
|
||||||
DropdownMenuPortal,
|
|
||||||
DropdownMenuTrigger,
|
|
||||||
DropdownMenuContent,
|
|
||||||
DropdownMenuGroup,
|
|
||||||
DropdownMenuLabel,
|
|
||||||
DropdownMenuItem,
|
|
||||||
DropdownMenuCheckboxItem,
|
|
||||||
DropdownMenuRadioGroup,
|
|
||||||
DropdownMenuRadioItem,
|
|
||||||
DropdownMenuSeparator,
|
|
||||||
DropdownMenuShortcut,
|
|
||||||
DropdownMenuSub,
|
|
||||||
DropdownMenuSubTrigger,
|
|
||||||
DropdownMenuSubContent,
|
|
||||||
}
|
|
||||||
@@ -1,165 +0,0 @@
|
|||||||
import * as React from "react"
|
|
||||||
import type * as LabelPrimitive from "@radix-ui/react-label"
|
|
||||||
import { Slot } from "@radix-ui/react-slot"
|
|
||||||
import {
|
|
||||||
Controller,
|
|
||||||
FormProvider,
|
|
||||||
useFormContext,
|
|
||||||
useFormState,
|
|
||||||
type ControllerProps,
|
|
||||||
type FieldPath,
|
|
||||||
type FieldValues,
|
|
||||||
} from "react-hook-form"
|
|
||||||
|
|
||||||
import { cn } from "@/lib/utils"
|
|
||||||
import { Label } from "@/components/ui/label"
|
|
||||||
|
|
||||||
const Form = FormProvider
|
|
||||||
|
|
||||||
type FormFieldContextValue<
|
|
||||||
TFieldValues extends FieldValues = FieldValues,
|
|
||||||
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
|
|
||||||
> = {
|
|
||||||
name: TName
|
|
||||||
}
|
|
||||||
|
|
||||||
const FormFieldContext = React.createContext<FormFieldContextValue>(
|
|
||||||
{} as FormFieldContextValue
|
|
||||||
)
|
|
||||||
|
|
||||||
const FormField = <
|
|
||||||
TFieldValues extends FieldValues = FieldValues,
|
|
||||||
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
|
|
||||||
>({
|
|
||||||
...props
|
|
||||||
}: ControllerProps<TFieldValues, TName>) => {
|
|
||||||
return (
|
|
||||||
<FormFieldContext.Provider value={{ name: props.name }}>
|
|
||||||
<Controller {...props} />
|
|
||||||
</FormFieldContext.Provider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const useFormField = () => {
|
|
||||||
const fieldContext = React.useContext(FormFieldContext)
|
|
||||||
const itemContext = React.useContext(FormItemContext)
|
|
||||||
const { getFieldState } = useFormContext()
|
|
||||||
const formState = useFormState({ name: fieldContext.name })
|
|
||||||
const fieldState = getFieldState(fieldContext.name, formState)
|
|
||||||
|
|
||||||
if (!fieldContext) {
|
|
||||||
throw new Error("useFormField should be used within <FormField>")
|
|
||||||
}
|
|
||||||
|
|
||||||
const { id } = itemContext
|
|
||||||
|
|
||||||
return {
|
|
||||||
id,
|
|
||||||
name: fieldContext.name,
|
|
||||||
formItemId: `${id}-form-item`,
|
|
||||||
formDescriptionId: `${id}-form-item-description`,
|
|
||||||
formMessageId: `${id}-form-item-message`,
|
|
||||||
...fieldState,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
type FormItemContextValue = {
|
|
||||||
id: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const FormItemContext = React.createContext<FormItemContextValue>(
|
|
||||||
{} as FormItemContextValue
|
|
||||||
)
|
|
||||||
|
|
||||||
function FormItem({ className, ...props }: React.ComponentProps<"div">) {
|
|
||||||
const id = React.useId()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<FormItemContext.Provider value={{ id }}>
|
|
||||||
<div
|
|
||||||
data-slot="form-item"
|
|
||||||
className={cn("grid gap-2", className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
</FormItemContext.Provider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function FormLabel({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
|
|
||||||
const { error, formItemId } = useFormField()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Label
|
|
||||||
data-slot="form-label"
|
|
||||||
data-error={!!error}
|
|
||||||
className={cn("data-[error=true]:text-destructive", className)}
|
|
||||||
htmlFor={formItemId}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
|
|
||||||
const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Slot
|
|
||||||
data-slot="form-control"
|
|
||||||
id={formItemId}
|
|
||||||
aria-describedby={
|
|
||||||
!error
|
|
||||||
? `${formDescriptionId}`
|
|
||||||
: `${formDescriptionId} ${formMessageId}`
|
|
||||||
}
|
|
||||||
aria-invalid={!!error}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
|
|
||||||
const { formDescriptionId } = useFormField()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<p
|
|
||||||
data-slot="form-description"
|
|
||||||
id={formDescriptionId}
|
|
||||||
className={cn("text-muted-foreground text-sm", className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
|
|
||||||
const { error, formMessageId } = useFormField()
|
|
||||||
const body = error ? String(error?.message ?? "") : props.children
|
|
||||||
|
|
||||||
if (!body) {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<p
|
|
||||||
data-slot="form-message"
|
|
||||||
id={formMessageId}
|
|
||||||
className={cn("text-destructive text-sm", className)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{body}
|
|
||||||
</p>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export {
|
|
||||||
useFormField,
|
|
||||||
Form,
|
|
||||||
FormItem,
|
|
||||||
FormLabel,
|
|
||||||
FormControl,
|
|
||||||
FormDescription,
|
|
||||||
FormMessage,
|
|
||||||
FormField,
|
|
||||||
}
|
|
||||||
@@ -1,21 +0,0 @@
|
|||||||
import * as React from "react"
|
|
||||||
|
|
||||||
import { cn } from "@/lib/utils"
|
|
||||||
|
|
||||||
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
|
||||||
return (
|
|
||||||
<input
|
|
||||||
type={type}
|
|
||||||
data-slot="input"
|
|
||||||
className={cn(
|
|
||||||
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/20 border-input/50 h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base text-foreground shadow-xs transition-all outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm backdrop-blur-sm",
|
|
||||||
"focus-visible:border-primary/50 focus-visible:bg-input/40 focus-visible:ring-2 focus-visible:ring-primary/20",
|
|
||||||
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { Input }
|
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
import * as React from "react"
|
|
||||||
import * as LabelPrimitive from "@radix-ui/react-label"
|
|
||||||
|
|
||||||
import { cn } from "@/lib/utils"
|
|
||||||
|
|
||||||
function Label({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
|
|
||||||
return (
|
|
||||||
<LabelPrimitive.Root
|
|
||||||
data-slot="label"
|
|
||||||
className={cn(
|
|
||||||
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { Label }
|
|
||||||
@@ -1,24 +0,0 @@
|
|||||||
import * as React from "react"
|
|
||||||
import { cn } from "../../lib/utils"
|
|
||||||
|
|
||||||
const Progress = React.forwardRef<
|
|
||||||
HTMLDivElement,
|
|
||||||
React.HTMLAttributes<HTMLDivElement> & { value?: number | null, indicatorClassName?: string }
|
|
||||||
>(({ className, value, indicatorClassName, ...props }, ref) => (
|
|
||||||
<div
|
|
||||||
ref={ref}
|
|
||||||
className={cn(
|
|
||||||
"relative h-4 w-full overflow-hidden rounded-full bg-secondary/20",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className={cn("h-full w-full flex-1 bg-primary transition-all", indicatorClassName)}
|
|
||||||
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
Progress.displayName = "Progress"
|
|
||||||
|
|
||||||
export { Progress }
|
|
||||||
@@ -1,58 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import * as React from "react"
|
|
||||||
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
|
|
||||||
|
|
||||||
import { cn } from "@/lib/utils"
|
|
||||||
|
|
||||||
function ScrollArea({
|
|
||||||
className,
|
|
||||||
children,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
|
|
||||||
return (
|
|
||||||
<ScrollAreaPrimitive.Root
|
|
||||||
data-slot="scroll-area"
|
|
||||||
className={cn("relative", className)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<ScrollAreaPrimitive.Viewport
|
|
||||||
data-slot="scroll-area-viewport"
|
|
||||||
className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</ScrollAreaPrimitive.Viewport>
|
|
||||||
<ScrollBar />
|
|
||||||
<ScrollAreaPrimitive.Corner />
|
|
||||||
</ScrollAreaPrimitive.Root>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function ScrollBar({
|
|
||||||
className,
|
|
||||||
orientation = "vertical",
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
|
|
||||||
return (
|
|
||||||
<ScrollAreaPrimitive.ScrollAreaScrollbar
|
|
||||||
data-slot="scroll-area-scrollbar"
|
|
||||||
orientation={orientation}
|
|
||||||
className={cn(
|
|
||||||
"flex touch-none p-px transition-colors select-none",
|
|
||||||
orientation === "vertical" &&
|
|
||||||
"h-full w-2.5 border-l border-l-transparent",
|
|
||||||
orientation === "horizontal" &&
|
|
||||||
"h-2.5 flex-col border-t border-t-transparent",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<ScrollAreaPrimitive.ScrollAreaThumb
|
|
||||||
data-slot="scroll-area-thumb"
|
|
||||||
className="bg-border relative flex-1 rounded-full"
|
|
||||||
/>
|
|
||||||
</ScrollAreaPrimitive.ScrollAreaScrollbar>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { ScrollArea, ScrollBar }
|
|
||||||
@@ -1,188 +0,0 @@
|
|||||||
import * as React from "react"
|
|
||||||
import * as SelectPrimitive from "@radix-ui/react-select"
|
|
||||||
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
|
|
||||||
|
|
||||||
import { cn } from "@/lib/utils"
|
|
||||||
|
|
||||||
function Select({
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
|
|
||||||
return <SelectPrimitive.Root data-slot="select" {...props} />
|
|
||||||
}
|
|
||||||
|
|
||||||
function SelectGroup({
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
|
|
||||||
return <SelectPrimitive.Group data-slot="select-group" {...props} />
|
|
||||||
}
|
|
||||||
|
|
||||||
function SelectValue({
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
|
|
||||||
return <SelectPrimitive.Value data-slot="select-value" {...props} />
|
|
||||||
}
|
|
||||||
|
|
||||||
function SelectTrigger({
|
|
||||||
className,
|
|
||||||
size = "default",
|
|
||||||
children,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
|
|
||||||
size?: "sm" | "default"
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<SelectPrimitive.Trigger
|
|
||||||
data-slot="select-trigger"
|
|
||||||
data-size={size}
|
|
||||||
className={cn(
|
|
||||||
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-full items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-base text-foreground shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
<SelectPrimitive.Icon asChild>
|
|
||||||
<ChevronDownIcon className="size-4 opacity-50" />
|
|
||||||
</SelectPrimitive.Icon>
|
|
||||||
</SelectPrimitive.Trigger>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SelectContent({
|
|
||||||
className,
|
|
||||||
children,
|
|
||||||
position = "item-aligned",
|
|
||||||
align = "center",
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
|
|
||||||
return (
|
|
||||||
<SelectPrimitive.Portal>
|
|
||||||
<SelectPrimitive.Content
|
|
||||||
data-slot="select-content"
|
|
||||||
className={cn(
|
|
||||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
|
|
||||||
position === "popper" &&
|
|
||||||
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
position={position}
|
|
||||||
align={align}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<SelectScrollUpButton />
|
|
||||||
<SelectPrimitive.Viewport
|
|
||||||
className={cn(
|
|
||||||
"p-1",
|
|
||||||
position === "popper" &&
|
|
||||||
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</SelectPrimitive.Viewport>
|
|
||||||
<SelectScrollDownButton />
|
|
||||||
</SelectPrimitive.Content>
|
|
||||||
</SelectPrimitive.Portal>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SelectLabel({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
|
|
||||||
return (
|
|
||||||
<SelectPrimitive.Label
|
|
||||||
data-slot="select-label"
|
|
||||||
className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SelectItem({
|
|
||||||
className,
|
|
||||||
children,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
|
|
||||||
return (
|
|
||||||
<SelectPrimitive.Item
|
|
||||||
data-slot="select-item"
|
|
||||||
className={cn(
|
|
||||||
"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
data-slot="select-item-indicator"
|
|
||||||
className="absolute right-2 flex size-3.5 items-center justify-center"
|
|
||||||
>
|
|
||||||
<SelectPrimitive.ItemIndicator>
|
|
||||||
<CheckIcon className="size-4" />
|
|
||||||
</SelectPrimitive.ItemIndicator>
|
|
||||||
</span>
|
|
||||||
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
|
||||||
</SelectPrimitive.Item>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SelectSeparator({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
|
|
||||||
return (
|
|
||||||
<SelectPrimitive.Separator
|
|
||||||
data-slot="select-separator"
|
|
||||||
className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SelectScrollUpButton({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
|
|
||||||
return (
|
|
||||||
<SelectPrimitive.ScrollUpButton
|
|
||||||
data-slot="select-scroll-up-button"
|
|
||||||
className={cn(
|
|
||||||
"flex cursor-default items-center justify-center py-1",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<ChevronUpIcon className="size-4" />
|
|
||||||
</SelectPrimitive.ScrollUpButton>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SelectScrollDownButton({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
|
|
||||||
return (
|
|
||||||
<SelectPrimitive.ScrollDownButton
|
|
||||||
data-slot="select-scroll-down-button"
|
|
||||||
className={cn(
|
|
||||||
"flex cursor-default items-center justify-center py-1",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<ChevronDownIcon className="size-4" />
|
|
||||||
</SelectPrimitive.ScrollDownButton>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export {
|
|
||||||
Select,
|
|
||||||
SelectContent,
|
|
||||||
SelectGroup,
|
|
||||||
SelectItem,
|
|
||||||
SelectLabel,
|
|
||||||
SelectScrollDownButton,
|
|
||||||
SelectScrollUpButton,
|
|
||||||
SelectSeparator,
|
|
||||||
SelectTrigger,
|
|
||||||
SelectValue,
|
|
||||||
}
|
|
||||||
@@ -1,26 +0,0 @@
|
|||||||
import * as React from "react"
|
|
||||||
import * as SeparatorPrimitive from "@radix-ui/react-separator"
|
|
||||||
|
|
||||||
import { cn } from "@/lib/utils"
|
|
||||||
|
|
||||||
function Separator({
|
|
||||||
className,
|
|
||||||
orientation = "horizontal",
|
|
||||||
decorative = true,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
|
|
||||||
return (
|
|
||||||
<SeparatorPrimitive.Root
|
|
||||||
data-slot="separator"
|
|
||||||
decorative={decorative}
|
|
||||||
orientation={orientation}
|
|
||||||
className={cn(
|
|
||||||
"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { Separator }
|
|
||||||
@@ -1,139 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import * as React from "react"
|
|
||||||
import * as SheetPrimitive from "@radix-ui/react-dialog"
|
|
||||||
import { XIcon } from "lucide-react"
|
|
||||||
|
|
||||||
import { cn } from "@/lib/utils"
|
|
||||||
|
|
||||||
function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
|
|
||||||
return <SheetPrimitive.Root data-slot="sheet" {...props} />
|
|
||||||
}
|
|
||||||
|
|
||||||
function SheetTrigger({
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
|
|
||||||
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
|
|
||||||
}
|
|
||||||
|
|
||||||
function SheetClose({
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof SheetPrimitive.Close>) {
|
|
||||||
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
|
|
||||||
}
|
|
||||||
|
|
||||||
function SheetPortal({
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
|
|
||||||
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
|
|
||||||
}
|
|
||||||
|
|
||||||
function SheetOverlay({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
|
|
||||||
return (
|
|
||||||
<SheetPrimitive.Overlay
|
|
||||||
data-slot="sheet-overlay"
|
|
||||||
className={cn(
|
|
||||||
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SheetContent({
|
|
||||||
className,
|
|
||||||
children,
|
|
||||||
side = "right",
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof SheetPrimitive.Content> & {
|
|
||||||
side?: "top" | "right" | "bottom" | "left"
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<SheetPortal>
|
|
||||||
<SheetOverlay />
|
|
||||||
<SheetPrimitive.Content
|
|
||||||
data-slot="sheet-content"
|
|
||||||
className={cn(
|
|
||||||
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
|
|
||||||
side === "right" &&
|
|
||||||
"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
|
|
||||||
side === "left" &&
|
|
||||||
"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
|
|
||||||
side === "top" &&
|
|
||||||
"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
|
|
||||||
side === "bottom" &&
|
|
||||||
"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
<SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
|
|
||||||
<XIcon className="size-4" />
|
|
||||||
<span className="sr-only">Close</span>
|
|
||||||
</SheetPrimitive.Close>
|
|
||||||
</SheetPrimitive.Content>
|
|
||||||
</SheetPortal>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="sheet-header"
|
|
||||||
className={cn("flex flex-col gap-1.5 p-4", className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="sheet-footer"
|
|
||||||
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SheetTitle({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof SheetPrimitive.Title>) {
|
|
||||||
return (
|
|
||||||
<SheetPrimitive.Title
|
|
||||||
data-slot="sheet-title"
|
|
||||||
className={cn("text-foreground font-semibold", className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SheetDescription({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof SheetPrimitive.Description>) {
|
|
||||||
return (
|
|
||||||
<SheetPrimitive.Description
|
|
||||||
data-slot="sheet-description"
|
|
||||||
className={cn("text-muted-foreground text-sm", className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export {
|
|
||||||
Sheet,
|
|
||||||
SheetTrigger,
|
|
||||||
SheetClose,
|
|
||||||
SheetContent,
|
|
||||||
SheetHeader,
|
|
||||||
SheetFooter,
|
|
||||||
SheetTitle,
|
|
||||||
SheetDescription,
|
|
||||||
}
|
|
||||||
@@ -1,725 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import * as React from "react"
|
|
||||||
import { Slot } from "@radix-ui/react-slot"
|
|
||||||
import { cva, type VariantProps } from "class-variance-authority"
|
|
||||||
import { PanelLeftIcon } from "lucide-react"
|
|
||||||
|
|
||||||
import { useIsMobile } from "@/hooks/use-mobile"
|
|
||||||
import { cn } from "@/lib/utils"
|
|
||||||
import { Button } from "@/components/ui/button"
|
|
||||||
import { Input } from "@/components/ui/input"
|
|
||||||
import { Separator } from "@/components/ui/separator"
|
|
||||||
import {
|
|
||||||
Sheet,
|
|
||||||
SheetContent,
|
|
||||||
SheetDescription,
|
|
||||||
SheetHeader,
|
|
||||||
SheetTitle,
|
|
||||||
} from "@/components/ui/sheet"
|
|
||||||
import { Skeleton } from "@/components/ui/skeleton"
|
|
||||||
import {
|
|
||||||
Tooltip,
|
|
||||||
TooltipContent,
|
|
||||||
TooltipProvider,
|
|
||||||
TooltipTrigger,
|
|
||||||
} from "@/components/ui/tooltip"
|
|
||||||
|
|
||||||
const SIDEBAR_COOKIE_NAME = "sidebar_state"
|
|
||||||
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
|
|
||||||
const SIDEBAR_WIDTH = "16rem"
|
|
||||||
const SIDEBAR_WIDTH_MOBILE = "18rem"
|
|
||||||
const SIDEBAR_WIDTH_ICON = "64px"
|
|
||||||
const SIDEBAR_KEYBOARD_SHORTCUT = "b"
|
|
||||||
|
|
||||||
type SidebarContextProps = {
|
|
||||||
state: "expanded" | "collapsed"
|
|
||||||
open: boolean
|
|
||||||
setOpen: (open: boolean) => void
|
|
||||||
openMobile: boolean
|
|
||||||
setOpenMobile: (open: boolean) => void
|
|
||||||
isMobile: boolean
|
|
||||||
toggleSidebar: () => void
|
|
||||||
}
|
|
||||||
|
|
||||||
const SidebarContext = React.createContext<SidebarContextProps | null>(null)
|
|
||||||
|
|
||||||
function useSidebar() {
|
|
||||||
const context = React.useContext(SidebarContext)
|
|
||||||
if (!context) {
|
|
||||||
throw new Error("useSidebar must be used within a SidebarProvider.")
|
|
||||||
}
|
|
||||||
|
|
||||||
return context
|
|
||||||
}
|
|
||||||
|
|
||||||
function SidebarProvider({
|
|
||||||
defaultOpen = true,
|
|
||||||
open: openProp,
|
|
||||||
onOpenChange: setOpenProp,
|
|
||||||
className,
|
|
||||||
style,
|
|
||||||
children,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<"div"> & {
|
|
||||||
defaultOpen?: boolean
|
|
||||||
open?: boolean
|
|
||||||
onOpenChange?: (open: boolean) => void
|
|
||||||
}) {
|
|
||||||
const isMobile = useIsMobile()
|
|
||||||
const [openMobile, setOpenMobile] = React.useState(false)
|
|
||||||
|
|
||||||
// This is the internal state of the sidebar.
|
|
||||||
// We use openProp and setOpenProp for control from outside the component.
|
|
||||||
const [_open, _setOpen] = React.useState(defaultOpen)
|
|
||||||
const open = openProp ?? _open
|
|
||||||
const setOpen = React.useCallback(
|
|
||||||
(value: boolean | ((value: boolean) => boolean)) => {
|
|
||||||
const openState = typeof value === "function" ? value(open) : value
|
|
||||||
if (setOpenProp) {
|
|
||||||
setOpenProp(openState)
|
|
||||||
} else {
|
|
||||||
_setOpen(openState)
|
|
||||||
}
|
|
||||||
|
|
||||||
// This sets the cookie to keep the sidebar state.
|
|
||||||
document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
|
|
||||||
},
|
|
||||||
[setOpenProp, open]
|
|
||||||
)
|
|
||||||
|
|
||||||
// Helper to toggle the sidebar.
|
|
||||||
const toggleSidebar = React.useCallback(() => {
|
|
||||||
return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
|
|
||||||
}, [isMobile, setOpen, setOpenMobile])
|
|
||||||
|
|
||||||
// Adds a keyboard shortcut to toggle the sidebar.
|
|
||||||
React.useEffect(() => {
|
|
||||||
const handleKeyDown = (event: KeyboardEvent) => {
|
|
||||||
if (
|
|
||||||
event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
|
|
||||||
(event.metaKey || event.ctrlKey)
|
|
||||||
) {
|
|
||||||
event.preventDefault()
|
|
||||||
toggleSidebar()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener("keydown", handleKeyDown)
|
|
||||||
return () => window.removeEventListener("keydown", handleKeyDown)
|
|
||||||
}, [toggleSidebar])
|
|
||||||
|
|
||||||
// We add a state so that we can do data-state="expanded" or "collapsed".
|
|
||||||
// This makes it easier to style the sidebar with Tailwind classes.
|
|
||||||
const state = open ? "expanded" : "collapsed"
|
|
||||||
|
|
||||||
const contextValue = React.useMemo<SidebarContextProps>(
|
|
||||||
() => ({
|
|
||||||
state,
|
|
||||||
open,
|
|
||||||
setOpen,
|
|
||||||
isMobile,
|
|
||||||
openMobile,
|
|
||||||
setOpenMobile,
|
|
||||||
toggleSidebar,
|
|
||||||
}),
|
|
||||||
[state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
|
|
||||||
)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<SidebarContext.Provider value={contextValue}>
|
|
||||||
<TooltipProvider delayDuration={0}>
|
|
||||||
<div
|
|
||||||
data-slot="sidebar-wrapper"
|
|
||||||
style={
|
|
||||||
{
|
|
||||||
"--sidebar-width": SIDEBAR_WIDTH,
|
|
||||||
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
|
|
||||||
...style,
|
|
||||||
} as React.CSSProperties
|
|
||||||
}
|
|
||||||
className={cn(
|
|
||||||
"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
</TooltipProvider>
|
|
||||||
</SidebarContext.Provider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function Sidebar({
|
|
||||||
side = "left",
|
|
||||||
variant = "sidebar",
|
|
||||||
collapsible = "offcanvas",
|
|
||||||
className,
|
|
||||||
children,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<"div"> & {
|
|
||||||
side?: "left" | "right"
|
|
||||||
variant?: "sidebar" | "floating" | "inset"
|
|
||||||
collapsible?: "offcanvas" | "icon" | "none"
|
|
||||||
}) {
|
|
||||||
const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
|
|
||||||
|
|
||||||
if (collapsible === "none") {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="sidebar"
|
|
||||||
className={cn(
|
|
||||||
"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isMobile) {
|
|
||||||
return (
|
|
||||||
<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
|
|
||||||
<SheetContent
|
|
||||||
data-sidebar="sidebar"
|
|
||||||
data-slot="sidebar"
|
|
||||||
data-mobile="true"
|
|
||||||
className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
|
|
||||||
style={
|
|
||||||
{
|
|
||||||
"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
|
|
||||||
} as React.CSSProperties
|
|
||||||
}
|
|
||||||
side={side}
|
|
||||||
>
|
|
||||||
<SheetHeader className="sr-only">
|
|
||||||
<SheetTitle>Sidebar</SheetTitle>
|
|
||||||
<SheetDescription>Displays the mobile sidebar.</SheetDescription>
|
|
||||||
</SheetHeader>
|
|
||||||
<div className="flex h-full w-full flex-col">{children}</div>
|
|
||||||
</SheetContent>
|
|
||||||
</Sheet>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="group peer text-sidebar-foreground hidden md:block"
|
|
||||||
data-state={state}
|
|
||||||
data-collapsible={state === "collapsed" ? collapsible : ""}
|
|
||||||
data-variant={variant}
|
|
||||||
data-side={side}
|
|
||||||
data-slot="sidebar"
|
|
||||||
>
|
|
||||||
{/* This is what handles the sidebar gap on desktop */}
|
|
||||||
<div
|
|
||||||
data-slot="sidebar-gap"
|
|
||||||
className={cn(
|
|
||||||
"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
|
|
||||||
"group-data-[collapsible=offcanvas]:w-0",
|
|
||||||
"group-data-[side=right]:rotate-180",
|
|
||||||
variant === "floating" || variant === "inset"
|
|
||||||
? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
|
|
||||||
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
data-slot="sidebar-container"
|
|
||||||
className={cn(
|
|
||||||
"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
|
|
||||||
side === "left"
|
|
||||||
? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
|
|
||||||
: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
|
|
||||||
// Adjust the padding for floating and inset variants.
|
|
||||||
variant === "floating" || variant === "inset"
|
|
||||||
? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
|
|
||||||
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
data-sidebar="sidebar"
|
|
||||||
data-slot="sidebar-inner"
|
|
||||||
className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SidebarTrigger({
|
|
||||||
className,
|
|
||||||
onClick,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof Button>) {
|
|
||||||
const { toggleSidebar } = useSidebar()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Button
|
|
||||||
data-sidebar="trigger"
|
|
||||||
data-slot="sidebar-trigger"
|
|
||||||
variant="ghost"
|
|
||||||
size="icon"
|
|
||||||
className={cn("size-7", className)}
|
|
||||||
onClick={(event) => {
|
|
||||||
onClick?.(event)
|
|
||||||
toggleSidebar()
|
|
||||||
}}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<PanelLeftIcon />
|
|
||||||
<span className="sr-only">Toggle Sidebar</span>
|
|
||||||
</Button>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
|
|
||||||
const { toggleSidebar } = useSidebar()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
data-sidebar="rail"
|
|
||||||
data-slot="sidebar-rail"
|
|
||||||
aria-label="Toggle Sidebar"
|
|
||||||
tabIndex={-1}
|
|
||||||
onClick={toggleSidebar}
|
|
||||||
title="Toggle Sidebar"
|
|
||||||
className={cn(
|
|
||||||
"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
|
|
||||||
"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
|
|
||||||
"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
|
|
||||||
"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
|
|
||||||
"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
|
|
||||||
"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
|
|
||||||
return (
|
|
||||||
<main
|
|
||||||
data-slot="sidebar-inset"
|
|
||||||
className={cn(
|
|
||||||
"bg-aurora-page text-foreground font-outfit overflow-x-hidden relative flex w-full flex-1 flex-col",
|
|
||||||
"md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SidebarInput({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof Input>) {
|
|
||||||
return (
|
|
||||||
<Input
|
|
||||||
data-slot="sidebar-input"
|
|
||||||
data-sidebar="input"
|
|
||||||
className={cn("bg-background h-8 w-full shadow-none", className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="sidebar-header"
|
|
||||||
data-sidebar="header"
|
|
||||||
className={cn("flex flex-col gap-2 p-2", className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="sidebar-footer"
|
|
||||||
data-sidebar="footer"
|
|
||||||
className={cn("flex flex-col gap-2 p-2", className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SidebarSeparator({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof Separator>) {
|
|
||||||
return (
|
|
||||||
<Separator
|
|
||||||
data-slot="sidebar-separator"
|
|
||||||
data-sidebar="separator"
|
|
||||||
className={cn("bg-sidebar-border mx-2 w-auto", className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="sidebar-content"
|
|
||||||
data-sidebar="content"
|
|
||||||
className={cn(
|
|
||||||
"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="sidebar-group"
|
|
||||||
data-sidebar="group"
|
|
||||||
className={cn("relative flex w-full min-w-0 flex-col p-2 group-data-[collapsible=icon]:px-0 group-data-[collapsible=icon]:items-center", className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SidebarGroupLabel({
|
|
||||||
className,
|
|
||||||
asChild = false,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<"div"> & { asChild?: boolean }) {
|
|
||||||
const Comp = asChild ? Slot : "div"
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Comp
|
|
||||||
data-slot="sidebar-group-label"
|
|
||||||
data-sidebar="group-label"
|
|
||||||
className={cn(
|
|
||||||
"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
|
||||||
"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SidebarGroupAction({
|
|
||||||
className,
|
|
||||||
asChild = false,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<"button"> & { asChild?: boolean }) {
|
|
||||||
const Comp = asChild ? Slot : "button"
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Comp
|
|
||||||
data-slot="sidebar-group-action"
|
|
||||||
data-sidebar="group-action"
|
|
||||||
className={cn(
|
|
||||||
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
|
||||||
// Increases the hit area of the button on mobile.
|
|
||||||
"after:absolute after:-inset-2 md:after:hidden",
|
|
||||||
"group-data-[collapsible=icon]:hidden",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SidebarGroupContent({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<"div">) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="sidebar-group-content"
|
|
||||||
data-sidebar="group-content"
|
|
||||||
className={cn("w-full text-sm", className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
|
|
||||||
return (
|
|
||||||
<ul
|
|
||||||
data-slot="sidebar-menu"
|
|
||||||
data-sidebar="menu"
|
|
||||||
className={cn("flex w-full min-w-0 flex-col gap-1", className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
|
|
||||||
return (
|
|
||||||
<li
|
|
||||||
data-slot="sidebar-menu-item"
|
|
||||||
data-sidebar="menu-item"
|
|
||||||
className={cn("group/menu-item relative flex group-data-[collapsible=icon]:justify-center", className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const sidebarMenuButtonVariants = cva(
|
|
||||||
"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-10! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
|
|
||||||
{
|
|
||||||
variants: {
|
|
||||||
variant: {
|
|
||||||
default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
|
||||||
outline:
|
|
||||||
"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
|
|
||||||
},
|
|
||||||
size: {
|
|
||||||
default: "h-8 text-sm",
|
|
||||||
sm: "h-7 text-xs",
|
|
||||||
lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
defaultVariants: {
|
|
||||||
variant: "default",
|
|
||||||
size: "default",
|
|
||||||
},
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
function SidebarMenuButton({
|
|
||||||
asChild = false,
|
|
||||||
isActive = false,
|
|
||||||
variant = "default",
|
|
||||||
size = "default",
|
|
||||||
tooltip,
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<"button"> & {
|
|
||||||
asChild?: boolean
|
|
||||||
isActive?: boolean
|
|
||||||
tooltip?: string | React.ComponentProps<typeof TooltipContent>
|
|
||||||
} & VariantProps<typeof sidebarMenuButtonVariants>) {
|
|
||||||
const Comp = asChild ? Slot : "button"
|
|
||||||
const { isMobile, state } = useSidebar()
|
|
||||||
|
|
||||||
const button = (
|
|
||||||
<Comp
|
|
||||||
data-slot="sidebar-menu-button"
|
|
||||||
data-sidebar="menu-button"
|
|
||||||
data-size={size}
|
|
||||||
data-active={isActive}
|
|
||||||
className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
|
|
||||||
if (!tooltip) {
|
|
||||||
return button
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof tooltip === "string") {
|
|
||||||
tooltip = {
|
|
||||||
children: tooltip,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Tooltip>
|
|
||||||
<TooltipTrigger asChild>{button}</TooltipTrigger>
|
|
||||||
<TooltipContent
|
|
||||||
side="right"
|
|
||||||
align="center"
|
|
||||||
hidden={state !== "collapsed" || isMobile}
|
|
||||||
{...tooltip}
|
|
||||||
/>
|
|
||||||
</Tooltip>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SidebarMenuAction({
|
|
||||||
className,
|
|
||||||
asChild = false,
|
|
||||||
showOnHover = false,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<"button"> & {
|
|
||||||
asChild?: boolean
|
|
||||||
showOnHover?: boolean
|
|
||||||
}) {
|
|
||||||
const Comp = asChild ? Slot : "button"
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Comp
|
|
||||||
data-slot="sidebar-menu-action"
|
|
||||||
data-sidebar="menu-action"
|
|
||||||
className={cn(
|
|
||||||
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
|
||||||
// Increases the hit area of the button on mobile.
|
|
||||||
"after:absolute after:-inset-2 md:after:hidden",
|
|
||||||
"peer-data-[size=sm]/menu-button:top-1",
|
|
||||||
"peer-data-[size=default]/menu-button:top-1.5",
|
|
||||||
"peer-data-[size=lg]/menu-button:top-2.5",
|
|
||||||
"group-data-[collapsible=icon]:hidden",
|
|
||||||
showOnHover &&
|
|
||||||
"peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SidebarMenuBadge({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<"div">) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="sidebar-menu-badge"
|
|
||||||
data-sidebar="menu-badge"
|
|
||||||
className={cn(
|
|
||||||
"text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
|
|
||||||
"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
|
|
||||||
"peer-data-[size=sm]/menu-button:top-1",
|
|
||||||
"peer-data-[size=default]/menu-button:top-1.5",
|
|
||||||
"peer-data-[size=lg]/menu-button:top-2.5",
|
|
||||||
"group-data-[collapsible=icon]:hidden",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SidebarMenuSkeleton({
|
|
||||||
className,
|
|
||||||
showIcon = false,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<"div"> & {
|
|
||||||
showIcon?: boolean
|
|
||||||
}) {
|
|
||||||
// Random width between 50 to 90%.
|
|
||||||
const width = React.useMemo(() => {
|
|
||||||
return `${Math.floor(Math.random() * 40) + 50}%`
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="sidebar-menu-skeleton"
|
|
||||||
data-sidebar="menu-skeleton"
|
|
||||||
className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{showIcon && (
|
|
||||||
<Skeleton
|
|
||||||
className="size-4 rounded-md"
|
|
||||||
data-sidebar="menu-skeleton-icon"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<Skeleton
|
|
||||||
className="h-4 max-w-(--skeleton-width) flex-1"
|
|
||||||
data-sidebar="menu-skeleton-text"
|
|
||||||
style={
|
|
||||||
{
|
|
||||||
"--skeleton-width": width,
|
|
||||||
} as React.CSSProperties
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
|
|
||||||
return (
|
|
||||||
<ul
|
|
||||||
data-slot="sidebar-menu-sub"
|
|
||||||
data-sidebar="menu-sub"
|
|
||||||
className={cn(
|
|
||||||
"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
|
|
||||||
"group-data-[collapsible=icon]:hidden",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SidebarMenuSubItem({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<"li">) {
|
|
||||||
return (
|
|
||||||
<li
|
|
||||||
data-slot="sidebar-menu-sub-item"
|
|
||||||
data-sidebar="menu-sub-item"
|
|
||||||
className={cn("group/menu-sub-item relative", className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function SidebarMenuSubButton({
|
|
||||||
asChild = false,
|
|
||||||
size = "md",
|
|
||||||
isActive = false,
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<"a"> & {
|
|
||||||
asChild?: boolean
|
|
||||||
size?: "sm" | "md"
|
|
||||||
isActive?: boolean
|
|
||||||
}) {
|
|
||||||
const Comp = asChild ? Slot : "a"
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Comp
|
|
||||||
data-slot="sidebar-menu-sub-button"
|
|
||||||
data-sidebar="menu-sub-button"
|
|
||||||
data-size={size}
|
|
||||||
data-active={isActive}
|
|
||||||
className={cn(
|
|
||||||
"ring-sidebar-ring active:bg-sidebar-accent active:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
|
|
||||||
size === "sm" && "text-xs",
|
|
||||||
size === "md" && "text-sm",
|
|
||||||
"group-data-[collapsible=icon]:hidden",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export {
|
|
||||||
Sidebar,
|
|
||||||
SidebarContent,
|
|
||||||
SidebarFooter,
|
|
||||||
SidebarGroup,
|
|
||||||
SidebarGroupAction,
|
|
||||||
SidebarGroupContent,
|
|
||||||
SidebarGroupLabel,
|
|
||||||
SidebarHeader,
|
|
||||||
SidebarInput,
|
|
||||||
SidebarInset,
|
|
||||||
SidebarMenu,
|
|
||||||
SidebarMenuAction,
|
|
||||||
SidebarMenuBadge,
|
|
||||||
SidebarMenuButton,
|
|
||||||
SidebarMenuItem,
|
|
||||||
SidebarMenuSkeleton,
|
|
||||||
SidebarMenuSub,
|
|
||||||
SidebarMenuSubButton,
|
|
||||||
SidebarMenuSubItem,
|
|
||||||
SidebarProvider,
|
|
||||||
SidebarRail,
|
|
||||||
SidebarSeparator,
|
|
||||||
SidebarTrigger,
|
|
||||||
useSidebar,
|
|
||||||
}
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
import { cn } from "@/lib/utils"
|
|
||||||
|
|
||||||
function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
data-slot="skeleton"
|
|
||||||
className={cn("bg-accent animate-pulse rounded-md", className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { Skeleton }
|
|
||||||
@@ -1,26 +0,0 @@
|
|||||||
import * as React from "react"
|
|
||||||
import * as SliderPrimitive from "@radix-ui/react-slider"
|
|
||||||
|
|
||||||
import { cn } from "@/lib/utils"
|
|
||||||
|
|
||||||
const Slider = React.forwardRef<
|
|
||||||
React.ElementRef<typeof SliderPrimitive.Root>,
|
|
||||||
React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
|
|
||||||
>(({ className, ...props }, ref) => (
|
|
||||||
<SliderPrimitive.Root
|
|
||||||
ref={ref}
|
|
||||||
className={cn(
|
|
||||||
"relative flex w-full touch-none select-none items-center",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
|
|
||||||
<SliderPrimitive.Range className="absolute h-full bg-primary" />
|
|
||||||
</SliderPrimitive.Track>
|
|
||||||
<SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
|
|
||||||
</SliderPrimitive.Root>
|
|
||||||
))
|
|
||||||
Slider.displayName = SliderPrimitive.Root.displayName
|
|
||||||
|
|
||||||
export { Slider }
|
|
||||||
@@ -1,38 +0,0 @@
|
|||||||
import {
|
|
||||||
CircleCheckIcon,
|
|
||||||
InfoIcon,
|
|
||||||
Loader2Icon,
|
|
||||||
OctagonXIcon,
|
|
||||||
TriangleAlertIcon,
|
|
||||||
} from "lucide-react"
|
|
||||||
import { useTheme } from "next-themes"
|
|
||||||
import { Toaster as Sonner, type ToasterProps } from "sonner"
|
|
||||||
|
|
||||||
const Toaster = ({ ...props }: ToasterProps) => {
|
|
||||||
const { theme = "system" } = useTheme()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Sonner
|
|
||||||
theme={theme as ToasterProps["theme"]}
|
|
||||||
className="toaster group"
|
|
||||||
icons={{
|
|
||||||
success: <CircleCheckIcon className="size-4" />,
|
|
||||||
info: <InfoIcon className="size-4" />,
|
|
||||||
warning: <TriangleAlertIcon className="size-4" />,
|
|
||||||
error: <OctagonXIcon className="size-4" />,
|
|
||||||
loading: <Loader2Icon className="size-4 animate-spin" />,
|
|
||||||
}}
|
|
||||||
style={
|
|
||||||
{
|
|
||||||
"--normal-bg": "var(--popover)",
|
|
||||||
"--normal-text": "var(--popover-foreground)",
|
|
||||||
"--normal-border": "var(--border)",
|
|
||||||
"--border-radius": "var(--radius)",
|
|
||||||
} as React.CSSProperties
|
|
||||||
}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { Toaster }
|
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
import * as React from "react"
|
|
||||||
import * as SwitchPrimitive from "@radix-ui/react-switch"
|
|
||||||
|
|
||||||
import { cn } from "@/lib/utils"
|
|
||||||
|
|
||||||
function Switch({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
|
|
||||||
return (
|
|
||||||
<SwitchPrimitive.Root
|
|
||||||
data-slot="switch"
|
|
||||||
className={cn(
|
|
||||||
"peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<SwitchPrimitive.Thumb
|
|
||||||
data-slot="switch-thumb"
|
|
||||||
className={cn(
|
|
||||||
"bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</SwitchPrimitive.Root>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { Switch }
|
|
||||||
@@ -1,64 +0,0 @@
|
|||||||
import * as React from "react"
|
|
||||||
import * as TabsPrimitive from "@radix-ui/react-tabs"
|
|
||||||
|
|
||||||
import { cn } from "@/lib/utils"
|
|
||||||
|
|
||||||
function Tabs({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
|
|
||||||
return (
|
|
||||||
<TabsPrimitive.Root
|
|
||||||
data-slot="tabs"
|
|
||||||
className={cn("flex flex-col gap-2", className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function TabsList({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof TabsPrimitive.List>) {
|
|
||||||
return (
|
|
||||||
<TabsPrimitive.List
|
|
||||||
data-slot="tabs-list"
|
|
||||||
className={cn(
|
|
||||||
"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function TabsTrigger({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
|
|
||||||
return (
|
|
||||||
<TabsPrimitive.Trigger
|
|
||||||
data-slot="tabs-trigger"
|
|
||||||
className={cn(
|
|
||||||
"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function TabsContent({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof TabsPrimitive.Content>) {
|
|
||||||
return (
|
|
||||||
<TabsPrimitive.Content
|
|
||||||
data-slot="tabs-content"
|
|
||||||
className={cn("flex-1 outline-none", className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { Tabs, TabsList, TabsTrigger, TabsContent }
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
import * as React from "react"
|
|
||||||
|
|
||||||
import { cn } from "@/lib/utils"
|
|
||||||
|
|
||||||
function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
|
|
||||||
return (
|
|
||||||
<textarea
|
|
||||||
data-slot="textarea"
|
|
||||||
className={cn(
|
|
||||||
"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base text-foreground shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { Textarea }
|
|
||||||
@@ -1,59 +0,0 @@
|
|||||||
import * as React from "react"
|
|
||||||
import * as TooltipPrimitive from "@radix-ui/react-tooltip"
|
|
||||||
|
|
||||||
import { cn } from "@/lib/utils"
|
|
||||||
|
|
||||||
function TooltipProvider({
|
|
||||||
delayDuration = 0,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
|
|
||||||
return (
|
|
||||||
<TooltipPrimitive.Provider
|
|
||||||
data-slot="tooltip-provider"
|
|
||||||
delayDuration={delayDuration}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function Tooltip({
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
|
|
||||||
return (
|
|
||||||
<TooltipProvider>
|
|
||||||
<TooltipPrimitive.Root data-slot="tooltip" {...props} />
|
|
||||||
</TooltipProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function TooltipTrigger({
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
|
|
||||||
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
|
|
||||||
}
|
|
||||||
|
|
||||||
function TooltipContent({
|
|
||||||
className,
|
|
||||||
sideOffset = 0,
|
|
||||||
children,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
|
|
||||||
return (
|
|
||||||
<TooltipPrimitive.Portal>
|
|
||||||
<TooltipPrimitive.Content
|
|
||||||
data-slot="tooltip-content"
|
|
||||||
sideOffset={sideOffset}
|
|
||||||
className={cn(
|
|
||||||
"bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
<TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
|
|
||||||
</TooltipPrimitive.Content>
|
|
||||||
</TooltipPrimitive.Portal>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
|
|
||||||
@@ -1,147 +0,0 @@
|
|||||||
import * as React from "react"
|
|
||||||
import { useLocation, type Location } from "react-router-dom"
|
|
||||||
import { Home, Palette, ShieldCheck, Settings, LayoutDashboard, Trophy, SlidersHorizontal, Coins, Cog, UserCog, Package, type LucideIcon } from "lucide-react"
|
|
||||||
|
|
||||||
export interface NavSubItem {
|
|
||||||
title: string
|
|
||||||
url: string
|
|
||||||
icon: LucideIcon
|
|
||||||
isActive?: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface NavItem {
|
|
||||||
title: string
|
|
||||||
url: string
|
|
||||||
icon: LucideIcon
|
|
||||||
isActive?: boolean
|
|
||||||
subItems?: NavSubItem[]
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Breadcrumb {
|
|
||||||
title: string
|
|
||||||
url: string
|
|
||||||
}
|
|
||||||
|
|
||||||
interface NavigationContextProps {
|
|
||||||
navItems: NavItem[]
|
|
||||||
breadcrumbs: Breadcrumb[]
|
|
||||||
currentPath: string
|
|
||||||
currentTitle: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const NavigationContext = React.createContext<NavigationContextProps | null>(null)
|
|
||||||
|
|
||||||
interface NavConfigItem extends Omit<NavItem, "isActive" | "subItems"> {
|
|
||||||
subItems?: Omit<NavSubItem, "isActive">[]
|
|
||||||
}
|
|
||||||
|
|
||||||
const NAV_CONFIG: NavConfigItem[] = [
|
|
||||||
{ title: "Home", url: "/", icon: Home },
|
|
||||||
|
|
||||||
{ title: "Design System", url: "/design-system", icon: Palette },
|
|
||||||
{
|
|
||||||
title: "Admin",
|
|
||||||
url: "/admin",
|
|
||||||
icon: ShieldCheck,
|
|
||||||
subItems: [
|
|
||||||
{ title: "Overview", url: "/admin/overview", icon: LayoutDashboard },
|
|
||||||
{ title: "Quests", url: "/admin/quests", icon: Trophy },
|
|
||||||
{ title: "Items", url: "/admin/items", icon: Package },
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Settings",
|
|
||||||
url: "/settings",
|
|
||||||
icon: Settings,
|
|
||||||
subItems: [
|
|
||||||
{ title: "General", url: "/settings/general", icon: SlidersHorizontal },
|
|
||||||
{ title: "Economy", url: "/settings/economy", icon: Coins },
|
|
||||||
{ title: "Systems", url: "/settings/systems", icon: Cog },
|
|
||||||
{ title: "Roles", url: "/settings/roles", icon: UserCog },
|
|
||||||
]
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
function generateBreadcrumbs(location: Location): Breadcrumb[] {
|
|
||||||
const pathParts = location.pathname.split("/").filter(Boolean)
|
|
||||||
const breadcrumbs: Breadcrumb[] = []
|
|
||||||
|
|
||||||
let currentPath = ""
|
|
||||||
for (const part of pathParts) {
|
|
||||||
currentPath += `/${part}`
|
|
||||||
// Capitalize and clean up the part for display
|
|
||||||
const title = part
|
|
||||||
.split("-")
|
|
||||||
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
|
||||||
.join(" ")
|
|
||||||
breadcrumbs.push({ title, url: currentPath })
|
|
||||||
}
|
|
||||||
|
|
||||||
return breadcrumbs
|
|
||||||
}
|
|
||||||
|
|
||||||
function getPageTitle(pathname: string): string {
|
|
||||||
// Check top-level items first
|
|
||||||
for (const item of NAV_CONFIG) {
|
|
||||||
if (item.url === pathname) return item.title
|
|
||||||
// Check sub-items
|
|
||||||
if (item.subItems) {
|
|
||||||
const subItem = item.subItems.find((sub) => sub.url === pathname)
|
|
||||||
if (subItem) return subItem.title
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle nested routes
|
|
||||||
const parts = pathname.split("/").filter(Boolean)
|
|
||||||
const lastPart = parts[parts.length - 1]
|
|
||||||
if (lastPart) {
|
|
||||||
return lastPart
|
|
||||||
.split("-")
|
|
||||||
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
|
||||||
.join(" ")
|
|
||||||
}
|
|
||||||
|
|
||||||
return "Aurora"
|
|
||||||
}
|
|
||||||
|
|
||||||
export function NavigationProvider({ children }: { children: React.ReactNode }) {
|
|
||||||
const location = useLocation()
|
|
||||||
|
|
||||||
const value = React.useMemo<NavigationContextProps>(() => {
|
|
||||||
const navItems = NAV_CONFIG.map((item) => {
|
|
||||||
const isParentActive = item.subItems
|
|
||||||
? location.pathname.startsWith(item.url)
|
|
||||||
: location.pathname === item.url
|
|
||||||
|
|
||||||
return {
|
|
||||||
...item,
|
|
||||||
isActive: isParentActive,
|
|
||||||
subItems: item.subItems?.map((subItem) => ({
|
|
||||||
...subItem,
|
|
||||||
isActive: location.pathname === subItem.url,
|
|
||||||
})),
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
return {
|
|
||||||
navItems,
|
|
||||||
breadcrumbs: generateBreadcrumbs(location),
|
|
||||||
currentPath: location.pathname,
|
|
||||||
currentTitle: getPageTitle(location.pathname),
|
|
||||||
}
|
|
||||||
}, [location.pathname])
|
|
||||||
|
|
||||||
return (
|
|
||||||
<NavigationContext.Provider value={value}>
|
|
||||||
{children}
|
|
||||||
</NavigationContext.Provider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export function useNavigation() {
|
|
||||||
const context = React.useContext(NavigationContext)
|
|
||||||
if (!context) {
|
|
||||||
throw new Error("useNavigation must be used within a NavigationProvider")
|
|
||||||
}
|
|
||||||
return context
|
|
||||||
}
|
|
||||||
@@ -1,26 +0,0 @@
|
|||||||
/**
|
|
||||||
* This file is the entry point for the React app, it sets up the root
|
|
||||||
* element and renders the App component to the DOM.
|
|
||||||
*
|
|
||||||
* It is included in `src/index.html`.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { StrictMode } from "react";
|
|
||||||
import { createRoot } from "react-dom/client";
|
|
||||||
import { App } from "./App";
|
|
||||||
|
|
||||||
const elem = document.getElementById("root")!;
|
|
||||||
const app = (
|
|
||||||
<StrictMode>
|
|
||||||
<App />
|
|
||||||
</StrictMode>
|
|
||||||
);
|
|
||||||
|
|
||||||
if (import.meta.hot) {
|
|
||||||
// With hot module reloading, `import.meta.hot.data` is persisted.
|
|
||||||
const root = (import.meta.hot.data.root ??= createRoot(elem));
|
|
||||||
root.render(app);
|
|
||||||
} else {
|
|
||||||
// The hot module reloading API is not available in production.
|
|
||||||
createRoot(elem).render(app);
|
|
||||||
}
|
|
||||||
@@ -1,306 +0,0 @@
|
|||||||
/**
|
|
||||||
* useItems Hook
|
|
||||||
* Manages item data fetching and mutations for the items management interface.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { useState, useCallback, useEffect } from "react";
|
|
||||||
import { toast } from "sonner";
|
|
||||||
|
|
||||||
// Full item type matching the database schema
|
|
||||||
export interface ItemWithUsage {
|
|
||||||
id: number;
|
|
||||||
name: string;
|
|
||||||
description: string | null;
|
|
||||||
rarity: string | null;
|
|
||||||
type: string | null;
|
|
||||||
price: bigint | null;
|
|
||||||
iconUrl: string | null;
|
|
||||||
imageUrl: string | null;
|
|
||||||
usageData: {
|
|
||||||
consume: boolean;
|
|
||||||
effects: Array<{
|
|
||||||
type: string;
|
|
||||||
[key: string]: any;
|
|
||||||
}>;
|
|
||||||
} | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ItemFilters {
|
|
||||||
search?: string;
|
|
||||||
type?: string;
|
|
||||||
rarity?: string;
|
|
||||||
limit?: number;
|
|
||||||
offset?: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ItemsResponse {
|
|
||||||
items: ItemWithUsage[];
|
|
||||||
total: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface CreateItemData {
|
|
||||||
name: string;
|
|
||||||
description?: string | null;
|
|
||||||
rarity?: 'C' | 'R' | 'SR' | 'SSR';
|
|
||||||
type: 'MATERIAL' | 'CONSUMABLE' | 'EQUIPMENT' | 'QUEST';
|
|
||||||
price?: string | null;
|
|
||||||
iconUrl?: string;
|
|
||||||
imageUrl?: string;
|
|
||||||
usageData?: {
|
|
||||||
consume: boolean;
|
|
||||||
effects: Array<{ type: string;[key: string]: any }>;
|
|
||||||
} | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface UpdateItemData extends Partial<CreateItemData> { }
|
|
||||||
|
|
||||||
export function useItems(initialFilters: ItemFilters = {}) {
|
|
||||||
const [items, setItems] = useState<ItemWithUsage[]>([]);
|
|
||||||
const [total, setTotal] = useState(0);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [filters, setFilters] = useState<ItemFilters>(initialFilters);
|
|
||||||
|
|
||||||
const fetchItems = useCallback(async (newFilters?: ItemFilters) => {
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
const params = new URLSearchParams();
|
|
||||||
const activeFilters = newFilters ?? filters;
|
|
||||||
|
|
||||||
if (activeFilters.search) params.set("search", activeFilters.search);
|
|
||||||
if (activeFilters.type) params.set("type", activeFilters.type);
|
|
||||||
if (activeFilters.rarity) params.set("rarity", activeFilters.rarity);
|
|
||||||
if (activeFilters.limit) params.set("limit", String(activeFilters.limit));
|
|
||||||
if (activeFilters.offset) params.set("offset", String(activeFilters.offset));
|
|
||||||
|
|
||||||
const response = await fetch(`/api/items?${params.toString()}`);
|
|
||||||
if (!response.ok) throw new Error("Failed to fetch items");
|
|
||||||
|
|
||||||
const data: ItemsResponse = await response.json();
|
|
||||||
setItems(data.items);
|
|
||||||
setTotal(data.total);
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error fetching items:", error);
|
|
||||||
toast.error("Failed to load items", {
|
|
||||||
description: error instanceof Error ? error.message : "Unknown error"
|
|
||||||
});
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}, [filters]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
fetchItems();
|
|
||||||
}, [fetchItems]);
|
|
||||||
|
|
||||||
const updateFilters = useCallback((newFilters: Partial<ItemFilters>) => {
|
|
||||||
setFilters(prev => ({ ...prev, ...newFilters }));
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const clearFilters = useCallback(() => {
|
|
||||||
setFilters({});
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return {
|
|
||||||
items,
|
|
||||||
total,
|
|
||||||
loading,
|
|
||||||
filters,
|
|
||||||
fetchItems,
|
|
||||||
updateFilters,
|
|
||||||
clearFilters,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export function useItem(id: number | null) {
|
|
||||||
const [item, setItem] = useState<ItemWithUsage | null>(null);
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
const fetchItem = useCallback(async () => {
|
|
||||||
if (id === null) {
|
|
||||||
setItem(null);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setLoading(true);
|
|
||||||
setError(null);
|
|
||||||
try {
|
|
||||||
const response = await fetch(`/api/items/${id}`);
|
|
||||||
if (!response.ok) {
|
|
||||||
if (response.status === 404) {
|
|
||||||
throw new Error("Item not found");
|
|
||||||
}
|
|
||||||
throw new Error("Failed to fetch item");
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = await response.json();
|
|
||||||
setItem(data);
|
|
||||||
} catch (err) {
|
|
||||||
const message = err instanceof Error ? err.message : "Unknown error";
|
|
||||||
setError(message);
|
|
||||||
toast.error("Failed to load item", { description: message });
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}, [id]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
fetchItem();
|
|
||||||
}, [fetchItem]);
|
|
||||||
|
|
||||||
return { item, loading, error, refetch: fetchItem };
|
|
||||||
}
|
|
||||||
|
|
||||||
export function useCreateItem() {
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
|
|
||||||
const createItem = useCallback(async (data: CreateItemData, imageFile?: File): Promise<ItemWithUsage | null> => {
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
let response: Response;
|
|
||||||
|
|
||||||
if (imageFile) {
|
|
||||||
// Multipart form with image
|
|
||||||
const formData = new FormData();
|
|
||||||
formData.append("data", JSON.stringify(data));
|
|
||||||
formData.append("image", imageFile);
|
|
||||||
|
|
||||||
response = await fetch("/api/items", {
|
|
||||||
method: "POST",
|
|
||||||
body: formData,
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
// JSON-only request
|
|
||||||
response = await fetch("/api/items", {
|
|
||||||
method: "POST",
|
|
||||||
headers: { "Content-Type": "application/json" },
|
|
||||||
body: JSON.stringify(data),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
const errorData = await response.json().catch(() => ({}));
|
|
||||||
throw new Error(errorData.error || "Failed to create item");
|
|
||||||
}
|
|
||||||
|
|
||||||
const result = await response.json();
|
|
||||||
toast.success("Item created", {
|
|
||||||
description: `"${result.item.name}" has been created successfully.`
|
|
||||||
});
|
|
||||||
|
|
||||||
return result.item;
|
|
||||||
} catch (err) {
|
|
||||||
const message = err instanceof Error ? err.message : "Unknown error";
|
|
||||||
toast.error("Failed to create item", { description: message });
|
|
||||||
return null;
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return { createItem, loading };
|
|
||||||
}
|
|
||||||
|
|
||||||
export function useUpdateItem() {
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
|
|
||||||
const updateItem = useCallback(async (id: number, data: UpdateItemData): Promise<ItemWithUsage | null> => {
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
const response = await fetch(`/api/items/${id}`, {
|
|
||||||
method: "PUT",
|
|
||||||
headers: { "Content-Type": "application/json" },
|
|
||||||
body: JSON.stringify(data),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
const errorData = await response.json().catch(() => ({}));
|
|
||||||
throw new Error(errorData.error || "Failed to update item");
|
|
||||||
}
|
|
||||||
|
|
||||||
const result = await response.json();
|
|
||||||
toast.success("Item updated", {
|
|
||||||
description: `"${result.item.name}" has been updated successfully.`
|
|
||||||
});
|
|
||||||
|
|
||||||
return result.item;
|
|
||||||
} catch (err) {
|
|
||||||
const message = err instanceof Error ? err.message : "Unknown error";
|
|
||||||
toast.error("Failed to update item", { description: message });
|
|
||||||
return null;
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return { updateItem, loading };
|
|
||||||
}
|
|
||||||
|
|
||||||
export function useDeleteItem() {
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
|
|
||||||
const deleteItem = useCallback(async (id: number, name?: string): Promise<boolean> => {
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
const response = await fetch(`/api/items/${id}`, {
|
|
||||||
method: "DELETE",
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
const errorData = await response.json().catch(() => ({}));
|
|
||||||
throw new Error(errorData.error || "Failed to delete item");
|
|
||||||
}
|
|
||||||
|
|
||||||
toast.success("Item deleted", {
|
|
||||||
description: name ? `"${name}" has been deleted.` : "Item has been deleted."
|
|
||||||
});
|
|
||||||
|
|
||||||
return true;
|
|
||||||
} catch (err) {
|
|
||||||
const message = err instanceof Error ? err.message : "Unknown error";
|
|
||||||
toast.error("Failed to delete item", { description: message });
|
|
||||||
return false;
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return { deleteItem, loading };
|
|
||||||
}
|
|
||||||
|
|
||||||
export function useUploadItemIcon() {
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
|
|
||||||
const uploadIcon = useCallback(async (itemId: number, imageFile: File): Promise<ItemWithUsage | null> => {
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
const formData = new FormData();
|
|
||||||
formData.append("image", imageFile);
|
|
||||||
|
|
||||||
const response = await fetch(`/api/items/${itemId}/icon`, {
|
|
||||||
method: "POST",
|
|
||||||
body: formData,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
const errorData = await response.json().catch(() => ({}));
|
|
||||||
throw new Error(errorData.error || "Failed to upload icon");
|
|
||||||
}
|
|
||||||
|
|
||||||
const result = await response.json();
|
|
||||||
toast.success("Icon uploaded", {
|
|
||||||
description: "Item icon has been updated successfully."
|
|
||||||
});
|
|
||||||
|
|
||||||
return result.item;
|
|
||||||
} catch (err) {
|
|
||||||
const message = err instanceof Error ? err.message : "Unknown error";
|
|
||||||
toast.error("Failed to upload icon", { description: message });
|
|
||||||
return null;
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return { uploadIcon, loading };
|
|
||||||
}
|
|
||||||
@@ -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
|
|
||||||
}
|
|
||||||
@@ -1,187 +0,0 @@
|
|||||||
import { useEffect, useState, useCallback } from "react";
|
|
||||||
import { useForm } from "react-hook-form";
|
|
||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
|
||||||
import { z } from "zod";
|
|
||||||
import { toast } from "sonner";
|
|
||||||
|
|
||||||
// Sentinel value for "none" selection
|
|
||||||
export const NONE_VALUE = "__none__";
|
|
||||||
|
|
||||||
// Schema definition matching backend config
|
|
||||||
const bigIntStringSchema = z.coerce.string()
|
|
||||||
.refine((val) => /^\d+$/.test(val), { message: "Must be a valid integer" });
|
|
||||||
|
|
||||||
export const formSchema = z.object({
|
|
||||||
leveling: z.object({
|
|
||||||
base: z.number(),
|
|
||||||
exponent: z.number(),
|
|
||||||
chat: z.object({
|
|
||||||
cooldownMs: z.number(),
|
|
||||||
minXp: z.number(),
|
|
||||||
maxXp: z.number(),
|
|
||||||
})
|
|
||||||
}),
|
|
||||||
economy: z.object({
|
|
||||||
daily: z.object({
|
|
||||||
amount: bigIntStringSchema,
|
|
||||||
streakBonus: bigIntStringSchema,
|
|
||||||
weeklyBonus: bigIntStringSchema,
|
|
||||||
cooldownMs: z.number(),
|
|
||||||
}),
|
|
||||||
transfers: z.object({
|
|
||||||
allowSelfTransfer: z.boolean(),
|
|
||||||
minAmount: bigIntStringSchema,
|
|
||||||
}),
|
|
||||||
exam: z.object({
|
|
||||||
multMin: z.number(),
|
|
||||||
multMax: z.number(),
|
|
||||||
})
|
|
||||||
}),
|
|
||||||
inventory: z.object({
|
|
||||||
maxStackSize: bigIntStringSchema,
|
|
||||||
maxSlots: z.number(),
|
|
||||||
}),
|
|
||||||
commands: z.record(z.string(), z.boolean()).optional(),
|
|
||||||
lootdrop: z.object({
|
|
||||||
activityWindowMs: z.number(),
|
|
||||||
minMessages: z.number(),
|
|
||||||
spawnChance: z.number(),
|
|
||||||
cooldownMs: z.number(),
|
|
||||||
reward: z.object({
|
|
||||||
min: z.number(),
|
|
||||||
max: z.number(),
|
|
||||||
currency: z.string(),
|
|
||||||
})
|
|
||||||
}),
|
|
||||||
studentRole: z.string().optional(),
|
|
||||||
visitorRole: z.string().optional(),
|
|
||||||
colorRoles: z.array(z.string()).default([]),
|
|
||||||
welcomeChannelId: z.string().optional(),
|
|
||||||
welcomeMessage: z.string().optional(),
|
|
||||||
feedbackChannelId: z.string().optional(),
|
|
||||||
terminal: z.object({
|
|
||||||
channelId: z.string(),
|
|
||||||
messageId: z.string()
|
|
||||||
}).optional(),
|
|
||||||
moderation: z.object({
|
|
||||||
prune: z.object({
|
|
||||||
maxAmount: z.number(),
|
|
||||||
confirmThreshold: z.number(),
|
|
||||||
batchSize: z.number(),
|
|
||||||
batchDelayMs: z.number(),
|
|
||||||
}),
|
|
||||||
cases: z.object({
|
|
||||||
dmOnWarn: z.boolean(),
|
|
||||||
logChannelId: z.string().optional(),
|
|
||||||
autoTimeoutThreshold: z.number().optional()
|
|
||||||
})
|
|
||||||
}),
|
|
||||||
trivia: z.object({
|
|
||||||
entryFee: bigIntStringSchema,
|
|
||||||
rewardMultiplier: z.number(),
|
|
||||||
timeoutSeconds: z.number(),
|
|
||||||
cooldownMs: z.number(),
|
|
||||||
categories: z.array(z.number()).default([]),
|
|
||||||
difficulty: z.enum(['easy', 'medium', 'hard', 'random']),
|
|
||||||
}).optional(),
|
|
||||||
system: z.record(z.string(), z.any()).optional(),
|
|
||||||
});
|
|
||||||
|
|
||||||
export type FormValues = z.infer<typeof formSchema>;
|
|
||||||
|
|
||||||
export interface ConfigMeta {
|
|
||||||
roles: { id: string, name: string, color: string }[];
|
|
||||||
channels: { id: string, name: string, type: number }[];
|
|
||||||
commands: { name: string, category: string }[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export const toSelectValue = (v: string | undefined | null) => v || NONE_VALUE;
|
|
||||||
export const fromSelectValue = (v: string) => v === NONE_VALUE ? "" : v;
|
|
||||||
|
|
||||||
export function useSettings() {
|
|
||||||
const [meta, setMeta] = useState<ConfigMeta | null>(null);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [isSaving, setIsSaving] = useState(false);
|
|
||||||
|
|
||||||
const form = useForm<FormValues>({
|
|
||||||
resolver: zodResolver(formSchema) as any,
|
|
||||||
defaultValues: {
|
|
||||||
economy: {
|
|
||||||
daily: { amount: "0", streakBonus: "0", weeklyBonus: "0", cooldownMs: 0 },
|
|
||||||
transfers: { minAmount: "0", allowSelfTransfer: false },
|
|
||||||
exam: { multMin: 1, multMax: 1 }
|
|
||||||
},
|
|
||||||
leveling: { base: 100, exponent: 1.5, chat: { minXp: 10, maxXp: 20, cooldownMs: 60000 } },
|
|
||||||
inventory: { maxStackSize: "1", maxSlots: 10 },
|
|
||||||
moderation: {
|
|
||||||
prune: { maxAmount: 100, confirmThreshold: 50, batchSize: 100, batchDelayMs: 1000 },
|
|
||||||
cases: { dmOnWarn: true }
|
|
||||||
},
|
|
||||||
lootdrop: {
|
|
||||||
spawnChance: 0.05,
|
|
||||||
minMessages: 10,
|
|
||||||
cooldownMs: 300000,
|
|
||||||
activityWindowMs: 600000,
|
|
||||||
reward: { min: 100, max: 500, currency: "AU" }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const loadSettings = useCallback(async () => {
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
const [config, metaData] = await Promise.all([
|
|
||||||
fetch("/api/settings").then(res => res.json()),
|
|
||||||
fetch("/api/settings/meta").then(res => res.json())
|
|
||||||
]);
|
|
||||||
form.reset(config as any);
|
|
||||||
setMeta(metaData);
|
|
||||||
} catch (err) {
|
|
||||||
toast.error("Failed to load settings", {
|
|
||||||
description: "Unable to fetch bot configuration. Please try again."
|
|
||||||
});
|
|
||||||
console.error(err);
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}, [form]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
loadSettings();
|
|
||||||
}, [loadSettings]);
|
|
||||||
|
|
||||||
const saveSettings = async (data: FormValues) => {
|
|
||||||
setIsSaving(true);
|
|
||||||
try {
|
|
||||||
const response = await fetch("/api/settings", {
|
|
||||||
method: "POST",
|
|
||||||
headers: { "Content-Type": "application/json" },
|
|
||||||
body: JSON.stringify(data)
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) throw new Error("Failed to save");
|
|
||||||
|
|
||||||
toast.success("Settings saved successfully", {
|
|
||||||
description: "Bot configuration has been updated and reloaded."
|
|
||||||
});
|
|
||||||
// Reload settings to ensure we have the latest state
|
|
||||||
await loadSettings();
|
|
||||||
} catch (error) {
|
|
||||||
toast.error("Failed to save settings", {
|
|
||||||
description: error instanceof Error ? error.message : "Unable to save changes. Please try again."
|
|
||||||
});
|
|
||||||
console.error(error);
|
|
||||||
} finally {
|
|
||||||
setIsSaving(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
|
||||||
form,
|
|
||||||
meta,
|
|
||||||
loading,
|
|
||||||
isSaving,
|
|
||||||
saveSettings,
|
|
||||||
loadSettings
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@@ -1,61 +0,0 @@
|
|||||||
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 +0,0 @@
|
|||||||
@import "../styles/globals.css";
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>Aurora Dashboard</title>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div id="root"></div>
|
|
||||||
<script type="module" src="./frontend.tsx"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
/**
|
|
||||||
* Web server entry point.
|
|
||||||
*
|
|
||||||
* This file can be run directly for standalone development:
|
|
||||||
* bun --hot src/index.ts
|
|
||||||
*
|
|
||||||
* Or the server can be started in-process by importing from ./server.ts
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { createWebServer } from "./server";
|
|
||||||
|
|
||||||
// Auto-start when run directly
|
|
||||||
const instance = await createWebServer({
|
|
||||||
port: Number(process.env.WEB_PORT) || 3000,
|
|
||||||
hostname: process.env.WEB_HOST || "localhost",
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log(`🌐 Web server is running at ${instance.url}`);
|
|
||||||
@@ -1,89 +0,0 @@
|
|||||||
export const createImage = (url: string): Promise<HTMLImageElement> =>
|
|
||||||
new Promise((resolve, reject) => {
|
|
||||||
const image = new Image()
|
|
||||||
image.addEventListener('load', () => resolve(image))
|
|
||||||
image.addEventListener('error', (error) => reject(error))
|
|
||||||
image.setAttribute('crossOrigin', 'anonymous') // needed to avoid cross-origin issues on CodeSandbox
|
|
||||||
image.src = url
|
|
||||||
})
|
|
||||||
|
|
||||||
export function getRadianAngle(degreeValue: number) {
|
|
||||||
return (degreeValue * Math.PI) / 180
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns the new bounding area of a rotated rectangle.
|
|
||||||
*/
|
|
||||||
export function rotateSize(width: number, height: number, rotation: number) {
|
|
||||||
const rotRad = getRadianAngle(rotation)
|
|
||||||
|
|
||||||
return {
|
|
||||||
width:
|
|
||||||
Math.abs(Math.cos(rotRad) * width) + Math.abs(Math.sin(rotRad) * height),
|
|
||||||
height:
|
|
||||||
Math.abs(Math.sin(rotRad) * width) + Math.abs(Math.cos(rotRad) * height),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* This function was adapted from the one in the ReadMe of https://github.com/DominicTobias/react-image-crop
|
|
||||||
*/
|
|
||||||
export async function getCroppedImg(
|
|
||||||
imageSrc: string,
|
|
||||||
pixelCrop: { x: number; y: number; width: number; height: number },
|
|
||||||
rotation = 0,
|
|
||||||
flip = { horizontal: false, vertical: false }
|
|
||||||
): Promise<Blob | null> {
|
|
||||||
const image = await createImage(imageSrc)
|
|
||||||
const canvas = document.createElement('canvas')
|
|
||||||
const ctx = canvas.getContext('2d')
|
|
||||||
|
|
||||||
if (!ctx) {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
const rotRad = getRadianAngle(rotation)
|
|
||||||
|
|
||||||
// calculate bounding box of the rotated image
|
|
||||||
const { width: bBoxWidth, height: bBoxHeight } = rotateSize(
|
|
||||||
image.width,
|
|
||||||
image.height,
|
|
||||||
rotation
|
|
||||||
)
|
|
||||||
|
|
||||||
// set canvas size to match the bounding box
|
|
||||||
canvas.width = bBoxWidth
|
|
||||||
canvas.height = bBoxHeight
|
|
||||||
|
|
||||||
// translate canvas context to a central location to allow rotating and flipping around the center
|
|
||||||
ctx.translate(bBoxWidth / 2, bBoxHeight / 2)
|
|
||||||
ctx.rotate(rotRad)
|
|
||||||
ctx.scale(flip.horizontal ? -1 : 1, flip.vertical ? -1 : 1)
|
|
||||||
ctx.translate(-image.width / 2, -image.height / 2)
|
|
||||||
|
|
||||||
// draw rotated image
|
|
||||||
ctx.drawImage(image, 0, 0)
|
|
||||||
|
|
||||||
// croppedAreaPixels values are bounding box relative
|
|
||||||
// extract the cropped image using these values
|
|
||||||
const data = ctx.getImageData(
|
|
||||||
pixelCrop.x,
|
|
||||||
pixelCrop.y,
|
|
||||||
pixelCrop.width,
|
|
||||||
pixelCrop.height
|
|
||||||
)
|
|
||||||
|
|
||||||
// set canvas width to final desired crop size - this will clear existing context
|
|
||||||
canvas.width = pixelCrop.width
|
|
||||||
canvas.height = pixelCrop.height
|
|
||||||
|
|
||||||
// paste generated rotate image at the top left corner
|
|
||||||
ctx.putImageData(data, 0, 0)
|
|
||||||
|
|
||||||
// As a Blob
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
canvas.toBlob((file) => {
|
|
||||||
resolve(file)
|
|
||||||
}, 'image/jpeg')
|
|
||||||
})
|
|
||||||
}
|
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
import { type ClassValue, clsx } from "clsx";
|
|
||||||
import { twMerge } from "tailwind-merge";
|
|
||||||
|
|
||||||
export function cn(...inputs: ClassValue[]) {
|
|
||||||
return twMerge(clsx(inputs));
|
|
||||||
}
|
|
||||||
@@ -1,152 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import { QuestForm } from "../components/quest-form";
|
|
||||||
import { QuestTable } from "../components/quest-table";
|
|
||||||
import { SectionHeader } from "../components/section-header";
|
|
||||||
import { toast } from "sonner";
|
|
||||||
|
|
||||||
interface QuestListItem {
|
|
||||||
id: number;
|
|
||||||
name: string;
|
|
||||||
description: string | null;
|
|
||||||
triggerEvent: string;
|
|
||||||
requirements: { target?: number };
|
|
||||||
rewards: { xp?: number; balance?: number };
|
|
||||||
}
|
|
||||||
|
|
||||||
export function AdminQuests() {
|
|
||||||
const [quests, setQuests] = React.useState<QuestListItem[]>([]);
|
|
||||||
const [isInitialLoading, setIsInitialLoading] = React.useState(true);
|
|
||||||
const [isRefreshing, setIsRefreshing] = React.useState(false);
|
|
||||||
const [lastCreatedQuestId, setLastCreatedQuestId] = React.useState<number | null>(null);
|
|
||||||
const [editingQuest, setEditingQuest] = React.useState<QuestListItem | null>(null);
|
|
||||||
const [isFormModeEdit, setIsFormModeEdit] = React.useState(false);
|
|
||||||
const formRef = React.useRef<HTMLDivElement>(null);
|
|
||||||
|
|
||||||
const fetchQuests = React.useCallback(async (isRefresh = false) => {
|
|
||||||
if (isRefresh) {
|
|
||||||
setIsRefreshing(true);
|
|
||||||
} else {
|
|
||||||
setIsInitialLoading(true);
|
|
||||||
}
|
|
||||||
try {
|
|
||||||
const response = await fetch("/api/quests");
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error("Failed to fetch quests");
|
|
||||||
}
|
|
||||||
const data = await response.json();
|
|
||||||
if (data.success && Array.isArray(data.data)) {
|
|
||||||
setQuests(data.data);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error fetching quests:", error);
|
|
||||||
toast.error("Failed to load quests", {
|
|
||||||
description: error instanceof Error ? error.message : "Unknown error",
|
|
||||||
});
|
|
||||||
} finally {
|
|
||||||
setIsInitialLoading(false);
|
|
||||||
setIsRefreshing(false);
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
fetchQuests(false);
|
|
||||||
}, [fetchQuests]);
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
if (lastCreatedQuestId !== null) {
|
|
||||||
const element = document.getElementById(`quest-row-${lastCreatedQuestId}`);
|
|
||||||
if (element) {
|
|
||||||
element.scrollIntoView({ behavior: "smooth", block: "center" });
|
|
||||||
element.classList.add("bg-primary/10");
|
|
||||||
setTimeout(() => {
|
|
||||||
element.classList.remove("bg-primary/10");
|
|
||||||
}, 2000);
|
|
||||||
}
|
|
||||||
setLastCreatedQuestId(null);
|
|
||||||
}
|
|
||||||
}, [lastCreatedQuestId, quests]);
|
|
||||||
|
|
||||||
const handleQuestCreated = () => {
|
|
||||||
fetchQuests(true);
|
|
||||||
toast.success("Quest list updated", {
|
|
||||||
description: "The quest inventory has been refreshed.",
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDeleteQuest = async (id: number) => {
|
|
||||||
try {
|
|
||||||
const response = await fetch(`/api/quests/${id}`, {
|
|
||||||
method: "DELETE",
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
const errorData = await response.json().catch(() => ({}));
|
|
||||||
throw new Error(errorData.message || "Failed to delete quest");
|
|
||||||
}
|
|
||||||
|
|
||||||
setQuests((prev) => prev.filter((q) => q.id !== id));
|
|
||||||
toast.success("Quest deleted", {
|
|
||||||
description: `Quest #${id} has been successfully deleted.`,
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error deleting quest:", error);
|
|
||||||
toast.error("Failed to delete quest", {
|
|
||||||
description: error instanceof Error ? error.message : "Unknown error",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleEditQuest = (id: number) => {
|
|
||||||
const quest = quests.find(q => q.id === id);
|
|
||||||
if (quest) {
|
|
||||||
setEditingQuest(quest);
|
|
||||||
setIsFormModeEdit(true);
|
|
||||||
formRef.current?.scrollIntoView({ behavior: "smooth", block: "center" });
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleQuestUpdated = () => {
|
|
||||||
fetchQuests(true);
|
|
||||||
setEditingQuest(null);
|
|
||||||
setIsFormModeEdit(false);
|
|
||||||
toast.success("Quest list updated", {
|
|
||||||
description: "The quest inventory has been refreshed.",
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleFormCancel = () => {
|
|
||||||
setEditingQuest(null);
|
|
||||||
setIsFormModeEdit(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<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="animate-in fade-in slide-in-from-bottom-4 duration-700">
|
|
||||||
<QuestTable
|
|
||||||
quests={quests}
|
|
||||||
isInitialLoading={isInitialLoading}
|
|
||||||
isRefreshing={isRefreshing}
|
|
||||||
onRefresh={() => fetchQuests(true)}
|
|
||||||
onDelete={handleDeleteQuest}
|
|
||||||
onEdit={handleEditQuest}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="animate-in fade-in slide-up duration-700" ref={formRef}>
|
|
||||||
<QuestForm
|
|
||||||
initialData={editingQuest || undefined}
|
|
||||||
onUpdate={handleQuestUpdated}
|
|
||||||
onCancel={handleFormCancel}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default AdminQuests;
|
|
||||||
@@ -1,382 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import { Badge } from "../components/ui/badge";
|
|
||||||
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 { LeaderboardCard, type LeaderboardData } from "../components/leaderboard-card";
|
|
||||||
import { ActivityChart } from "../components/activity-chart";
|
|
||||||
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: '👋' },
|
|
||||||
{ type: 'warn', message: 'Failed login attempt', timestamp: new Date(Date.now() - 1000 * 60 * 60), icon: '⚠️' }
|
|
||||||
];
|
|
||||||
|
|
||||||
const mockActivityData: ActivityData[] = Array.from({ length: 24 }).map((_, i) => {
|
|
||||||
const d = new Date();
|
|
||||||
d.setHours(d.getHours() - (23 - i));
|
|
||||||
d.setMinutes(0, 0, 0);
|
|
||||||
return {
|
|
||||||
hour: d.toISOString(),
|
|
||||||
commands: Math.floor(Math.random() * 100) + 20,
|
|
||||||
transactions: Math.floor(Math.random() * 60) + 10
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
const mockLeaderboardData: LeaderboardData = {
|
|
||||||
topLevels: [
|
|
||||||
{ username: "StellarMage", level: 99 },
|
|
||||||
{ username: "MoonWalker", level: 85 },
|
|
||||||
{ username: "SunChaser", level: 72 },
|
|
||||||
],
|
|
||||||
topWealth: [
|
|
||||||
{ username: "GoldHoarder", balance: "1000000" },
|
|
||||||
{ username: "MerchantKing", balance: "750000" },
|
|
||||||
{ username: "LuckyLooter", balance: "500000" },
|
|
||||||
],
|
|
||||||
topNetWorth: [
|
|
||||||
{ username: "MerchantKing", netWorth: "1500000" },
|
|
||||||
{ username: "GoldHoarder", netWorth: "1250000" },
|
|
||||||
{ username: "LuckyLooter", netWorth: "850000" },
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
export function DesignSystem() {
|
|
||||||
return (
|
|
||||||
<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>
|
|
||||||
</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>
|
|
||||||
|
|
||||||
{/* 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="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>
|
|
||||||
|
|
||||||
{/* 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 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>
|
|
||||||
|
|
||||||
{/* 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>
|
|
||||||
|
|
||||||
{/* 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">
|
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
|
|
||||||
{/* Cards & Containers */}
|
|
||||||
<section className="space-y-6">
|
|
||||||
<SectionTitle title="Cards & Containers" />
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<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="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"
|
|
||||||
/>
|
|
||||||
</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}
|
|
||||||
className="h-[400px]"
|
|
||||||
/>
|
|
||||||
<LeaderboardCard
|
|
||||||
data={mockLeaderboardData}
|
|
||||||
isLoading={false}
|
|
||||||
className="h-[400px]"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Application Patterns */}
|
|
||||||
<section className="space-y-6">
|
|
||||||
<SectionTitle title="Application Forms" />
|
|
||||||
<div className="max-w-xl mx-auto">
|
|
||||||
<QuestForm />
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</TabsContent>
|
|
||||||
</Tabs>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function SectionTitle({ title }: { title: string }) {
|
|
||||||
return (
|
|
||||||
<div className="flex items-center gap-4 py-4">
|
|
||||||
<div className="h-0.5 bg-linear-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-linear-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 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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function ColorSwatch({ label, color, text = "text-foreground", border = false }: { label: string, color: string, text?: string, border?: boolean }) {
|
|
||||||
return (
|
|
||||||
<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-linear-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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default DesignSystem;
|
|
||||||
@@ -1,219 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
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 (
|
|
||||||
<>
|
|
||||||
{/* Hero Section */}
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Home;
|
|
||||||
@@ -1,106 +0,0 @@
|
|||||||
/**
|
|
||||||
* AdminItems Page
|
|
||||||
* Full item management page with filtering, table, and create/edit functionality.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { useState, useCallback } from "react";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { SectionHeader } from "@/components/section-header";
|
|
||||||
import { ItemsTable } from "@/components/items-table";
|
|
||||||
import { ItemsFilter } from "@/components/items-filter";
|
|
||||||
import { ItemFormSheet } from "@/components/item-form-sheet";
|
|
||||||
import { useItems, useDeleteItem, type ItemWithUsage } from "@/hooks/use-items";
|
|
||||||
import { Plus } from "lucide-react";
|
|
||||||
|
|
||||||
export function AdminItems() {
|
|
||||||
const { items, total, loading, filters, fetchItems, updateFilters, clearFilters } = useItems();
|
|
||||||
const { deleteItem } = useDeleteItem();
|
|
||||||
|
|
||||||
const [isSheetOpen, setIsSheetOpen] = useState(false);
|
|
||||||
const [editingItem, setEditingItem] = useState<ItemWithUsage | null>(null);
|
|
||||||
const [isRefreshing, setIsRefreshing] = useState(false);
|
|
||||||
|
|
||||||
const handleRefresh = useCallback(async () => {
|
|
||||||
setIsRefreshing(true);
|
|
||||||
await fetchItems();
|
|
||||||
setIsRefreshing(false);
|
|
||||||
}, [fetchItems]);
|
|
||||||
|
|
||||||
const handleCreateClick = useCallback(() => {
|
|
||||||
setEditingItem(null);
|
|
||||||
setIsSheetOpen(true);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleEditItem = useCallback((item: ItemWithUsage) => {
|
|
||||||
setEditingItem(item);
|
|
||||||
setIsSheetOpen(true);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleDeleteItem = useCallback(async (item: ItemWithUsage) => {
|
|
||||||
const success = await deleteItem(item.id, item.name);
|
|
||||||
if (success) {
|
|
||||||
await fetchItems();
|
|
||||||
}
|
|
||||||
}, [deleteItem, fetchItems]);
|
|
||||||
|
|
||||||
const handleSheetClose = useCallback(() => {
|
|
||||||
setIsSheetOpen(false);
|
|
||||||
setEditingItem(null);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleItemSaved = useCallback(async () => {
|
|
||||||
setIsSheetOpen(false);
|
|
||||||
setEditingItem(null);
|
|
||||||
await fetchItems();
|
|
||||||
}, [fetchItems]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<main className="pt-8 px-8 pb-12 max-w-7xl mx-auto space-y-8">
|
|
||||||
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
|
|
||||||
<SectionHeader
|
|
||||||
badge="Item Management"
|
|
||||||
title="Items"
|
|
||||||
description="Create and manage game items, lootboxes, and consumables."
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
onClick={handleCreateClick}
|
|
||||||
className="bg-primary hover:bg-primary/90 gap-2"
|
|
||||||
>
|
|
||||||
<Plus className="h-4 w-4" />
|
|
||||||
Create Item
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="animate-in fade-in slide-in-from-bottom-4 duration-500">
|
|
||||||
<ItemsFilter
|
|
||||||
filters={filters}
|
|
||||||
onFilterChange={updateFilters}
|
|
||||||
onClearFilters={clearFilters}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="animate-in fade-in slide-in-from-bottom-4 duration-700">
|
|
||||||
<ItemsTable
|
|
||||||
items={items}
|
|
||||||
total={total}
|
|
||||||
isLoading={loading}
|
|
||||||
isRefreshing={isRefreshing}
|
|
||||||
onRefresh={handleRefresh}
|
|
||||||
onEdit={handleEditItem}
|
|
||||||
onDelete={handleDeleteItem}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ItemFormSheet
|
|
||||||
open={isSheetOpen}
|
|
||||||
onOpenChange={(open: boolean) => {
|
|
||||||
if (!open) handleSheetClose();
|
|
||||||
}}
|
|
||||||
item={editingItem}
|
|
||||||
onSaved={handleItemSaved}
|
|
||||||
/>
|
|
||||||
</main>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default AdminItems;
|
|
||||||
@@ -1,164 +0,0 @@
|
|||||||
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;
|
|
||||||
@@ -1,290 +0,0 @@
|
|||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,149 +0,0 @@
|
|||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,141 +0,0 @@
|
|||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,65 +0,0 @@
|
|||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,338 +0,0 @@
|
|||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,314 +0,0 @@
|
|||||||
@import "tailwindcss";
|
|
||||||
@import "tw-animate-css";
|
|
||||||
|
|
||||||
@custom-variant dark (&:is(.dark *));
|
|
||||||
|
|
||||||
@theme inline {
|
|
||||||
--color-background: var(--background);
|
|
||||||
--color-foreground: var(--foreground);
|
|
||||||
--color-sidebar-ring: var(--sidebar-ring);
|
|
||||||
--color-sidebar-border: var(--sidebar-border);
|
|
||||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
||||||
--color-sidebar-accent: var(--sidebar-accent);
|
|
||||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
||||||
--color-sidebar-primary: var(--sidebar-primary);
|
|
||||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
||||||
--color-sidebar: var(--sidebar);
|
|
||||||
--color-chart-5: var(--chart-5);
|
|
||||||
--color-chart-4: var(--chart-4);
|
|
||||||
--color-chart-3: var(--chart-3);
|
|
||||||
--color-chart-2: var(--chart-2);
|
|
||||||
--color-chart-1: var(--chart-1);
|
|
||||||
--color-ring: var(--ring);
|
|
||||||
--color-input: var(--input);
|
|
||||||
--color-border: var(--border);
|
|
||||||
--color-destructive: var(--destructive);
|
|
||||||
--color-accent-foreground: var(--accent-foreground);
|
|
||||||
--color-accent: var(--accent);
|
|
||||||
--color-muted-foreground: var(--muted-foreground);
|
|
||||||
--color-muted: var(--muted);
|
|
||||||
--color-secondary-foreground: var(--secondary-foreground);
|
|
||||||
--color-secondary: var(--secondary);
|
|
||||||
--color-primary-foreground: var(--primary-foreground);
|
|
||||||
--color-primary: var(--primary);
|
|
||||||
--color-popover-foreground: var(--popover-foreground);
|
|
||||||
--color-popover: var(--popover);
|
|
||||||
--color-card-foreground: var(--card-foreground);
|
|
||||||
--color-card: var(--card);
|
|
||||||
--radius-sm: calc(var(--radius) - 4px);
|
|
||||||
--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 {
|
|
||||||
--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);
|
|
||||||
|
|
||||||
--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 base {
|
|
||||||
* {
|
|
||||||
border-color: var(--border);
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: var(--background);
|
|
||||||
color: var(--foreground);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Global Scrollbar Styling */
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
scrollbar-width: thin;
|
|
||||||
scrollbar-color: var(--muted) transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
html::-webkit-scrollbar,
|
|
||||||
body::-webkit-scrollbar {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
html::-webkit-scrollbar-track,
|
|
||||||
body::-webkit-scrollbar-track {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
html::-webkit-scrollbar-thumb,
|
|
||||||
body::-webkit-scrollbar-thumb {
|
|
||||||
background: var(--muted);
|
|
||||||
border-radius: 9999px;
|
|
||||||
}
|
|
||||||
|
|
||||||
html::-webkit-scrollbar-thumb:hover,
|
|
||||||
body::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: var(--primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@layer utilities {
|
|
||||||
.bg-aurora-page {
|
|
||||||
background: radial-gradient(circle at 50% -20%, oklch(0.25 0.1 50) 0%, var(--background) 70%);
|
|
||||||
background-attachment: fixed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-aurora {
|
|
||||||
background-image: linear-gradient(135deg, oklch(0.82 0.18 85) 0%, oklch(0.65 0.2 55) 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.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);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Custom Scrollbar Utility Class */
|
|
||||||
.custom-scrollbar {
|
|
||||||
scrollbar-width: thin;
|
|
||||||
scrollbar-color: var(--muted) transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-scrollbar::-webkit-scrollbar {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-scrollbar::-webkit-scrollbar-track {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
||||||
background: var(--muted);
|
|
||||||
border-radius: 9999px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: var(--primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Sidebar collapsed state - center icons */
|
|
||||||
[data-state="collapsed"] [data-sidebar="header"],
|
|
||||||
[data-state="collapsed"] [data-sidebar="footer"] {
|
|
||||||
padding-left: 0 !important;
|
|
||||||
padding-right: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-state="collapsed"] [data-sidebar="content"] {
|
|
||||||
padding-left: 0 !important;
|
|
||||||
padding-right: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-state="collapsed"] [data-sidebar="group"] {
|
|
||||||
padding-left: 0 !important;
|
|
||||||
padding-right: 0 !important;
|
|
||||||
align-items: center !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-state="collapsed"] [data-sidebar="menu"] {
|
|
||||||
align-items: center !important;
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-state="collapsed"] [data-sidebar="menu-item"] {
|
|
||||||
display: flex !important;
|
|
||||||
justify-content: center !important;
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-state="collapsed"] [data-sidebar="menu-button"] {
|
|
||||||
justify-content: center !important;
|
|
||||||
gap: 0 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user