Choose a workspace

"use client";
import { useState } from "react";
import { LuPlus } from "react-icons/lu";
import { Avatar, Badge, ListItem, WorkspaceSwitcher } from "@nexera-ui/react";

const WORKSPACES = [
  {
    id: "uk",
    name: "Northwind UK",
    initials: "NU",
    plan: "Business plan",
    detail: "214 people · Admin",
    isLastUsed: true,
  },
  {
    id: "pk",
    name: "Northwind Pakistan",
    initials: "NP",
    plan: "Business plan",
    detail: "86 people · Manager",
    isLastUsed: false,
  },
  {
    id: "eu",
    name: "Northwind Europe Holdings",
    initials: "NE",
    plan: "Enterprise plan",
    detail: "1,120 people · Member",
    isLastUsed: false,
  },
];

/** Choose a workspace: pick one of several organisations after signing in, then switch any time from the sidebar. */
export default function ChooseAWorkspace() {
  const [chosen, setChosen] = useState<string | null>(null);
  const current = WORKSPACES.find((workspace) => workspace.id === chosen);

  return (
    <div className="@container grid min-h-[560px] place-items-center bg-page px-4 py-10">
      <div className="grid w-full max-w-md gap-6 rounded-xl border border-default bg-surface p-6 shadow-sm @sm:p-8">
        <header className="grid gap-1">
          <h2 className="text-heading-h3 text-primary">Choose a workspace</h2>
          <p className="text-body-default text-secondary">
            You&apos;re signed in as ayesha.khan@northwind.io and belong to {WORKSPACES.length}{" "}
            workspaces.
          </p>
        </header>
        {current ? (
          <div className="grid gap-3 rounded-lg bg-sunken p-4">
            <p role="status" className="text-body-default text-primary">
              Opening <strong>{current.name}</strong>. You can switch workspaces any time from the
              top of the sidebar:
            </p>
            <WorkspaceSwitcher
              variant="light"
              workspaces={WORKSPACES}
              selectedKey={current.id}
              onSelectionChange={(key) => {
                setChosen(String(key));
              }}
            />
          </div>
        ) : (
          <ul aria-label="Your workspaces" className="m-0 grid list-none gap-2 p-0">
            {WORKSPACES.map((workspace) => (
              <li key={workspace.id} className="overflow-hidden rounded-lg border border-default">
                <ListItem
                  title={workspace.name}
                  subtitle={`${workspace.plan} · ${workspace.detail}`}
                  leading={
                    <Avatar size="lg" type="company" initials={workspace.initials} isDecorative />
                  }
                  trailing={
                    workspace.isLastUsed ? (
                      <Badge label="Last used" tone="brand" dot={false} />
                    ) : undefined
                  }
                  onPress={() => {
                    setChosen(workspace.id);
                  }}
                />
              </li>
            ))}
          </ul>
        )}
        <div className="flex flex-wrap items-center justify-between gap-3 border-t border-subtle pt-4 text-body-small">
          <a
            href="#create-workspace"
            className="inline-flex items-center gap-1.5 text-brand-text underline underline-offset-4"
          >
            <LuPlus aria-hidden="true" /> Create a new workspace
          </a>
          <a href="#sign-in" className="text-secondary underline underline-offset-4">
            Use a different account
          </a>
        </div>
      </div>
    </div>
  );
}