Header
Create interactive and visually appealing buttons for your React applications. Customize styles, sizes, and behaviors to enhance user engagement and streamline navigation.
Components:
Composite Component
Type
Components
import
import { Header } from '@pillar-ui/core'
Header Basic
Logo
'use client'
import { Button, Flex, Paper, Text } from '@pillar-ui/core'
import Link from 'next/link'
import React, { useState } from 'react'
const Logo = () => {
return (
<Text size="6" weight="6">
Logo
</Text>
)
}
export const HeaderBasic = () => {
return (
<header>
<Flex as={Paper} p="4" gap="3" justify="between" items="center">
<Logo />
<nav>
<Flex as="ul" gap="2">
<li>
<Button variant="text" color="b" href="#" size="3" as={Link}>
Home
</Button>
</li>
<li>
<Button variant="text" color="b" href="#" size="3" as={Link}>
Learn
</Button>
</li>
<li>
<Button variant="text" color="b" href="#" size="3" as={Link}>
Docs
</Button>
</li>
</Flex>
</nav>
</Flex>
</header>
)
}
Header Current
Logo
'use client'
import { Button, Flex, Paper, Text } from '@pillar-ui/core'
import Link from 'next/link'
import React, { useState } from 'react'
const Logo = () => {
return (
<Text size="6" weight="6">
Logo
</Text>
)
}
type NavLinkProps = {
onClick: () => void
variant: 'solid' | 'text'
color: 'p' | 'b'
'aria-current'?: 'page'
href: string
}
const getCurrent = (current: string, key: string, handleClick: (value: string) => void): NavLinkProps => {
const IS_ACTIVE = current === key
return {
onClick: () => handleClick(key),
variant: IS_ACTIVE ? 'solid' : 'text',
color: IS_ACTIVE ? 'p' : 'b',
href: '?',
...(IS_ACTIVE && { 'aria-current': 'page' }),
}
}
export const HeaderCurrent = () => {
// you can get the current value from the router
// But we use state here for simplicity
const [current, setCurrent] = useState('home')
const handleClick = (value: string) => {
setCurrent(value)
}
return (
<header>
<Flex as={Paper} p="4" gap="3" justify="between" items="center">
<Logo />
<nav>
<Flex as="ul" gap="2">
<li>
<Button {...getCurrent(current, 'home', handleClick)} size="3" as={Link}>
Home
</Button>
</li>
<li>
<Button {...getCurrent(current, 'learn', handleClick)} size="3" as={Link}>
Learn
</Button>
</li>
<li>
<Button {...getCurrent(current, 'docs', handleClick)} size="3" as={Link}>
Docs
</Button>
</li>
</Flex>
</nav>
<Flex gap="2">
<Button>Log in</Button>
<Button color="b" variant="soft">
Sign up
</Button>
</Flex>
</Flex>
</header>
)
}
Header Auth
Logo
'use client'
import { Avatar, Button, Flex, Paper, Text } from '@pillar-ui/core'
import { ChevronDown } from '@pillar-ui/icons'
import Link from 'next/link'
import React, { useState } from 'react'
const MENU_ITEMS = [
{
label: 'Home',
href: '#',
},
{
label: 'Learn',
href: '#',
},
{
label: 'Docs',
href: '#',
},
]
const Logo = () => {
return (
<Text size="6" weight="6">
Logo
</Text>
)
}
const UserSection = ({ isLoggedIn, onLogin }: { isLoggedIn: boolean; onLogin: () => void }) => {
if (!isLoggedIn)
return (
<Flex gap="2">
<Button onClick={onLogin}>Log in</Button>
<Button color="b" variant="soft">
Sign up
</Button>
</Flex>
)
return (
<Flex gap="2" items="center">
<Avatar size="4" src="" title="John Doe" />
<Text size="3" weight="5">
John Doe
</Text>
<ChevronDown width="16" />
</Flex>
)
}
export const HeaderAuth = () => {
const [isLoggedIn, setIsLoggedIn] = useState(false)
const login = () => {
setIsLoggedIn(true)
console.log('login')
}
return (
<header>
<Flex as={Paper} p="4" gap="3" justify="between" items="center">
<Logo />
<nav>
<Flex as="ul" gap="2">
{MENU_ITEMS.map((item, index) => (
<li key={index}>
<Button color="b" variant="link" href={item.href} size="3" as={Link}>
{item.label}
</Button>
</li>
))}
</Flex>
</nav>
<UserSection isLoggedIn={isLoggedIn} onLogin={login} />
</Flex>
</header>
)
}