feat(@pulse-libs/ui): design system completo compartilhado
- Atoms (10): Button, Badge, Card, GradientText, Divider, ThemeToggle + 4 3D stubs - Molecules (3): FeatureCard, Navbar, Footer - Organisms (4): HeroSection, FeaturesGrid, CtaBlock, StatsGrid - Templates (3): MainLayout, MinimalLayout, PageWithSidebar - TOKENS export: color/space/radius constants - Re-export pattern em todos os indices - MIT 2026 — Atomic Design · TypeScript · React 18
This commit is contained in:
@@ -0,0 +1,12 @@
|
||||
import {useState} from 'react'
|
||||
export function ThemeToggle({defaultDark=true}:{defaultDark?:boolean}) {
|
||||
const [dark, setDark] = useState(defaultDark)
|
||||
return (
|
||||
<button
|
||||
onClick={()=>{const next=!dark;setDark(next);document.documentElement.setAttribute('data-theme',next?'dark':'light')}}
|
||||
aria-label="Toggle theme"
|
||||
style={{position:'fixed',top:16,right:16,zIndex:9999,padding:'7px 14px',borderRadius:99,border:'none',cursor:'pointer',color:'#fff',fontWeight:700,fontFamily:'Inter,sans-serif',fontSize:'.85rem',background:dark?'linear-gradient(135deg,#2563eb,#7c3aed)':'linear-gradient(135deg,#fbbf24,#f97316)',boxShadow:'0 0 16px rgba(0,0,0,.3)',transition:'all .2s'}}>
|
||||
{dark?'🌙':'☀️'}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user