rework components

src/components/DemoSubnav.tsx

@@ -0,0 +1,33 @@
+'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>
+  );
+}