Pulse Agent
29a7a5adb9
- 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
13 lines
742 B
TypeScript
13 lines
742 B
TypeScript
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>
|
|
)
|
|
}
|