20f7b2f5aa
All checks were successful
Build & Publish / publish (push) Successful in 1m5s
Add brand assets as static package exports (logo, logo-16 through logo-512, logo-svg) with pre-generated PNG sizes for favicons, PWA icons, Apple touch icons, and social images. Includes inventory showcase section and updated documentation. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
138 lines
5.2 KiB
TypeScript
138 lines
5.2 KiB
TypeScript
import { Link } from 'react-router-dom'
|
|
import styles from './Inventory.module.css'
|
|
import { PrimitivesSection } from './sections/PrimitivesSection'
|
|
import { CompositesSection } from './sections/CompositesSection'
|
|
import { LayoutSection } from './sections/LayoutSection'
|
|
import { BrandAssetsSection } from './sections/BrandAssetsSection'
|
|
|
|
const NAV_SECTIONS = [
|
|
{
|
|
label: 'Primitives',
|
|
href: '#primitives',
|
|
components: [
|
|
{ label: 'Alert', href: '#alert' },
|
|
{ label: 'Avatar', href: '#avatar' },
|
|
{ label: 'Badge', href: '#badge' },
|
|
{ label: 'Button', href: '#button' },
|
|
{ label: 'ButtonGroup', href: '#buttongroup' },
|
|
{ label: 'Card', href: '#card' },
|
|
{ label: 'Checkbox', href: '#checkbox' },
|
|
{ label: 'CodeBlock', href: '#codeblock' },
|
|
{ label: 'Collapsible', href: '#collapsible' },
|
|
{ label: 'DateRangePicker', href: '#daterangepicker' },
|
|
{ label: 'DateTimePicker', href: '#datetimepicker' },
|
|
{ label: 'EmptyState', href: '#emptystate' },
|
|
{ label: 'FilterPill', href: '#filterpill' },
|
|
{ label: 'FormField', href: '#formfield' },
|
|
{ label: 'InfoCallout', href: '#infocallout' },
|
|
{ label: 'InlineEdit', href: '#inline-edit' },
|
|
{ label: 'Input', href: '#input' },
|
|
{ label: 'KeyboardHint', href: '#keyboardhint' },
|
|
{ label: 'Label', href: '#label' },
|
|
{ label: 'MonoText', href: '#monotext' },
|
|
{ label: 'Pagination', href: '#pagination' },
|
|
{ label: 'ProgressBar', href: '#progressbar' },
|
|
{ label: 'Radio', href: '#radio' },
|
|
{ label: 'SectionHeader', href: '#sectionheader' },
|
|
{ label: 'Select', href: '#select' },
|
|
{ label: 'Skeleton', href: '#skeleton' },
|
|
{ label: 'Sparkline', href: '#sparkline' },
|
|
{ label: 'Spinner', href: '#spinner' },
|
|
{ label: 'StatCard', href: '#statcard' },
|
|
{ label: 'StatusDot', href: '#statusdot' },
|
|
{ label: 'StatusText', href: '#statustext' },
|
|
{ label: 'Tag', href: '#tag' },
|
|
{ label: 'Textarea', href: '#textarea' },
|
|
{ label: 'Toggle', href: '#toggle' },
|
|
{ label: 'Tooltip', href: '#tooltip' },
|
|
],
|
|
},
|
|
{
|
|
label: 'Composites',
|
|
href: '#composites',
|
|
components: [
|
|
{ label: 'Accordion', href: '#accordion' },
|
|
{ label: 'AlertDialog', href: '#alertdialog' },
|
|
{ label: 'AreaChart', href: '#areachart' },
|
|
{ label: 'AvatarGroup', href: '#avatargroup' },
|
|
{ label: 'BarChart', href: '#barchart' },
|
|
{ label: 'Breadcrumb', href: '#breadcrumb' },
|
|
{ label: 'CommandPalette', href: '#commandpalette' },
|
|
{ label: 'ConfirmDialog', href: '#confirm-dialog' },
|
|
{ label: 'DataTable', href: '#datatable' },
|
|
{ label: 'DetailPanel', href: '#detailpanel' },
|
|
{ label: 'Dropdown', href: '#dropdown' },
|
|
{ label: 'EntityList', href: '#entitylist' },
|
|
{ label: 'EventFeed', href: '#eventfeed' },
|
|
{ label: 'FilterBar', href: '#filterbar' },
|
|
{ label: 'GroupCard', href: '#groupcard' },
|
|
{ label: 'KpiStrip', href: '#kpistrip' },
|
|
{ label: 'LineChart', href: '#linechart' },
|
|
{ label: 'LoginDialog', href: '#logindialog' },
|
|
{ label: 'LoginForm', href: '#loginform' },
|
|
{ label: 'LogViewer', href: '#logviewer' },
|
|
{ label: 'MenuItem', href: '#menuitem' },
|
|
{ label: 'Modal', href: '#modal' },
|
|
{ label: 'MultiSelect', href: '#multi-select' },
|
|
{ label: 'Popover', href: '#popover' },
|
|
{ label: 'ProcessorTimeline', href: '#processortimeline' },
|
|
{ label: 'RouteFlow', href: '#routeflow' },
|
|
{ label: 'SegmentedTabs', href: '#segmented-tabs' },
|
|
{ label: 'ShortcutsBar', href: '#shortcutsbar' },
|
|
{ label: 'SplitPane', href: '#splitpane' },
|
|
{ label: 'Tabs', href: '#tabs' },
|
|
{ label: 'Toast', href: '#toast' },
|
|
{ label: 'TreeView', href: '#treeview' },
|
|
],
|
|
},
|
|
{
|
|
label: 'Layout',
|
|
href: '#layout',
|
|
components: [
|
|
{ label: 'AppShell', href: '#appshell' },
|
|
{ label: 'Sidebar', href: '#sidebar' },
|
|
{ label: 'TopBar', href: '#topbar' },
|
|
],
|
|
},
|
|
{
|
|
label: 'Brand Assets',
|
|
href: '#brand-assets',
|
|
components: [
|
|
{ label: 'Cameleer3 Logo', href: '#brand-assets' },
|
|
],
|
|
},
|
|
]
|
|
|
|
export function Inventory() {
|
|
return (
|
|
<div className={styles.page}>
|
|
<header className={styles.header}>
|
|
<h1 className={styles.headerTitle}>Component Inventory</h1>
|
|
<Link to="/apps" className={styles.backLink}>← Back to app</Link>
|
|
</header>
|
|
|
|
<div className={styles.body}>
|
|
<nav className={styles.nav} aria-label="Component categories">
|
|
{NAV_SECTIONS.map((section) => (
|
|
<div key={section.href} className={styles.navSection}>
|
|
<span className={styles.navLabel}>{section.label}</span>
|
|
{section.components.map((component) => (
|
|
<a key={component.href} href={component.href} className={styles.navSubLink}>
|
|
{component.label}
|
|
</a>
|
|
))}
|
|
</div>
|
|
))}
|
|
</nav>
|
|
|
|
<main className={styles.content}>
|
|
<PrimitivesSection />
|
|
<CompositesSection />
|
|
<LayoutSection />
|
|
<BrandAssetsSection />
|
|
</main>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|