Flex Navbar

1'use client';
2import React, { useState } from 'react';
3import { motion, AnimatePresence, Easing } from 'motion/react';
4import { Laptop, Moon, Sun } from 'lucide-react';
5import { ThemeSwitch } from '@/components/ui/theme-switch';
6import { cn } from '@/lib/utils';
7 
8interface NavLink {
9  label: string;
10  href: string;
11}
12 
13interface MediaContent {
14  type: 'image' | 'video';
15  src: string;
16  alt?: string;
17  poster?: string;
18  autoplay?: boolean;
19  link?: string;
20  linkTarget?: '_blank' | '_self';
21}
22 
23interface FlexNavbarProps {
24  logo?: React.ReactNode;
25  brandName?: string;
26  tagline?: string;
27  launchText?: string;
28  navLinks?: NavLink[];
29  media?: MediaContent;
30  mediaButtonText?: string;
31  onMediaClick?: () => void;
32  collapsedWidth?: string;
33  collapsedMaxWidth?: string;
34  collapsedHeight?: string;
35  expandedWidth?: string;
36  expandedMaxWidth?: string;
37  expandedHeight?: string;
38  expandedHeightMobile?: string;
39  animationDuration?: number;
40  animationEasing?: Easing | Easing[];
41  showThemeToggle?: boolean;
42  onExpand?: (isExpanded: boolean) => void;
43}
44 
45const FlexNavbar: React.FC<FlexNavbarProps> = ({
46  logo = (
47    <svg
48      xmlns='http://www.w3.org/2000/svg'
49      viewBox='0 0 24 24'
50      className={cn(
51        'shrink-0 w-6 h-6 sm:w-6 sm:h-6 md:w-7 md:h-7 text-black dark:text-white',
52      )}
53    >
54      <path
55        fill='currentColor'
56        d='M5.999 17a3 3 0 0 1-1.873-.658a2.98 2.98 0 0 1-1.107-2.011a2.98 2.98 0 0 1 .639-2.206l4-5c.978-1.225 2.883-1.471 4.143-.523l1.674 1.254l2.184-2.729a3 3 0 1 1 4.682 3.747l-4 5c-.977 1.226-2.882 1.471-4.143.526l-1.674-1.256l-2.184 2.729A2.98 2.98 0 0 1 5.999 17M10 8a1 1 0 0 0-.781.374l-4 5.001a1 1 0 0 0-.213.734c.03.266.161.504.369.67a.996.996 0 0 0 1.406-.155l3.395-4.244L13.4 12.8c.42.316 1.056.231 1.381-.176l4-5.001a1 1 0 0 0 .213-.734a1 1 0 0 0-.369-.67a.996.996 0 0 0-1.406.156l-3.395 4.242L10.6 8.2A1 1 0 0 0 10 8m9 13H5a1 1 0 1 1 0-2h14a1 1 0 1 1 0 2'
57      />
58    </svg>
59  ),
60  brandName = 'STARTUP',
61  tagline = 'The helpful software company',
62  launchText = 'Launching 2026',
63  navLinks = [
64    { label: 'Technology', href: '#technology' },
65    { label: 'Company', href: '#company' },
66    { label: 'Careers', href: '#careers' },
67    { label: 'Journal', href: '#journal' },
68    { label: 'Beta', href: '#beta' },
69  ],
70  media = {
71    type: 'video',
72    src: 'https://www.pexels.com/download/video/3254009/',
73    alt: 'Our story',
74  },
75  mediaButtonText = 'Our story',
76  onMediaClick,
77  collapsedWidth = '90vw',
78// … truncated