84 lines
3.1 KiB
JavaScript
84 lines
3.1 KiB
JavaScript
import React from "react";
|
|
import { ROLE_LABELS } from "../constants/roles";
|
|
import { Badge } from "../components/UI/Badge";
|
|
import { Button } from "../components/UI/Button";
|
|
import { Panel } from "../components/UI/Panel";
|
|
import { ThemeToggle } from "../components/UI/ThemeToggle";
|
|
|
|
export const AppShell = ({
|
|
user,
|
|
onSignOut,
|
|
navItems,
|
|
activeSection,
|
|
onSectionChange,
|
|
sectionMeta,
|
|
children,
|
|
}) => {
|
|
return (
|
|
<div className="min-h-screen px-4 py-5 md:px-6 md:py-8">
|
|
<div className="mx-auto grid max-w-[1540px] gap-5 xl:grid-cols-[220px_1fr] xl:gap-8">
|
|
<Panel className="flex h-fit flex-col gap-5 p-4">
|
|
<div>
|
|
<p className="text-xs uppercase tracking-[0.24em] text-[var(--color-text-muted)]">
|
|
Панель
|
|
</p>
|
|
<h1 className="mt-2 text-lg font-semibold leading-tight">Управление доставкой</h1>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
{navItems.map((item) => (
|
|
<button
|
|
key={item.key}
|
|
className={[
|
|
"flex w-full items-center justify-between rounded-[18px] px-3 py-3 text-left text-sm transition",
|
|
activeSection === item.key
|
|
? "bg-[var(--color-accent-soft)] text-[var(--color-text)]"
|
|
: "text-[var(--color-text-muted)] hover:bg-[var(--color-surface-strong)] hover:text-[var(--color-text)]",
|
|
].join(" ")}
|
|
onClick={() => onSectionChange(item.key)}
|
|
type="button"
|
|
>
|
|
<span className="font-medium">{item.label}</span>
|
|
{item.badge ? <Badge tone="accent">{item.badge}</Badge> : null}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-auto">
|
|
<Button variant="ghost" className="w-full justify-start" onClick={onSignOut}>
|
|
Выйти
|
|
</Button>
|
|
</div>
|
|
</Panel>
|
|
|
|
<div className="space-y-6 xl:space-y-8">
|
|
<Panel className="p-4 md:p-5">
|
|
<div className="flex flex-wrap items-center justify-between gap-4">
|
|
<div>
|
|
<p className="text-sm uppercase tracking-[0.2em] text-[var(--color-text-muted)]">
|
|
Рабочая область
|
|
</p>
|
|
<h2 className="mt-2 text-2xl font-semibold">{sectionMeta?.label || "Панель"}</h2>
|
|
{sectionMeta?.description ? (
|
|
<p className="mt-2 max-w-3xl text-sm leading-6 text-[var(--color-text-muted)]">
|
|
{sectionMeta.description}
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
<div className="text-right">
|
|
<div className="text-sm font-medium">{user.name}</div>
|
|
<div className="text-sm text-[var(--color-text-muted)]">{ROLE_LABELS[user.role]}</div>
|
|
</div>
|
|
<ThemeToggle />
|
|
</div>
|
|
</div>
|
|
</Panel>
|
|
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|