38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
|
import { Link } from 'react-router-dom'
|
||
|
|
import styles from './Inventory.module.css'
|
||
|
|
import { PrimitivesSection } from './sections/PrimitivesSection'
|
||
|
|
|
||
|
|
const NAV_ITEMS = [
|
||
|
|
{ label: 'Primitives', href: '#primitives' },
|
||
|
|
{ label: 'Composites', href: '#composites' },
|
||
|
|
{ label: 'Layout', href: '#layout' },
|
||
|
|
]
|
||
|
|
|
||
|
|
export function Inventory() {
|
||
|
|
return (
|
||
|
|
<div className={styles.page}>
|
||
|
|
<header className={styles.header}>
|
||
|
|
<h1 className={styles.headerTitle}>Component Inventory</h1>
|
||
|
|
<Link to="/" className={styles.backLink}>← Back to app</Link>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div className={styles.body}>
|
||
|
|
<nav className={styles.nav} aria-label="Component categories">
|
||
|
|
<div className={styles.navSection}>
|
||
|
|
<span className={styles.navLabel}>Categories</span>
|
||
|
|
{NAV_ITEMS.map((item) => (
|
||
|
|
<a key={item.href} href={item.href} className={styles.navLink}>
|
||
|
|
{item.label}
|
||
|
|
</a>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<main className={styles.content}>
|
||
|
|
<PrimitivesSection />
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|