design system token v0.4.1
This commit is contained in:
@@ -120,7 +120,7 @@ function NavbarLink({
|
||||
data-active={active || undefined}
|
||||
className={cn(
|
||||
'px-3 py-2 text-foreground transition-opacity hover:opacity-70',
|
||||
'data-active:opacity-100',
|
||||
'data-active:text-primary data-active:opacity-100',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -266,9 +266,9 @@ export const COMPONENT_CATALOG: ComponentSpec[] = [
|
||||
file: 'components/ui/navbar.tsx',
|
||||
category: 'navigation',
|
||||
exports: ['Navbar', 'NavbarLink', 'navbarVariants'],
|
||||
description: 'Top navigation bar. Fixed top, z-50, h-16. Variants: solid, transparent, minimal. Logo left, nav center, actions right. Mobile hamburger.',
|
||||
props: 'variant?: "solid" | "transparent" | "minimal"; logo?: ReactNode; actions?: ReactNode',
|
||||
example: '<Navbar variant="solid" logo={<Logo size="sm" />}><NavbarLink href="/">Home</NavbarLink></Navbar>',
|
||||
description: 'Top navigation bar. Fixed top, z-50, h-[65px]. Off-white bg (light) / off-black (dark). Font-semibold menu items. Hover: opacity-70 (no bg). Active links: orange (text-primary), full opacity. Variants: solid, transparent, minimal. Logo left, nav center, actions right. Mobile hamburger.',
|
||||
props: 'variant?: "solid" | "transparent" | "minimal"; logo?: ReactNode; actions?: ReactNode. NavbarLink: active?: boolean',
|
||||
example: '<Navbar variant="solid" logo={<Logo size="sm" />}><NavbarLink href="/" active>Home</NavbarLink><NavbarLink href="/about">About</NavbarLink></Navbar>',
|
||||
},
|
||||
{
|
||||
name: 'Breadcrumb',
|
||||
|
||||
@@ -440,11 +440,11 @@ All components live in `components/ui/`. Import with `@/components/ui/<name>`.
|
||||
#### Navbar
|
||||
- **File**: `components/ui/navbar.tsx`
|
||||
- **Exports**: `Navbar`, `NavbarLink`, `navbarVariants`
|
||||
- **Description**: Top navigation bar. Fixed top, z-50, h-16. Variants: solid, transparent, minimal. Logo left, nav center, actions right. Mobile hamburger.
|
||||
- **Props**: `variant?: "solid" | "transparent" | "minimal"; logo?: ReactNode; actions?: ReactNode`
|
||||
- **Description**: Top navigation bar. Fixed top, z-50, h-[65px]. Off-white bg (light) / off-black (dark). Font-semibold menu items. Hover: opacity-70 (no bg). Active links: orange (text-primary), full opacity. Variants: solid, transparent, minimal. Logo left, nav center, actions right. Mobile hamburger.
|
||||
- **Props**: `variant?: "solid" | "transparent" | "minimal"; logo?: ReactNode; actions?: ReactNode. NavbarLink: active?: boolean`
|
||||
- **Example**:
|
||||
```tsx
|
||||
<Navbar variant="solid" logo={<Logo size="sm" />}><NavbarLink href="/">Home</NavbarLink></Navbar>
|
||||
<Navbar variant="solid" logo={<Logo size="sm" />}><NavbarLink href="/" active>Home</NavbarLink><NavbarLink href="/about">About</NavbarLink></Navbar>
|
||||
```
|
||||
|
||||
#### Breadcrumb
|
||||
|
||||
Reference in New Issue
Block a user