From ae0fbb9b59da7a58b56ee76a194257c0611f5cf8 Mon Sep 17 00:00:00 2001 From: Chronyyx Date: Wed, 6 May 2026 03:17:01 -0400 Subject: [PATCH 1/9] feat: revamped components for glassmorphic features --- src/ComponentsPage.tsx | 1479 +++++++++++++++++++----------------- src/domain/MetricCard.tsx | 23 +- src/domain/PlanBadge.tsx | 6 +- src/domain/RegionBadge.tsx | 2 +- src/domain/ServerCard.tsx | 32 +- src/domain/StatusBadge.tsx | 18 +- 6 files changed, 828 insertions(+), 732 deletions(-) diff --git a/src/ComponentsPage.tsx b/src/ComponentsPage.tsx index 86a0e47..250a8d1 100644 --- a/src/ComponentsPage.tsx +++ b/src/ComponentsPage.tsx @@ -1,6 +1,6 @@ "use client"; -import { useState, type ReactNode } from "react"; +import { useEffect, useState, type ReactNode } from "react"; import { toast } from "sonner"; import { Area, @@ -28,6 +28,10 @@ import { } from "lucide-react"; // UI Primitives +// Local fallback copies retained in ./glow-follow and ./progress for easy reversal. +// import { installGlowFollow } from "./glow-follow"; +// import { Progress } from "./progress"; +import { installGlowFollow, Progress } from "@kleffio/ui"; import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@kleffio/ui"; import { Alert, AlertAction, AlertDescription, AlertTitle } from "@kleffio/ui"; import { @@ -64,7 +68,6 @@ import { Item } from "@kleffio/ui"; import { Label } from "@kleffio/ui"; import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@kleffio/ui"; import { Popover, PopoverContent, PopoverTrigger } from "@kleffio/ui"; -import { Progress } from "@kleffio/ui"; import { RadioGroup, RadioGroupItem } from "@kleffio/ui"; import { ScrollArea } from "@kleffio/ui"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@kleffio/ui"; @@ -101,6 +104,8 @@ import { RegionBadge } from "./domain/RegionBadge"; import { ServerCard } from "./domain/ServerCard"; import { StatusBadge } from "./domain/StatusBadge"; +installGlowFollow(); + // ─── Chart data & configs ───────────────────────────────────────────────────── const playerActivityData = [ @@ -178,20 +183,23 @@ const TABLE_ROWS = [ { id: "INV-003", date: "Jan 1, 2026", amount: "$14.00", status: "Paid" }, ]; +const PROGRESS_SPEEDS = [1, 3, 5] as const; +const PROGRESS_TICK_MS = 100; + // ─── Section wrapper ────────────────────────────────────────────────────────── function Section({ title, children }: { title: string; children: ReactNode }) { return ( -
-

{title}

- {children} +
+

{title}

+
{children}
); } function Row({ children, wrap = false }: { children: ReactNode; wrap?: boolean }) { return ( -
+
{children}
); @@ -201,735 +209,810 @@ function Row({ children, wrap = false }: { children: ReactNode; wrap?: boolean } export function ComponentsPage() { const [progress, setProgress] = useState(60); + const [progressSpeed, setProgressSpeed] = useState<0 | (typeof PROGRESS_SPEEDS)[number]>(0); const [sliderValue, setSliderValue] = useState([40]); const [checked, setChecked] = useState(true); const [switchOn, setSwitchOn] = useState(true); + const progressLabel = `${Math.round(progress)}%`; - return ( - -
- {/* Header */} -
-

Component Showcase

-

All UI primitives and domain components

-
+ useEffect(() => { + if (progressSpeed === 0) { + return; + } -
- - {/* ── Buttons ── */} -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - {/* ── Badges ── */} -
- - Default - Secondary - Outline - Destructive - Ghost - -
- - - - {/* ── Alerts ── */} -
- - - Scheduled maintenance - - Your servers will be unreachable on Mar 22 from 02:00–04:00 UTC while we apply infrastructure updates. - - - - - Deployment complete - - Minecraft Survival is now running on node node-07 in us-east-1. - - - - - High memory usage - - Valheim Viking Realm is using 89% of available memory. Consider upgrading to the Business plan. - - - - - - - - Server crashed - - Factorio World has stopped unexpectedly. Check the logs for more details. - - - - - -
- - - - {/* ── Toasts ── */} -
- - - - - - - - -
- - - - {/* ── Cards ── */} -
-
- - - Server Statistics - Last 30 days overview - - -

Uptime: 99.9% · Avg players: 12 · Peak: 18

- - - - - + const interval = window.setInterval(() => { + setProgress((current) => { + const next = current + progressSpeed * (PROGRESS_TICK_MS / 1000); - - - Billing Summary - Current billing period - - -

$29.00

-

Due Apr 1, 2026

- - - - - -
-
+ return next >= 100 ? 0 : Number(next.toFixed(2)); + }); + }, PROGRESS_TICK_MS); - + return () => window.clearInterval(interval); + }, [progressSpeed]); - {/* ── Form Elements ── */} -
-
-
- - Server Name - - - - Description -