feat: Implementação de submenus laterais (flyout), correções de UI e proteção de rotas (AuthGuard)
This commit is contained in:
Erik Silva
877
frontend-aggios.app/app/design-system/page.tsx
Normal file
877
frontend-aggios.app/app/design-system/page.tsx
Normal file
@@ -0,0 +1,877 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { Listbox } from "@headlessui/react";
|
||||
import {
|
||||
SunIcon,
|
||||
MoonIcon,
|
||||
HomeIcon,
|
||||
UserIcon,
|
||||
Cog6ToothIcon,
|
||||
BellIcon,
|
||||
MagnifyingGlassIcon,
|
||||
HeartIcon,
|
||||
StarIcon,
|
||||
DocumentIcon,
|
||||
FolderIcon,
|
||||
EnvelopeIcon,
|
||||
PhoneIcon,
|
||||
CalendarIcon,
|
||||
ClockIcon,
|
||||
MapPinIcon,
|
||||
PhotoIcon,
|
||||
VideoCameraIcon,
|
||||
MusicalNoteIcon,
|
||||
ArrowDownTrayIcon,
|
||||
ArrowUpTrayIcon,
|
||||
ShareIcon,
|
||||
PencilIcon,
|
||||
TrashIcon,
|
||||
CheckIcon,
|
||||
XMarkIcon,
|
||||
PlusIcon,
|
||||
RocketLaunchIcon,
|
||||
EllipsisHorizontalIcon,
|
||||
ArrowRightIcon,
|
||||
FireIcon,
|
||||
ShoppingCartIcon,
|
||||
ChevronUpDownIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
|
||||
const options = [
|
||||
{ id: 1, name: 'Opção 1' },
|
||||
{ id: 2, name: 'Opção 2' },
|
||||
{ id: 3, name: 'Opção 3' },
|
||||
];
|
||||
|
||||
export default function DesignSystemPage() {
|
||||
const [darkMode, setDarkMode] = useState(false);
|
||||
const [selectedOption, setSelectedOption] = useState(options[0]);
|
||||
|
||||
const toggleDarkMode = () => {
|
||||
setDarkMode(!darkMode);
|
||||
document.documentElement.classList.toggle('dark');
|
||||
};
|
||||
|
||||
const iconList = [
|
||||
{ name: 'HomeIcon', component: HomeIcon },
|
||||
{ name: 'UserIcon', component: UserIcon },
|
||||
{ name: 'Cog6ToothIcon', component: Cog6ToothIcon },
|
||||
{ name: 'BellIcon', component: BellIcon },
|
||||
{ name: 'MagnifyingGlassIcon', component: MagnifyingGlassIcon },
|
||||
{ name: 'HeartIcon', component: HeartIcon },
|
||||
{ name: 'StarIcon', component: StarIcon },
|
||||
{ name: 'DocumentIcon', component: DocumentIcon },
|
||||
{ name: 'FolderIcon', component: FolderIcon },
|
||||
{ name: 'EnvelopeIcon', component: EnvelopeIcon },
|
||||
{ name: 'PhoneIcon', component: PhoneIcon },
|
||||
{ name: 'CalendarIcon', component: CalendarIcon },
|
||||
{ name: 'ClockIcon', component: ClockIcon },
|
||||
{ name: 'MapPinIcon', component: MapPinIcon },
|
||||
{ name: 'PhotoIcon', component: PhotoIcon },
|
||||
{ name: 'VideoCameraIcon', component: VideoCameraIcon },
|
||||
{ name: 'MusicalNoteIcon', component: MusicalNoteIcon },
|
||||
{ name: 'ArrowDownTrayIcon', component: ArrowDownTrayIcon },
|
||||
{ name: 'ArrowUpTrayIcon', component: ArrowUpTrayIcon },
|
||||
{ name: 'ShareIcon', component: ShareIcon },
|
||||
{ name: 'PencilIcon', component: PencilIcon },
|
||||
{ name: 'TrashIcon', component: TrashIcon },
|
||||
{ name: 'CheckIcon', component: CheckIcon },
|
||||
{ name: 'XMarkIcon', component: XMarkIcon },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className={darkMode ? 'dark' : ''}>
|
||||
<div className="min-h-screen bg-white dark:bg-zinc-950 transition-colors">
|
||||
{/* Header fixo */}
|
||||
<header className="sticky top-0 z-50 bg-white/80 dark:bg-zinc-900/80 backdrop-blur-xl border-b border-zinc-200 dark:border-zinc-800">
|
||||
<div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
|
||||
<span className="text-white font-bold">A</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="font-heading font-bold text-xl text-zinc-900 dark:text-white">Design System</h1>
|
||||
<p className="text-xs text-zinc-500 dark:text-zinc-400">Aggios Platform v1.2</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={toggleDarkMode}
|
||||
className="px-3 py-1.5 rounded-lg border border-zinc-200 dark:border-zinc-700 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-all flex items-center gap-2 text-sm"
|
||||
>
|
||||
{darkMode ? <SunIcon className="w-4 h-4" /> : <MoonIcon className="w-4 h-4" />}
|
||||
{darkMode ? 'Light' : 'Dark'}
|
||||
</button>
|
||||
<Link href="/" className="px-3 py-1.5 text-white rounded-lg hover:opacity-90 transition-opacity flex items-center gap-2 text-sm" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
|
||||
<HomeIcon className="w-4 h-4" />
|
||||
Home
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-7xl mx-auto px-6 py-12">
|
||||
{/* Navegação rápida */}
|
||||
<nav className="mb-12 p-4 bg-zinc-50 dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800">
|
||||
<p className="text-xs uppercase tracking-wider text-zinc-500 mb-3">Navegação Rápida</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{['Cores', 'Espaçamentos', 'Tipografia', 'Bordas', 'Gradiente', 'Sombras', 'Ícones', 'Botões', 'Cards', 'Inputs', 'Badges'].map(item => (
|
||||
<a
|
||||
key={item}
|
||||
href={`#${item.toLowerCase()}`}
|
||||
className="px-3 py-1.5 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg text-xs font-medium text-zinc-700 dark:text-zinc-300 hover:border-transparent hover:text-white transition-all"
|
||||
style={{
|
||||
transition: 'all 0.2s',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.background = 'linear-gradient(135deg, #ff3a05, #ff0080)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
if (darkMode) {
|
||||
e.currentTarget.style.background = 'rgb(39 39 42)';
|
||||
} else {
|
||||
e.currentTarget.style.background = 'white';
|
||||
}
|
||||
}}
|
||||
>
|
||||
{item}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* CORES */}
|
||||
<section id="cores" className="mb-16 scroll-mt-24">
|
||||
<div className="mb-6">
|
||||
<h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Cores</h2>
|
||||
<p className="text-zinc-600 dark:text-zinc-400">Paleta de cores da plataforma Aggios</p>
|
||||
</div>
|
||||
|
||||
{/* Brand Gradient */}
|
||||
<div className="mb-6">
|
||||
<h3 className="font-semibold text-xl text-zinc-900 dark:text-white mb-4">Brand Gradient</h3>
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
|
||||
<div className="h-32 rounded-xl" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}></div>
|
||||
<p className="text-sm font-mono text-zinc-500 mt-3">linear-gradient(135deg, #ff3a05, #ff0080)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Gray Scale */}
|
||||
<div className="mb-6">
|
||||
<h3 className="font-semibold text-xl text-zinc-900 dark:text-white mb-4">Gray Scale</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-5 lg:grid-cols-11 gap-3">
|
||||
{[50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].map(shade => (
|
||||
<div key={shade} className="space-y-2">
|
||||
<div
|
||||
className="h-20 rounded-lg border border-zinc-200 dark:border-zinc-700 shadow-sm"
|
||||
style={{ backgroundColor: `var(--color-gray-${shade})` }}
|
||||
></div>
|
||||
<div className="text-center">
|
||||
<p className="text-xs font-mono text-zinc-900 dark:text-white">gray-{shade}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Surface & Text Colors */}
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg text-zinc-900 dark:text-white mb-3">Surface Colors</h3>
|
||||
<div className="space-y-2">
|
||||
{[
|
||||
{ name: 'surface-light', var: '--color-surface-light' },
|
||||
{ name: 'surface-dark', var: '--color-surface-dark' },
|
||||
{ name: 'surface-muted', var: '--color-surface-muted' },
|
||||
{ name: 'surface-card', var: '--color-surface-card' },
|
||||
].map(color => (
|
||||
<div key={color.name} className="flex items-center gap-3">
|
||||
<div
|
||||
className="w-16 h-16 rounded-lg border border-zinc-200 dark:border-zinc-700 shadow-sm"
|
||||
style={{ backgroundColor: `var(${color.var})` }}
|
||||
></div>
|
||||
<div>
|
||||
<p className="text-xs font-mono font-semibold text-zinc-900 dark:text-white">{color.name}</p>
|
||||
<p className="text-xs font-mono text-zinc-500">var({color.var})</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg text-zinc-900 dark:text-white mb-3">Text Colors</h3>
|
||||
<div className="space-y-2">
|
||||
{[
|
||||
{ name: 'text-primary', var: '--color-text-primary' },
|
||||
{ name: 'text-secondary', var: '--color-text-secondary' },
|
||||
{ name: 'text-inverse', var: '--color-text-inverse' },
|
||||
].map(color => (
|
||||
<div key={color.name} className="flex items-center gap-3">
|
||||
<div
|
||||
className="w-16 h-16 rounded-lg border border-zinc-200 dark:border-zinc-700 shadow-sm"
|
||||
style={{ backgroundColor: `var(${color.var})` }}
|
||||
></div>
|
||||
<div>
|
||||
<p className="text-xs font-mono font-semibold text-zinc-900 dark:text-white">{color.name}</p>
|
||||
<p className="text-xs font-mono text-zinc-500">var({color.var})</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ESPAÇAMENTOS */}
|
||||
<section id="espaçamentos" className="mb-16 scroll-mt-24">
|
||||
<div className="mb-6">
|
||||
<h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Espaçamentos</h2>
|
||||
<p className="text-zinc-600 dark:text-zinc-400">Sistema de espaçamento compacto</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
|
||||
<div className="space-y-4">
|
||||
{[
|
||||
{ name: 'xs', value: '0.125rem', pixels: '2px' },
|
||||
{ name: 'sm', value: '0.25rem', pixels: '4px' },
|
||||
{ name: 'md', value: '0.5rem', pixels: '8px' },
|
||||
{ name: 'lg', value: '0.75rem', pixels: '12px' },
|
||||
{ name: 'xl', value: '1rem', pixels: '16px' },
|
||||
{ name: '2xl', value: '1.5rem', pixels: '24px' },
|
||||
].map(space => (
|
||||
<div key={space.name} className="flex items-center gap-4">
|
||||
<div className="w-28">
|
||||
<p className="text-xs font-mono font-semibold text-zinc-900 dark:text-white">spacing-{space.name}</p>
|
||||
<p className="text-xs font-mono text-zinc-500">{space.value} ({space.pixels})</p>
|
||||
</div>
|
||||
<div
|
||||
className="rounded"
|
||||
style={{
|
||||
width: space.value,
|
||||
height: '1.5rem',
|
||||
background: 'linear-gradient(135deg, #ff3a05, #ff0080)'
|
||||
}}
|
||||
></div>
|
||||
<div className="flex-1 text-xs text-zinc-500 dark:text-zinc-400">
|
||||
var(--spacing-{space.name})
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* TIPOGRAFIA */}
|
||||
<section id="tipografia" className="mb-16 scroll-mt-24">
|
||||
<div className="mb-6">
|
||||
<h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Tipografia</h2>
|
||||
<p className="text-zinc-600 dark:text-zinc-400">Hierarquia de texto e famílias de fontes</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* Headings */}
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
|
||||
<h3 className="font-semibold text-lg text-zinc-900 dark:text-white mb-4">Headings (Arimo)</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="border-b border-zinc-100 dark:border-zinc-800 pb-3">
|
||||
<h1 className="font-heading font-bold text-4xl text-zinc-900 dark:text-white">Heading 1</h1>
|
||||
<p className="text-xs font-mono text-zinc-500 mt-2">font-heading font-bold text-4xl</p>
|
||||
</div>
|
||||
<div className="border-b border-zinc-100 dark:border-zinc-800 pb-3">
|
||||
<h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white">Heading 2</h2>
|
||||
<p className="text-xs font-mono text-zinc-500 mt-2">font-heading font-bold text-3xl</p>
|
||||
</div>
|
||||
<div className="border-b border-zinc-100 dark:border-zinc-800 pb-3">
|
||||
<h3 className="font-heading font-bold text-2xl text-zinc-900 dark:text-white">Heading 3</h3>
|
||||
<p className="text-xs font-mono text-zinc-500 mt-2">font-heading font-bold text-2xl</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-heading font-bold text-xl text-zinc-900 dark:text-white">Heading 4</h4>
|
||||
<p className="text-xs font-mono text-zinc-500 mt-2">font-heading font-bold text-xl</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Body Text */}
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
|
||||
<h3 className="font-semibold text-lg text-zinc-900 dark:text-white mb-4">Body Text (Inter)</h3>
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<p className="text-base text-zinc-900 dark:text-white">Text Base - The quick brown fox jumps over the lazy dog</p>
|
||||
<p className="text-xs font-mono text-zinc-500 mt-1">text-base</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-zinc-900 dark:text-white">Text SM - The quick brown fox jumps over the lazy dog</p>
|
||||
<p className="text-xs font-mono text-zinc-500 mt-1">text-sm</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-zinc-900 dark:text-white">Text XS - The quick brown fox jumps over the lazy dog</p>
|
||||
<p className="text-xs font-mono text-zinc-500 mt-1">text-xs</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Code Text */}
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
|
||||
<h3 className="font-semibold text-lg text-zinc-900 dark:text-white mb-4">Code (Fira Code)</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="p-3 bg-zinc-900 dark:bg-zinc-950 rounded-lg">
|
||||
<code className="font-mono text-sm text-emerald-400">const message = "Hello, Aggios!";</code>
|
||||
</div>
|
||||
<p className="text-xs font-mono text-zinc-500">font-mono - Fira Code</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* BORDAS */}
|
||||
<section id="bordas" className="mb-16 scroll-mt-24">
|
||||
<div className="mb-6">
|
||||
<h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Bordas</h2>
|
||||
<p className="text-zinc-600 dark:text-zinc-400">Border radius e estilos de borda</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
{/* Border Radius */}
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
|
||||
<h3 className="font-semibold text-lg text-zinc-900 dark:text-white mb-4">Border Radius</h3>
|
||||
<div className="space-y-3">
|
||||
{[
|
||||
{ name: 'rounded-none', class: 'rounded-none' },
|
||||
{ name: 'rounded-sm', class: 'rounded-sm' },
|
||||
{ name: 'rounded', class: 'rounded' },
|
||||
{ name: 'rounded-lg', class: 'rounded-lg' },
|
||||
{ name: 'rounded-xl', class: 'rounded-xl' },
|
||||
{ name: 'rounded-2xl', class: 'rounded-2xl' },
|
||||
{ name: 'rounded-full', class: 'rounded-full' },
|
||||
].map(radius => (
|
||||
<div key={radius.name} className="flex items-center gap-3">
|
||||
<div className={`w-20 h-12 ${radius.class}`} style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}></div>
|
||||
<p className="text-xs font-mono text-zinc-900 dark:text-white">{radius.name}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Border Styles */}
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
|
||||
<h3 className="font-semibold text-lg text-zinc-900 dark:text-white mb-4">Border Styles</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="p-3 border border-zinc-200 dark:border-zinc-700 rounded-lg">
|
||||
<p className="text-xs font-mono text-zinc-900 dark:text-white">border border-zinc-200</p>
|
||||
</div>
|
||||
<div className="p-3 border-2 border-zinc-200 dark:border-zinc-700 rounded-lg">
|
||||
<p className="text-xs font-mono text-zinc-900 dark:text-white">border-2 border-zinc-200</p>
|
||||
</div>
|
||||
<div className="p-3 border border-dashed border-zinc-200 dark:border-zinc-700 rounded-lg">
|
||||
<p className="text-xs font-mono text-zinc-900 dark:text-white">border border-dashed</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* GRADIENTE */}
|
||||
<section id="gradiente" className="mb-16 scroll-mt-24">
|
||||
<div className="mb-6">
|
||||
<h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Gradiente</h2>
|
||||
<p className="text-zinc-600 dark:text-zinc-400">Gradiente principal da marca</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
|
||||
<div className="h-32 rounded-xl flex items-center justify-center" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
|
||||
<p className="text-white font-semibold">Brand Gradient</p>
|
||||
</div>
|
||||
<p className="text-sm font-mono text-zinc-500 mt-4">background: linear-gradient(135deg, #ff3a05, #ff0080)</p>
|
||||
|
||||
{/* Gradient Text */}
|
||||
<div className="mt-6">
|
||||
<h3 className="font-semibold text-lg text-zinc-900 dark:text-white mb-3">Gradient Text</h3>
|
||||
<h2 className="font-heading font-bold text-4xl">
|
||||
Texto com <span className="gradient-text">gradiente</span>
|
||||
</h2>
|
||||
<p className="text-xs font-mono text-zinc-500 mt-3"><span className="gradient-text"></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SOMBRAS */}
|
||||
<section id="sombras" className="mb-16 scroll-mt-24">
|
||||
<div className="mb-6">
|
||||
<h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Sombras</h2>
|
||||
<p className="text-zinc-600 dark:text-zinc-400">Sistema de elevação com sombras</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-4 gap-4">
|
||||
{[
|
||||
{ name: 'shadow-sm', class: 'shadow-sm' },
|
||||
{ name: 'shadow', class: 'shadow' },
|
||||
{ name: 'shadow-md', class: 'shadow-md' },
|
||||
{ name: 'shadow-lg', class: 'shadow-lg' },
|
||||
].map(shadow => (
|
||||
<div key={shadow.name} className="space-y-2">
|
||||
<div className={`h-24 bg-white dark:bg-zinc-900 rounded-lg ${shadow.class} flex items-center justify-center border border-zinc-100 dark:border-zinc-800`}>
|
||||
<p className="text-xs font-semibold text-zinc-900 dark:text-white">{shadow.name}</p>
|
||||
</div>
|
||||
<p className="text-xs font-mono text-zinc-500 text-center">{shadow.class}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ÍCONES */}
|
||||
<section id="ícones" className="mb-16 scroll-mt-24">
|
||||
<div className="mb-6">
|
||||
<h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Ícones</h2>
|
||||
<p className="text-zinc-600 dark:text-zinc-400">Heroicons - biblioteca completa (outline)</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
|
||||
<div className="grid grid-cols-4 md:grid-cols-8 lg:grid-cols-12 gap-4">
|
||||
{iconList.map(({ name, component: Icon }) => (
|
||||
<div key={name} className="flex flex-col items-center gap-2 p-2 hover:bg-zinc-50 dark:hover:bg-zinc-800 rounded-lg transition-colors">
|
||||
<Icon className="w-6 h-6 text-zinc-900 dark:text-white" />
|
||||
<p className="text-xs font-mono text-zinc-500 text-center leading-tight">{name}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* BOTÕES */}
|
||||
<section id="botões" className="mb-16 scroll-mt-24">
|
||||
<div className="mb-6">
|
||||
<h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Botões</h2>
|
||||
<p className="text-zinc-600 dark:text-zinc-400">Variações de botões com Headless UI</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Primary Buttons */}
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
|
||||
<h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-4">Primary Buttons</h3>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<button className="px-4 py-2 text-white font-medium rounded-lg hover:opacity-90 transition-opacity flex items-center gap-2 text-sm" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
|
||||
<PlusIcon className="w-4 h-4" />
|
||||
Primary
|
||||
</button>
|
||||
<button className="px-3 py-1.5 text-white font-medium rounded-lg hover:opacity-90 transition-opacity text-xs" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
|
||||
Small
|
||||
</button>
|
||||
<button className="px-5 py-2.5 text-white font-medium rounded-lg hover:opacity-90 transition-opacity text-sm" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
|
||||
Medium
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Secondary Buttons */}
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
|
||||
<h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-4">Secondary Buttons</h3>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<button className="px-4 py-2 border-2 border-zinc-200 dark:border-zinc-700 text-zinc-700 dark:text-zinc-300 font-medium rounded-lg hover:border-transparent hover:text-white transition-all text-sm"
|
||||
onMouseEnter={(e) => e.currentTarget.style.background = 'linear-gradient(135deg, #ff3a05, #ff0080)'}
|
||||
onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
|
||||
Secondary
|
||||
</button>
|
||||
<button className="px-4 py-2 border border-zinc-200 dark:border-zinc-700 text-zinc-700 dark:text-zinc-300 font-medium rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-all text-sm">
|
||||
Outline
|
||||
</button>
|
||||
<button className="px-4 py-2 text-zinc-700 dark:text-zinc-300 font-medium rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-all text-sm">
|
||||
Ghost
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Icon Buttons */}
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
|
||||
<h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-4">Icon Buttons</h3>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<button className="w-10 h-10 text-white rounded-lg hover:opacity-90 transition-opacity flex items-center justify-center" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
|
||||
<HeartIcon className="w-5 h-5" />
|
||||
</button>
|
||||
<button className="w-10 h-10 border-2 border-zinc-200 dark:border-zinc-700 text-zinc-700 dark:text-zinc-300 rounded-lg hover:border-transparent hover:text-white transition-all flex items-center justify-center"
|
||||
onMouseEnter={(e) => e.currentTarget.style.background = 'linear-gradient(135deg, #ff3a05, #ff0080)'}
|
||||
onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
|
||||
<ShareIcon className="w-5 h-5" />
|
||||
</button>
|
||||
<button className="w-8 h-8 rounded-full text-white flex items-center justify-center hover:opacity-90 transition-opacity" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
|
||||
<PlusIcon className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CARDS */}
|
||||
<section id="cards" className="mb-16 scroll-mt-24">
|
||||
<div className="mb-6">
|
||||
<h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Cards</h2>
|
||||
<p className="text-zinc-600 dark:text-zinc-400">Diferentes estilos de cards</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{/* Basic Card */}
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-4">
|
||||
<h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-2">Basic Card</h3>
|
||||
<p className="text-zinc-600 dark:text-zinc-400 mb-3 text-sm">Card simples com borda e padding</p>
|
||||
<button className="text-sm font-semibold hover:underline flex items-center gap-1" style={{ color: '#ff3a05' }}>
|
||||
Saiba mais <ArrowRightIcon className="w-3 h-3" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Elevated Card */}
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-4 shadow-md hover:shadow-lg transition-shadow">
|
||||
<h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-2">Elevated Card</h3>
|
||||
<p className="text-zinc-600 dark:text-zinc-400 mb-3 text-sm">Card com sombra e hover effect</p>
|
||||
<button className="text-sm font-semibold hover:underline flex items-center gap-1" style={{ color: '#ff3a05' }}>
|
||||
Saiba mais <ArrowRightIcon className="w-3 h-3" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Gradient Card */}
|
||||
<div className="rounded-xl p-4 text-white shadow-md" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
|
||||
<h3 className="font-semibold text-base mb-2">Gradient Card</h3>
|
||||
<p className="text-white/90 mb-3 text-sm">Card com fundo gradiente</p>
|
||||
<button className="text-white text-sm font-semibold hover:underline flex items-center gap-1">
|
||||
Saiba mais <ArrowRightIcon className="w-3 h-3" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Icon Card */}
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-4 hover:border-transparent hover:shadow-md transition-all">
|
||||
<div className="w-10 h-10 rounded-lg flex items-center justify-center mb-3" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
|
||||
<StarIcon className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-2">Icon Card</h3>
|
||||
<p className="text-zinc-600 dark:text-zinc-400 text-sm">Card com ícone em destaque</p>
|
||||
</div>
|
||||
|
||||
{/* Stat Card */}
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-4">
|
||||
<p className="text-xs uppercase tracking-wide text-zinc-500 mb-1">Total Revenue</p>
|
||||
<p className="text-2xl font-bold text-zinc-900 dark:text-white mb-1">R$ 128K</p>
|
||||
<p className="text-xs text-emerald-500">+18% este mês</p>
|
||||
</div>
|
||||
|
||||
{/* Interactive Card */}
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-4 cursor-pointer hover:scale-105 transition-all"
|
||||
onMouseEnter={(e) => e.currentTarget.style.borderColor = '#ff3a05'}
|
||||
onMouseLeave={(e) => {
|
||||
if (darkMode) {
|
||||
e.currentTarget.style.borderColor = 'rgb(39 39 42)';
|
||||
} else {
|
||||
e.currentTarget.style.borderColor = 'rgb(228 228 231)';
|
||||
}
|
||||
}}>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="w-8 h-8 rounded-lg flex items-center justify-center" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
|
||||
<BellIcon className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
<span className="px-2 py-0.5 bg-red-100 text-red-600 text-xs font-semibold rounded-full">3</span>
|
||||
</div>
|
||||
<h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-1">Interactive Card</h3>
|
||||
<p className="text-zinc-600 dark:text-zinc-400 text-sm">Clique para interagir</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* INPUTS */}
|
||||
<section id="inputs" className="mb-16 scroll-mt-24">
|
||||
<div className="mb-6">
|
||||
<h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Inputs</h2>
|
||||
<p className="text-zinc-600 dark:text-zinc-400">Campos de formulário com Headless UI</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
|
||||
<div className="space-y-4 max-w-2xl">
|
||||
{/* Text Input */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-zinc-900 dark:text-white mb-2">
|
||||
Text Input
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Digite algo..."
|
||||
className="w-full px-3 py-2 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white text-sm placeholder:text-zinc-400 focus:outline-none focus:ring-2 focus:border-transparent transition-all"
|
||||
style={{
|
||||
'--tw-ring-color': '#ff3a05',
|
||||
} as React.CSSProperties}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Email Input */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-zinc-900 dark:text-white mb-2">
|
||||
Email Input
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="seu@email.com"
|
||||
className="w-full px-3 py-2 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white text-sm placeholder:text-zinc-400 focus:outline-none focus:ring-2 focus:border-transparent transition-all"
|
||||
style={{
|
||||
'--tw-ring-color': '#ff3a05',
|
||||
} as React.CSSProperties}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Input with Icon */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-zinc-900 dark:text-white mb-2">
|
||||
Input with Icon
|
||||
</label>
|
||||
<div className="relative">
|
||||
<MagnifyingGlassIcon className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Buscar..."
|
||||
className="w-full pl-10 pr-3 py-2 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white text-sm placeholder:text-zinc-400 focus:outline-none focus:ring-2 focus:border-transparent transition-all"
|
||||
style={{
|
||||
'--tw-ring-color': '#ff3a05',
|
||||
} as React.CSSProperties}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Textarea */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-zinc-900 dark:text-white mb-2">
|
||||
Textarea
|
||||
</label>
|
||||
<textarea
|
||||
rows={3}
|
||||
placeholder="Digite sua mensagem..."
|
||||
className="w-full px-3 py-2 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white text-sm placeholder:text-zinc-400 focus:outline-none focus:ring-2 focus:border-transparent transition-all resize-none"
|
||||
style={{
|
||||
'--tw-ring-color': '#ff3a05',
|
||||
} as React.CSSProperties}
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
{/* Select with Headless UI */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-zinc-900 dark:text-white mb-2">
|
||||
Select (Headless UI)
|
||||
</label>
|
||||
<Listbox value={selectedOption} onChange={setSelectedOption}>
|
||||
<div className="relative">
|
||||
<Listbox.Button className="relative w-full cursor-pointer rounded-lg bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 py-2 pl-3 pr-10 text-left text-sm focus:outline-none focus:ring-2 focus:border-transparent transition-all"
|
||||
style={{
|
||||
'--tw-ring-color': '#ff3a05',
|
||||
} as React.CSSProperties}>
|
||||
<span className="block truncate text-zinc-900 dark:text-white">{selectedOption.name}</span>
|
||||
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
<ChevronUpDownIcon
|
||||
className="h-4 w-4 text-zinc-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
</Listbox.Button>
|
||||
<Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-lg bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 py-1 text-sm shadow-lg focus:outline-none">
|
||||
{options.map((option) => (
|
||||
<Listbox.Option
|
||||
key={option.id}
|
||||
value={option}
|
||||
>
|
||||
{({ selected, active }) => (
|
||||
<div
|
||||
className={`relative cursor-pointer select-none py-2 pl-10 pr-4 ${
|
||||
active ? 'text-white' : 'text-zinc-900 dark:text-white'
|
||||
}`}
|
||||
style={{
|
||||
background: active ? 'linear-gradient(135deg, #ff3a05, #ff0080)' : 'transparent'
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className={`block truncate ${
|
||||
selected ? 'font-medium' : 'font-normal'
|
||||
}`}
|
||||
>
|
||||
{option.name}
|
||||
</span>
|
||||
{selected ? (
|
||||
<span className="absolute inset-y-0 left-0 flex items-center pl-3">
|
||||
<CheckIcon className="h-4 w-4" aria-hidden="true" />
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
</Listbox.Option>
|
||||
))}
|
||||
</Listbox.Options>
|
||||
</div>
|
||||
</Listbox>
|
||||
</div>
|
||||
|
||||
{/* Checkbox */}
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="check1"
|
||||
className="w-4 h-4 bg-white dark:bg-zinc-800 border-zinc-300 dark:border-zinc-700 rounded focus:ring-2"
|
||||
style={{
|
||||
accentColor: '#ff3a05',
|
||||
'--tw-ring-color': '#ff3a05',
|
||||
} as React.CSSProperties}
|
||||
/>
|
||||
<label htmlFor="check1" className="text-sm text-zinc-900 dark:text-white">
|
||||
Checkbox Label
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Radio */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="radio"
|
||||
id="radio1"
|
||||
name="radio"
|
||||
className="w-4 h-4 bg-white dark:bg-zinc-800 border-zinc-300 dark:border-zinc-700 focus:ring-2"
|
||||
style={{
|
||||
accentColor: '#ff3a05',
|
||||
'--tw-ring-color': '#ff3a05',
|
||||
} as React.CSSProperties}
|
||||
/>
|
||||
<label htmlFor="radio1" className="text-sm text-zinc-900 dark:text-white">
|
||||
Radio Option 1
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="radio"
|
||||
id="radio2"
|
||||
name="radio"
|
||||
className="w-4 h-4 bg-white dark:bg-zinc-800 border-zinc-300 dark:border-zinc-700 focus:ring-2"
|
||||
style={{
|
||||
accentColor: '#ff3a05',
|
||||
'--tw-ring-color': '#ff0080',
|
||||
} as React.CSSProperties}
|
||||
/>
|
||||
<label htmlFor="radio2" className="text-sm text-zinc-900 dark:text-white">
|
||||
Radio Option 2
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* BADGES */}
|
||||
<section id="badges" className="mb-16 scroll-mt-24">
|
||||
<div className="mb-6">
|
||||
<h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Badges</h2>
|
||||
<p className="text-zinc-600 dark:text-zinc-400">Tags, badges e status indicators</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
|
||||
<div className="space-y-4">
|
||||
{/* Status Badges */}
|
||||
<div>
|
||||
<h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-3">Status Badges</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<span className="px-2 py-1 rounded-full bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400 text-xs font-semibold">
|
||||
Success
|
||||
</span>
|
||||
<span className="px-2 py-1 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 text-xs font-semibold">
|
||||
Info
|
||||
</span>
|
||||
<span className="px-2 py-1 rounded-full bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 text-xs font-semibold">
|
||||
Warning
|
||||
</span>
|
||||
<span className="px-2 py-1 rounded-full bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 text-xs font-semibold">
|
||||
Error
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pill Badges */}
|
||||
<div>
|
||||
<h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-3">Pill Badges</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<span className="px-3 py-1.5 rounded-full text-white text-xs font-semibold shadow-md flex items-center gap-1.5" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
|
||||
<RocketLaunchIcon className="w-3 h-3" />
|
||||
Premium
|
||||
</span>
|
||||
<span className="px-3 py-1.5 rounded-full border border-zinc-200 dark:border-zinc-700 text-zinc-700 dark:text-zinc-300 text-xs font-semibold flex items-center gap-1.5">
|
||||
<StarIcon className="w-3 h-3" />
|
||||
New
|
||||
</span>
|
||||
<span className="px-3 py-1.5 rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300 text-xs font-semibold flex items-center gap-1.5">
|
||||
<FireIcon className="w-3 h-3" />
|
||||
Popular
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Count Badges */}
|
||||
<div>
|
||||
<h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-3">Count Badges</h3>
|
||||
<div className="flex flex-wrap gap-3 items-center">
|
||||
<div className="relative">
|
||||
<button className="p-2 bg-zinc-100 dark:bg-zinc-800 rounded-lg">
|
||||
<BellIcon className="w-5 h-5 text-zinc-700 dark:text-zinc-300" />
|
||||
</button>
|
||||
<span className="absolute -top-1 -right-1 w-4 h-4 bg-red-500 text-white text-xs font-bold rounded-full flex items-center justify-center">
|
||||
3
|
||||
</span>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<button className="p-2 bg-zinc-100 dark:bg-zinc-800 rounded-lg">
|
||||
<EnvelopeIcon className="w-5 h-5 text-zinc-700 dark:text-zinc-300" />
|
||||
</button>
|
||||
<span className="absolute -top-1 -right-1 w-4 h-4 text-white text-xs font-bold rounded-full flex items-center justify-center" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
|
||||
9
|
||||
</span>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<button className="p-2 bg-zinc-100 dark:bg-zinc-800 rounded-lg">
|
||||
<ShoppingCartIcon className="w-5 h-5 text-zinc-700 dark:text-zinc-300" />
|
||||
</button>
|
||||
<span className="absolute -top-1.5 -right-1.5 px-1.5 py-0.5 bg-emerald-500 text-white text-xs font-bold rounded-full">
|
||||
12
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Dot Indicators */}
|
||||
<div>
|
||||
<h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-3">Dot Indicators</h3>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="w-2 h-2 bg-emerald-500 rounded-full"></span>
|
||||
<span className="text-xs text-zinc-700 dark:text-zinc-300">Online</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="w-2 h-2 bg-yellow-500 rounded-full"></span>
|
||||
<span className="text-xs text-zinc-700 dark:text-zinc-300">Away</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="w-2 h-2 bg-red-500 rounded-full"></span>
|
||||
<span className="text-xs text-zinc-700 dark:text-zinc-300">Busy</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="w-2 h-2 bg-zinc-400 rounded-full"></span>
|
||||
<span className="text-xs text-zinc-700 dark:text-zinc-300">Offline</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="text-center py-8 border-t border-zinc-200 dark:border-zinc-800">
|
||||
<p className="text-zinc-600 dark:text-zinc-400 text-sm">
|
||||
Design System criado para <span className="font-bold gradient-text">Aggios Platform</span>
|
||||
</p>
|
||||
<p className="text-xs text-zinc-500 mt-2">
|
||||
Versão 1.2 • 2025
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user