import { useId, useState } from 'react'; import type { NavigationTheme } from 'reablocks'; import { NavigationButton } from 'reablocks'; import { extendComponentTheme, useComponentTheme } from 'reablocks'; import { NavigationBar } from 'reablocks'; export default { title: 'Components/Elements/Navigation', component: NavigationBar }; const logo = ( ); const companyName = ( ); const HomeIcon = () => ( ); const DashboardIcon = () => ( ); const AlertsIcon = () => ( ); const IntelligenceIcon = () => ( ); const ReportsIcon = () => ( ); const HelpIcon = () => ( ); const SettingsIcon = () => ( ); export const Text = () => { const [active, setActive] = useState(1); const id = useId(); return ( {logo} {companyName} } end={
setActive(6)} >
Help
setActive(7)} >
Settings
} > setActive(1)} >
Home
setActive(2)} >
Dashboard
setActive(3)} >
Alerts
setActive(4)} >
Intelligence
setActive(5)} >
Reports
); }; export const Icons = () => { const [active, setActive] = useState(1); const id = useId(); return ( {logo}} end={
setActive(6)} > setActive(7)} >
} > setActive(1)} > setActive(2)} > setActive(3)} > setActive(4)} > setActive(5)} > ); }; export const Horizontal = () => { const [active, setActive] = useState(1); const id = useId(); return ( {logo}} end={
setActive(6)} > setActive(7)} >
} > setActive(1)} > setActive(2)} > setActive(3)} > setActive(4)} > setActive(5)} > ); }; export const AnimationDisabled = () => { const [active, setActive] = useState(1); const id = useId(); return ( {logo}} end={
setActive(6)} > setActive(7)} >
} > setActive(1)} > setActive(2)} > setActive(3)} > setActive(4)} > setActive(5)} > ); }; export const CustomTheme = () => { const [active, setActive] = useState(1); const id = useId(); const navigationTheme: NavigationTheme = useComponentTheme('navigation'); const customTheme: NavigationTheme = extendComponentTheme(navigationTheme, { bar: { base: 'flex flex-col p-4 gap-4 rounded-md shadow-[0_4px_20px_0_#e1e2e333_inset] bg-navigation-colors-background-container-base border border-navigation-colors-stroke-container-base' }, button: { variant: { ghost: { selection: ` absolute z-1 top-0 left-0 w-full h-full rounded-md border border-red-infernal-blade-a-700 bg-red-infernal-blade-a-500 hover:border-red-infernal-blade-a-500 hover:bg-red-infernal-blade-a-500 ` } } } }); return ( {logo}} end={
setActive(6)} > setActive(7)} >
} > setActive(1)} > setActive(2)} > setActive(3)} > setActive(4)} > setActive(5)} > ); };