878 lines
46 KiB
TypeScript
878 lines
46 KiB
TypeScript
"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>
|
|
);
|
|
}
|