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

feat: more stat components

Browse Source
This commit is contained in:
syntaxbullet
2026-01-09 16:18:52 +01:00
parent 4a691ac71d
commit 682e9d208e
9 changed files with 603 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
web/src/pages/DesignSystem.tsx
View File

@@ -8,6 +8,25 @@ import { FeatureCard } from "../components/feature-card";
import { InfoCard } from "../components/info-card";
import { SectionHeader } from "../components/section-header";
import { TestimonialCard } from "../components/testimonial-card";
import { StatCard } from "../components/stat-card";
import { LootdropCard } from "../components/lootdrop-card";
import { Activity, Coins, Flame } from "lucide-react";
import { RecentActivity } from "../components/recent-activity";
import { type RecentEvent } from "@shared/modules/dashboard/dashboard.types";
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 mockManyEvents: RecentEvent[] = Array.from({ length: 15 }).map((_, i) => ({
type: i % 3 === 0 ? 'success' : i % 3 === 1 ? 'info' : 'error', // Use string literals matching the type definition
message: `Event #${i + 1} generated for testing scroll behavior`,
timestamp: new Date(Date.now() - 1000 * 60 * i * 10),
icon: i % 3 === 0 ? '✨' : i % 3 === 1 ? 'ℹ️' : '🚨',
}));
export function DesignSystem() {
return (
@@ -249,6 +268,79 @@ export function DesignSystem() {
/>
</div>
{/* Stat Cards Demo */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<StatCard
title="Standard Stat"
value="1,234"
subtitle="Active users"
icon={Activity}
isLoading={false}
/>
<StatCard
title="Colored Stat"
value="9,999 AU"
subtitle="Total Wealth"
icon={Coins}
isLoading={false}
valueClassName="text-primary"
iconClassName="text-primary"
/>
<StatCard
title="Loading State"
value={null}
icon={Flame}
isLoading={true}
/>
</div>
{/* Game Event Cards Demo */}
<div className="space-y-4">
<h3 className="text-xl font-semibold text-muted-foreground">Game Event Cards</h3>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<LootdropCard
isLoading={true}
/>
<LootdropCard
drop={null}
state={{
monitoredChannels: 3,
hottestChannel: {
id: "123",
messages: 42,
progress: 42,
cooldown: false
},
config: { requiredMessages: 100, dropChance: 0.1 }
}}
isLoading={false}
/>
<LootdropCard
drop={null}
state={{
monitoredChannels: 3,
hottestChannel: {
id: "123",
messages: 100,
progress: 100,
cooldown: true
},
config: { requiredMessages: 100, dropChance: 0.1 }
}}
isLoading={false}
/>
<LootdropCard
drop={{
rewardAmount: 500,
currency: "AU",
createdAt: new Date().toISOString(),
expiresAt: new Date(Date.now() + 60000).toISOString()
}}
isLoading={false}
/>
</div>
</div>
{/* Testimonial Cards Demo */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<TestimonialCard
@@ -258,6 +350,33 @@ export function DesignSystem() {
avatarGradient="bg-gradient-to-br from-pink-500 to-rose-500"
/>
</div>
{/* Recent Activity Demo */}
<div className="space-y-4">
<h3 className="text-xl font-semibold text-muted-foreground">Recent Activity Feed</h3>
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6 h-[500px]">
<RecentActivity
events={[]}
isLoading={true}
className="h-full"
/>
<RecentActivity
events={[]}
isLoading={false}
className="h-full"
/>
<RecentActivity
events={mockEvents}
isLoading={false}
className="h-full"
/>
<RecentActivity
events={mockManyEvents}
isLoading={false}
className="h-full"
/>
</div>
</div>
</div>
</section>