@catalystsoftware/ui 1.0.12 → 1.0.14

package/dist/components/catalyst-ui/core/navbars/navbar-01.tsx

@@ -0,0 +1,264 @@
+;
+
+import * as React from 'react';
+import { Button } from '~/components/catalyst-ui';
+import { useEffect, useState, useRef } from 'react';
+import {
+  NavigationMenu,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+} from"~/components/catalyst-ui";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from"~/components/catalyst-ui";
+import { cn } from '~/components/catalyst-ui';
+
+// Simple logo component for the navbar
+const Logo = (props: React.SVGAttributes<SVGElement>) => {
+  return (
+    <svg width='1em' height='1em' viewBox='0 0 324 323' fill='currentColor' xmlns='http://www.w3.org/2000/svg' {...props}>
+      <rect
+        x='88.1023'
+        y='144.792'
+        width='151.802'
+        height='36.5788'
+        rx='18.2894'
+        transform='rotate(-38.5799 88.1023 144.792)'
+        fill='currentColor'
+      />
+      <rect
+        x='85.3459'
+        y='244.537'
+        width='151.802'
+        height='36.5788'
+        rx='18.2894'
+        transform='rotate(-38.5799 85.3459 244.537)'
+        fill='currentColor'
+      />
+    </svg>
+  );
+};
+
+// Hamburger icon component
+const HamburgerIcon = ({ className, ...props }: React.SVGAttributes<SVGElement>) => (
+  <svg
+    className={cn('pointer-events-none', className)}
+    width={16}
+    height={16}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M4 12L20 12"
+      className="origin-center -translate-y-[7px] transition-all duration-300 ease-overshoot group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-[315deg]"
+    />
+    <path
+      d="M4 12H20"
+      className="origin-center transition-all duration-300 ease-overshoot-lg group-aria-expanded:rotate-45"
+    />
+    <path
+      d="M4 12H20"
+      className="origin-center translate-y-[7px] transition-all duration-300 ease-overshoot group-aria-expanded:translate-y-0 group-aria-expanded:rotate-[135deg]"
+    />
+  </svg>
+);
+
+// Types
+export interface Navbar01NavLink {
+  href: string;
+  label: string;
+  active?: boolean;
+}
+
+export interface Navbar01Props extends React.HTMLAttributes<HTMLElement> {
+  logo?: React.ReactNode;
+  logoHref?: string;
+  navigationLinks?: Navbar01NavLink[];
+  signInText?: string;
+  signInHref?: string;
+  ctaText?: string;
+  ctaHref?: string;
+  onSignInClick?: () => void;
+  onCtaClick?: () => void;
+}
+
+// Default navigation links
+const defaultNavigationLinks: Navbar01NavLink[] = [
+  { href: '#', label: 'Home', active: true },
+  { href: '#features', label: 'Features' },
+  { href: '#pricing', label: 'Pricing' },
+  { href: '#about', label: 'About' },
+];
+
+export const Navbar01 = React.forwardRef<HTMLElement, Navbar01Props>(
+  (
+    {
+      className,
+      logo = <Logo />,
+      logoHref = '#',
+      navigationLinks = defaultNavigationLinks,
+      signInText = 'Sign In',
+      signInHref = '#signin',
+      ctaText = 'Get Started',
+      ctaHref = '#get-started',
+      onSignInClick,
+      onCtaClick,
+      ...props
+    },
+    ref
+  ) => {
+    const [isMobile, setIsMobile] = useState(false);
+    const containerRef = useRef<HTMLElement>(null);
+
+    useEffect(() => {
+      const checkWidth = () => {
+        if (containerRef.current) {
+          const width = containerRef.current.offsetWidth;
+          setIsMobile(width < 768); // 768px is md breakpoint
+        }
+      };
+
+      checkWidth();
+
+      const resizeObserver = new ResizeObserver(checkWidth);
+      if (containerRef.current) {
+        resizeObserver.observe(containerRef.current);
+      }
+
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }, []);
+
+    // Combine refs
+    const combinedRef = React.useCallback((node: HTMLElement | null) => {
+      containerRef.current = node;
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    }, [ref]);
+
+    return (
+      <header
+        ref={combinedRef}
+        className={cn(
+          'sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 px-4 md:px-6 [&_*]:no-underline',
+          className
+        )}
+        {...props}
+      >
+        <div className="container mx-auto flex h-16 max-w-screen-2xl items-center justify-between gap-4">
+          {/* Left side */}
+          <div className="flex items-center gap-2">
+            {/* Mobile menu trigger */}
+            {isMobile && (
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button
+                    className="group h-9 w-9 hover:bg-accent hover:text-accent-foreground"
+                    variant="ghost"
+                    size="icon"
+                  >
+                    <HamburgerIcon />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent align="start" className="w-48 p-2">
+                <NavigationMenu className="max-w-none">
+                  <NavigationMenuList className="flex-col items-start gap-1">
+                    {navigationLinks.map((link, index) => (
+                      <NavigationMenuItem key={index} className="w-full">
+                        <button
+                          onClick={(e) => e.preventDefault()}
+                          className={cn(
+                            "flex w-full items-center rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground cursor-pointer no-underline",
+                            link.active 
+                              ? "bg-accent text-accent-foreground" 
+                              : "text-foreground/80"
+                          )}
+                        >
+                          {link.label}
+                        </button>
+                      </NavigationMenuItem>
+                    ))}
+                  </NavigationMenuList>
+                </NavigationMenu>
+                </PopoverContent>
+              </Popover>
+            )}
+            {/* Main nav */}
+            <div className="flex items-center gap-6">
+              <button 
+                onClick={(e) => e.preventDefault()}
+                className="flex items-center space-x-2 text-primary hover:text-primary/90 transition-colors cursor-pointer"
+              >
+                <div className="text-2xl">
+                  {logo}
+                </div>
+                <span className="hidden font-bold text-xl sm:inline-block">shadcn.io</span>
+              </button>
+              {/* Navigation menu */}
+              {!isMobile && (
+                <NavigationMenu className="flex">
+                <NavigationMenuList className="gap-1">
+                  {navigationLinks.map((link, index) => (
+                    <NavigationMenuItem key={index}>
+                      <button
+                        onClick={(e) => e.preventDefault()}
+                        className={cn(
+                          "group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 cursor-pointer no-underline",
+                          link.active 
+                            ? "bg-accent text-accent-foreground" 
+                            : "text-foreground/80 hover:text-foreground"
+                        )}
+                      >
+                        {link.label}
+                      </button>
+                    </NavigationMenuItem>
+                  ))}
+                </NavigationMenuList>
+                </NavigationMenu>
+              )}
+            </div>
+          </div>
+          {/* Right side */}
+          <div className="flex items-center gap-3">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="text-sm font-medium hover:bg-accent hover:text-accent-foreground"
+              onClick={(e) => {
+                e.preventDefault();
+                if (onSignInClick) onSignInClick();
+              }}
+            >
+              {signInText}
+            </Button>
+            <Button
+              size="sm"
+              className="text-sm font-medium px-4 h-9 rounded-md shadow-sm"
+              onClick={(e) => {
+                e.preventDefault();
+                if (onCtaClick) onCtaClick();
+              }}
+            >
+              {ctaText}
+            </Button>
+          </div>
+        </div>
+      </header>
+    );
+  }
+);
+
+Navbar01.displayName = 'Navbar01';