@shipsite.dev/components 0.2.53 → 0.2.60

package/src/layout/Header.tsx

@@ -1,11 +1,19 @@
 'use client';
 
 import React from 'react';
-import { Menu } from 'lucide-react';
+import { ChevronDown, Menu } from 'lucide-react';
 import { useShipSite, useResolveHref } from '../context/ShipSiteProvider';
 import { cn } from '../lib/utils';
 import { Button } from '../ui/button';
 import { Navbar, NavbarLeft, NavbarRight } from '../ui/navbar';
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+} from '../ui/navigation-menu';
 import {
   Sheet,
   SheetTrigger,
@@ -15,6 +23,16 @@ import {
 import { ThemeToggle } from '../ui/theme-toggle';
 import { ClientOnly } from '../ui/client-only';
 
+type NavItem = { label: string; href: string } | {
+  label: string;
+  children: Array<{ label: string; href: string; description?: string }>;
+  featured?: { title: string; description?: string; href: string; image: string };
+};
+
+function isSubmenu(item: NavItem): item is Extract<NavItem, { children: any }> {
+  return 'children' in item;
+}
+
 export function Header() {
   const { siteName, logo, navigation, locale, defaultLocale, darkMode } = useShipSite();
   const resolveHref = useResolveHref();
@@ -40,15 +58,91 @@ export function Header() {
           </NavbarLeft>
 
           <NavbarRight className="hidden md:flex">
-            {navigation.items.map((item) => (
-              <a
-                key={item.href}
-                href={resolveHref(item.href)}
-                className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
-              >
-                {item.label}
-              </a>
-            ))}
+            <NavigationMenu>
+              <NavigationMenuList>
+                {navigation.items.map((item, idx) => {
+                  if (isSubmenu(item)) {
+                    return (
+                      <NavigationMenuItem key={idx}>
+                        <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>
+                        <NavigationMenuContent>
+                          {item.featured ? (
+                            <div className="grid w-[400px] gap-3 md:w-[500px] md:grid-cols-[.75fr_1fr] lg:w-[600px]">
+                              <NavigationMenuLink asChild>
+                                <a
+                                  href={resolveHref(item.featured.href)}
+                                  className="flex flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-4 no-underline outline-none select-none focus:shadow-md"
+                                >
+                                  <img
+                                    src={item.featured.image}
+                                    alt={item.featured.title}
+                                    className="mb-2 h-24 w-full rounded object-cover"
+                                  />
+                                  <div className="mb-1 text-sm font-medium leading-none">
+                                    {item.featured.title}
+                                  </div>
+                                  {item.featured.description && (
+                                    <p className="text-xs leading-snug text-muted-foreground">
+                                      {item.featured.description}
+                                    </p>
+                                  )}
+                                </a>
+                              </NavigationMenuLink>
+                              <ul className="flex flex-col gap-1 p-1">
+                                {item.children.map((child) => (
+                                  <li key={child.href}>
+                                    <NavigationMenuLink asChild>
+                                      <a href={resolveHref(child.href)} className="block rounded-md p-2 hover:bg-foreground/5">
+                                        <div className="text-sm font-medium leading-none">{child.label}</div>
+                                        {child.description && (
+                                          <p className="mt-1 line-clamp-2 text-xs leading-snug text-muted-foreground">
+                                            {child.description}
+                                          </p>
+                                        )}
+                                      </a>
+                                    </NavigationMenuLink>
+                                  </li>
+                                ))}
+                              </ul>
+                            </div>
+                          ) : (
+                            <ul className="grid w-[300px] gap-1 p-1 md:w-[400px] md:grid-cols-2">
+                              {item.children.map((child) => (
+                                <li key={child.href}>
+                                  <NavigationMenuLink asChild>
+                                    <a href={resolveHref(child.href)} className="block rounded-md p-2 hover:bg-foreground/5">
+                                      <div className="text-sm font-medium leading-none">{child.label}</div>
+                                      {child.description && (
+                                        <p className="mt-1 line-clamp-2 text-xs leading-snug text-muted-foreground">
+                                          {child.description}
+                                        </p>
+                                      )}
+                                    </a>
+                                  </NavigationMenuLink>
+                                </li>
+                              ))}
+                            </ul>
+                          )}
+                        </NavigationMenuContent>
+                      </NavigationMenuItem>
+                    );
+                  }
+
+                  return (
+                    <NavigationMenuItem key={item.href}>
+                      <NavigationMenuLink asChild>
+                        <a
+                          href={resolveHref(item.href)}
+                          className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors inline-flex h-9 items-center px-4 py-2"
+                        >
+                          {item.label}
+                        </a>
+                      </NavigationMenuLink>
+                    </NavigationMenuItem>
+                  );
+                })}
+              </NavigationMenuList>
+            </NavigationMenu>
             {darkMode && <ThemeToggle />}
             {navigation.cta && (
               <Button asChild size="sm">
@@ -74,15 +168,22 @@ export function Header() {
                 <SheetContent side="right">
                   <SheetTitle className="sr-only">Navigation</SheetTitle>
                   <nav className="flex flex-col gap-4 mt-8">
-                    {navigation.items.map((item) => (
-                      <a
-                        key={item.href}
-                        href={resolveHref(item.href)}
-                        className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
-                      >
-                        {item.label}
-                      </a>
-                    ))}
+                    {navigation.items.map((item, idx) => {
+                      if (isSubmenu(item)) {
+                        return (
+                          <MobileSubmenu key={idx} item={item} resolveHref={resolveHref} />
+                        );
+                      }
+                      return (
+                        <a
+                          key={item.href}
+                          href={resolveHref(item.href)}
+                          className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
+                        >
+                          {item.label}
+                        </a>
+                      );
+                    })}
                     {navigation.cta && (
                       <Button asChild className="mt-2">
                         <a href={navigation.cta.href}>
@@ -100,3 +201,38 @@ export function Header() {
     </header>
   );
 }
+
+function MobileSubmenu({
+  item,
+  resolveHref,
+}: {
+  item: Extract<NavItem, { children: any }>;
+  resolveHref: (href: string) => string;
+}) {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <div>
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex items-center gap-1 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors w-full"
+      >
+        {item.label}
+        <ChevronDown className={cn("size-3.5 transition-transform", open && "rotate-180")} />
+      </button>
+      {open && (
+        <div className="mt-2 ml-3 flex flex-col gap-2 border-l border-border pl-3">
+          {item.children.map((child) => (
+            <a
+              key={child.href}
+              href={resolveHref(child.href)}
+              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+            >
+              {child.label}
+            </a>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/lib/use-form-submit.ts

@@ -0,0 +1,53 @@
+"use client";
+
+import { useState, useCallback } from "react";
+
+export type FormStatus = "idle" | "loading" | "success" | "error";
+
+export function useFormSubmit(action: string) {
+  const [status, setStatus] = useState<FormStatus>("idle");
+  const [errorMsg, setErrorMsg] = useState("");
+
+  const submit = useCallback(
+    async (data: Record<string, string>) => {
+      setStatus("loading");
+      setErrorMsg("");
+
+      try {
+        const res = await fetch(action, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Accept: "application/json",
+          },
+          body: JSON.stringify(data),
+        });
+
+        if (!res.ok) {
+          let msg = "Something went wrong. Please try again.";
+          try {
+            const body = await res.json();
+            // Formspree returns { errors: [{ message }] }
+            // Getform/Basin return { message }
+            if (body.errors?.[0]?.message) msg = body.errors[0].message;
+            else if (body.error) msg = body.error;
+            else if (body.message) msg = body.message;
+          } catch {
+            // ignore JSON parse errors
+          }
+          setErrorMsg(msg);
+          setStatus("error");
+          return;
+        }
+
+        setStatus("success");
+      } catch {
+        setErrorMsg("Network error. Please check your connection and try again.");
+        setStatus("error");
+      }
+    },
+    [action],
+  );
+
+  return { status, errorMsg, submit };
+}

package/src/marketing/ContactForm.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import React, { FormEvent, useId, useState } from "react";
+import { CheckCircle, Loader2 } from "lucide-react";
+import { Section } from "../ui/section";
+import { Input } from "../ui/input";
+import { Textarea } from "../ui/textarea";
+import { Label } from "../ui/label";
+import { Button } from "../ui/button";
+import { useFormSubmit } from "../lib/use-form-submit";
+
+interface ContactFormProps {
+  id?: string;
+  action: string;
+  title?: string;
+  description?: string;
+  nameLabel?: string;
+  emailLabel?: string;
+  messageLabel?: string;
+  submitLabel?: string;
+  successTitle?: string;
+  successMessage?: string;
+  variant?: "section" | "card";
+}
+
+export function ContactForm({
+  id,
+  action,
+  title = "Get in Touch",
+  description,
+  nameLabel = "Name",
+  emailLabel = "Email",
+  messageLabel = "Message",
+  submitLabel = "Send Message",
+  successTitle = "Message Sent!",
+  successMessage = "We'll get back to you as soon as possible.",
+  variant = "section",
+}: ContactFormProps) {
+  const uid = useId();
+  const { status, errorMsg, submit } = useFormSubmit(action);
+  const [fields, setFields] = useState({ name: "", email: "", message: "" });
+
+  function update(key: string, value: string) {
+    setFields((prev) => ({ ...prev, [key]: value }));
+  }
+
+  function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    submit(fields);
+  }
+
+  const successContent = (
+    <div className="text-center py-12">
+      <div className="w-16 h-16 rounded-full bg-primary/10 mx-auto mb-4 flex items-center justify-center">
+        <CheckCircle className="w-8 h-8 text-primary" />
+      </div>
+      <h3 className="text-xl font-semibold text-foreground mb-2">{successTitle}</h3>
+      <p className="text-muted-foreground">{successMessage}</p>
+    </div>
+  );
+
+  const formContent =
+    status === "success" ? (
+      successContent
+    ) : (
+      <form onSubmit={handleSubmit} className="space-y-6">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <Label htmlFor={`${uid}-name`}>{nameLabel}</Label>
+            <Input
+              id={`${uid}-name`}
+              name="name"
+              placeholder="Your name"
+              value={fields.name}
+              onChange={(e) => update("name", e.target.value)}
+              required
+              disabled={status === "loading"}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor={`${uid}-email`}>{emailLabel}</Label>
+            <Input
+              id={`${uid}-email`}
+              name="email"
+              type="email"
+              placeholder="you@example.com"
+              value={fields.email}
+              onChange={(e) => update("email", e.target.value)}
+              required
+              disabled={status === "loading"}
+            />
+          </div>
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor={`${uid}-message`}>{messageLabel}</Label>
+          <Textarea
+            id={`${uid}-message`}
+            name="message"
+            placeholder="Your message..."
+            value={fields.message}
+            onChange={(e) => update("message", e.target.value)}
+            required
+            disabled={status === "loading"}
+          />
+        </div>
+        <Button
+          type="submit"
+          variant="default"
+          size="lg"
+          className="w-full"
+          disabled={status === "loading"}
+        >
+          {status === "loading" ? (
+            <>
+              <Loader2 className="size-4 animate-spin mr-2" />
+              Sending...
+            </>
+          ) : (
+            submitLabel
+          )}
+        </Button>
+        {status === "error" && (
+          <p className="text-sm text-destructive" aria-live="polite">
+            {errorMsg}
+          </p>
+        )}
+      </form>
+    );
+
+  if (variant === "card") {
+    return (
+      <div className="glass-2 rounded-2xl p-8">{formContent}</div>
+    );
+  }
+
+  return (
+    <Section id={id}>
+      <div className="container-main max-w-2xl">
+        {(title || description) && (
+          <div className="text-center mb-12">
+            {title && (
+              <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
+                {title}
+              </h2>
+            )}
+            {description && (
+              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+                {description}
+              </p>
+            )}
+          </div>
+        )}
+        <div className="glass-1 rounded-2xl p-8">{formContent}</div>
+      </div>
+    </Section>
+  );
+}

package/src/marketing/Form.tsx

@@ -0,0 +1,41 @@
+import React, { Children, isValidElement } from "react";
+import { FormClient, type FormFieldDef } from "./FormClient";
+
+interface FormFieldProps {
+  name: string;
+  label: string;
+  type?: "text" | "email" | "tel" | "url" | "textarea" | "select";
+  placeholder?: string;
+  required?: boolean;
+  options?: string[];
+  colSpan?: number;
+}
+
+export function FormField(_props: FormFieldProps) {
+  return null;
+}
+
+interface FormProps {
+  id?: string;
+  action: string;
+  title?: string;
+  description?: string;
+  columns?: number;
+  submitLabel?: string;
+  successTitle?: string;
+  successMessage?: string;
+  children: React.ReactNode;
+}
+
+export function Form({ children, ...rest }: FormProps) {
+  const fields: FormFieldDef[] = [];
+
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) return;
+    if (child.type === FormField) {
+      fields.push(child.props as FormFieldDef);
+    }
+  });
+
+  return <FormClient {...rest} fields={fields} />;
+}

package/src/marketing/FormClient.tsx

@@ -0,0 +1,194 @@
+"use client";
+
+import React, { FormEvent, useId, useState } from "react";
+import { CheckCircle, Loader2 } from "lucide-react";
+import { Section } from "../ui/section";
+import { Input } from "../ui/input";
+import { Textarea } from "../ui/textarea";
+import { Label } from "../ui/label";
+import { Button } from "../ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
+import { cn } from "../lib/utils";
+import { useFormSubmit } from "../lib/use-form-submit";
+
+const gridColsMap: Record<number, string> = {
+  2: "md:grid-cols-2",
+  3: "md:grid-cols-3",
+  4: "md:grid-cols-2 lg:grid-cols-4",
+};
+
+const colSpanMap: Record<number, string> = {
+  2: "md:col-span-2",
+  3: "md:col-span-3",
+  4: "md:col-span-4",
+};
+
+export interface FormFieldDef {
+  name: string;
+  label: string;
+  type?: "text" | "email" | "tel" | "url" | "textarea" | "select";
+  placeholder?: string;
+  required?: boolean;
+  options?: string[];
+  colSpan?: number;
+}
+
+interface FormClientProps {
+  id?: string;
+  action: string;
+  title?: string;
+  description?: string;
+  columns?: number;
+  submitLabel?: string;
+  successTitle?: string;
+  successMessage?: string;
+  fields: FormFieldDef[];
+}
+
+export function FormClient({
+  id,
+  action,
+  title,
+  description,
+  columns = 1,
+  submitLabel = "Submit",
+  successTitle = "Submitted!",
+  successMessage = "Thank you. We'll be in touch soon.",
+  fields,
+}: FormClientProps) {
+  const uid = useId();
+  const { status, errorMsg, submit } = useFormSubmit(action);
+  const [values, setValues] = useState<Record<string, string>>(() => {
+    const init: Record<string, string> = {};
+    for (const f of fields) init[f.name] = "";
+    return init;
+  });
+
+  function update(name: string, value: string) {
+    setValues((prev) => ({ ...prev, [name]: value }));
+  }
+
+  function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    submit(values);
+  }
+
+  return (
+    <Section id={id}>
+      <div className="container-main max-w-3xl">
+        {(title || description) && (
+          <div className="text-center mb-12">
+            {title && (
+              <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
+                {title}
+              </h2>
+            )}
+            {description && (
+              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+                {description}
+              </p>
+            )}
+          </div>
+        )}
+
+        {status === "success" ? (
+          <div className="text-center py-12">
+            <div className="w-16 h-16 rounded-full bg-primary/10 mx-auto mb-4 flex items-center justify-center">
+              <CheckCircle className="w-8 h-8 text-primary" />
+            </div>
+            <h3 className="text-xl font-semibold text-foreground mb-2">
+              {successTitle}
+            </h3>
+            <p className="text-muted-foreground">{successMessage}</p>
+          </div>
+        ) : (
+          <form onSubmit={handleSubmit} className="glass-1 rounded-2xl p-8">
+            <div
+              className={cn("grid grid-cols-1 gap-4", gridColsMap[columns])}
+            >
+              {fields.map((field) => (
+                <div
+                  key={field.name}
+                  className={cn("space-y-2", field.colSpan && colSpanMap[field.colSpan])}
+                >
+                  <Label htmlFor={`${uid}-${field.name}`}>{field.label}</Label>
+                  {field.type === "textarea" ? (
+                    <Textarea
+                      id={`${uid}-${field.name}`}
+                      name={field.name}
+                      placeholder={field.placeholder}
+                      required={field.required}
+                      value={values[field.name] ?? ""}
+                      onChange={(e) => update(field.name, e.target.value)}
+                      disabled={status === "loading"}
+                    />
+                  ) : field.type === "select" && field.options ? (
+                    <Select
+                      value={values[field.name] ?? ""}
+                      onValueChange={(v) => update(field.name, v)}
+                      required={field.required}
+                      disabled={status === "loading"}
+                    >
+                      <SelectTrigger id={`${uid}-${field.name}`}>
+                        <SelectValue
+                          placeholder={field.placeholder || "Select..."}
+                        />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {field.options.map((opt) => (
+                          <SelectItem key={opt} value={opt}>
+                            {opt}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  ) : (
+                    <Input
+                      id={`${uid}-${field.name}`}
+                      name={field.name}
+                      type={field.type || "text"}
+                      placeholder={field.placeholder}
+                      required={field.required}
+                      value={values[field.name] ?? ""}
+                      onChange={(e) => update(field.name, e.target.value)}
+                      disabled={status === "loading"}
+                    />
+                  )}
+                </div>
+              ))}
+            </div>
+            <div className="mt-6">
+              <Button
+                type="submit"
+                variant="default"
+                size="lg"
+                className="w-full"
+                disabled={status === "loading"}
+              >
+                {status === "loading" ? (
+                  <>
+                    <Loader2 className="size-4 animate-spin mr-2" />
+                    Submitting...
+                  </>
+                ) : (
+                  submitLabel
+                )}
+              </Button>
+              {status === "error" && (
+                <p className="text-sm text-destructive mt-2" aria-live="polite">
+                  {errorMsg}
+                </p>
+              )}
+            </div>
+          </form>
+        )}
+      </div>
+    </Section>
+  );
+}