asepharyana
81a004d250
Layer 0 — Foundation: - Dark mode palette (30+ CSS var pairs in [data-theme='dark']) - CSS-first theme engine in styles.css (@theme + CSS vars) - UseTheme hook with light/dark/system support + localStorage persistence - Fixed animation keyframes (shimmer 1.5s canonical, glowPulse moved to CSS) - Smooth theme switch transitions via .theme-transitioning class Layer 1 — Shared UI Components: - Badge: success/warning variants now use CSS vars (bg-success-soft text-success) - Toast: rewritten with CSS vars, z-index fixed (40), repositioned top-right - Skeleton: added variant prop (rounded/circular/rectangular) - EmptyState: new component with icon + title + description + action - Button: added tertiary variant + icon-sm size - Card: added elevated/bordered variants - Input: added soft variant Layer 2 — Layout & Navigation: - TabStrip: new horizontal tab navigation with spring underline indicator (z-30) - Sidebar: expanded by default (w-64), brand assets always visible - Header: simplified brand bar, removed redundant page titles, added ThemeToggle - MobileTabBar: enhanced with spring dot indicator + glass bg + safe area - DashboardLayout: integrated TabStrip between Header and content - ParticleBackground: lazy render, skips on mobile/reduced-motion Layer 3 — Feature Components: - MessageCard: 30+ hardcoded hex replacements → semantic CSS vars - MessagesPanel: stat badges use Badge component variants - DashboardStats: StatCard with variant system (primary/success/warning/destructive) - UserSummaryList/UserProfileDetail/ChannelProfileDetail: all hardcoded colors → CSS vars - AudioVisualizer: reads --primary CSS var at paint time - ActiveSpeakers/RecordingsSubPanel: hardcoded colors → CSS vars Layer 4 — Polish: - EmptyState integrated across messages/dashboard/live panels - Theme toggle wired in Header + App root - Hover state audit for consistency - Entry animations verified (cardStagger/cardItem pattern in all panels) Resolves DESIGN_TOKENS.md §13.x issues: hardcoded colors, shimmer mismatch, glow-pulse fragmentation, z-index collisions, toast positioning.
63 lines
2.1 KiB
TypeScript
63 lines
2.1 KiB
TypeScript
/* ═══════════════════════════════════════════════════════════════════════════
|
|
* IMPHNEN Tabs — Radix-based, style sesuai Approachable Modernism
|
|
* ═══════════════════════════════════════════════════════════════════════════ */
|
|
|
|
import * as TabsPrimitive from "@radix-ui/react-tabs";
|
|
import type * as React from "react";
|
|
import { cn } from "../lib/utils";
|
|
|
|
export const Tabs = TabsPrimitive.Root;
|
|
|
|
export function TabsList({
|
|
className,
|
|
...props
|
|
}: React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>) {
|
|
return (
|
|
<TabsPrimitive.List
|
|
className={cn(
|
|
"inline-flex h-10 items-center justify-center",
|
|
"rounded-lg bg-[#f5f5f5] p-1",
|
|
"text-[#666666]",
|
|
className,
|
|
)}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function TabsTrigger({
|
|
className,
|
|
...props
|
|
}: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>) {
|
|
return (
|
|
<TabsPrimitive.Trigger
|
|
className={cn(
|
|
"inline-flex items-center justify-center whitespace-nowrap",
|
|
"rounded-lg px-3 py-1.5",
|
|
"font-sans text-sm font-medium",
|
|
"transition-all duration-[150ms] ease-[cubic-bezier(0.4,0,0.2,1)]",
|
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#23a1eb]/40",
|
|
"disabled:pointer-events-none disabled:opacity-50",
|
|
"data-[state=active]:bg-white data-[state=active]:text-[#1a1a1a] data-[state=active]:shadow-sm",
|
|
className,
|
|
)}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function TabsContent({
|
|
className,
|
|
...props
|
|
}: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>) {
|
|
return (
|
|
<TabsPrimitive.Content
|
|
className={cn(
|
|
"mt-6 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#23a1eb]/40",
|
|
className,
|
|
)}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|