julienfroidefond/towercontrol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add Table of Contents component to UI showcase

Browse Source 
- Introduced `TableOfContents` component for improved navigation within the UI showcase.
- Implemented section extraction and intersection observer for active section tracking.
- Updated `UIShowcaseClient` to include the new component, enhancing user experience with a sticky navigation menu.
- Added IDs to sections for better linking and scrolling functionality.
This commit is contained in:
Julien Froidefond
2025-09-30 22:31:57 +02:00
parent 7aa9d6dd6b
commit 785dc91159
2 changed files with 206 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/ui-showcase/UIShowcaseClient.tsx
View File

@@ -28,6 +28,7 @@ import { StatusBadge } from '@/components/ui/StatusBadge';
import { KeyboardShortcutsModal } from '@/components/ui/KeyboardShortcutsModal';
import { Modal } from '@/components/ui/Modal';
import { FontSizeToggle } from '@/components/ui/FontSizeToggle';
import { TableOfContents } from './TableOfContents';
export function UIShowcaseClient() {
const [inputValue, setInputValue] = useState('');
@@ -133,11 +134,19 @@ export function UIShowcaseClient() {
subtitle="Démonstration de tous les composants UI disponibles"
/>
<div className="max-w-6xl mx-auto p-8 space-y-16">
<div className="max-w-7xl mx-auto p-8">
<div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
{/* Menu de navigation */}
<div className="lg:col-span-1">
<TableOfContents />
</div>
{/* Contenu principal */}
<div className="lg:col-span-3 space-y-16">
{/* Buttons Section */}
<section className="space-y-8">
<section id="buttons" className="space-y-8">
<h2 className="text-2xl font-mono font-semibold text-[var(--foreground)] border-b border-[var(--border)] pb-3">
Buttons
</h2>
@@ -176,7 +185,7 @@ export function UIShowcaseClient() {
</section>
{/* Badges Section */}
<section className="space-y-8">
<section id="badges" className="space-y-8">
<h2 className="text-2xl font-mono font-semibold text-[var(--foreground)] border-b border-[var(--border)] pb-3">
Badges
</h2>
@@ -198,7 +207,7 @@ export function UIShowcaseClient() {
</section>
{/* Alerts Section */}
<section className="space-y-8">
<section id="alerts" className="space-y-8">
<h2 className="text-2xl font-mono font-semibold text-[var(--foreground)] border-b border-[var(--border)] pb-3">
Alerts
</h2>
@@ -242,7 +251,7 @@ export function UIShowcaseClient() {
</section>
{/* Inputs Section */}
<section className="space-y-8">
<section id="inputs" className="space-y-8">
<h2 className="text-2xl font-mono font-semibold text-[var(--foreground)] border-b border-[var(--border)] pb-3">
Inputs
</h2>
@@ -273,7 +282,7 @@ export function UIShowcaseClient() {
</section>
{/* Cards Section */}
<section className="space-y-6">
<section id="cards" className="space-y-6">
<h2 className="text-2xl font-mono font-semibold text-[var(--foreground)] border-b border-[var(--border)] pb-2">
Cards
</h2>
@@ -386,7 +395,7 @@ export function UIShowcaseClient() {
</section>
{/* Interactive Demo */}
<section className="space-y-6">
<section id="interactive-demo" className="space-y-6">
<h2 className="text-2xl font-mono font-semibold text-[var(--foreground)] border-b border-[var(--border)] pb-2">
Démonstration Interactive
</h2>
@@ -457,7 +466,7 @@ export function UIShowcaseClient() {
</section>
{/* Dashboard Components Section */}
<section className="space-y-8">
<section id="dashboard-components" className="space-y-8">
<h2 className="text-2xl font-mono font-semibold text-[var(--foreground)] border-b border-[var(--border)] pb-3">
Dashboard Components
</h2>
@@ -810,7 +819,7 @@ export function UIShowcaseClient() {
</section>
{/* Kanban Components Section */}
<section className="space-y-8">
<section id="kanban-components" className="space-y-8">
<h2 className="text-2xl font-mono font-semibold text-[var(--foreground)] border-b border-[var(--border)] pb-3">
Kanban Components
</h2>
@@ -1103,7 +1112,7 @@ export function UIShowcaseClient() {
</section>
{/* Jira Dashboard Components Section */}
<section className="space-y-8">
<section id="jira-dashboard-components" className="space-y-8">
<h2 className="text-2xl font-mono font-semibold text-[var(--foreground)] border-b border-[var(--border)] pb-3">
Jira Dashboard Components
</h2>
@@ -1190,7 +1199,7 @@ export function UIShowcaseClient() {
</section>
{/* Daily Components Section */}
<section className="space-y-8">
<section id="daily-components" className="space-y-8">
<h2 className="text-2xl font-mono font-semibold text-[var(--foreground)] border-b border-[var(--border)] pb-3">
Daily Components
</h2>
@@ -1335,7 +1344,7 @@ export function UIShowcaseClient() {
</section>
{/* Weekly Manager Components Section */}
<section className="space-y-8">
<section id="weekly-manager-components" className="space-y-8">
<h2 className="text-2xl font-mono font-semibold text-[var(--foreground)] border-b border-[var(--border)] pb-3">
Weekly Manager Components
</h2>
@@ -1431,7 +1440,7 @@ export function UIShowcaseClient() {
</section>
{/* Additional UI Components Section */}
<section className="space-y-8">
<section id="additional-ui-components" className="space-y-8">
<h2 className="text-2xl font-mono font-semibold text-[var(--foreground)] border-b border-[var(--border)] pb-3">
Additional UI Components
</h2>
@@ -1598,11 +1607,13 @@ export function UIShowcaseClient() {
</div>
</section>
{/* Footer */}
<div className="text-center pt-8 border-t border-[var(--border)]">
<p className="text-[var(--muted-foreground)]">
Cette page est accessible via <code className="bg-[var(--card)] px-2 py-1 rounded text-sm">/ui-showcase</code>
</p>
{/* Footer */}
<div className="text-center pt-8 border-t border-[var(--border)]">
<p className="text-[var(--muted-foreground)]">
Cette page est accessible via <code className="bg-[var(--card)] px-2 py-1 rounded text-sm">/ui-showcase</code>
</p>
</div>
</div>
</div>
</div>