apps/web/components/AccountShell.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

// SPDX-FileCopyrightText: 2026 Progmasoft <support@progmasoft.com>
// SPDX-License-Identifier: AGPL-3.0-or-later WITH AdditionRef-Progmasoft-Patent-Grant-1.1

import type { ReactNode } from "react";
import { getMessages, type Locale } from "@/lib/localization";
import { SiteHeader } from "./SiteHeader";

interface AccountShellProps {
  children: ReactNode;
  eyebrow: string;
  title: string;
  description: string;
  locale: Locale;
}

export function AccountShell({
  children,
  eyebrow,
  title,
  description,
  locale,
}: AccountShellProps) {
  const { account } = getMessages(locale);
  return (
    <div className="account-page">
      <SiteHeader account locale={locale} />
      <main className="account-main">
        <section className="account-intro">
          <p className="eyebrow">{eyebrow}</p>
          <h1>{title}</h1>
          <p>{description}</p>
          <div className="account-trust" aria-label={account.securityLabel}>
            {account.trust.map((property) => (
              <span key={property}>{property}</span>
            ))}
          </div>
        </section>
        <section className="account-panel">{children}</section>
      </main>
    </div>
  );
}