import { A, createAsync, useNavigate } from "@solidjs/router" import "./workspace.css" import { Title } from "@solidjs/meta" import { github } from "~/lib/github" import { createEffect, createMemo, For, onMount } from "solid-js" import { config } from "~/config" import { createList } from "solid-list" import { useLanguage } from "~/context/language" import { LanguagePicker } from "~/component/language-picker" import { useI18n } from "~/context/i18n" export default function BlackWorkspace() { const navigate = useNavigate() const language = useLanguage() const i18n = useI18n() const githubData = createAsync(() => github()) const starCount = createMemo(() => githubData()?.stars ? new Intl.NumberFormat(language.tag(language.locale()), { notation: "compact", compactDisplay: "short", }).format(githubData()!.stars!) : config.github.starsFormatted.compact, ) // TODO: Frank, replace with real workspaces const workspaces = [ { id: "wrk_123", n: 1 }, { id: "wrk_456", n: 2 }, { id: "wrk_789", n: 3 }, { id: "wrk_111", n: 4 }, { id: "wrk_222", n: 5 }, { id: "wrk_333", n: 6 }, { id: "wrk_444", n: 7 }, { id: "wrk_555", n: 8 }, ].map((workspace) => ({ ...workspace, name: i18n.t("black.workspace.name", { n: workspace.n }), })) let listRef: HTMLUListElement | undefined const { active, setActive, onKeyDown } = createList({ items: () => workspaces.map((w) => w.id), initialActive: workspaces[0]?.id ?? null, handleTab: true, }) onMount(() => { listRef?.focus() }) createEffect(() => { const id = active() if (!id || !listRef) return const el = listRef.querySelector(`[data-id="${id}"]`) el?.scrollIntoView({ block: "nearest" }) }) return (
{i18n.t("black.workspace.title")}

{i18n.t("black.workspace.selectPlan")}

    { if (e.key === "Enter" && active()) { navigate(`/black/workspace/${active()}`) } else if (e.key === "Tab") { e.preventDefault() onKeyDown(e) } else { onKeyDown(e) } }} > {(workspace) => (
  • setActive(workspace.id)} onClick={() => navigate(`/black/workspace/${workspace.id}`)} > [*] {workspace.name}
    • )}
) }