feat(dashboard): Complete "Mission Control" UI redesign
Overhaul the GuruRMM dashboard with a dark cyberpunk aesthetic featuring glassmorphism effects, cyan accent lighting, and smooth animations. Visual Changes: - Dark theme with CSS variables for consistent theming - Glassmorphism card effects with colored glow variants - Grid pattern backgrounds and floating geometric shapes - JetBrains Mono + Inter font pairing for tech aesthetic - Cyan, green, amber, and rose accent colors with glow effects Component Updates: - index.css: Complete CSS overhaul with utility classes, animations, and glassmorphism foundations (1300+ lines added) - Login.tsx: Glassmorphism login card with gradient logo and floating background shapes - Layout.tsx: Dark sidebar with cyan nav highlights, grid pattern main area, animated user profile section - Dashboard.tsx: Animated stat cards with staggered entrances, live status indicator with pulse animation, relative timestamps - Card.tsx: Added glow variants (cyan/green/amber/rose) with hover lift effects - Button.tsx: Gradient backgrounds, glow-on-hover, scale animations - Input.tsx: Dark styling with cyan focus glow, added Textarea component Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,8 +1,13 @@
|
||||
import { ButtonHTMLAttributes, forwardRef } from "react";
|
||||
import { cn } from "../lib/utils";
|
||||
|
||||
/**
|
||||
* Mission Control Button Component
|
||||
* Monospace text with smooth transitions and glow effects
|
||||
*/
|
||||
|
||||
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
|
||||
variant?: "default" | "secondary" | "destructive" | "ghost" | "outline" | "link";
|
||||
size?: "default" | "sm" | "lg" | "icon";
|
||||
}
|
||||
|
||||
@@ -11,26 +16,55 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
return (
|
||||
<button
|
||||
className={cn(
|
||||
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
|
||||
// Base styles
|
||||
"inline-flex items-center justify-center whitespace-nowrap rounded-lg",
|
||||
"font-mono font-bold text-sm",
|
||||
// Smooth transitions
|
||||
"transition-all duration-300 ease-out",
|
||||
// Focus ring with glow
|
||||
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-500/50 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900",
|
||||
// Hover scale
|
||||
"hover:scale-[1.02]",
|
||||
// Active scale
|
||||
"active:scale-[0.98]",
|
||||
// Disabled state
|
||||
"disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none",
|
||||
|
||||
// Variant styles
|
||||
{
|
||||
"bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] shadow hover:bg-[hsl(var(--primary))]/90":
|
||||
// Default (Primary): Cyan gradient with glow on hover
|
||||
"bg-gradient-to-r from-cyan-500 to-blue-600 text-white shadow-lg shadow-cyan-500/25 hover:shadow-cyan-500/40 hover:shadow-xl":
|
||||
variant === "default",
|
||||
"bg-[hsl(var(--destructive))] text-[hsl(var(--destructive-foreground))] shadow-sm hover:bg-[hsl(var(--destructive))]/90":
|
||||
variant === "destructive",
|
||||
"border border-[hsl(var(--input))] bg-transparent shadow-sm hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]":
|
||||
variant === "outline",
|
||||
"bg-[hsl(var(--secondary))] text-[hsl(var(--secondary-foreground))] shadow-sm hover:bg-[hsl(var(--secondary))]/80":
|
||||
|
||||
// Secondary: Dark glass with cyan text
|
||||
"bg-slate-800/80 backdrop-blur-sm border border-slate-700/50 text-cyan-400 hover:border-cyan-500/50 hover:shadow-lg hover:shadow-cyan-500/20":
|
||||
variant === "secondary",
|
||||
"hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]":
|
||||
|
||||
// Destructive: Rose gradient with glow
|
||||
"bg-gradient-to-r from-rose-500 to-pink-600 text-white shadow-lg shadow-rose-500/25 hover:shadow-rose-500/40 hover:shadow-xl":
|
||||
variant === "destructive",
|
||||
|
||||
// Ghost: Transparent with cyan hover
|
||||
"bg-transparent text-slate-300 hover:bg-cyan-500/10 hover:text-cyan-400":
|
||||
variant === "ghost",
|
||||
"text-[hsl(var(--primary))] underline-offset-4 hover:underline": variant === "link",
|
||||
|
||||
// Outline: Cyan border, transparent bg, fill on hover
|
||||
"border-2 border-cyan-500/50 bg-transparent text-cyan-400 hover:bg-cyan-500/20 hover:border-cyan-400 hover:shadow-lg hover:shadow-cyan-500/20":
|
||||
variant === "outline",
|
||||
|
||||
// Link: Underline style
|
||||
"text-cyan-400 underline-offset-4 hover:underline hover:text-cyan-300 hover:scale-100":
|
||||
variant === "link",
|
||||
},
|
||||
|
||||
// Size styles
|
||||
{
|
||||
"h-9 px-4 py-2": size === "default",
|
||||
"h-10 px-5 py-2": size === "default",
|
||||
"h-8 rounded-md px-3 text-xs": size === "sm",
|
||||
"h-10 rounded-md px-8": size === "lg",
|
||||
"h-9 w-9": size === "icon",
|
||||
"h-12 rounded-lg px-8 text-base": size === "lg",
|
||||
"h-10 w-10 p-0": size === "icon",
|
||||
},
|
||||
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
|
||||
@@ -1,12 +1,52 @@
|
||||
import { HTMLAttributes, forwardRef } from "react";
|
||||
import { cn } from "../lib/utils";
|
||||
|
||||
const Card = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
/**
|
||||
* Mission Control Card Component
|
||||
* Glassmorphism design with optional glow variants
|
||||
*/
|
||||
|
||||
export type CardVariant = "default" | "glow-cyan" | "glow-green" | "glow-amber" | "glow-rose";
|
||||
|
||||
export interface CardProps extends HTMLAttributes<HTMLDivElement> {
|
||||
variant?: CardVariant;
|
||||
}
|
||||
|
||||
const cardVariants: Record<CardVariant, string> = {
|
||||
default: "border-slate-700/50",
|
||||
"glow-cyan": "border-cyan-500/50 shadow-[0_0_15px_rgba(6,182,212,0.15)]",
|
||||
"glow-green": "border-emerald-500/50 shadow-[0_0_15px_rgba(16,185,129,0.15)]",
|
||||
"glow-amber": "border-amber-500/50 shadow-[0_0_15px_rgba(245,158,11,0.15)]",
|
||||
"glow-rose": "border-rose-500/50 shadow-[0_0_15px_rgba(244,63,94,0.15)]",
|
||||
};
|
||||
|
||||
const cardHoverVariants: Record<CardVariant, string> = {
|
||||
default: "hover:border-slate-600/70 hover:shadow-lg hover:shadow-slate-900/50",
|
||||
"glow-cyan": "hover:border-cyan-400/70 hover:shadow-[0_0_25px_rgba(6,182,212,0.25)]",
|
||||
"glow-green": "hover:border-emerald-400/70 hover:shadow-[0_0_25px_rgba(16,185,129,0.25)]",
|
||||
"glow-amber": "hover:border-amber-400/70 hover:shadow-[0_0_25px_rgba(245,158,11,0.25)]",
|
||||
"glow-rose": "hover:border-rose-400/70 hover:shadow-[0_0_25px_rgba(244,63,94,0.25)]",
|
||||
};
|
||||
|
||||
const Card = forwardRef<HTMLDivElement, CardProps>(
|
||||
({ className, variant = "default", ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"rounded-xl border border-[hsl(var(--border))] bg-[hsl(var(--card))] text-[hsl(var(--card-foreground))] shadow",
|
||||
// Base glassmorphism
|
||||
"rounded-xl bg-slate-900/60 backdrop-blur-xl",
|
||||
// Border
|
||||
"border",
|
||||
cardVariants[variant],
|
||||
// Inner shadow for depth
|
||||
"shadow-[inset_0_1px_0_0_rgba(148,163,184,0.1)]",
|
||||
// Text color
|
||||
"text-slate-100",
|
||||
// Transition for hover effects
|
||||
"transition-all duration-300 ease-out",
|
||||
// Hover: subtle lift
|
||||
"hover:-translate-y-0.5",
|
||||
cardHoverVariants[variant],
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@@ -17,16 +57,42 @@ Card.displayName = "Card";
|
||||
|
||||
const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex flex-col space-y-1.5 p-6",
|
||||
// Bottom border separator
|
||||
"border-b border-slate-700/50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
CardHeader.displayName = "CardHeader";
|
||||
|
||||
const CardTitle = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLHeadingElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
export interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
|
||||
gradient?: boolean;
|
||||
gradientFrom?: string;
|
||||
gradientTo?: string;
|
||||
}
|
||||
|
||||
const CardTitle = forwardRef<HTMLParagraphElement, CardTitleProps>(
|
||||
({ className, gradient = false, gradientFrom = "cyan-400", gradientTo = "blue-500", ...props }, ref) => (
|
||||
<h3
|
||||
ref={ref}
|
||||
className={cn("font-semibold leading-none tracking-tight", className)}
|
||||
className={cn(
|
||||
// Monospace/bold styling
|
||||
"font-mono font-bold leading-none tracking-tight text-lg",
|
||||
// Gradient text option
|
||||
gradient && [
|
||||
"bg-clip-text text-transparent",
|
||||
`bg-gradient-to-r from-${gradientFrom} to-${gradientTo}`,
|
||||
],
|
||||
// Default text color when not gradient
|
||||
!gradient && "text-slate-100",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
@@ -35,16 +101,41 @@ CardTitle.displayName = "CardTitle";
|
||||
|
||||
const CardDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<p ref={ref} className={cn("text-sm text-[hsl(var(--muted-foreground))]", className)} {...props} />
|
||||
<p
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"text-sm text-slate-400",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
CardDescription.displayName = "CardDescription";
|
||||
|
||||
const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("p-6 pt-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
CardContent.displayName = "CardContent";
|
||||
|
||||
export { Card, CardHeader, CardTitle, CardDescription, CardContent };
|
||||
const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex items-center p-6 pt-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
CardFooter.displayName = "CardFooter";
|
||||
|
||||
export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };
|
||||
|
||||
@@ -1,21 +1,109 @@
|
||||
import { InputHTMLAttributes, forwardRef } from "react";
|
||||
import { cn } from "../lib/utils";
|
||||
|
||||
export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {}
|
||||
/**
|
||||
* Mission Control Input Component
|
||||
* Dark background with cyan focus glow
|
||||
*/
|
||||
|
||||
const Input = forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
className={cn(
|
||||
"flex h-9 w-full rounded-md border border-[hsl(var(--input))] bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-[hsl(var(--muted-foreground))] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[hsl(var(--ring))] disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
});
|
||||
export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
||||
error?: boolean;
|
||||
}
|
||||
|
||||
const Input = forwardRef<HTMLInputElement, InputProps>(
|
||||
({ className, type, error = false, ...props }, ref) => {
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
className={cn(
|
||||
// Base styles
|
||||
"flex h-10 w-full rounded-lg px-4 py-2",
|
||||
"font-mono text-sm",
|
||||
// Dark background
|
||||
"bg-slate-900/50 backdrop-blur-sm",
|
||||
// Border
|
||||
"border border-slate-700",
|
||||
// Text colors
|
||||
"text-slate-100",
|
||||
// Placeholder
|
||||
"placeholder:text-slate-500",
|
||||
// Transitions
|
||||
"transition-all duration-200 ease-out",
|
||||
// File input styles
|
||||
"file:border-0 file:bg-slate-800 file:text-slate-300 file:text-sm file:font-medium file:mr-4 file:py-1 file:px-3 file:rounded-md",
|
||||
// Focus state: cyan border + outer glow + subtle background lighten
|
||||
"focus-visible:outline-none",
|
||||
"focus-visible:border-cyan-500",
|
||||
"focus-visible:ring-4 focus-visible:ring-cyan-500/30",
|
||||
"focus-visible:bg-slate-900/70",
|
||||
// Disabled state
|
||||
"disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-slate-900/30",
|
||||
// Error state: rose border + rose glow
|
||||
error && [
|
||||
"border-rose-500",
|
||||
"ring-4 ring-rose-500/30",
|
||||
"focus-visible:border-rose-500",
|
||||
"focus-visible:ring-rose-500/30",
|
||||
],
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
);
|
||||
Input.displayName = "Input";
|
||||
|
||||
export { Input };
|
||||
/**
|
||||
* Textarea variant with same Mission Control styling
|
||||
*/
|
||||
export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
|
||||
error?: boolean;
|
||||
}
|
||||
|
||||
const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
|
||||
({ className, error = false, ...props }, ref) => {
|
||||
return (
|
||||
<textarea
|
||||
className={cn(
|
||||
// Base styles
|
||||
"flex min-h-[120px] w-full rounded-lg px-4 py-3",
|
||||
"font-mono text-sm",
|
||||
// Dark background
|
||||
"bg-slate-900/50 backdrop-blur-sm",
|
||||
// Border
|
||||
"border border-slate-700",
|
||||
// Text colors
|
||||
"text-slate-100",
|
||||
// Placeholder
|
||||
"placeholder:text-slate-500",
|
||||
// Transitions
|
||||
"transition-all duration-200 ease-out",
|
||||
// Resize handle
|
||||
"resize-y",
|
||||
// Focus state
|
||||
"focus-visible:outline-none",
|
||||
"focus-visible:border-cyan-500",
|
||||
"focus-visible:ring-4 focus-visible:ring-cyan-500/30",
|
||||
"focus-visible:bg-slate-900/70",
|
||||
// Disabled state
|
||||
"disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-slate-900/30",
|
||||
// Error state
|
||||
error && [
|
||||
"border-rose-500",
|
||||
"ring-4 ring-rose-500/30",
|
||||
"focus-visible:border-rose-500",
|
||||
"focus-visible:ring-rose-500/30",
|
||||
],
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
);
|
||||
Textarea.displayName = "Textarea";
|
||||
|
||||
export { Input, Textarea };
|
||||
|
||||
@@ -1,6 +1,16 @@
|
||||
import { ReactNode } from "react";
|
||||
import { Link, useLocation, useNavigate } from "react-router-dom";
|
||||
import { LayoutDashboard, Server, Terminal, Settings, LogOut, Menu, X, Building2, MapPin } from "lucide-react";
|
||||
import {
|
||||
LayoutDashboard,
|
||||
Server,
|
||||
Terminal,
|
||||
Settings,
|
||||
LogOut,
|
||||
Menu,
|
||||
X,
|
||||
Building2,
|
||||
MapPin,
|
||||
} from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { useAuth } from "../hooks/useAuth";
|
||||
import { Button } from "./Button";
|
||||
@@ -30,28 +40,87 @@ export function Layout({ children }: LayoutProps) {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[hsl(var(--background))]">
|
||||
<div className="min-h-screen bg-slate-950">
|
||||
{/* Subtle grid pattern background */}
|
||||
<div
|
||||
className="fixed inset-0 pointer-events-none"
|
||||
style={{
|
||||
backgroundImage: `
|
||||
linear-gradient(rgba(6, 182, 212, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(6, 182, 212, 0.03) 1px, transparent 1px)
|
||||
`,
|
||||
backgroundSize: "50px 50px",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Mobile header */}
|
||||
<div className="lg:hidden flex items-center justify-between p-4 border-b border-[hsl(var(--border))]">
|
||||
<span className="font-bold text-lg">GuruRMM</span>
|
||||
<Button variant="ghost" size="icon" onClick={() => setSidebarOpen(!sidebarOpen)}>
|
||||
<div className="lg:hidden fixed top-0 left-0 right-0 z-50 flex items-center justify-between px-4 py-3 bg-slate-900/80 backdrop-blur-xl border-b border-cyan-500/20">
|
||||
<span className="font-bold text-lg tracking-wider bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
|
||||
GURUR<span className="text-cyan-400">MM</span>
|
||||
</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setSidebarOpen(!sidebarOpen)}
|
||||
className="text-slate-400 hover:text-cyan-400 hover:bg-cyan-500/10 transition-all duration-300"
|
||||
>
|
||||
{sidebarOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex">
|
||||
{/* Sidebar */}
|
||||
{/* Mobile menu overlay with blur */}
|
||||
<div
|
||||
className={`fixed inset-0 z-40 lg:hidden transition-all duration-300 ${
|
||||
sidebarOpen
|
||||
? "opacity-100 pointer-events-auto"
|
||||
: "opacity-0 pointer-events-none"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className="absolute inset-0 bg-slate-950/80 backdrop-blur-md"
|
||||
onClick={() => setSidebarOpen(false)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex relative">
|
||||
{/* Sidebar - Mission Control Aesthetic */}
|
||||
<aside
|
||||
className={`fixed inset-y-0 left-0 z-50 w-64 bg-[hsl(var(--card))] border-r border-[hsl(var(--border))] transform transition-transform duration-200 lg:translate-x-0 lg:static ${
|
||||
className={`fixed inset-y-0 left-0 z-50 w-72 transform transition-all duration-300 ease-out lg:translate-x-0 lg:static ${
|
||||
sidebarOpen ? "translate-x-0" : "-translate-x-full"
|
||||
}`}
|
||||
>
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Glassmorphism sidebar container */}
|
||||
<div className="flex flex-col h-full bg-slate-900/60 backdrop-blur-xl border-r border-cyan-500/20 shadow-[inset_0_0_30px_rgba(6,182,212,0.05)]">
|
||||
{/* Cyan left border glow */}
|
||||
<div className="absolute left-0 top-0 bottom-0 w-[2px] bg-gradient-to-b from-transparent via-cyan-500/50 to-transparent" />
|
||||
|
||||
{/* Logo section */}
|
||||
<div className="p-6 hidden lg:block">
|
||||
<h1 className="text-xl font-bold">GuruRMM</h1>
|
||||
<div className="flex items-center gap-3">
|
||||
{/* Logo icon with glow */}
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 bg-cyan-500/30 blur-lg rounded-lg" />
|
||||
<div className="relative h-10 w-10 rounded-lg bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center shadow-lg shadow-cyan-500/20">
|
||||
<LayoutDashboard className="h-5 w-5 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
{/* Logo text with gradient */}
|
||||
<div>
|
||||
<h1 className="text-xl font-bold tracking-wider">
|
||||
<span className="bg-gradient-to-r from-cyan-400 via-cyan-300 to-blue-400 bg-clip-text text-transparent">
|
||||
GURU
|
||||
</span>
|
||||
<span className="text-slate-300">RMM</span>
|
||||
</h1>
|
||||
<p className="text-[10px] uppercase tracking-[0.2em] text-slate-500">
|
||||
Mission Control
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 px-4 space-y-1 mt-4 lg:mt-0">
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 px-3 space-y-1 mt-4 lg:mt-2 pt-16 lg:pt-0">
|
||||
{navItems.map((item) => {
|
||||
const isActive = location.pathname === item.path;
|
||||
return (
|
||||
@@ -59,53 +128,98 @@ export function Layout({ children }: LayoutProps) {
|
||||
key={item.path}
|
||||
to={item.path}
|
||||
onClick={() => setSidebarOpen(false)}
|
||||
className={`flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors ${
|
||||
className={`group relative flex items-center gap-3 px-4 py-3 rounded-lg text-xs font-semibold uppercase tracking-wider transition-all duration-300 ${
|
||||
isActive
|
||||
? "bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]"
|
||||
: "text-[hsl(var(--foreground))] hover:bg-[hsl(var(--muted))]"
|
||||
? "text-cyan-400"
|
||||
: "text-slate-400 hover:text-slate-200"
|
||||
}`}
|
||||
>
|
||||
<item.icon className="h-5 w-5" />
|
||||
{item.label}
|
||||
{/* Active/Hover background glow */}
|
||||
<div
|
||||
className={`absolute inset-0 rounded-lg transition-all duration-300 ${
|
||||
isActive
|
||||
? "bg-cyan-500/10 shadow-[inset_0_0_20px_rgba(6,182,212,0.1)]"
|
||||
: "bg-transparent group-hover:bg-cyan-500/5"
|
||||
}`}
|
||||
/>
|
||||
|
||||
{/* Active left border indicator */}
|
||||
<div
|
||||
className={`absolute left-0 top-2 bottom-2 w-[3px] rounded-full transition-all duration-300 ${
|
||||
isActive
|
||||
? "bg-cyan-400 shadow-[0_0_10px_rgba(6,182,212,0.8)]"
|
||||
: "bg-transparent"
|
||||
}`}
|
||||
/>
|
||||
|
||||
{/* Icon with conditional glow */}
|
||||
<div className="relative z-10">
|
||||
<item.icon
|
||||
className={`h-5 w-5 transition-all duration-300 ${
|
||||
isActive
|
||||
? "text-cyan-400 drop-shadow-[0_0_8px_rgba(6,182,212,0.8)]"
|
||||
: "text-slate-500 group-hover:text-slate-300"
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Label */}
|
||||
<span className="relative z-10">{item.label}</span>
|
||||
|
||||
{/* Active indicator dot */}
|
||||
{isActive && (
|
||||
<div className="absolute right-4 h-1.5 w-1.5 rounded-full bg-cyan-400 shadow-[0_0_6px_rgba(6,182,212,0.8)]" />
|
||||
)}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
<div className="p-4 border-t border-[hsl(var(--border))]">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div className="h-8 w-8 rounded-full bg-[hsl(var(--primary))] flex items-center justify-center text-[hsl(var(--primary-foreground))] text-sm font-medium">
|
||||
{user?.name?.[0] || user?.email?.[0] || "U"}
|
||||
{/* User profile section */}
|
||||
<div className="p-4 border-t border-cyan-500/10">
|
||||
<div className="flex items-center gap-3 mb-4 p-3 rounded-lg bg-slate-800/30">
|
||||
{/* Avatar with cyan ring glow */}
|
||||
<div className="relative">
|
||||
{/* Glow ring */}
|
||||
<div className="absolute -inset-1 bg-gradient-to-r from-cyan-500 to-blue-500 rounded-full opacity-50 blur-sm" />
|
||||
{/* Avatar */}
|
||||
<div className="relative h-10 w-10 rounded-full bg-gradient-to-br from-slate-700 to-slate-800 ring-2 ring-cyan-500/50 flex items-center justify-center text-cyan-400 text-sm font-bold shadow-lg">
|
||||
{user?.name?.[0] || user?.email?.[0] || "U"}
|
||||
</div>
|
||||
{/* Online indicator */}
|
||||
<div className="absolute -bottom-0.5 -right-0.5 h-3 w-3 rounded-full bg-emerald-500 ring-2 ring-slate-900 shadow-[0_0_8px_rgba(16,185,129,0.6)]" />
|
||||
</div>
|
||||
|
||||
{/* User info */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium truncate">{user?.name || user?.email}</p>
|
||||
<p className="text-xs text-[hsl(var(--muted-foreground))] truncate">
|
||||
{user?.role}
|
||||
<p className="text-sm font-medium text-slate-200 truncate">
|
||||
{user?.name || user?.email}
|
||||
</p>
|
||||
<p className="text-xs text-cyan-500/70 uppercase tracking-wider truncate">
|
||||
{user?.role || "Operator"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sign out button */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-start"
|
||||
className="w-full justify-start gap-3 px-4 py-3 text-xs font-semibold uppercase tracking-wider text-slate-400 hover:text-red-400 hover:bg-red-500/10 rounded-lg transition-all duration-300 group"
|
||||
onClick={handleLogout}
|
||||
>
|
||||
<LogOut className="h-4 w-4 mr-2" />
|
||||
Sign out
|
||||
<LogOut className="h-4 w-4 transition-all duration-300 group-hover:text-red-400 group-hover:drop-shadow-[0_0_6px_rgba(239,68,68,0.6)]" />
|
||||
Sign Out
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* Overlay for mobile */}
|
||||
{sidebarOpen && (
|
||||
<div
|
||||
className="fixed inset-0 bg-black/50 z-40 lg:hidden"
|
||||
onClick={() => setSidebarOpen(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Main content */}
|
||||
<main className="flex-1 p-6 lg:p-8">{children}</main>
|
||||
{/* Main content area */}
|
||||
<main className="flex-1 min-h-screen pt-16 lg:pt-0">
|
||||
<div className="p-6 lg:p-8 transition-all duration-300">
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user