/
shappo
/
tree
Обзор
Документация
Войти
/
shappo
/
tree
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
src/components/AppShell.tsx
48 строк
1 KB
Sergey Shappо́
feat: перенести варианты деревьев из gTree в Next.js приложение (#4)
30 июн 2026, 21:50
Не верифицирован
30 июн 2026, 21:50
383b940
Код
Авторство
О чём код?
'use client'; import Link from 'next/link'; import { usePathname } from 'next/navigation'; import { demos } from '@/data/demos'; interface AppShellProps { children: React.ReactNode; } export default function AppShell({ children }: AppShellProps) { const pathname = usePathname(); const basePath = '/tree'; const isActive = (path: string) => { const fullPath = `${basePath}${path === '/' ? '' : path}`; if (path === '/') { return pathname === basePath || pathname === `${basePath}/`; } return pathname === fullPath || pathname.startsWith(`${fullPath}/`); }; return ( <div className="app-shell"> <aside className="sidebar"> <h1>🌳 Genealogy Showcase</h1> <p className="subtitle">Сравнение библиотек визуализации генеалогических деревьев</p> <nav> <ul className="nav-list"> <li> <Link href="/" className={isActive('/') ? 'active' : undefined}> Обзор </Link> </li> {demos.map((demo) => ( <li key={demo.id}> <Link href={demo.path} className={isActive(demo.path) ? 'active' : undefined}> {demo.name} </Link> </li> ))} </ul> </nav> </aside> <main className="main">{children}</main> </div> ); }