Reroute: Deploy Regions

"use client";

import * as React from "react";

import { Reroute, type RerouteItem } from "@/components/ui/reroute";

// Tidewater's deploy settings: pick the primary region for a new project.
const REGIONS = [
  { code: "IAD", city: "Ashburn", country: "US", ms: 14 },
  { code: "PDX", city: "Portland", country: "US", ms: 61 },
  { code: "GRU", city: "São Paulo", country: "BR", ms: 118 },
  { code: "LHR", city: "London", country: "GB", ms: 74 },
  { code: "FRA", city: "Frankfurt", country: "DE", ms: 86 },
  { code: "BOM", city: "Mumbai", country: "IN", ms: 196 },
  { code: "SIN", city: "Singapore", country: "SG", ms: 221 },
  { code: "NRT", city: "Tokyo", country: "JP", ms: 158 },
  { code: "SYD", city: "Sydney", country: "AU", ms: 203 },
];

const ITEMS: RerouteItem[] = REGIONS.map((r) => ({
  id: r.code.toLowerCase(),
  name: `${r.city}, ${r.country}`,
  detail: `${r.code} · ${r.ms} ms from you`,
  icon: (
    <span className="grid size-full place-items-center font-mono text-[11px] font-semibold tracking-wide text-zinc-950 [@container(min-width:30rem)]:text-xs dark:text-white">
      {r.code}
    </span>
  ),
}));

export function RerouteRegionsDemo() {
  const [region, setRegion] = React.useState("iad");
  const picked = REGIONS.find((r) => r.code.toLowerCase() === region) ?? REGIONS[0];

  return (
    <div className="w-full max-w-lg overflow-hidden rounded-3xl border border-zinc-950/[0.08] bg-white shadow-[0_1px_2px_rgba(0,0,0,0.04)] dark:border-white/10 dark:bg-zinc-950">
      <div className="px-6 pt-6">
        <p className="text-[11px] font-medium uppercase tracking-[0.08em] text-[#2747ff] dark:text-[#7d8bff]">New project · Step 2 of 3</p>
        <h3 className="mt-1.5 text-lg font-semibold tracking-tight text-zinc-950 dark:text-white">Where should it run?</h3>
        <p className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">Spin the wheel or use the arrow keys. Latency is measured from your browser.</p>
      </div>

      <Reroute
        className="mt-1 [--reroute-accent:#2747ff] dark:[--reroute-accent:#6b7cff]"
        label="Primary region"
        items={ITEMS}
        value={region}
        onValueChange={setRegion}
        hub={
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
            <path d="M4 7.5 12 3l8 4.5-8 4.5z" />
            <path d="M4 12l8 4.5 8-4.5" />
            <path d="M4 16.5 12 21l8-4.5" />
          </svg>
        }
      />

      <div className="flex items-center justify-between gap-4 border-t border-zinc-950/[0.06] px-6 py-4 dark:border-white/[0.08]">
        <p className="min-w-0 text-xs text-zinc-500 dark:text-zinc-400">
          <span className="font-medium text-zinc-950 dark:text-white">Replicas</span> follow in the two nearest regions.
        </p>
        <button
          type="button"
          className="h-9 shrink-0 rounded-full bg-[#2747ff] px-4 text-[13px] font-medium text-white outline-offset-2 outline-[#2747ff] transition-transform duration-150 focus-visible:outline-2 active:scale-[0.97] dark:bg-[#5b6dff]"
        >
          Deploy to {picked.city}
        </button>
      </div>
    </div>
  );
}