spb/datacenterindex

1"use client";23import { ArrowRight, Search } from "lucide-react";4import { useRouter } from "next/navigation";5import { useState } from "react";6import { openPalette } from "@/components/command-palette";7import { Kbd } from "@/components/ui/kbd";8import { routes } from "@/lib/routes";910const SUGGESTIONS = ["Northern Virginia", "hyperscale in Ireland", "> 100 MW under construction", "Equinix", "Japan"];1112export function HeroSearch() {13  const router = useRouter();14  const [q, setQ] = useState("");15  return (16    <div className="mt-5 max-w-2xl">17      <form18        role="search"19        onSubmit={(e) => {20          e.preventDefault();21          if (q.trim()) router.push(routes.search(q.trim()));22          else openPalette();23        }}24        className="flex h-12 items-center rounded-sm border border-hair-2 bg-surface focus-within:border-ink sm:h-14"25      >26        <Search className="ml-3.5 size-5 shrink-0 text-ink-3" strokeWidth={1.75} aria-hidden />27        <input28          value={q}29          onChange={(e) => setQ(e.target.value)}30          onFocus={(e) => {31            if (window.matchMedia("(min-width: 640px)").matches) {32              e.currentTarget.blur();33              openPalette();34            }35          }}36          placeholder="Search a data center, operator, market or country…"37          aria-label="Search the index"38          className="h-full min-w-0 flex-1 bg-transparent px-3 text-[15px] outline-none placeholder:text-ink-4 sm:text-[16px]"39          autoComplete="off"40          enterKeyHint="search"41        />42        <span className="mr-3 hidden items-center gap-0.5 sm:inline-flex">43          <Kbd>⌘</Kbd>44          <Kbd>K</Kbd>45        </span>46        <button type="submit" aria-label="Search" className="mr-1 inline-flex size-10 items-center justify-center rounded-sm bg-ink text-paper hover:bg-ink-2 sm:mr-1.5">47          <ArrowRight className="size-4" />48        </button>49      </form>50      <div className="mt-2.5 -mx-3 flex gap-1.5 overflow-x-auto px-3 no-scrollbar sm:mx-0 sm:flex-wrap sm:px-0">51        <span className="shrink-0 py-1 text-[11.5px] text-ink-4">Try</span>52        {SUGGESTIONS.map((s) => (53          <button key={s} type="button" onClick={() => router.push(routes.search(s))} className="inline-flex h-10 shrink-0 items-center rounded-sm border border-hair px-2.5 text-[12px] text-ink-2 hover:border-hair-2 hover:text-ink sm:h-auto sm:px-2 sm:py-1 sm:text-[11.5px]">54            {s}55          </button>56        ))}57      </div>58    </div>59  );60}61