Page Header

import { PageHeader } from '@rapold/framework-core'

<PageHeader
  eyebrow="Projektportfolio"
  title="Kundenportal 2027"
  description="Planung, Budget und Freigaben."
  breadcrumb={<Breadcrumb>…</Breadcrumb>}
  actions={<Button>Freigeben</Button>}
/>

Breadcrumb

Mit Router-Links: <BreadcrumbLink asChild><Link href="/">Start</Link></BreadcrumbLink>

import {
  Breadcrumb, BreadcrumbList, BreadcrumbItem,
  BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator,
} from '@rapold/framework-core'

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem><BreadcrumbLink href="/">Start</BreadcrumbLink></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbPage>Budget 2027</BreadcrumbPage></BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Section

import { Section } from '@rapold/framework-core'

<Section
  title="Nächste Termine"
  description="Die drei nächsten Meilensteine."
  icon={<CalendarDays />}
  actions={<Button size="sm">Alle anzeigen</Button>}
  spacing="md"
>
  …
</Section>

Avatar & Avatar Group

import {
  Avatar, AvatarImage, AvatarFallback, AvatarGroup, getInitials,
} from '@rapold/framework-core'

<Avatar size="lg">
  <AvatarImage src={user.avatarUrl} alt={user.name} />
  <AvatarFallback label={user.name}>{getInitials(user.name)}</AvatarFallback>
</Avatar>

<AvatarGroup label="Projektteam" max={4} total={12}>
  {members.map((m) => <Avatar key={m.id}>…</Avatar>)}
</AvatarGroup>

Bottom Nav

Vorschau im Fluss (position="static"). In der App ist die Leiste fixiert und berücksichtigt die Safe Area.

Viele Ziele: horizontale Leiste mit Scroll-Snap.

import { BottomNav, BottomNavItem, BottomNavFab } from '@rapold/framework-core'

<BottomNav className="lg:hidden" fab={<BottomNavFab label="Neu"><Plus /></BottomNavFab>}>
  <BottomNavItem asChild label="Start" icon={<Home />} active={pathname === '/'}>
    <Link href="/" />
  </BottomNavItem>
  <BottomNavItem href="/projekte" label="Projekte" icon={<FolderKanban />} />
</BottomNav>

Bottom Stack

Player-Leiste über der Navigation in einem Container; die Höhe steht als --bottom-stack-height bereit.

import { BottomStack, BottomStackSpacer, BottomNav } from '@rapold/framework-core'

<main>… <BottomStackSpacer /></main>
<BottomStack label="Wiedergabe und Navigation">
  <PlayerBar />
  <BottomNav position="static">…</BottomNav>
</BottomStack>