Add 'apps/web/' from commit '1e7174fa604b11e7c3983cd8ad01c596f6e77e96'

git-subtree-dir: apps/web git-subtree-mainline: 068a51b46b git-subtree-split: 1e7174fa60
2026-08-16 21:42:59 -04:00
parent 068a51b46b 1e7174fa60
commit 86f8987dff
350 changed files with 62192 additions and 0 deletions
@@ -0,0 +1,83 @@
+"use client";
+import { useState, useRef } from "react";
+import { Input } from "~/components/ui/input";
+import { Card } from "~/components/ui/card";
+
+interface AddressAutocompleteProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSelect: (value: string) => void;
+  placeholder?: string;
+}
+
+interface NominatimResult {
+  place_id: string;
+  display_name: string;
+}
+
+export function AddressAutocomplete({
+  value,
+  onChange,
+  onSelect,
+  placeholder,
+}: AddressAutocompleteProps) {
+  const [suggestions, setSuggestions] = useState<NominatimResult[]>([]);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const fetchSuggestions = async (query: string) => {
+    if (!query) {
+      setSuggestions([]);
+      return;
+    }
+    const res = await fetch(
+      `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}`,
+    );
+    const data = (await res.json()) as NominatimResult[];
+    setSuggestions(data);
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value;
+    onChange(val);
+    setShowSuggestions(true);
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => {
+      void fetchSuggestions(val);
+    }, 300);
+  };
+
+  const handleSelect = (address: string) => {
+    onSelect(address);
+    setShowSuggestions(false);
+    setSuggestions([]);
+  };
+
+  return (
+    <div className="relative">
+      <Input
+        value={value}
+        onChange={handleInputChange}
+        placeholder={placeholder ?? "Start typing address..."}
+        autoComplete="off"
+        onFocus={() => value && setShowSuggestions(true)}
+        onBlur={() => setTimeout(() => setShowSuggestions(false), 150)}
+      />
+      {showSuggestions && suggestions.length > 0 && (
+        <Card className="bg-card border-border absolute z-10 mt-1 max-h-60 w-full overflow-auto border">
+          <ul>
+            {suggestions.map((s) => (
+              <li
+                key={s.place_id}
+                className="hover:bg-muted cursor-pointer px-4 py-2 text-sm"
+                onMouseDown={() => handleSelect(s.display_name)}
+              >
+                {s.display_name}
+              </li>
+            ))}
+          </ul>
+        </Card>
+      )}
+    </div>
+  );
+}
@@ -0,0 +1,122 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { brand, splitLogoText } from "~/lib/branding";
+import { cn } from "~/lib/utils";
+
+interface LogoProps {
+  className?: string;
+  size?: "sm" | "md" | "lg" | "xl" | "icon";
+  animated?: boolean;
+}
+
+export function Logo({ className, size = "md", animated = true }: LogoProps) {
+  const [logoPrefix, logoSuffix] = splitLogoText(brand.logoText);
+  const sizeClasses = {
+    sm: "text-base",
+    md: "text-xl",
+    lg: "text-3xl",
+    xl: "text-5xl",
+    icon: "text-2xl",
+  };
+
+  if (!animated) {
+    return (
+      <LogoContent
+        className={className}
+        size={size}
+        sizeClasses={sizeClasses}
+        logoPrefix={logoPrefix}
+        logoSuffix={logoSuffix}
+        icon={brand.icon}
+      />
+    );
+  }
+
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.1, ease: "easeOut" }}
+      className={cn(
+        "flex items-center font-mono",
+        sizeClasses[size],
+        className,
+      )}
+    >
+      <motion.span
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 0.02, duration: 0.05, ease: "easeOut" }}
+        className="text-primary font-bold tracking-tight"
+      >
+        {brand.icon}
+      </motion.span>
+      {size !== "icon" && (
+        <>
+          <motion.span
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 0.03, duration: 0.05, ease: "easeOut" }}
+            className="inline-block w-1"
+          />
+          <motion.span
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 0.04, duration: 0.05, ease: "easeOut" }}
+            className="text-foreground font-bold tracking-tight"
+          >
+            {logoPrefix}
+          </motion.span>
+          <motion.span
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 0.06, duration: 0.05, ease: "easeOut" }}
+            className="text-foreground/70 font-bold tracking-tight"
+          >
+            {logoSuffix}
+          </motion.span>
+        </>
+      )}
+    </motion.div>
+  );
+}
+
+function LogoContent({
+  className,
+  size,
+  sizeClasses,
+  logoPrefix,
+  logoSuffix,
+  icon,
+}: {
+  className?: string;
+  size: "sm" | "md" | "lg" | "xl" | "icon";
+  sizeClasses: Record<string, string>;
+  logoPrefix: string;
+  logoSuffix: string;
+  icon: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "flex items-center font-mono",
+        sizeClasses[size],
+        className,
+      )}
+    >
+      <span className="text-primary font-bold tracking-tight">{icon}</span>
+      {size !== "icon" && (
+        <>
+          <span className="inline-block w-1" />
+          <span className="text-foreground font-bold tracking-tight">
+            {logoPrefix}
+          </span>
+          <span className="text-foreground/70 font-bold tracking-tight">
+            {logoSuffix}
+          </span>
+        </>
+      )}
+    </div>
+  );
+}