homeio

1"use client";
2
3import { InfoBanner, SectionDivider } from "@/modules/settings/components/panel/controls";
4import { SETTINGS_PANEL_INSET } from "@/modules/settings/components/panel/surface";
5import { TwoFactorCard } from "@/modules/settings/components/panel/sections/two-factor-card";
6import { Plus } from "@/components/icons/platform-icons";
7import type { TwoFactorStatus } from "@/lib/shared/contracts/auth";
8import { cn } from "@/lib/utils";
9
10type UsersSectionProps = {
11  username: string;
12  twoFactor: TwoFactorStatus;
13  isDemoMode?: boolean;
14};
15
16export function UsersSection({
17  username,
18  twoFactor,
19  isDemoMode = false,
20}: UsersSectionProps) {
21  const initial = username.charAt(0).toUpperCase();
22
23  return (
24    <div className="flex flex-col gap-1">
25      <InfoBanner
26        text="Homeio is currently single-user. Multi-user access is planned for a future release."
27        variant="info"
28      />
29
30      <SectionDivider title="User Accounts" />
31      <div className={cn(SETTINGS_PANEL_INSET, "overflow-hidden")}>
32        <div className="flex items-center gap-3 px-4 py-3">
33          <div
34            className="flex size-7 shrink-0 items-center justify-center rounded-lg text-xs font-bold text-white"
35            style={{ backgroundColor: "oklch(0.55 0.15 190)" }}
36          >
37            {initial}
38          </div>
39          <div className="min-w-0 flex-1">
40            <div className="flex items-center gap-2">
41              <span className="text-sm font-medium text-foreground">{username}</span>
42              <span className="rounded-md bg-primary/15 px-1.5 py-0.5 text-[11px] font-medium text-primary">
43                Admin
44              </span>
45            </div>
46            <div className="text-[11px] text-muted-foreground/70">Local account · Current session</div>
47          </div>
48        </div>
49      </div>
50
51      <TwoFactorCard status={twoFactor} isDemoMode={isDemoMode} />
52
53      <SectionDivider title="Access" />
54      <div className={cn(SETTINGS_PANEL_INSET, "flex items-center justify-between gap-4 px-4 py-3")}>
55        <div className="min-w-0">
56          <div className="text-sm text-foreground">Add user</div>
57          <div className="mt-0.5 text-[11px] text-muted-foreground/70">Multi-user support is coming soon</div>
58        </div>
59        <button
60          disabled
61          className="inline-flex items-center gap-1.5 rounded-lg bg-primary/15 px-3 py-1.5 text-xs font-medium text-primary disabled:cursor-not-allowed disabled:opacity-40"
62        >
63          <Plus className="size-3" />
64          Add User
65          <span className="rounded bg-primary/20 px-1 py-px text-[10px] font-semibold uppercase tracking-wide">
66            Soon
67          </span>
68        </button>
69      </div>
70    </div>
71  );
72}
73