120 lines
3.3 KiB
JavaScript
120 lines
3.3 KiB
JavaScript
/**
|
|
* Navigation
|
|
* Navigation components
|
|
* @generated 2025-12-12T06:29:16.108962
|
|
*/
|
|
export default {
|
|
title: 'Components/Navigation',
|
|
tags: ['autodocs'],
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component: 'Navigation components'
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
const styles = `
|
|
.component-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
|
|
.component-card {
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
background: white;
|
|
}
|
|
.card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.card-header h3 { margin: 0; font-size: 1rem; }
|
|
.radix-badge {
|
|
font-size: 0.6rem;
|
|
background: #dbeafe;
|
|
color: #1d4ed8;
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: 4px;
|
|
font-family: monospace;
|
|
}
|
|
.description { font-size: 0.8rem; color: #6b7280; margin: 0 0 0.75rem; }
|
|
.variants { margin-bottom: 0.5rem; }
|
|
.variant-row { font-size: 0.7rem; margin-bottom: 0.25rem; }
|
|
.var-name { font-weight: 500; margin-right: 0.25rem; }
|
|
.badge {
|
|
display: inline-block;
|
|
background: #f3f4f6;
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: 4px;
|
|
margin-right: 0.25rem;
|
|
font-family: monospace;
|
|
font-size: 0.65rem;
|
|
}
|
|
.deps { font-size: 0.65rem; color: #9ca3af; font-family: monospace; }
|
|
`;
|
|
|
|
export const Overview = {
|
|
name: 'Component Catalog',
|
|
render: () => `
|
|
<style>${styles}</style>
|
|
<div class="component-grid">
|
|
|
|
<div class="component-card">
|
|
<div class="card-header">
|
|
<h3>Breadcrumb</h3>
|
|
|
|
</div>
|
|
<p class="description">Displays the path to the current page in a hierarchy</p>
|
|
<div class="variants"></div>
|
|
|
|
</div>
|
|
<div class="component-card">
|
|
<div class="card-header">
|
|
<h3>Menubar</h3>
|
|
<span class="radix-badge">@radix-ui/react-menubar</span>
|
|
</div>
|
|
<p class="description">Horizontal menu with dropdowns</p>
|
|
<div class="variants"></div>
|
|
|
|
</div>
|
|
<div class="component-card">
|
|
<div class="card-header">
|
|
<h3>Navigation Menu</h3>
|
|
<span class="radix-badge">@radix-ui/react-navigation-menu</span>
|
|
</div>
|
|
<p class="description">Website navigation with mega menus</p>
|
|
<div class="variants"></div>
|
|
|
|
</div>
|
|
<div class="component-card">
|
|
<div class="card-header">
|
|
<h3>Pagination</h3>
|
|
|
|
</div>
|
|
<p class="description">Page navigation with previous/next</p>
|
|
<div class="variants"></div>
|
|
|
|
</div>
|
|
<div class="component-card">
|
|
<div class="card-header">
|
|
<h3>Sidebar</h3>
|
|
|
|
</div>
|
|
<p class="description">Application sidebar with collapsible sections</p>
|
|
<div class="variants"></div>
|
|
|
|
</div>
|
|
<div class="component-card">
|
|
<div class="card-header">
|
|
<h3>Tabs</h3>
|
|
<span class="radix-badge">@radix-ui/react-tabs</span>
|
|
</div>
|
|
<p class="description">Tabbed interface</p>
|
|
<div class="variants"></div>
|
|
|
|
</div>
|
|
</div>
|
|
`
|
|
};
|