demo-layouts-floating-header

1import { useRef } from 'react';
2import {
3  FloatingHeader,
4  type FloatingHeaderProps,
5} from '@/components/azemmur/layouts/floating-header';
6 
7interface FloatingHeaderDemoProps {
8  intent: FloatingHeaderProps['intent'];
9  styling: FloatingHeaderProps['styling'];
10  size: FloatingHeaderProps['size'];
11  shape: FloatingHeaderProps['shape'];
12  elevation: FloatingHeaderProps['elevation'];
13  targetWidth: FloatingHeaderProps['targetWidth'];
14}
15 
16export default function FloatingHeaderDemo({
17  intent,
18  styling,
19  size,
20  shape,
21  elevation,
22  targetWidth,
23}: FloatingHeaderDemoProps) {
24  const containerRef = useRef<HTMLDivElement>(null);
25  return (
26    <div
27      ref={containerRef}
28      className="relative h-[32rem] w-full overflow-y-auto rounded-lg border border-border"
29    >
30      <FloatingHeader
31        intent={intent}
32        styling={styling}
33        size={size}
34        shape={shape}
35        elevation={elevation}
36        targetWidth={targetWidth}
37        scrollRef={containerRef}
38      >
39        <nav
40          aria-label="Demo navigation"
41          className="flex w-full items-center justify-between"
42        >
43          <span className="text-sm font-semibold">Azemmur</span>
44          <ul className="flex gap-4 text-sm" role="list">
45            <li>
46              <a href="#home" className="hover:opacity-70">
47                Home
48              </a>
49            </li>
50            <li>
51              <a href="#about" className="hover:opacity-70">
52                About
53              </a>
54            </li>
55            <li>
56              <a href="#contact" className="hover:opacity-70">
57                Contact
58              </a>
59            </li>
60          </ul>
61        </nav>
62      </FloatingHeader>
63 
64      <div className="space-y-8 p-8 pt-24">
65        {Array.from({ length: 4 }, (_, i) => (
66          <div
67            key={i}
68            className="h-40 rounded-lg bg-muted/50 grid place-content-center text-muted-foreground text-sm"
69          >
70            Scroll to see the header transform&nbsp;&darr;
71          </div>
72        ))}
73      </div>
74    </div>
75  );
76}