Layerbeat

BackLayerbeatApp

100%

import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldLabel,
  FieldTitle,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { Kbd } from "@/components/ui/kbd";
import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInset,
  SidebarMenu,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
  useSidebar,
} from "@/components/ui/sidebar";
import { Switch } from "@/components/ui/switch";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { useMemo, useRef, useState } from "react";
import {
  availableCredit,
  billingTerms,
  configurationCount,
  type Flag as FlagData,
  formatUsd,
  type Image,
  images,
  type Location,
  locations,
  navPlatform,
  navWorkspace,
  type Plan,
  type PlanCategory,
  planCategories,
  plans,
  type Region,
  regions,
  workspaces,
} from "./data";
import {
  ArrowUpRightIcon,
  CaretDownIcon,
  CaretUpDownIcon,
  CheckCircleIcon,
  CpuIcon,
  CreditCardIcon,
  FileTextIcon,
  HomeIcon,
  KeyIcon,
  LogoMark,
  MemoryIcon,
  MoonIcon,
  RefreshIcon,
  ServerIcon,
  SunIcon,
  UsersIcon,
} from "./react/icons";

const navIcons = {
  home: HomeIcon,
  server: ServerIcon,
  billing: CreditCardIcon,
  key: KeyIcon,
  team: UsersIcon,
} as const;

// Tiny striped flag (3 bands) used in location cards and the summary.
function Flag({ flag }: { flag: FlagData }) {
  const [a, b, c] = flag.colors;
  const bands =
    flag.dir === "h"
      ? `linear-gradient(to bottom, ${a} 33.3%, ${b} 33.3% 66.6%, ${c} 66.6%)`
      : `linear-gradient(to right, ${a} 33.3%, ${b} 33.3% 66.6%, ${c} 66.6%)`;
  return (
    <span
      aria-hidden
      className="inline-block h-3.5 w-5 shrink-0 rounded-[2px]"
      style={{ background: bands }}
    />
  );
}

// Round distro mark: a coloured disc (Ubuntu gets its circle of friends).
function OsLogo({
  color,
  ubuntu = false,
}: {
  color: string;
  ubuntu?: boolean;
}) {
  return (
    <svg width={22} height={22} viewBox="0 0 24 24" aria-hidden>
      <circle cx="12" cy="12" r="11" fill={color} />
      {ubuntu ? (
        <>
          <circle
            cx="12"
            cy="12"
            r="5.2"
            fill="none"
            stroke="#fff"
            strokeWidth="2.2"
          />
          <circle cx="5.6" cy="12" r="2" fill="#fff" />
          <circle cx="15.2" cy="6.5" r="2" fill="#fff" />
          <circle cx="15.2" cy="17.5" r="2" fill="#fff" />
        </>
      ) : null}
    </svg>
  );
}

// One numbered configuration step: Kbd index + title, optional description, then the controls.
function StepCard({
  index,
  title,
  description,
  children,
}: {
  index: string;
  title: string;
  description?: string;
  children: React.ReactNode;
}) {
  return (
    <Card className="gap-0 px-[26px] pt-[22px] pb-[26px]">
      <div className="flex items-center gap-3">
        <Kbd className="h-6 min-w-7 text-[11.5px]">{index}</Kbd>
        <h2 className="text-lg font-semibold tracking-[-0.2px]">{title}</h2>
      </div>
      {description ? (
        <p className="mt-3 text-sm text-muted-foreground">{description}</p>
      ) : null}
      <div className="mt-[18px]">{children}</div>
    </Card>
  );
}

// Tailwind scans for whole class names, so each tint is spelled out.
const tints = {
  1: "border-[color-mix(in_srgb,var(--chart-1)_22%,transparent)] bg-[color-mix(in_srgb,var(--chart-1)_12%,var(--card))] text-chart-1",
  2: "border-[color-mix(in_srgb,var(--chart-2)_22%,transparent)] bg-[color-mix(in_srgb,var(--chart-2)_12%,var(--card))] text-chart-2",
  3: "border-[color-mix(in_srgb,var(--chart-3)_22%,transparent)] bg-[color-mix(in_srgb,var(--chart-3)_12%,var(--card))] text-chart-3",
} as const;

function Spec({
  icon,
  label,
  value,
  n,
}: {
  icon: React.ReactNode;
  label: string;
  value: string;
  n: 1 | 2 | 3;
}) {
  return (
    <div className={`flex-1 rounded-xl border px-3 py-2.5 ${tints[n]}`}>
      <div className="flex items-center gap-1.5 text-[12.5px]">
        {icon}
        <span className="text-foreground-2">{label}</span>
      </div>
      <div className="mt-1.5 font-mono text-[17px] text-foreground">
        {value}
      </div>
    </div>
  );
}

function Row({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex items-center justify-between text-[13.5px]">
      <span className="text-muted-foreground">{label}</span>
      <span className="font-medium">{value}</span>
    </div>
  );
}

// Sticky raised summary: the only raised surface besides the CTA and the billing segmented control.
function SummaryCard({
  category,
  location,
  plan,
  image,
  version,
  termLabel,
  total,
}: {
  category: string;
  location: Location;
  plan: Plan;
  image: Image;
  version: string;
  termLabel: string;
  total: number;
}) {
  return (
    <Card elevation="raised" className="gap-0 p-0">
      <div className="relative overflow-hidden border-b border-border-2 bg-[linear-gradient(160deg,var(--brand-soft),var(--card)_75%)] px-5 pt-5 pb-[18px]">
        <span className="absolute -right-[26px] -bottom-[30px] size-[110px] rounded-full bg-[color-mix(in_srgb,var(--chart-2)_35%,transparent)]" />
        <span className="absolute right-[30px] -bottom-10 h-[90px] w-[70px] rounded-[40px] bg-[color-mix(in_srgb,var(--chart-1)_30%,transparent)]" />
        <div className="relative flex items-center justify-between">
          <span className="inline-flex size-11 items-center justify-center rounded-xl border border-border bg-popover">
            <OsLogo color={image.color} ubuntu={image.id === "ubuntu"} />
          </span>
          <Badge variant="brand" shape="pill">
            {category}
          </Badge>
        </div>
        <div className="relative mt-4 text-[22px] font-semibold tracking-[-0.4px]">
          Your new server
        </div>
        <div className="relative mt-1 font-mono text-xs text-muted-foreground">
          {plan.id}
        </div>
        <div className="relative mt-3.5 flex items-center gap-2 text-sm font-medium">
          <Flag flag={location.flag} />
          {location.city}
        </div>
      </div>
      <div className="flex flex-col gap-3.5 px-5 pt-[18px] pb-5">
        <div className="flex gap-2">
          <Spec
            icon={<CpuIcon className="size-3.5" />}
            label="vCPU"
            value={String(plan.vcpu)}
            n={1}
          />
          <Spec
            icon={<MemoryIcon className="size-3.5" />}
            label="RAM"
            value={`${plan.ram} GB`}
            n={2}
          />
          <Spec
            icon={<ServerIcon className="size-3.5" />}
            label="SSD"
            value={`${plan.ssd} GB`}
            n={3}
          />
        </div>
        <Row label="Image" value={`${image.name} ${version}`} />
        <Row label="Billing term" value={termLabel} />
        <Row label="Location" value={`${location.city}, ${location.country}`} />
        <div className="rounded-xl border border-[color-mix(in_srgb,var(--brand)_25%,var(--popover))] bg-brand-soft px-4 py-3.5">
          <div className="text-[13px] text-foreground-2">Purchase total</div>
          <div className="mt-1 font-mono text-[30px] tracking-[-0.5px]">
            {formatUsd(total)}
          </div>
          <div className="mt-0.5 text-xs text-muted-foreground">
            Full term · USD
          </div>
        </div>
        <div className="flex items-center justify-between rounded-xl bg-success-soft px-3.5 py-2.5 text-[13.5px]">
          <span className="flex items-center gap-2">
            <CreditCardIcon className="size-[15px]" />
            Available credit
          </span>
          <span className="font-mono font-medium text-success-text">
            {formatUsd(availableCredit)}
          </span>
        </div>
        <p className="rounded-xl border border-border px-3.5 py-3 text-xs leading-normal text-muted-foreground">
          Review your configuration before purchasing. Credit is used only when
          you confirm.
        </p>
        <Button elevation="raised" size="lg" className="w-full">
          Purchase server
        </Button>
        <Button variant="ghost" className="-mt-1.5 w-full">
          Save as draft
        </Button>
      </div>
    </Card>
  );
}

// The sidebar subtree carries its own `dark` class: it stays navy in light mode (scoped theming).
function AppSidebar() {
  const groups = [
    { label: "Platform", items: navPlatform },
    { label: "Workspace", items: navWorkspace },
  ];
  return (
    <Sidebar collapsible="offcanvas">
      <div className="dark flex h-full w-full flex-col bg-[#0b2a6f] text-sidebar-foreground">
        <SidebarHeader className="flex-row items-center justify-between px-4 pt-5 pb-3">
          <a
            href="#/"
            className="flex items-center gap-2 font-brand text-xl font-semibold tracking-[-0.4px] text-white"
          >
            <LogoMark />
            Layerbeat
          </a>
          <SidebarTrigger className="text-muted-foreground hover:bg-[color-mix(in_srgb,white_10%,#0b2a6f)] hover:text-foreground" />
        </SidebarHeader>
        <SidebarContent className="px-2">
          {groups.map((group) => (
            <SidebarGroup key={group.label}>
              <SidebarGroupLabel className="text-[11.5px] tracking-[0.6px] uppercase">
                {group.label}
              </SidebarGroupLabel>
              <SidebarGroupContent>
                <SidebarMenu>
                  {group.items.map((item) => {
                    const Icon = navIcons[item.icon];
                    const active = "active" in item && item.active;
                    const badge = "badge" in item ? item.badge : undefined;
                    return (
                      <SidebarMenuItem key={item.label}>
                        <SidebarMenuButton
                          isActive={active}
                          className="h-9 text-muted-foreground hover:bg-[color-mix(in_srgb,white_5%,#0b2a6f)] data-[active]:bg-[color-mix(in_srgb,white_9%,#0b2a6f)] data-[active]:text-foreground data-[active]:shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--brand)_55%,#0b2a6f)]"
                          render={<a href="#/" />}
                        >
                          <Icon />
                          <span>{item.label}</span>
                        </SidebarMenuButton>
                        {badge ? (
                          <SidebarMenuBadge className="rounded-md border border-border bg-secondary text-secondary-foreground">
                            {badge}
                          </SidebarMenuBadge>
                        ) : null}
                      </SidebarMenuItem>
                    );
                  })}
                </SidebarMenu>
              </SidebarGroupContent>
            </SidebarGroup>
          ))}
        </SidebarContent>
        <SidebarFooter className="px-2 pb-4">
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton
                className="h-9 text-muted-foreground hover:bg-[color-mix(in_srgb,white_5%,#0b2a6f)]"
                render={<a href="#/api" />}
              >
                <FileTextIcon />
                <span className="flex-1">API documentation</span>
                <ArrowUpRightIcon className="size-3.5!" />
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarFooter>
      </div>
    </Sidebar>
  );
}

function WorkspaceSwitcher() {
  const [current, setCurrent] = useState(workspaces[0]);
  return (
    <DropdownMenu>
      <DropdownMenuTrigger
        render={<Button variant="ghost" className="gap-2.5 px-2 font-medium" />}
      >
        <LogoMark className="size-[18px]" />
        {current}
        <CaretUpDownIcon className="text-muted-foreground" />
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start" className="min-w-48">
        <DropdownMenuLabel>Workspaces</DropdownMenuLabel>
        {workspaces.map((w) => (
          <DropdownMenuItem key={w} onClick={() => setCurrent(w)}>
            {w}
          </DropdownMenuItem>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

// The sidebar owns the toggle while it is open on desktop; the header takes over when it is closed or on mobile.
function HeaderTrigger() {
  const { isMobile, state } = useSidebar();
  return isMobile || state === "collapsed" ? <SidebarTrigger /> : null;
}

function AppShell({ children }: { children: React.ReactNode }) {
  return (
    <SidebarProvider
      className="h-svh min-h-0 overflow-hidden"
      style={{ "--sidebar-width": "15rem" } as React.CSSProperties}
    >
      <AppSidebar />
      <SidebarInset className="min-h-0 min-w-0 overflow-hidden bg-background">
        <header className="flex h-16 shrink-0 items-center justify-between gap-3 border-b border-border bg-card px-4 md:px-7">
          <div className="flex min-w-0 items-center gap-1">
            <HeaderTrigger />
            <WorkspaceSwitcher />
            <span className="px-1 text-muted-foreground max-sm:hidden">/</span>
            <span className="text-muted-foreground max-sm:hidden">BeatVPS</span>
          </div>
          <div className="flex items-center gap-3 sm:gap-[18px]">
            <span className="flex items-center gap-[7px] text-[13px] text-muted-foreground max-md:hidden">
              <span className="size-1.5 rounded-full bg-success" />
              Connected
            </span>
            <div className="flex items-center gap-2 text-muted-foreground">
              <SunIcon className="size-4" />
              <Switch aria-label="Dark mode" />
              <MoonIcon className="size-4" />
            </div>
            <Button variant="ghost" size="sm" className="max-sm:hidden">
              <RefreshIcon />
              Refresh
            </Button>
            <div className="flex items-center gap-1.5">
              <Avatar className="size-8">
                <AvatarFallback className="text-xs">AR</AvatarFallback>
              </Avatar>
              <CaretDownIcon className="size-3.5 text-muted-foreground max-sm:hidden" />
            </div>
          </div>
        </header>
        <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain">
          {children}
        </div>
      </SidebarInset>
    </SidebarProvider>
  );
}

function CreatePage() {
  const summaryRef = useRef<HTMLDivElement>(null);
  const [step, setStep] = useState("configure");
  const [name, setName] = useState("");
  const [region, setRegion] = useState<Region>("Europe");
  const [locationId, setLocationId] = useState("fra");
  const [category, setCategory] = useState<PlanCategory>("general");
  const [planId, setPlanId] = useState("BEAT2C2G-S");
  const [view, setView] = useState("list");
  const [imageId, setImageId] = useState("ubuntu");
  const [versions, setVersions] = useState<Record<string, string>>(() =>
    Object.fromEntries(images.map((i) => [i.id, i.versions[0].value])),
  );
  const [months, setMonths] = useState("1");
  const [autoRenew, setAutoRenew] = useState(true);

  const location = locations.find((l) => l.id === locationId) ?? locations[0];
  const plan =
    Object.values(plans)
      .flat()
      .find((p) => p.id === planId) ?? plans.general[0];
  const image = images.find((i) => i.id === imageId) ?? images[0];
  const term =
    billingTerms.find((t) => String(t.months) === months) ?? billingTerms[0];
  const total = useMemo(
    () => plan.price * term.months * (1 - term.discount / 100),
    [plan, term],
  );
  const regionLocations = locations.filter((l) => l.region === region);
  const categoryLabel =
    planCategories.find((c) => c.id === category)?.label ?? "";

  const pickRegion = (next: Region) => {
    setRegion(next);
    const first = locations.find((l) => l.region === next);
    if (first) setLocationId(first.id);
  };
  const pickCategory = (next: PlanCategory) => {
    setCategory(next);
    setPlanId(plans[next][0].id);
  };

  return (
    <div className="mx-auto w-full max-w-[1328px] px-4 pt-8 pb-12 md:px-9">
      <h1 className="text-[32px] font-semibold tracking-[-0.8px]">
        Create a BeatVPS
      </h1>
      <p className="mt-2 text-[15px] text-muted-foreground">
        A place for your next project. Choose a location, configuration and
        image.
      </p>

      <Card className="mt-[26px] p-1.5">
        <Tabs
          value={step}
          onValueChange={(v) => {
            setStep(v as string);
            if (v === "review")
              summaryRef.current?.scrollIntoView({ behavior: "smooth" });
          }}
        >
          <TabsList variant="pills" className="flex-wrap">
            <TabsTrigger value="configure" className="gap-2">
              <span className="font-mono text-[11.5px]">01</span> Configure
            </TabsTrigger>
            <TabsTrigger value="review" className="gap-2">
              <span className="font-mono text-[11.5px]">02</span> Review &amp;
              purchase
            </TabsTrigger>
          </TabsList>
        </Tabs>
      </Card>

      <div className="mt-6 flex flex-col items-start gap-6 lg:flex-row">
        <div className="flex w-full min-w-0 flex-1 flex-col gap-5">
          <StepCard index="01" title="Name your server">
            <Field>
              <Label htmlFor="server-name">Server name</Label>
              <Input
                id="server-name"
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="my-first-server"
              />
              <FieldDescription>
                A name to identify this server in your workspace.
              </FieldDescription>
            </Field>
          </StepCard>

          <StepCard
            index="02"
            title="Choose a location"
            description="Place your server close to your users. Each location has its own configurations and images."
          >
            <Tabs value={region} onValueChange={(v) => pickRegion(v as Region)}>
              <TabsList variant="line" className="mb-[18px] flex-wrap">
                {regions.map((r) => (
                  <TabsTrigger key={r} value={r}>
                    {r}
                  </TabsTrigger>
                ))}
              </TabsList>
            </Tabs>
            <RadioGroup
              value={locationId}
              onValueChange={(v) => setLocationId(v as string)}
              className="grid-cols-[repeat(auto-fill,minmax(170px,180px))] gap-3"
            >
              {regionLocations.map((l) => (
                <FieldLabel key={l.id} htmlFor={`loc-${l.id}`}>
                  <Field
                    orientation="horizontal"
                    className="items-center gap-2.5 px-3.5 py-3"
                  >
                    <Flag flag={l.flag} />
                    <span className="flex-1 text-sm font-medium whitespace-nowrap">
                      {l.city}
                    </span>
                    {l.id === locationId ? (
                      <CheckCircleIcon className="size-4 text-brand" />
                    ) : (
                      <span className="font-mono text-[11px] whitespace-nowrap text-muted-foreground">
                        {l.latency} ms
                      </span>
                    )}
                    <RadioGroupItem
                      id={`loc-${l.id}`}
                      value={l.id}
                      className="sr-only"
                    />
                  </Field>
                </FieldLabel>
              ))}
            </RadioGroup>
          </StepCard>

          <StepCard index="03" title="Choose your configuration">
            <div className="-mt-1 flex items-center justify-between gap-3">
              <span className="text-[13.5px] text-muted-foreground">
                {configurationCount} configurations · monthly prices
              </span>
              <ToggleGroup
                variant="segmented"
                value={[view]}
                onValueChange={(v) => v[0] && setView(v[0] as string)}
              >
                <ToggleGroupItem value="cards">Cards</ToggleGroupItem>
                <ToggleGroupItem value="list">List</ToggleGroupItem>
              </ToggleGroup>
            </div>
            <Tabs
              className="mt-3.5"
              value={category}
              onValueChange={(v) => pickCategory(v as PlanCategory)}
            >
              <TabsList variant="line" className="flex-wrap">
                {planCategories.map((c) => (
                  <TabsTrigger key={c.id} value={c.id}>
                    {c.label}
                  </TabsTrigger>
                ))}
              </TabsList>
            </Tabs>
            <RadioGroup
              value={planId}
              onValueChange={(v) => setPlanId(v as string)}
              className="mt-3.5 block"
            >
              {view === "list" ? (
                <Table>
                  <TableHeader>
                    <TableRow className="hover:bg-transparent">
                      <TableHead className="w-9" />
                      <TableHead>Plan</TableHead>
                      <TableHead>vCPU</TableHead>
                      <TableHead>RAM</TableHead>
                      <TableHead>SSD</TableHead>
                      <TableHead>Transfer</TableHead>
                      <TableHead numeric>Price / mo</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {plans[category].map((p) => {
                      const selected = p.id === planId;
                      return (
                        <TableRow
                          key={p.id}
                          data-state={selected ? "selected" : undefined}
                          className="cursor-pointer [&>td]:py-3.5"
                          onClick={() => setPlanId(p.id)}
                        >
                          <TableCell>
                            <RadioGroupItem value={p.id} aria-label={p.id} />
                          </TableCell>
                          <TableCell className="font-mono text-[12.5px]">
                            {p.id}
                          </TableCell>
                          <TableCell className="font-mono">{p.vcpu}</TableCell>
                          <TableCell className="font-mono">
                            {p.ram} GB
                          </TableCell>
                          <TableCell className="font-mono">
                            {p.ssd} GB
                          </TableCell>
                          <TableCell className="font-mono text-muted-foreground">
                            {p.transfer} TB
                          </TableCell>
                          <TableCell
                            numeric
                            className={selected ? "font-semibold" : ""}
                          >
                            {formatUsd(p.price)}
                          </TableCell>
                        </TableRow>
                      );
                    })}
                  </TableBody>
                </Table>
              ) : (
                <div className="grid gap-3 sm:grid-cols-2">
                  {plans[category].map((p) => (
                    <FieldLabel key={p.id} htmlFor={`plan-${p.id}`}>
                      <Field orientation="horizontal">
                        <FieldContent>
                          <FieldTitle className="font-mono text-[12.5px]">
                            {p.id}
                          </FieldTitle>
                          <FieldDescription>
                            {p.vcpu} vCPU · {p.ram} GB RAM · {p.ssd} GB SSD
                          </FieldDescription>
                          <span className="font-mono text-sm">
                            {formatUsd(p.price)} / mo
                          </span>
                        </FieldContent>
                        <RadioGroupItem id={`plan-${p.id}`} value={p.id} />
                      </Field>
                    </FieldLabel>
                  ))}
                </div>
              )}
            </RadioGroup>
          </StepCard>

          <StepCard
            index="04"
            title="Choose an image"
            description="The operating system installed on first boot."
          >
            <RadioGroup
              value={imageId}
              onValueChange={(v) => setImageId(v as string)}
              className="grid-cols-2 gap-3 md:grid-cols-4"
            >
              {images.map((img) => (
                <FieldLabel key={img.id} htmlFor={`img-${img.id}`}>
                  <Field className="gap-3">
                    <div className="flex items-center gap-2.5">
                      <OsLogo color={img.color} ubuntu={img.id === "ubuntu"} />
                      <span className="flex-1 text-sm font-medium">
                        {img.name}
                      </span>
                      <RadioGroupItem id={`img-${img.id}`} value={img.id} />
                    </div>
                    <Select
                      value={versions[img.id]}
                      items={img.versions}
                      onValueChange={(v) => {
                        setVersions((prev) => ({
                          ...prev,
                          [img.id]: v as string,
                        }));
                        setImageId(img.id);
                      }}
                    >
                      <SelectTrigger
                        size="sm"
                        className="w-full"
                        aria-label={`${img.name} version`}
                      >
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent alignItemWithTrigger={false}>
                        {img.versions.map((v) => (
                          <SelectItem key={v.value} value={v.value}>
                            {v.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </Field>
                </FieldLabel>
              ))}
            </RadioGroup>
          </StepCard>

          <StepCard
            index="05"
            title="Billing term"
            description="Pay for the full term up front. Longer terms are cheaper."
          >
            <div className="flex flex-wrap items-center justify-between gap-4">
              <ToggleGroup
                elevation="raised"
                variant="segmented"
                className="flex-wrap"
                value={[months]}
                onValueChange={(v) => v[0] && setMonths(v[0] as string)}
              >
                {billingTerms.map((t) => (
                  <ToggleGroupItem
                    key={t.months}
                    value={String(t.months)}
                    className="px-3.5"
                  >
                    {t.label}
                    {t.discount ? (
                      <Badge
                        variant="success"
                        shape="number"
                        className="ml-1 h-[18px]"
                      >
                        −{t.discount}%
                      </Badge>
                    ) : null}
                  </ToggleGroupItem>
                ))}
              </ToggleGroup>
              <Label className="gap-2.5 text-[13.5px]">
                <Switch checked={autoRenew} onCheckedChange={setAutoRenew} />
                Auto-renew
              </Label>
            </div>
          </StepCard>
        </div>

        <div
          ref={summaryRef}
          className="w-full scroll-mt-6 lg:sticky lg:top-6 lg:w-[330px] lg:shrink-0"
        >
          <SummaryCard
            category={categoryLabel}
            location={location}
            plan={plan}
            image={image}
            version={versions[image.id]}
            termLabel={term.label}
            total={total}
          />
        </div>
      </div>
    </div>
  );
}

export default function LayerbeatCreateExample() {
  return (
    <AppShell>
      <CreatePage />
    </AppShell>
  );
}

import { IconPlaceholder } from "@/edmi/icon-placeholder";

type P = { className?: string };

export const HomeIcon = ({ className }: P) => (
  <IconPlaceholder
    lucide="HouseIcon"
    tabler="IconHome"
    hugeicons="Home01Icon"
    phosphor="HouseIcon"
    remixicon="RiHomeLine"
    className={className}
  />
);
export const ServerIcon = ({ className }: P) => (
  <IconPlaceholder
    lucide="ServerIcon"
    tabler="IconServer"
    hugeicons="ServerStackIcon"
    phosphor="HardDrivesIcon"
    remixicon="RiHardDriveLine"
    className={className}
  />
);
export const CreditCardIcon = ({ className }: P) => (
  <IconPlaceholder
    lucide="CreditCardIcon"
    tabler="IconCreditCard"
    hugeicons="CreditCardIcon"
    phosphor="CreditCardIcon"
    remixicon="RiBankCardLine"
    className={className}
  />
);
export const KeyIcon = ({ className }: P) => (
  <IconPlaceholder
    lucide="KeyIcon"
    tabler="IconKey"
    hugeicons="Key01Icon"
    phosphor="KeyIcon"
    remixicon="RiKeyLine"
    className={className}
  />
);
export const UsersIcon = ({ className }: P) => (
  <IconPlaceholder
    lucide="UsersIcon"
    tabler="IconUsers"
    hugeicons="UserGroupIcon"
    phosphor="UsersThreeIcon"
    remixicon="RiGroupLine"
    className={className}
  />
);
export const FileTextIcon = ({ className }: P) => (
  <IconPlaceholder
    lucide="FileTextIcon"
    tabler="IconFileDescription"
    hugeicons="File01Icon"
    phosphor="FileTextIcon"
    remixicon="RiFileTextLine"
    className={className}
  />
);
export const ArrowUpRightIcon = ({ className }: P) => (
  <IconPlaceholder
    lucide="ArrowUpRightIcon"
    tabler="IconArrowUpRight"
    hugeicons="ArrowUpRightIcon"
    phosphor="ArrowUpRightIcon"
    remixicon="RiArrowRightUpLine"
    className={className}
  />
);
export const SunIcon = ({ className }: P) => (
  <IconPlaceholder
    lucide="SunIcon"
    tabler="IconSun"
    hugeicons="Sun03Icon"
    phosphor="SunIcon"
    remixicon="RiSunLine"
    className={className}
  />
);
export const MoonIcon = ({ className }: P) => (
  <IconPlaceholder
    lucide="MoonIcon"
    tabler="IconMoon"
    hugeicons="MoonIcon"
    phosphor="MoonIcon"
    remixicon="RiMoonLine"
    className={className}
  />
);
export const RefreshIcon = ({ className }: P) => (
  <IconPlaceholder
    lucide="RefreshCwIcon"
    tabler="IconRefresh"
    hugeicons="RefreshIcon"
    phosphor="ArrowClockwiseIcon"
    remixicon="RiRefreshLine"
    className={className}
  />
);
export const CaretUpDownIcon = ({ className }: P) => (
  <IconPlaceholder
    lucide="ChevronsUpDownIcon"
    tabler="IconSelector"
    hugeicons="UnfoldMoreIcon"
    phosphor="CaretUpDownIcon"
    remixicon="RiArrowUpDownLine"
    className={className}
  />
);
export const CaretDownIcon = ({ className }: P) => (
  <IconPlaceholder
    lucide="ChevronDownIcon"
    tabler="IconChevronDown"
    hugeicons="ArrowDown01Icon"
    phosphor="CaretDownIcon"
    remixicon="RiArrowDownSLine"
    className={className}
  />
);
export const CheckCircleIcon = ({ className }: P) => (
  <IconPlaceholder
    lucide="CircleCheckIcon"
    tabler="IconCircleCheck"
    hugeicons="CheckmarkCircle02Icon"
    phosphor="CheckCircleIcon"
    remixicon="RiCheckboxCircleLine"
    className={className}
  />
);
export const CpuIcon = ({ className }: P) => (
  <IconPlaceholder
    lucide="CpuIcon"
    tabler="IconCpu"
    hugeicons="CpuIcon"
    phosphor="CpuIcon"
    remixicon="RiCpuLine"
    className={className}
  />
);
export const MemoryIcon = ({ className }: P) => (
  <IconPlaceholder
    lucide="MemoryStickIcon"
    tabler="IconCpu2"
    hugeicons="RamMemoryIcon"
    phosphor="MemoryIcon"
    remixicon="RiRamLine"
    className={className}
  />
);
export const LogoMark = ({ className }: P) => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="3.2"
    strokeLinecap="round"
    className={className}
    aria-hidden
  >
    <path d="M19 12a7 7 0 1 1-7-7" />
    <path d="M12 9a3 3 0 1 0 3 3" />
  </svg>
);

// Sample data for the Layerbeat "Create a BeatVPS" example. Prices are monthly USD. Shared by react.tsx, vue.vue and svelte.svelte.

export type Flag =
  | { dir: "h"; colors: [string, string, string] }
  | { dir: "v"; colors: [string, string, string] };

export type Location = {
  id: string;
  city: string;
  country: string;
  region: string;
  latency: number;
  flag: Flag;
};

const DE: Flag = { dir: "h", colors: ["#1a1a1a", "#dd0000", "#ffce00"] };
const NL: Flag = { dir: "h", colors: ["#ae1c28", "#ffffff", "#21468b"] };
const FR: Flag = { dir: "v", colors: ["#0055a4", "#ffffff", "#ef4135"] };
const SG: Flag = { dir: "h", colors: ["#ef3340", "#ffffff", "#ffffff"] };
const JP: Flag = { dir: "h", colors: ["#ffffff", "#bc002d", "#ffffff"] };
const BR: Flag = { dir: "h", colors: ["#009c3b", "#ffdf00", "#009c3b"] };
const US: Flag = { dir: "h", colors: ["#b22234", "#ffffff", "#3c3b6e"] };

export const regions = [
  "Asia",
  "Europe",
  "South America",
  "North America",
] as const;
export type Region = (typeof regions)[number];

export const locations: Location[] = [
  {
    id: "sin",
    city: "Singapore",
    country: "SG",
    region: "Asia",
    latency: 168,
    flag: SG,
  },
  {
    id: "tyo",
    city: "Tokyo",
    country: "JP",
    region: "Asia",
    latency: 210,
    flag: JP,
  },
  {
    id: "fra",
    city: "Frankfurt",
    country: "DE",
    region: "Europe",
    latency: 28,
    flag: DE,
  },
  {
    id: "ams",
    city: "Amsterdam",
    country: "NL",
    region: "Europe",
    latency: 32,
    flag: NL,
  },
  {
    id: "par",
    city: "Paris",
    country: "FR",
    region: "Europe",
    latency: 32,
    flag: FR,
  },
  {
    id: "gru",
    city: "Sao Paulo",
    country: "BR",
    region: "South America",
    latency: 190,
    flag: BR,
  },
  {
    id: "nyc",
    city: "New York",
    country: "US",
    region: "North America",
    latency: 92,
    flag: US,
  },
  {
    id: "sfo",
    city: "San Francisco",
    country: "US",
    region: "North America",
    latency: 148,
    flag: US,
  },
];

export type Plan = {
  id: string;
  vcpu: number;
  ram: number;
  ssd: number;
  transfer: number;
  price: number;
};

export const planCategories = [
  { id: "general", label: "General VPS" },
  { id: "fast", label: "Fast VPS" },
  { id: "dedicated", label: "Dedicated CPU" },
] as const;
export type PlanCategory = (typeof planCategories)[number]["id"];

export const configurationCount = 28;

export const plans: Record<PlanCategory, Plan[]> = {
  general: [
    { id: "BEAT1C1G-S", vcpu: 1, ram: 1, ssd: 15, transfer: 1, price: 1.98 },
    { id: "BEAT2C2G-S", vcpu: 2, ram: 2, ssd: 30, transfer: 2, price: 3.38 },
    { id: "BEAT2C4G-S", vcpu: 2, ram: 4, ssd: 50, transfer: 3, price: 5.9 },
    { id: "BEAT4C8G-S", vcpu: 4, ram: 8, ssd: 100, transfer: 4, price: 11.4 },
    { id: "BEAT8C16G-S", vcpu: 8, ram: 16, ssd: 200, transfer: 5, price: 22.8 },
  ],
  fast: [
    { id: "BEAT1C2G-F", vcpu: 1, ram: 2, ssd: 25, transfer: 2, price: 4.2 },
    { id: "BEAT2C4G-F", vcpu: 2, ram: 4, ssd: 50, transfer: 3, price: 8.6 },
    { id: "BEAT4C8G-F", vcpu: 4, ram: 8, ssd: 100, transfer: 5, price: 16.9 },
    { id: "BEAT8C16G-F", vcpu: 8, ram: 16, ssd: 200, transfer: 8, price: 33.4 },
  ],
  dedicated: [
    { id: "BEAT2C8G-D", vcpu: 2, ram: 8, ssd: 80, transfer: 4, price: 24 },
    { id: "BEAT4C16G-D", vcpu: 4, ram: 16, ssd: 160, transfer: 6, price: 46 },
    { id: "BEAT8C32G-D", vcpu: 8, ram: 32, ssd: 320, transfer: 10, price: 89 },
  ],
};

export type Image = {
  id: string;
  name: string;
  color: string;
  versions: { value: string; label: string }[];
};

export const images: Image[] = [
  {
    id: "ubuntu",
    name: "Ubuntu",
    color: "#e95420",
    versions: [
      { value: "24.04", label: "24.04 LTS" },
      { value: "22.04", label: "22.04 LTS" },
    ],
  },
  {
    id: "debian",
    name: "Debian",
    color: "#a80030",
    versions: [
      { value: "12", label: "12" },
      { value: "11", label: "11" },
    ],
  },
  {
    id: "rocky",
    name: "Rocky",
    color: "#10b981",
    versions: [
      { value: "9.4", label: "9.4" },
      { value: "8.10", label: "8.10" },
    ],
  },
  {
    id: "alma",
    name: "Alma",
    color: "#0f3d6b",
    versions: [
      { value: "9.4", label: "9.4" },
      { value: "8.10", label: "8.10" },
    ],
  },
];

export const billingTerms = [
  { months: 1, label: "1 month", discount: 0 },
  { months: 3, label: "3 months", discount: 5 },
  { months: 6, label: "6 months", discount: 8 },
  { months: 12, label: "12 months", discount: 12 },
];

export const workspaces = ["AChipsDAO", "Layerbeat Labs", "Personal"];

export const availableCredit = 50.01;

export const formatUsd = (n: number) => `$${n.toFixed(2)}`;

export const navPlatform = [
  { label: "Overview", icon: "home" },
  { label: "BeatVPS", icon: "server", active: true, badge: "1" },
  { label: "Billing", icon: "billing" },
] as const;
export const navWorkspace = [
  { label: "Access & keys", icon: "key" },
  { label: "Team", icon: "team" },
] as const;

<script setup lang="ts">
import {
  ChevronDownIcon,
  ChevronsUpDownIcon,
  CircleCheckIcon,
  MoonIcon,
  RefreshCwIcon,
  SunIcon,
} from "@lucide/vue";
import { computed, ref } from "vue";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
import { Switch } from "@/components/ui/switch";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import {
  availableCredit,
  billingTerms,
  configurationCount,
  formatUsd,
  images,
  locations,
  navPlatform,
  navWorkspace,
  planCategories,
  plans,
  regions,
  workspaces,
} from "./data";
import AppSidebar from "./vue/AppSidebar.vue";
import Flag from "./vue/Flag.vue";
import HeaderTrigger from "./vue/HeaderTrigger.vue";
import LogoMark from "./vue/LogoMark.vue";
import OsLogo from "./vue/OsLogo.vue";
import StepCard from "./vue/StepCard.vue";
import SummaryCard from "./vue/SummaryCard.vue";

const summary = ref<HTMLElement | null>(null);
const step = ref("configure");
const name = ref("");
const region = ref<string>("Europe");
const locationId = ref("fra");
const category = ref<keyof typeof plans>("general");
const planId = ref("BEAT2C2G-S");
const view = ref("list");
const imageId = ref("ubuntu");
const versions = ref<Record<string, string>>(
  Object.fromEntries(images.map((i) => [i.id, i.versions[0].value])),
);
const months = ref("1");
const autoRenew = ref(true);
const workspace = ref(workspaces[0]);

const allPlans = Object.values(plans).flat();
const location = computed(
  () => locations.find((l) => l.id === locationId.value) ?? locations[0],
);
const plan = computed(
  () => allPlans.find((p) => p.id === planId.value) ?? plans.general[0],
);
const image = computed(
  () => images.find((i) => i.id === imageId.value) ?? images[0],
);
const term = computed(
  () =>
    billingTerms.find((t) => String(t.months) === months.value) ??
    billingTerms[0],
);
const total = computed(
  () => plan.value.price * term.value.months * (1 - term.value.discount / 100),
);
const categoryLabel = computed(
  () => planCategories.find((c) => c.id === category.value)?.label ?? "",
);

function pickStep(v: string | number) {
  step.value = String(v);
  if (v === "review") summary.value?.scrollIntoView({ behavior: "smooth" });
}
function pickRegion(v: string | number) {
  region.value = String(v);
  const first = locations.find((l) => l.region === region.value);
  if (first) locationId.value = first.id;
}
function pickCategory(v: string | number) {
  category.value = String(v) as keyof typeof plans;
  planId.value = plans[category.value][0].id;
}
function pickView(v: unknown) {
  if (v) view.value = String(v);
}
function pickTerm(v: unknown) {
  if (v) months.value = String(v);
}
function pickVersion(id: string, v: unknown) {
  if (typeof v === "string") versions.value[id] = v;
  imageId.value = id;
}
</script>

<template>
  <SidebarProvider class="h-svh min-h-0 overflow-hidden" style="--sidebar-width: 15rem">
    <AppSidebar :platform="navPlatform" :workspace="navWorkspace" />
    <SidebarInset class="min-h-0 min-w-0 overflow-hidden bg-background">
      <header class="flex h-16 shrink-0 items-center justify-between gap-3 border-b border-border bg-card px-4 md:px-7">
        <div class="flex min-w-0 items-center gap-1">
          <HeaderTrigger />
          <DropdownMenu>
            <DropdownMenuTrigger as-child>
              <Button variant="ghost" class="gap-2.5 px-2 font-medium">
                <LogoMark class="size-[18px]" />
                {{ workspace }}
                <ChevronsUpDownIcon class="text-muted-foreground" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start" class="min-w-48">
              <DropdownMenuLabel>Workspaces</DropdownMenuLabel>
              <DropdownMenuItem v-for="w in workspaces" :key="w" @select="workspace = w">{{ w }}</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
          <span class="px-1 text-muted-foreground max-sm:hidden">/</span>
          <span class="text-muted-foreground max-sm:hidden">BeatVPS</span>
        </div>
        <div class="flex items-center gap-3 sm:gap-[18px]">
          <span class="flex items-center gap-[7px] text-[13px] text-muted-foreground max-md:hidden">
            <span class="size-1.5 rounded-full bg-success" />
            Connected
          </span>
          <div class="flex items-center gap-2 text-muted-foreground">
            <SunIcon class="size-4" />
            <Switch aria-label="Dark mode" />
            <MoonIcon class="size-4" />
          </div>
          <Button variant="ghost" size="sm" class="max-sm:hidden">
            <RefreshCwIcon />
            Refresh
          </Button>
          <div class="flex items-center gap-1.5">
            <Avatar class="size-8">
              <AvatarFallback class="text-xs">AR</AvatarFallback>
            </Avatar>
            <ChevronDownIcon class="size-3.5 text-muted-foreground max-sm:hidden" />
          </div>
        </div>
      </header>

      <div class="min-h-0 flex-1 overflow-y-auto overscroll-contain">
        <div class="mx-auto w-full max-w-[1328px] px-4 pt-8 pb-12 md:px-9">
          <h1 class="text-[32px] font-semibold tracking-[-0.8px]">Create a BeatVPS</h1>
          <p class="mt-2 text-[15px] text-muted-foreground">
            A place for your next project. Choose a location, configuration and image.
          </p>

          <Card class="mt-[26px] p-1.5 [--card-spacing:6px]">
            <Tabs :model-value="step" @update:model-value="pickStep">
              <TabsList variant="pills" class="flex-wrap">
                <TabsTrigger value="configure" class="gap-2"><span class="font-mono text-[11.5px]">01</span> Configure</TabsTrigger>
                <TabsTrigger value="review" class="gap-2"><span class="font-mono text-[11.5px]">02</span> Review &amp; purchase</TabsTrigger>
              </TabsList>
            </Tabs>
          </Card>

          <div class="mt-6 flex flex-col items-start gap-6 lg:flex-row">
            <div class="flex w-full min-w-0 flex-1 flex-col gap-5">
              <StepCard index="01" title="Name your server">
                <Field>
                  <Label for="server-name">Server name</Label>
                  <Input id="server-name" v-model="name" placeholder="my-first-server" autocomplete="off" />
                  <FieldDescription>A name to identify this server in your workspace.</FieldDescription>
                </Field>
              </StepCard>

              <StepCard
                index="02"
                title="Choose a location"
                description="Place your server close to your users. Each location has its own configurations and images."
              >
                <Tabs :model-value="region" @update:model-value="pickRegion">
                  <TabsList variant="line" class="mb-[18px] flex-wrap">
                    <TabsTrigger v-for="r in regions" :key="r" :value="r">{{ r }}</TabsTrigger>
                  </TabsList>
                </Tabs>
                <RadioGroup v-model="locationId" class="grid-cols-[repeat(auto-fill,minmax(170px,180px))] gap-3">
                  <template v-for="l in locations" :key="l.id">
                    <FieldLabel v-show="l.region === region" :for="`loc-${l.id}`">
                      <Field orientation="horizontal" class="items-center gap-2.5 px-3.5 py-3">
                        <Flag :flag="l.flag" />
                        <span class="flex-1 text-sm font-medium whitespace-nowrap">{{ l.city }}</span>
                        <CircleCheckIcon v-if="l.id === locationId" class="size-4 text-brand" />
                        <span v-else class="font-mono text-[11px] whitespace-nowrap text-muted-foreground">{{ l.latency }} ms</span>
                        <RadioGroupItem :id="`loc-${l.id}`" :value="l.id" class="sr-only" />
                      </Field>
                    </FieldLabel>
                  </template>
                </RadioGroup>
              </StepCard>

              <StepCard index="03" title="Choose your configuration">
                <div class="-mt-1 flex items-center justify-between gap-3">
                  <span class="text-[13.5px] text-muted-foreground">{{ configurationCount }} configurations · monthly prices</span>
                  <ToggleGroup type="single" variant="segmented" :model-value="view" aria-label="View" @update:model-value="pickView">
                    <ToggleGroupItem value="cards">Cards</ToggleGroupItem>
                    <ToggleGroupItem value="list">List</ToggleGroupItem>
                  </ToggleGroup>
                </div>
                <Tabs class="mt-3.5" :model-value="category" @update:model-value="pickCategory">
                  <TabsList variant="line" class="flex-wrap">
                    <TabsTrigger v-for="c in planCategories" :key="c.id" :value="c.id">{{ c.label }}</TabsTrigger>
                  </TabsList>
                </Tabs>
                <RadioGroup v-model="planId" class="mt-3.5 block">
                  <Table v-if="view === 'list'">
                    <TableHeader>
                      <TableRow class="hover:bg-transparent">
                        <TableHead class="w-9" />
                        <TableHead>Plan</TableHead>
                        <TableHead>vCPU</TableHead>
                        <TableHead>RAM</TableHead>
                        <TableHead>SSD</TableHead>
                        <TableHead>Transfer</TableHead>
                        <TableHead numeric>Price / mo</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      <TableRow
                        v-for="p in plans[category]"
                        :key="p.id"
                        :data-state="p.id === planId ? 'selected' : undefined"
                        class="cursor-pointer [&>td]:py-3.5"
                        @click="planId = p.id"
                      >
                        <TableCell>
                          <RadioGroupItem :value="p.id" :aria-label="p.id" @click.stop />
                        </TableCell>
                        <TableCell class="font-mono text-[12.5px]">{{ p.id }}</TableCell>
                        <TableCell class="font-mono">{{ p.vcpu }}</TableCell>
                        <TableCell class="font-mono">{{ p.ram }} GB</TableCell>
                        <TableCell class="font-mono">{{ p.ssd }} GB</TableCell>
                        <TableCell class="font-mono text-muted-foreground">{{ p.transfer }} TB</TableCell>
                        <TableCell numeric :class="p.id === planId ? 'font-semibold' : ''">{{ formatUsd(p.price) }}</TableCell>
                      </TableRow>
                    </TableBody>
                  </Table>
                  <div v-else class="grid gap-3 sm:grid-cols-2">
                    <FieldLabel v-for="p in plans[category]" :key="p.id" :for="`plan-${p.id}`">
                      <Field orientation="horizontal">
                        <div class="flex flex-1 flex-col gap-1">
                          <span class="font-mono text-[12.5px] font-medium">{{ p.id }}</span>
                          <FieldDescription>{{ p.vcpu }} vCPU · {{ p.ram }} GB RAM · {{ p.ssd }} GB SSD</FieldDescription>
                          <span class="font-mono text-sm">{{ formatUsd(p.price) }} / mo</span>
                        </div>
                        <RadioGroupItem :id="`plan-${p.id}`" :value="p.id" />
                      </Field>
                    </FieldLabel>
                  </div>
                </RadioGroup>
              </StepCard>

              <StepCard index="04" title="Choose an image" description="The operating system installed on first boot.">
                <RadioGroup v-model="imageId" class="grid-cols-2 gap-3 md:grid-cols-4">
                  <FieldLabel v-for="img in images" :key="img.id" :for="`img-${img.id}`">
                    <Field class="gap-3">
                      <div class="flex items-center gap-2.5">
                        <OsLogo :color="img.color" :ubuntu="img.id === 'ubuntu'" />
                        <span class="flex-1 text-sm font-medium">{{ img.name }}</span>
                        <RadioGroupItem :id="`img-${img.id}`" :value="img.id" />
                      </div>
                      <Select :model-value="versions[img.id]" @update:model-value="(v) => pickVersion(img.id, v)">
                        <SelectTrigger size="sm" class="w-full" :aria-label="`${img.name} version`" @click.stop>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem v-for="v in img.versions" :key="v.value" :value="v.value">{{ v.label }}</SelectItem>
                        </SelectContent>
                      </Select>
                    </Field>
                  </FieldLabel>
                </RadioGroup>
              </StepCard>

              <StepCard index="05" title="Billing term" description="Pay for the full term up front. Longer terms are cheaper.">
                <div class="flex flex-wrap items-center justify-between gap-4">
                  <ToggleGroup type="single" elevation="raised" variant="segmented" class="flex-wrap" :model-value="months" aria-label="Billing term" @update:model-value="pickTerm">
                    <ToggleGroupItem v-for="t in billingTerms" :key="t.months" :value="String(t.months)" class="px-3.5">
                      {{ t.label }}
                      <Badge v-if="t.discount" variant="success" shape="number" class="ml-1 h-[18px]">−{{ t.discount }}%</Badge>
                    </ToggleGroupItem>
                  </ToggleGroup>
                  <Label class="gap-2.5 text-[13.5px]">
                    <Switch v-model="autoRenew" />
                    Auto-renew
                  </Label>
                </div>
              </StepCard>
            </div>

            <div ref="summary" class="w-full scroll-mt-6 lg:sticky lg:top-6 lg:w-[330px] lg:shrink-0">
              <SummaryCard
                :category="categoryLabel"
                :location="location"
                :plan="plan"
                :image="image"
                :version="versions[image.id]"
                :term-label="term.label"
                :total="formatUsd(total)"
                :credit="formatUsd(availableCredit)"
              />
            </div>
          </div>
        </div>
      </div>
    </SidebarInset>
  </SidebarProvider>
</template>

<script setup lang="ts">
import {
  ArrowUpRightIcon,
  CreditCardIcon,
  FileTextIcon,
  HomeIcon,
  LockKeyholeIcon,
  ServerIcon,
  UserIcon,
} from "@lucide/vue";
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarTrigger,
} from "@/components/ui/sidebar";
import LogoMark from "./LogoMark.vue";

type NavItem = { label: string; icon: string; active?: boolean; badge?: string };
defineProps<{ platform: readonly NavItem[]; workspace: readonly NavItem[] }>();

const icons: Record<string, unknown> = {
  home: HomeIcon,
  server: ServerIcon,
  billing: CreditCardIcon,
  key: LockKeyholeIcon,
  team: UserIcon,
};
</script>

<template>
  <Sidebar collapsible="offcanvas">
    <!-- The sidebar subtree carries its own `dark` class: it stays navy in light mode (scoped theming). -->
    <div class="dark flex h-full w-full flex-col bg-[#0b2a6f] text-sidebar-foreground">
      <SidebarHeader class="flex-row items-center justify-between px-4 pt-5 pb-3">
        <a href="#/" class="flex items-center gap-2 font-brand text-xl font-semibold tracking-[-0.4px] text-white">
          <LogoMark class="size-6" />
          Layerbeat
        </a>
        <SidebarTrigger class="text-muted-foreground hover:bg-[color-mix(in_srgb,white_10%,#0b2a6f)] hover:text-foreground" />
      </SidebarHeader>
      <SidebarContent class="px-2">
        <SidebarGroup v-for="group in [{ label: 'Platform', items: platform }, { label: 'Workspace', items: workspace }]" :key="group.label">
          <SidebarGroupLabel class="text-[11.5px] tracking-[0.6px] uppercase">{{ group.label }}</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              <SidebarMenuItem v-for="item in group.items" :key="item.label">
                <SidebarMenuButton
                  as-child
                  :is-active="item.active"
                  class="h-9 text-muted-foreground hover:bg-[color-mix(in_srgb,white_5%,#0b2a6f)] data-[active=true]:bg-[color-mix(in_srgb,white_9%,#0b2a6f)] data-[active=true]:text-foreground data-[active=true]:shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--brand)_55%,#0b2a6f)]"
                >
                  <a href="#/">
                    <component :is="icons[item.icon]" />
                    <span>{{ item.label }}</span>
                  </a>
                </SidebarMenuButton>
                <SidebarMenuBadge v-if="item.badge" class="rounded-md border border-border bg-secondary text-secondary-foreground">{{ item.badge }}</SidebarMenuBadge>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
      <SidebarFooter class="px-2 pb-4">
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton as-child class="h-9 text-muted-foreground hover:bg-[color-mix(in_srgb,white_5%,#0b2a6f)]">
              <a href="#/api">
                <FileTextIcon />
                <span class="flex-1">API documentation</span>
                <ArrowUpRightIcon class="size-3.5!" />
              </a>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarFooter>
    </div>
  </Sidebar>
</template>

<script setup lang="ts">
defineProps<{ flag: { dir: "h" | "v"; colors: string[] } }>();
</script>

<template>
  <svg width="20" height="14" viewBox="0 0 20 14" class="shrink-0 rounded-[2px]" aria-hidden="true">
    <template v-if="flag.dir === 'h'">
      <rect v-for="(c, i) in flag.colors" :key="i" x="0" :y="(i * 14) / 3" width="20" :height="14 / 3 + 0.3" :fill="c" />
    </template>
    <template v-else>
      <rect v-for="(c, i) in flag.colors" :key="i" :x="(i * 20) / 3" y="0" :width="20 / 3 + 0.3" height="14" :fill="c" />
    </template>
  </svg>
</template>

<script setup lang="ts">
import { SidebarTrigger, useSidebar } from "@/components/ui/sidebar";

// The sidebar owns the toggle while it is open on desktop; the header takes over when it is closed or on mobile.
const { isMobile, state } = useSidebar();
</script>

<template>
  <SidebarTrigger v-if="isMobile || state === 'collapsed'" />
</template>

<template>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" aria-hidden="true">
    <path d="M19 12a7 7 0 1 1-7-7" />
    <path d="M12 9a3 3 0 1 0 3 3" />
  </svg>
</template>

<script setup lang="ts">
defineProps<{ ubuntu?: boolean; color: string }>();
</script>

<template>
  <svg width="22" height="22" viewBox="0 0 24 24" class="shrink-0" aria-hidden="true">
    <circle cx="12" cy="12" r="11" :fill="color" />
    <template v-if="ubuntu">
      <circle cx="12" cy="12" r="5.2" fill="none" stroke="#fff" stroke-width="2.2" />
      <circle cx="5.6" cy="12" r="2" fill="#fff" />
      <circle cx="15.2" cy="6.5" r="2" fill="#fff" />
      <circle cx="15.2" cy="17.5" r="2" fill="#fff" />
    </template>
  </svg>
</template>

<script setup lang="ts">
import { Card } from "@/components/ui/card";
import { Kbd } from "@/components/ui/kbd";

defineProps<{ index: string; title: string; description?: string }>();
</script>

<template>
  <Card class="gap-0 px-[26px] pt-[22px] pb-[26px] [--card-spacing:0px]">
    <div class="flex items-center gap-3">
      <Kbd class="h-6 min-w-7 text-[11.5px]">{{ index }}</Kbd>
      <h2 class="text-lg font-semibold tracking-[-0.2px]">{{ title }}</h2>
    </div>
    <p v-if="description" class="mt-3 text-sm text-muted-foreground">{{ description }}</p>
    <div class="mt-[18px]"><slot /></div>
  </Card>
</template>

<script setup lang="ts">
import { GaugeIcon, LayoutGridIcon, ServerIcon, WalletIcon } from "@lucide/vue";
import { computed } from "vue";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import Flag from "./Flag.vue";
import OsLogo from "./OsLogo.vue";

const props = defineProps<{
  category: string;
  location: { city: string; country: string; flag: { dir: "h" | "v"; colors: string[] } };
  plan: { id: string; vcpu: number; ram: number; ssd: number };
  image: { id: string; name: string; color: string };
  version: string;
  termLabel: string;
  total: string;
  credit: string;
}>();

// Tailwind scans for whole class names, so each tint is spelled out.
const tints = [
  "border-[color-mix(in_srgb,var(--chart-1)_22%,transparent)] bg-[color-mix(in_srgb,var(--chart-1)_12%,var(--card))] text-chart-1",
  "border-[color-mix(in_srgb,var(--chart-2)_22%,transparent)] bg-[color-mix(in_srgb,var(--chart-2)_12%,var(--card))] text-chart-2",
  "border-[color-mix(in_srgb,var(--chart-3)_22%,transparent)] bg-[color-mix(in_srgb,var(--chart-3)_12%,var(--card))] text-chart-3",
];
const specs = computed(() => [
  { label: "vCPU", value: String(props.plan.vcpu), icon: GaugeIcon },
  { label: "RAM", value: `${props.plan.ram} GB`, icon: LayoutGridIcon },
  { label: "SSD", value: `${props.plan.ssd} GB`, icon: ServerIcon },
]);
const rows = computed(() => [
  ["Image", `${props.image.name} ${props.version}`],
  ["Billing term", props.termLabel],
  ["Location", `${props.location.city}, ${props.location.country}`],
]);
</script>

<template>
  <Card elevation="raised" class="gap-0 p-0 [--card-spacing:0px]">
    <div class="relative overflow-hidden border-b border-border-2 bg-[linear-gradient(160deg,var(--brand-soft),var(--card)_75%)] px-5 pt-5 pb-[18px]">
      <span class="absolute -right-[26px] -bottom-[30px] size-[110px] rounded-full bg-[color-mix(in_srgb,var(--chart-2)_35%,transparent)]" />
      <span class="absolute right-[30px] -bottom-10 h-[90px] w-[70px] rounded-[40px] bg-[color-mix(in_srgb,var(--chart-1)_30%,transparent)]" />
      <div class="relative flex items-center justify-between">
        <span class="inline-flex size-11 items-center justify-center rounded-xl border border-border bg-popover">
          <OsLogo :color="image.color" :ubuntu="image.id === 'ubuntu'" />
        </span>
        <Badge variant="brand" shape="pill">{{ category }}</Badge>
      </div>
      <div class="relative mt-4 text-[22px] font-semibold tracking-[-0.4px]">Your new server</div>
      <div class="relative mt-1 font-mono text-xs text-muted-foreground">{{ plan.id }}</div>
      <div class="relative mt-3.5 flex items-center gap-2 text-sm font-medium">
        <Flag :flag="location.flag" />
        {{ location.city }}
      </div>
    </div>
    <div class="flex flex-col gap-3.5 px-5 pt-[18px] pb-5">
      <div class="flex gap-2">
        <div v-for="(s, i) in specs" :key="s.label" :class="`flex-1 rounded-xl border px-3 py-2.5 ${tints[i]}`">
          <div class="flex items-center gap-1.5 text-[12.5px]">
            <component :is="s.icon" class="size-3.5" />
            <span class="text-foreground-2">{{ s.label }}</span>
          </div>
          <div class="mt-1.5 font-mono text-[17px] text-foreground">{{ s.value }}</div>
        </div>
      </div>
      <div v-for="r in rows" :key="r[0]" class="flex items-center justify-between text-[13.5px]">
        <span class="text-muted-foreground">{{ r[0] }}</span>
        <span class="font-medium">{{ r[1] }}</span>
      </div>
      <div class="rounded-xl border border-[color-mix(in_srgb,var(--brand)_25%,var(--popover))] bg-brand-soft px-4 py-3.5">
        <div class="text-[13px] text-foreground-2">Purchase total</div>
        <div class="mt-1 font-mono text-[30px] tracking-[-0.5px]">{{ total }}</div>
        <div class="mt-0.5 text-xs text-muted-foreground">Full term · USD</div>
      </div>
      <div class="flex items-center justify-between rounded-xl bg-success-soft px-3.5 py-2.5 text-[13.5px]">
        <span class="flex items-center gap-2">
          <WalletIcon class="size-[15px]" />
          Available credit
        </span>
        <span class="font-mono font-medium text-success-text">{{ credit }}</span>
      </div>
      <p class="rounded-xl border border-border px-3.5 py-3 text-xs leading-normal text-muted-foreground">
        Review your configuration before purchasing. Credit is used only when you confirm.
      </p>
      <Button elevation="raised" size="lg" class="w-full">Purchase server</Button>
      <Button variant="ghost" class="-mt-1.5 w-full">Save as draft</Button>
    </div>
  </Card>
</template>

// Sample data for the Layerbeat "Create a BeatVPS" example. Prices are monthly USD. Shared by react.tsx, vue.vue and svelte.svelte.

export type Flag =
  | { dir: "h"; colors: [string, string, string] }
  | { dir: "v"; colors: [string, string, string] };

export type Location = {
  id: string;
  city: string;
  country: string;
  region: string;
  latency: number;
  flag: Flag;
};

const DE: Flag = { dir: "h", colors: ["#1a1a1a", "#dd0000", "#ffce00"] };
const NL: Flag = { dir: "h", colors: ["#ae1c28", "#ffffff", "#21468b"] };
const FR: Flag = { dir: "v", colors: ["#0055a4", "#ffffff", "#ef4135"] };
const SG: Flag = { dir: "h", colors: ["#ef3340", "#ffffff", "#ffffff"] };
const JP: Flag = { dir: "h", colors: ["#ffffff", "#bc002d", "#ffffff"] };
const BR: Flag = { dir: "h", colors: ["#009c3b", "#ffdf00", "#009c3b"] };
const US: Flag = { dir: "h", colors: ["#b22234", "#ffffff", "#3c3b6e"] };

export const regions = [
  "Asia",
  "Europe",
  "South America",
  "North America",
] as const;
export type Region = (typeof regions)[number];

export const locations: Location[] = [
  {
    id: "sin",
    city: "Singapore",
    country: "SG",
    region: "Asia",
    latency: 168,
    flag: SG,
  },
  {
    id: "tyo",
    city: "Tokyo",
    country: "JP",
    region: "Asia",
    latency: 210,
    flag: JP,
  },
  {
    id: "fra",
    city: "Frankfurt",
    country: "DE",
    region: "Europe",
    latency: 28,
    flag: DE,
  },
  {
    id: "ams",
    city: "Amsterdam",
    country: "NL",
    region: "Europe",
    latency: 32,
    flag: NL,
  },
  {
    id: "par",
    city: "Paris",
    country: "FR",
    region: "Europe",
    latency: 32,
    flag: FR,
  },
  {
    id: "gru",
    city: "Sao Paulo",
    country: "BR",
    region: "South America",
    latency: 190,
    flag: BR,
  },
  {
    id: "nyc",
    city: "New York",
    country: "US",
    region: "North America",
    latency: 92,
    flag: US,
  },
  {
    id: "sfo",
    city: "San Francisco",
    country: "US",
    region: "North America",
    latency: 148,
    flag: US,
  },
];

export type Plan = {
  id: string;
  vcpu: number;
  ram: number;
  ssd: number;
  transfer: number;
  price: number;
};

export const planCategories = [
  { id: "general", label: "General VPS" },
  { id: "fast", label: "Fast VPS" },
  { id: "dedicated", label: "Dedicated CPU" },
] as const;
export type PlanCategory = (typeof planCategories)[number]["id"];

export const configurationCount = 28;

export const plans: Record<PlanCategory, Plan[]> = {
  general: [
    { id: "BEAT1C1G-S", vcpu: 1, ram: 1, ssd: 15, transfer: 1, price: 1.98 },
    { id: "BEAT2C2G-S", vcpu: 2, ram: 2, ssd: 30, transfer: 2, price: 3.38 },
    { id: "BEAT2C4G-S", vcpu: 2, ram: 4, ssd: 50, transfer: 3, price: 5.9 },
    { id: "BEAT4C8G-S", vcpu: 4, ram: 8, ssd: 100, transfer: 4, price: 11.4 },
    { id: "BEAT8C16G-S", vcpu: 8, ram: 16, ssd: 200, transfer: 5, price: 22.8 },
  ],
  fast: [
    { id: "BEAT1C2G-F", vcpu: 1, ram: 2, ssd: 25, transfer: 2, price: 4.2 },
    { id: "BEAT2C4G-F", vcpu: 2, ram: 4, ssd: 50, transfer: 3, price: 8.6 },
    { id: "BEAT4C8G-F", vcpu: 4, ram: 8, ssd: 100, transfer: 5, price: 16.9 },
    { id: "BEAT8C16G-F", vcpu: 8, ram: 16, ssd: 200, transfer: 8, price: 33.4 },
  ],
  dedicated: [
    { id: "BEAT2C8G-D", vcpu: 2, ram: 8, ssd: 80, transfer: 4, price: 24 },
    { id: "BEAT4C16G-D", vcpu: 4, ram: 16, ssd: 160, transfer: 6, price: 46 },
    { id: "BEAT8C32G-D", vcpu: 8, ram: 32, ssd: 320, transfer: 10, price: 89 },
  ],
};

export type Image = {
  id: string;
  name: string;
  color: string;
  versions: { value: string; label: string }[];
};

export const images: Image[] = [
  {
    id: "ubuntu",
    name: "Ubuntu",
    color: "#e95420",
    versions: [
      { value: "24.04", label: "24.04 LTS" },
      { value: "22.04", label: "22.04 LTS" },
    ],
  },
  {
    id: "debian",
    name: "Debian",
    color: "#a80030",
    versions: [
      { value: "12", label: "12" },
      { value: "11", label: "11" },
    ],
  },
  {
    id: "rocky",
    name: "Rocky",
    color: "#10b981",
    versions: [
      { value: "9.4", label: "9.4" },
      { value: "8.10", label: "8.10" },
    ],
  },
  {
    id: "alma",
    name: "Alma",
    color: "#0f3d6b",
    versions: [
      { value: "9.4", label: "9.4" },
      { value: "8.10", label: "8.10" },
    ],
  },
];

export const billingTerms = [
  { months: 1, label: "1 month", discount: 0 },
  { months: 3, label: "3 months", discount: 5 },
  { months: 6, label: "6 months", discount: 8 },
  { months: 12, label: "12 months", discount: 12 },
];

export const workspaces = ["AChipsDAO", "Layerbeat Labs", "Personal"];

export const availableCredit = 50.01;

export const formatUsd = (n: number) => `$${n.toFixed(2)}`;

export const navPlatform = [
  { label: "Overview", icon: "home" },
  { label: "BeatVPS", icon: "server", active: true, badge: "1" },
  { label: "Billing", icon: "billing" },
] as const;
export const navWorkspace = [
  { label: "Access & keys", icon: "key" },
  { label: "Team", icon: "team" },
] as const;

<script lang="ts">
  import { Avatar, AvatarFallback } from "$lib/components/ui/avatar";
  import { Badge } from "$lib/components/ui/badge";
  import { Button } from "$lib/components/ui/button";
  import { Card } from "$lib/components/ui/card";
  import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
  import * as Field from "$lib/components/ui/field";
  import { Input } from "$lib/components/ui/input";
  import * as RadioGroup from "$lib/components/ui/radio-group";
  import * as Select from "$lib/components/ui/select";
  import * as Sidebar from "$lib/components/ui/sidebar";
  import { Switch } from "$lib/components/ui/switch";
  import * as Table from "$lib/components/ui/table";
  import * as Tabs from "$lib/components/ui/tabs";
  import * as ToggleGroup from "$lib/components/ui/toggle-group";
  import IconPlaceholder from "$lib/components/icon-placeholder/icon-placeholder.svelte";
  import {
    availableCredit,
    billingTerms,
    configurationCount,
    formatUsd,
    images,
    locations,
    navPlatform,
    navWorkspace,
    type PlanCategory,
    planCategories,
    plans,
    regions,
    workspaces,
  } from "./data";
  import AppSidebar from "./svelte/app-sidebar.svelte";
  import Flag from "./svelte/flag.svelte";
  import HeaderTrigger from "./svelte/header-trigger.svelte";
  import LogoMark from "./svelte/logo-mark.svelte";
  import OsLogo from "./svelte/os-logo.svelte";
  import StepCard from "./svelte/step-card.svelte";
  import SummaryCard from "./svelte/summary-card.svelte";

  let summary = $state<HTMLElement | null>(null);
  let step = $state("configure");
  let name = $state("");
  let region = $state<string>("Europe");
  let locationId = $state("fra");
  let category = $state<PlanCategory>("general");
  let planId = $state("BEAT2C2G-S");
  let view = $state("list");
  let imageId = $state("ubuntu");
  let versions = $state<Record<string, string>>(
    Object.fromEntries(images.map((i) => [i.id, i.versions[0].value])),
  );
  let months = $state("1");
  let autoRenew = $state(true);
  let workspace = $state(workspaces[0]);

  const allPlans = Object.values(plans).flat();
  const location = $derived(locations.find((l) => l.id === locationId) ?? locations[0]);
  const plan = $derived(allPlans.find((p) => p.id === planId) ?? plans.general[0]);
  const image = $derived(images.find((i) => i.id === imageId) ?? images[0]);
  const term = $derived(billingTerms.find((t) => String(t.months) === months) ?? billingTerms[0]);
  const total = $derived(plan.price * term.months * (1 - term.discount / 100));
  const categoryLabel = $derived(planCategories.find((c) => c.id === category)?.label ?? "");

  function pickStep(v: string) {
    step = v;
    if (v === "review") summary?.scrollIntoView({ behavior: "smooth" });
  }
  function pickRegion(v: string) {
    region = v;
    const first = locations.find((l) => l.region === v);
    if (first) locationId = first.id;
  }
  function pickCategory(v: string) {
    category = v as PlanCategory;
    planId = plans[category][0].id;
  }
</script>

<Sidebar.Provider class="h-svh min-h-0 overflow-hidden" style="--sidebar-width: 15rem">
  <AppSidebar platform={navPlatform} workspace={navWorkspace} />
  <Sidebar.Inset class="min-h-0 min-w-0 overflow-hidden bg-background">
    <header class="flex h-16 shrink-0 items-center justify-between gap-3 border-b border-border bg-card px-4 md:px-7">
      <div class="flex min-w-0 items-center gap-1">
        <HeaderTrigger />
        <DropdownMenu.Root>
          <DropdownMenu.Trigger>
            {#snippet child({ props })}
              <Button variant="ghost" class="gap-2.5 px-2 font-medium" {...props}>
                <LogoMark class="size-[18px]" />
                {workspace}
                <IconPlaceholder
                  lucide="ChevronsUpDownIcon"
                  tabler="IconSelector"
                  hugeicons="UnfoldMoreIcon"
                  phosphor="CaretUpDownIcon"
                  remixicon="RiArrowUpDownLine"
                  class="text-muted-foreground"
                />
              </Button>
            {/snippet}
          </DropdownMenu.Trigger>
          <DropdownMenu.Content align="start" class="min-w-48">
            <DropdownMenu.Label>Workspaces</DropdownMenu.Label>
            {#each workspaces as w (w)}
              <DropdownMenu.Item onSelect={() => (workspace = w)}>{w}</DropdownMenu.Item>
            {/each}
          </DropdownMenu.Content>
        </DropdownMenu.Root>
        <span class="px-1 text-muted-foreground max-sm:hidden">/</span>
        <span class="text-muted-foreground max-sm:hidden">BeatVPS</span>
      </div>
      <div class="flex items-center gap-3 sm:gap-[18px]">
        <span class="flex items-center gap-[7px] text-[13px] text-muted-foreground max-md:hidden">
          <span class="size-1.5 rounded-full bg-success"></span>
          Connected
        </span>
        <div class="flex items-center gap-2 text-muted-foreground">
          <IconPlaceholder
            lucide="SunIcon"
            tabler="IconSun"
            hugeicons="Sun03Icon"
            phosphor="SunIcon"
            remixicon="RiSunLine"
            class="size-4"
          />
          <Switch aria-label="Dark mode" />
          <IconPlaceholder
            lucide="MoonIcon"
            tabler="IconMoon"
            hugeicons="MoonIcon"
            phosphor="MoonIcon"
            remixicon="RiMoonLine"
            class="size-4"
          />
        </div>
        <Button variant="ghost" size="sm" class="max-sm:hidden">
          <IconPlaceholder
            lucide="RefreshCwIcon"
            tabler="IconRefresh"
            hugeicons="RefreshIcon"
            phosphor="ArrowClockwiseIcon"
            remixicon="RiRefreshLine"
          />
          Refresh
        </Button>
        <div class="flex items-center gap-1.5">
          <Avatar class="size-8">
            <AvatarFallback class="text-xs">AR</AvatarFallback>
          </Avatar>
          <IconPlaceholder
            lucide="ChevronDownIcon"
            tabler="IconChevronDown"
            hugeicons="ArrowDown01Icon"
            phosphor="CaretDownIcon"
            remixicon="RiArrowDownSLine"
            class="size-3.5 text-muted-foreground max-sm:hidden"
          />
        </div>
      </div>
    </header>

    <div class="min-h-0 flex-1 overflow-y-auto overscroll-contain">
      <div class="mx-auto w-full max-w-[1328px] px-4 pt-8 pb-12 md:px-9">
        <h1 class="text-[32px] font-semibold tracking-[-0.8px]">Create a BeatVPS</h1>
        <p class="mt-2 text-[15px] text-muted-foreground">
          A place for your next project. Choose a location, configuration and image.
        </p>

        <Card class="mt-[26px] gap-0 p-1.5">
          <Tabs.Root value={step} onValueChange={pickStep}>
            <Tabs.List variant="pills" class="flex-wrap">
              <Tabs.Trigger value="configure" class="gap-2"><span class="font-mono text-[11.5px]">01</span> Configure</Tabs.Trigger>
              <Tabs.Trigger value="review" class="gap-2"><span class="font-mono text-[11.5px]">02</span> Review &amp; purchase</Tabs.Trigger>
            </Tabs.List>
          </Tabs.Root>
        </Card>

        <div class="mt-6 flex flex-col items-start gap-6 lg:flex-row">
          <div class="flex w-full min-w-0 flex-1 flex-col gap-5">
            <StepCard index="01" title="Name your server">
              <Field.Field>
                <Field.Label for="server-name">Server name</Field.Label>
                <Input id="server-name" placeholder="my-first-server" bind:value={name} />
                <Field.Description>A name to identify this server in your workspace.</Field.Description>
              </Field.Field>
            </StepCard>

            <StepCard
              index="02"
              title="Choose a location"
              description="Place your server close to your users. Each location has its own configurations and images."
            >
              <Tabs.Root value={region} onValueChange={pickRegion}>
                <Tabs.List variant="line" class="mb-[18px] flex-wrap">
                  {#each regions as r (r)}
                    <Tabs.Trigger value={r}>{r}</Tabs.Trigger>
                  {/each}
                </Tabs.List>
              </Tabs.Root>
              <RadioGroup.Root
                bind:value={locationId}
                aria-label="Location"
                class="grid-cols-[repeat(auto-fill,minmax(170px,180px))] gap-3"
              >
                {#each locations.filter((l) => l.region === region) as l (l.id)}
                  <Field.Label class="relative has-[>[data-slot=field]]:w-full">
                    <Field.Field orientation="horizontal" class="items-center gap-2.5 px-3.5 py-3">
                      <Flag flag={l.flag} />
                      <span class="min-w-0 flex-1 text-sm font-medium whitespace-nowrap">{l.city}</span>
                      {#if locationId === l.id}
                        <IconPlaceholder
                          lucide="CircleCheckIcon"
                          tabler="IconCircleCheck"
                          hugeicons="CheckmarkCircle02Icon"
                          phosphor="CheckCircleIcon"
                          remixicon="RiCheckboxCircleLine"
                          class="size-4 text-brand"
                        />
                      {:else}
                        <span class="shrink-0 font-mono text-[11px] whitespace-nowrap text-muted-foreground">{l.latency} ms</span>
                      {/if}
                      <RadioGroup.Item value={l.id} aria-label={l.city} class="absolute inset-0 size-full rounded-lg opacity-0" />
                    </Field.Field>
                  </Field.Label>
                {/each}
              </RadioGroup.Root>
            </StepCard>

            <StepCard index="03" title="Choose your configuration">
              <div class="-mt-1 flex items-center justify-between gap-3">
                <span class="text-[13.5px] text-muted-foreground">{configurationCount} configurations · monthly prices</span>
                <ToggleGroup.Root
                  type="single"
                  variant="segmented"
                  value={view}
                  onValueChange={(v) => v && (view = v)}
                  aria-label="View"
                >
                  <ToggleGroup.Item value="cards">Cards</ToggleGroup.Item>
                  <ToggleGroup.Item value="list">List</ToggleGroup.Item>
                </ToggleGroup.Root>
              </div>
              <Tabs.Root class="mt-3.5" value={category} onValueChange={pickCategory}>
                <Tabs.List variant="line" class="flex-wrap">
                  {#each planCategories as c (c.id)}
                    <Tabs.Trigger value={c.id}>{c.label}</Tabs.Trigger>
                  {/each}
                </Tabs.List>
              </Tabs.Root>
              <RadioGroup.Root bind:value={planId} aria-label="Plan" class="mt-3.5 block">
                {#if view === "list"}
                  <Table.Root>
                    <Table.Header>
                      <Table.Row class="hover:bg-transparent">
                        <Table.Head class="w-9"><span class="sr-only">Select</span></Table.Head>
                        <Table.Head>Plan</Table.Head>
                        <Table.Head>vCPU</Table.Head>
                        <Table.Head>RAM</Table.Head>
                        <Table.Head>SSD</Table.Head>
                        <Table.Head>Transfer</Table.Head>
                        <Table.Head numeric>Price / mo</Table.Head>
                      </Table.Row>
                    </Table.Header>
                    <Table.Body>
                      {#each plans[category] as p (p.id)}
                        <Table.Row
                          data-state={planId === p.id ? "selected" : undefined}
                          class="cursor-pointer [&>td]:py-3.5"
                          onclick={() => (planId = p.id)}
                        >
                          <Table.Cell>
                            <RadioGroup.Item value={p.id} aria-label={p.id} />
                          </Table.Cell>
                          <Table.Cell class="font-mono text-[12.5px]">{p.id}</Table.Cell>
                          <Table.Cell class="font-mono">{p.vcpu}</Table.Cell>
                          <Table.Cell class="font-mono">{p.ram} GB</Table.Cell>
                          <Table.Cell class="font-mono">{p.ssd} GB</Table.Cell>
                          <Table.Cell class="font-mono text-muted-foreground">{p.transfer} TB</Table.Cell>
                          <Table.Cell numeric class={planId === p.id ? "font-semibold" : ""}>{formatUsd(p.price)}</Table.Cell>
                        </Table.Row>
                      {/each}
                    </Table.Body>
                  </Table.Root>
                {:else}
                  <div class="grid gap-3 sm:grid-cols-2">
                    {#each plans[category] as p (p.id)}
                      <Field.Label class="relative has-[>[data-slot=field]]:w-full">
                        <Field.Field orientation="horizontal">
                          <div class="flex flex-1 flex-col gap-1">
                            <span class="font-mono text-[12.5px] font-medium">{p.id}</span>
                            <Field.Description>{p.vcpu} vCPU · {p.ram} GB RAM · {p.ssd} GB SSD</Field.Description>
                            <span class="font-mono text-sm">{formatUsd(p.price)} / mo</span>
                          </div>
                          <RadioGroup.Item value={p.id} aria-label={p.id} />
                        </Field.Field>
                      </Field.Label>
                    {/each}
                  </div>
                {/if}
              </RadioGroup.Root>
            </StepCard>

            <StepCard index="04" title="Choose an image" description="The operating system installed on first boot.">
              <RadioGroup.Root bind:value={imageId} aria-label="Image" class="grid-cols-2 gap-3 md:grid-cols-4">
                {#each images as img (img.id)}
                  <Field.Label class="has-[>[data-slot=field]]:w-full">
                    <Field.Field class="gap-3">
                      <div class="flex items-center gap-2.5">
                        <OsLogo color={img.color} ubuntu={img.id === "ubuntu"} />
                        <span class="flex-1 truncate text-sm font-medium">{img.name}</span>
                        <RadioGroup.Item value={img.id} aria-label={img.name} />
                      </div>
                      <Select.Root
                        type="single"
                        value={versions[img.id]}
                        onValueChange={(v) => {
                          versions[img.id] = v;
                          imageId = img.id;
                        }}
                      >
                        <Select.Trigger size="sm" class="w-full" aria-label="{img.name} version">
                          {img.versions.find((v) => v.value === versions[img.id])?.label}
                        </Select.Trigger>
                        <Select.Content>
                          {#each img.versions as v (v.value)}
                            <Select.Item value={v.value} label={v.label}>{v.label}</Select.Item>
                          {/each}
                        </Select.Content>
                      </Select.Root>
                    </Field.Field>
                  </Field.Label>
                {/each}
              </RadioGroup.Root>
            </StepCard>

            <StepCard index="05" title="Billing term" description="Pay for the full term up front. Longer terms are cheaper.">
              <div class="flex flex-wrap items-center justify-between gap-4">
                <ToggleGroup.Root
                  type="single"
                  variant="segmented"
                  elevation="raised"
                  value={months}
                  onValueChange={(v) => v && (months = v)}
                  aria-label="Billing term"
                  class="flex-wrap"
                >
                  {#each billingTerms as t (t.months)}
                    <ToggleGroup.Item value={String(t.months)} class="px-3.5">
                      {t.label}
                      {#if t.discount}
                        <Badge variant="success" shape="number" class="ml-1 h-[18px]">−{t.discount}%</Badge>
                      {/if}
                    </ToggleGroup.Item>
                  {/each}
                </ToggleGroup.Root>
                <Field.Field orientation="horizontal" class="w-auto items-center gap-2.5">
                  <Switch id="auto-renew" bind:checked={autoRenew} />
                  <Field.Label for="auto-renew" class="font-normal">Auto-renew</Field.Label>
                </Field.Field>
              </div>
            </StepCard>
          </div>

          <div bind:this={summary} class="w-full scroll-mt-6 lg:sticky lg:top-6 lg:w-[330px] lg:shrink-0">
            <SummaryCard
              category={categoryLabel}
              {location}
              {plan}
              {image}
              version={versions[image.id]}
              termLabel={term.label}
              total={formatUsd(total)}
              credit={formatUsd(availableCredit)}
            />
          </div>
        </div>
      </div>
    </div>
  </Sidebar.Inset>
</Sidebar.Provider>

<script lang="ts">
  import * as Sidebar from "$lib/components/ui/sidebar";
  import IconPlaceholder from "$lib/components/icon-placeholder/icon-placeholder.svelte";
  import LogoMark from "./logo-mark.svelte";

  type NavItem = { label: string; icon: string; active?: boolean; badge?: string };
  let { platform, workspace }: { platform: readonly NavItem[]; workspace: readonly NavItem[] } = $props();

  const icons: Record<string, Record<string, string>> = {
    home: { lucide: "HouseIcon", tabler: "IconHome", hugeicons: "Home01Icon", phosphor: "HouseIcon", remixicon: "RiHomeLine" },
    server: { lucide: "ServerIcon", tabler: "IconServer", hugeicons: "ServerStackIcon", phosphor: "HardDrivesIcon", remixicon: "RiHardDriveLine" },
    billing: { lucide: "CreditCardIcon", tabler: "IconCreditCard", hugeicons: "CreditCardIcon", phosphor: "CreditCardIcon", remixicon: "RiBankCardLine" },
    key: { lucide: "KeyIcon", tabler: "IconKey", hugeicons: "Key01Icon", phosphor: "KeyIcon", remixicon: "RiKeyLine" },
    team: { lucide: "UsersIcon", tabler: "IconUsers", hugeicons: "UserGroupIcon", phosphor: "UsersThreeIcon", remixicon: "RiGroupLine" },
  };
  const groups = $derived([
    { label: "Platform", items: platform },
    { label: "Workspace", items: workspace },
  ]);
</script>

<Sidebar.Root collapsible="offcanvas">
  <!-- The sidebar subtree carries its own `dark` class: it stays navy in light mode (scoped theming). -->
  <div class="dark flex h-full w-full flex-col bg-[#0b2a6f] text-sidebar-foreground">
    <Sidebar.Header class="flex-row items-center justify-between px-4 pt-5 pb-3">
      <a href="#/" class="flex items-center gap-2 font-brand text-xl font-semibold tracking-[-0.4px] text-white">
        <LogoMark class="size-6" />
        Layerbeat
      </a>
      <Sidebar.Trigger class="text-muted-foreground hover:bg-[color-mix(in_srgb,white_10%,#0b2a6f)] hover:text-foreground" />
    </Sidebar.Header>
    <Sidebar.Content class="px-2">
      {#each groups as group (group.label)}
        <Sidebar.Group>
          <Sidebar.GroupLabel class="text-[11.5px] tracking-[0.6px] uppercase">{group.label}</Sidebar.GroupLabel>
          <Sidebar.GroupContent>
            <Sidebar.Menu>
              {#each group.items as item (item.label)}
                <Sidebar.MenuItem>
                  <Sidebar.MenuButton
                    isActive={item.active}
                    class="h-9 text-muted-foreground hover:bg-[color-mix(in_srgb,white_5%,#0b2a6f)] data-[active=true]:bg-[color-mix(in_srgb,white_9%,#0b2a6f)] data-[active=true]:text-foreground data-[active=true]:shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--brand)_55%,#0b2a6f)]"
                  >
                    {#snippet child({ props })}
                      <a href="#/" {...props}>
                        <IconPlaceholder {...icons[item.icon]} />
                        <span>{item.label}</span>
                      </a>
                    {/snippet}
                  </Sidebar.MenuButton>
                  {#if item.badge}
                    <Sidebar.MenuBadge class="rounded-md border border-border bg-secondary text-secondary-foreground">{item.badge}</Sidebar.MenuBadge>
                  {/if}
                </Sidebar.MenuItem>
              {/each}
            </Sidebar.Menu>
          </Sidebar.GroupContent>
        </Sidebar.Group>
      {/each}
    </Sidebar.Content>
    <Sidebar.Footer class="px-2 pb-4">
      <Sidebar.Menu>
        <Sidebar.MenuItem>
          <Sidebar.MenuButton class="h-9 text-muted-foreground hover:bg-[color-mix(in_srgb,white_5%,#0b2a6f)]">
            {#snippet child({ props })}
              <a href="#/api" {...props}>
                <IconPlaceholder
                  lucide="FileTextIcon"
                  tabler="IconFileDescription"
                  hugeicons="File01Icon"
                  phosphor="FileTextIcon"
                  remixicon="RiFileTextLine"
                />
                <span class="flex-1">API documentation</span>
                <IconPlaceholder
                  lucide="ArrowUpRightIcon"
                  tabler="IconArrowUpRight"
                  hugeicons="ArrowUpRightIcon"
                  phosphor="ArrowUpRightIcon"
                  remixicon="RiArrowRightUpLine"
                  class="size-3.5!"
                />
              </a>
            {/snippet}
          </Sidebar.MenuButton>
        </Sidebar.MenuItem>
      </Sidebar.Menu>
    </Sidebar.Footer>
  </div>
</Sidebar.Root>

<script lang="ts">
  let { flag }: { flag: { dir: "h" | "v"; colors: string[] } } = $props();
  const n = $derived(flag.colors.length);
</script>

<svg width="20" height="14" viewBox="0 0 20 14" class="shrink-0 rounded-[2px]" aria-hidden="true">
  {#each flag.colors as color, i (i)}
    {#if flag.dir === "h"}
      <rect x="0" y={(14 / n) * i} width="20" height={14 / n + 0.3} fill={color} />
    {:else}
      <rect x={(20 / n) * i} y="0" width={20 / n + 0.3} height="14" fill={color} />
    {/if}
  {/each}
</svg>

<script lang="ts">
  import { SidebarTrigger, useSidebar } from "$lib/components/ui/sidebar";

  // The sidebar owns the toggle while it is open on desktop; the header takes over when it is closed or on mobile.
  const sidebar = useSidebar();
</script>

{#if sidebar.isMobile || sidebar.state === "collapsed"}
  <SidebarTrigger />
{/if}

<script lang="ts">
  let { class: className = "" }: { class?: string } = $props();
</script>

<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" class={className} aria-hidden="true">
  <path d="M19 12a7 7 0 1 1-7-7" />
  <path d="M12 9a3 3 0 1 0 3 3" />
</svg>

<script lang="ts">
  let { color, ubuntu = false }: { color: string; ubuntu?: boolean } = $props();
</script>

<svg width="22" height="22" viewBox="0 0 24 24" class="shrink-0" aria-hidden="true">
  <circle cx="12" cy="12" r="11" fill={color} />
  {#if ubuntu}
    <circle cx="12" cy="12" r="5.2" fill="none" stroke="#fff" stroke-width="2.2" />
    <circle cx="5.6" cy="12" r="2" fill="#fff" />
    <circle cx="15.2" cy="6.5" r="2" fill="#fff" />
    <circle cx="15.2" cy="17.5" r="2" fill="#fff" />
  {/if}
</svg>

<script lang="ts">
  import type { Snippet } from "svelte";
  import { Card } from "$lib/components/ui/card";
  import { Kbd } from "$lib/components/ui/kbd";

  let {
    index,
    title,
    description,
    children,
  }: { index: string; title: string; description?: string; children: Snippet } = $props();
</script>

<Card class="gap-0 px-[26px] pt-[22px] pb-[26px]">
  <div class="flex items-center gap-3">
    <Kbd class="h-6 min-w-7 text-[11.5px]">{index}</Kbd>
    <h2 class="text-lg font-semibold tracking-[-0.2px]">{title}</h2>
  </div>
  {#if description}
    <p class="mt-3 text-sm text-muted-foreground">{description}</p>
  {/if}
  <div class="mt-[18px]">{@render children()}</div>
</Card>

<script lang="ts">
  import { Badge } from "$lib/components/ui/badge";
  import { Button } from "$lib/components/ui/button";
  import { Card } from "$lib/components/ui/card";
  import IconPlaceholder from "$lib/components/icon-placeholder/icon-placeholder.svelte";
  import Flag from "./flag.svelte";
  import OsLogo from "./os-logo.svelte";

  let {
    category,
    location,
    plan,
    image,
    version,
    termLabel,
    total,
    credit,
  }: {
    category: string;
    location: { city: string; country: string; flag: { dir: "h" | "v"; colors: string[] } };
    plan: { id: string; vcpu: number; ram: number; ssd: number };
    image: { id: string; name: string; color: string };
    version: string;
    termLabel: string;
    total: string;
    credit: string;
  } = $props();

  // Tailwind scans for whole class names, so each tint is spelled out.
  const tints = [
    "border-[color-mix(in_srgb,var(--chart-1)_22%,transparent)] bg-[color-mix(in_srgb,var(--chart-1)_12%,var(--card))] text-chart-1",
    "border-[color-mix(in_srgb,var(--chart-2)_22%,transparent)] bg-[color-mix(in_srgb,var(--chart-2)_12%,var(--card))] text-chart-2",
    "border-[color-mix(in_srgb,var(--chart-3)_22%,transparent)] bg-[color-mix(in_srgb,var(--chart-3)_12%,var(--card))] text-chart-3",
  ];
  const specs = $derived([
    { label: "vCPU", value: String(plan.vcpu), icon: { lucide: "CpuIcon", tabler: "IconCpu", hugeicons: "CpuIcon", phosphor: "CpuIcon", remixicon: "RiCpuLine" } },
    { label: "RAM", value: `${plan.ram} GB`, icon: { lucide: "MemoryStickIcon", tabler: "IconCpu2", hugeicons: "RamMemoryIcon", phosphor: "MemoryIcon", remixicon: "RiRamLine" } },
    { label: "SSD", value: `${plan.ssd} GB`, icon: { lucide: "ServerIcon", tabler: "IconServer", hugeicons: "ServerStackIcon", phosphor: "HardDrivesIcon", remixicon: "RiHardDriveLine" } },
  ]);
  const rows = $derived([
    ["Image", `${image.name} ${version}`],
    ["Billing term", termLabel],
    ["Location", `${location.city}, ${location.country}`],
  ]);
</script>

<Card elevation="raised" class="gap-0 p-0">
  <div class="relative overflow-hidden border-b border-border-2 bg-[linear-gradient(160deg,var(--brand-soft),var(--card)_75%)] px-5 pt-5 pb-[18px]">
    <span class="absolute -right-[26px] -bottom-[30px] size-[110px] rounded-full bg-[color-mix(in_srgb,var(--chart-2)_35%,transparent)]"></span>
    <span class="absolute right-[30px] -bottom-10 h-[90px] w-[70px] rounded-[40px] bg-[color-mix(in_srgb,var(--chart-1)_30%,transparent)]"></span>
    <div class="relative flex items-center justify-between">
      <span class="inline-flex size-11 items-center justify-center rounded-xl border border-border bg-popover">
        <OsLogo color={image.color} ubuntu={image.id === "ubuntu"} />
      </span>
      <Badge variant="brand" shape="pill">{category}</Badge>
    </div>
    <div class="relative mt-4 text-[22px] font-semibold tracking-[-0.4px]">Your new server</div>
    <div class="relative mt-1 font-mono text-xs text-muted-foreground">{plan.id}</div>
    <div class="relative mt-3.5 flex items-center gap-2 text-sm font-medium">
      <Flag flag={location.flag} />
      {location.city}
    </div>
  </div>
  <div class="flex flex-col gap-3.5 px-5 pt-[18px] pb-5">
    <div class="flex gap-2">
      {#each specs as s, i (s.label)}
        <div class="flex-1 rounded-xl border px-3 py-2.5 {tints[i]}">
          <div class="flex items-center gap-1.5 text-[12.5px]">
            <IconPlaceholder {...s.icon} class="size-3.5" />
            <span class="text-foreground-2">{s.label}</span>
          </div>
          <div class="mt-1.5 font-mono text-[17px] text-foreground">{s.value}</div>
        </div>
      {/each}
    </div>
    {#each rows as r (r[0])}
      <div class="flex items-center justify-between text-[13.5px]">
        <span class="text-muted-foreground">{r[0]}</span>
        <span class="font-medium">{r[1]}</span>
      </div>
    {/each}
    <div class="rounded-xl border border-[color-mix(in_srgb,var(--brand)_25%,var(--popover))] bg-brand-soft px-4 py-3.5">
      <div class="text-[13px] text-foreground-2">Purchase total</div>
      <div class="mt-1 font-mono text-[30px] tracking-[-0.5px]">{total}</div>
      <div class="mt-0.5 text-xs text-muted-foreground">Full term · USD</div>
    </div>
    <div class="flex items-center justify-between rounded-xl bg-success-soft px-3.5 py-2.5 text-[13.5px]">
      <span class="flex items-center gap-2">
        <IconPlaceholder
          lucide="WalletIcon"
          tabler="IconWallet"
          hugeicons="WalletIcon"
          phosphor="WalletIcon"
          remixicon="RiWalletLine"
          class="size-[15px]"
        />
        Available credit
      </span>
      <span class="font-mono font-medium text-success-text">{credit}</span>
    </div>
    <p class="rounded-xl border border-border px-3.5 py-3 text-xs leading-normal text-muted-foreground">
      Review your configuration before purchasing. Credit is used only when you confirm.
    </p>
    <Button elevation="raised" size="lg" class="w-full">Purchase server</Button>
    <Button variant="ghost" class="-mt-1.5 w-full">Save as draft</Button>
  </div>
</Card>

// Sample data for the Layerbeat "Create a BeatVPS" example. Prices are monthly USD. Shared by react.tsx, vue.vue and svelte.svelte.

export type Flag =
  | { dir: "h"; colors: [string, string, string] }
  | { dir: "v"; colors: [string, string, string] };

export type Location = {
  id: string;
  city: string;
  country: string;
  region: string;
  latency: number;
  flag: Flag;
};

const DE: Flag = { dir: "h", colors: ["#1a1a1a", "#dd0000", "#ffce00"] };
const NL: Flag = { dir: "h", colors: ["#ae1c28", "#ffffff", "#21468b"] };
const FR: Flag = { dir: "v", colors: ["#0055a4", "#ffffff", "#ef4135"] };
const SG: Flag = { dir: "h", colors: ["#ef3340", "#ffffff", "#ffffff"] };
const JP: Flag = { dir: "h", colors: ["#ffffff", "#bc002d", "#ffffff"] };
const BR: Flag = { dir: "h", colors: ["#009c3b", "#ffdf00", "#009c3b"] };
const US: Flag = { dir: "h", colors: ["#b22234", "#ffffff", "#3c3b6e"] };

export const regions = [
  "Asia",
  "Europe",
  "South America",
  "North America",
] as const;
export type Region = (typeof regions)[number];

export const locations: Location[] = [
  {
    id: "sin",
    city: "Singapore",
    country: "SG",
    region: "Asia",
    latency: 168,
    flag: SG,
  },
  {
    id: "tyo",
    city: "Tokyo",
    country: "JP",
    region: "Asia",
    latency: 210,
    flag: JP,
  },
  {
    id: "fra",
    city: "Frankfurt",
    country: "DE",
    region: "Europe",
    latency: 28,
    flag: DE,
  },
  {
    id: "ams",
    city: "Amsterdam",
    country: "NL",
    region: "Europe",
    latency: 32,
    flag: NL,
  },
  {
    id: "par",
    city: "Paris",
    country: "FR",
    region: "Europe",
    latency: 32,
    flag: FR,
  },
  {
    id: "gru",
    city: "Sao Paulo",
    country: "BR",
    region: "South America",
    latency: 190,
    flag: BR,
  },
  {
    id: "nyc",
    city: "New York",
    country: "US",
    region: "North America",
    latency: 92,
    flag: US,
  },
  {
    id: "sfo",
    city: "San Francisco",
    country: "US",
    region: "North America",
    latency: 148,
    flag: US,
  },
];

export type Plan = {
  id: string;
  vcpu: number;
  ram: number;
  ssd: number;
  transfer: number;
  price: number;
};

export const planCategories = [
  { id: "general", label: "General VPS" },
  { id: "fast", label: "Fast VPS" },
  { id: "dedicated", label: "Dedicated CPU" },
] as const;
export type PlanCategory = (typeof planCategories)[number]["id"];

export const configurationCount = 28;

export const plans: Record<PlanCategory, Plan[]> = {
  general: [
    { id: "BEAT1C1G-S", vcpu: 1, ram: 1, ssd: 15, transfer: 1, price: 1.98 },
    { id: "BEAT2C2G-S", vcpu: 2, ram: 2, ssd: 30, transfer: 2, price: 3.38 },
    { id: "BEAT2C4G-S", vcpu: 2, ram: 4, ssd: 50, transfer: 3, price: 5.9 },
    { id: "BEAT4C8G-S", vcpu: 4, ram: 8, ssd: 100, transfer: 4, price: 11.4 },
    { id: "BEAT8C16G-S", vcpu: 8, ram: 16, ssd: 200, transfer: 5, price: 22.8 },
  ],
  fast: [
    { id: "BEAT1C2G-F", vcpu: 1, ram: 2, ssd: 25, transfer: 2, price: 4.2 },
    { id: "BEAT2C4G-F", vcpu: 2, ram: 4, ssd: 50, transfer: 3, price: 8.6 },
    { id: "BEAT4C8G-F", vcpu: 4, ram: 8, ssd: 100, transfer: 5, price: 16.9 },
    { id: "BEAT8C16G-F", vcpu: 8, ram: 16, ssd: 200, transfer: 8, price: 33.4 },
  ],
  dedicated: [
    { id: "BEAT2C8G-D", vcpu: 2, ram: 8, ssd: 80, transfer: 4, price: 24 },
    { id: "BEAT4C16G-D", vcpu: 4, ram: 16, ssd: 160, transfer: 6, price: 46 },
    { id: "BEAT8C32G-D", vcpu: 8, ram: 32, ssd: 320, transfer: 10, price: 89 },
  ],
};

export type Image = {
  id: string;
  name: string;
  color: string;
  versions: { value: string; label: string }[];
};

export const images: Image[] = [
  {
    id: "ubuntu",
    name: "Ubuntu",
    color: "#e95420",
    versions: [
      { value: "24.04", label: "24.04 LTS" },
      { value: "22.04", label: "22.04 LTS" },
    ],
  },
  {
    id: "debian",
    name: "Debian",
    color: "#a80030",
    versions: [
      { value: "12", label: "12" },
      { value: "11", label: "11" },
    ],
  },
  {
    id: "rocky",
    name: "Rocky",
    color: "#10b981",
    versions: [
      { value: "9.4", label: "9.4" },
      { value: "8.10", label: "8.10" },
    ],
  },
  {
    id: "alma",
    name: "Alma",
    color: "#0f3d6b",
    versions: [
      { value: "9.4", label: "9.4" },
      { value: "8.10", label: "8.10" },
    ],
  },
];

export const billingTerms = [
  { months: 1, label: "1 month", discount: 0 },
  { months: 3, label: "3 months", discount: 5 },
  { months: 6, label: "6 months", discount: 8 },
  { months: 12, label: "12 months", discount: 12 },
];

export const workspaces = ["AChipsDAO", "Layerbeat Labs", "Personal"];

export const availableCredit = 50.01;

export const formatUsd = (n: number) => `$${n.toFixed(2)}`;

export const navPlatform = [
  { label: "Overview", icon: "home" },
  { label: "BeatVPS", icon: "server", active: true, badge: "1" },
  { label: "Billing", icon: "billing" },
] as const;
export const navWorkspace = [
  { label: "Access & keys", icon: "key" },
  { label: "Team", icon: "team" },
] as const;