34 lines
2.1 KiB
TypeScript
34 lines
2.1 KiB
TypeScript
import { useEffect, useRef, useState } from "react";
|
|
import type { EnvironmentSettings } from "@nodedc/ui-core";
|
|
import { Button, EnvironmentSettingsWindow, LandingStage, UserProfileMenu } from "@nodedc/ui-react";
|
|
|
|
const initial: EnvironmentSettings = { revision: 0, pages: { home: {
|
|
headerLabel: "Продукт", eyebrow: "NODE.DC / ГЛАВНАЯ", title: "Главная продукта",
|
|
description: "Общая композиция страницы и настроек окружения.", primaryWorkspaceId: null, secondaryWorkspaceId: null,
|
|
background: { enabled: false, imageDurationSeconds: 10, items: [] },
|
|
} } };
|
|
|
|
export function EnvironmentCatalogDemo() {
|
|
const [open, setOpen] = useState(false);
|
|
const [settings, setSettings] = useState(initial);
|
|
const urls = useRef<string[]>([]);
|
|
useEffect(() => () => urls.current.forEach(url => URL.revokeObjectURL(url)), []);
|
|
return <>
|
|
<div className="catalog-environment-actions">
|
|
<UserProfileMenu displayName="DC" subtitle="Каталог компонентов" triggerLabel={null}
|
|
actions={[{ id: "settings", label: "Настройки", icon: "settings", onSelect: () => setOpen(true) }]} />
|
|
<Button variant="primary" tone="neutral" onClick={() => setOpen(true)}>Настройки окружения</Button>
|
|
<Button variant="primary" tone="neutral" disabled>Неактивное действие</Button>
|
|
</div>
|
|
<div className="catalog-environment-stage"><LandingStage page={settings.pages.home} /></div>
|
|
<EnvironmentSettingsWindow open={open} onClose={() => setOpen(false)} productName="Продукт"
|
|
surfaces={[{ id: "home", home: true, description: "Главная страница продукта", actions: [] }]}
|
|
settings={settings} state="ready" error={null}
|
|
onSave={async draft => { const next = { ...draft, revision: draft.revision + 1 }; setSettings(next); return next; }}
|
|
onUpload={async (_surface, _item, file) => {
|
|
const url = URL.createObjectURL(file); urls.current.push(url);
|
|
return { url, fileName: file.name, mediaKind: file.type.startsWith("video/") ? "video" : "image" };
|
|
}} />
|
|
</>;
|
|
}
|