Kuba Pyla
34 lines
1.0 KiB
TypeScript
34 lines
1.0 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import {usePathname, useSearchParams} from 'next/navigation';
|
|
import type {DemoContent} from '@/types/content';
|
|
|
|
type DemoSubnavProps = {
|
|
demos: DemoContent[];
|
|
activeSlug?: DemoContent['slug'];
|
|
hrefType?: 'page' | 'browser';
|
|
};
|
|
|
|
export function DemoSubnav({demos, activeSlug, hrefType = 'page'}: DemoSubnavProps) {
|
|
const pathname = usePathname();
|
|
const searchParams = useSearchParams();
|
|
const selectedSlug = activeSlug ?? searchParams.get('demo') ?? demos[0]?.slug;
|
|
|
|
return (
|
|
<nav className="demoSubnav" aria-label="Dema konfiguratorów">
|
|
{demos.map(demo => {
|
|
const isActive = selectedSlug === demo.slug || pathname === `/pl/${demo.slug}`;
|
|
const href = hrefType === 'browser' ? `/pl/dema?demo=${demo.slug}` : `/pl/${demo.slug}`;
|
|
|
|
return (
|
|
<Link className={isActive ? 'isActive' : undefined} href={href} key={demo.slug}>
|
|
<span>{demo.eyebrow}</span>
|
|
{demo.title}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
);
|
|
}
|