{ReStory}

Layout/Panel: EditorLayout

Container component with header, content and footer sections
View fullscreen
Source Code
1export const EditorLayout = component(() => (
2 ​<Grid columns={12} gap="none" style="height: 800px;">
3 ​ ​{/* Левая панель - Explorer */}
4 ​ ​<GridCol span={2}>
5 ​ ​ ​<Panel
6 ​ ​ ​ ​variant="dark"
7 ​ ​ ​ ​style="height: 100%;"
8 ​ ​ ​ ​slots={{
9 ​ ​ ​ ​ ​header: (
10 ​ ​ ​ ​ ​ ​<DemoHeader>
11 ​ ​ ​ ​ ​ ​ ​<span class="title">Explorer</span>
12 ​ ​ ​ ​ ​ ​ ​<div class="actions">
13 ​ ​ ​ ​ ​ ​ ​ ​<Button size="sm" variant="ghost">+</Button>
14 ​ ​ ​ ​ ​ ​ ​</div>
15 ​ ​ ​ ​ ​ ​</DemoHeader>
16 ​ ​ ​ ​ ​),
17 ​ ​ ​ ​}}
18 ​ ​ ​>
19 ​ ​ ​ ​<PreformattedBlock style="height: 100%;">
20 ​ ​ ​ ​ ​{`src/
21├── components/
22│ ├── Button.tsx
23│ ├── Input.tsx
24│ └── Panel.tsx
25├── layout/
26│ ├── Stack.tsx
27│ └── Grid.tsx
28└── theme.ts`}
29 ​ ​ ​ ​</PreformattedBlock>
30 ​ ​ ​</Panel>
31 ​ ​</GridCol>
32
33 ​ ​{/* Центральная панель - Редактор */}
34 ​ ​<GridCol span={7}>
35 ​ ​ ​<Panel
36 ​ ​ ​ ​style="height: 100%;"
37 ​ ​ ​ ​slots={{
38 ​ ​ ​ ​ ​header: (
39 ​ ​ ​ ​ ​ ​<DemoHeader>
40 ​ ​ ​ ​ ​ ​ ​<span class="title">main.tsx</span>
41 ​ ​ ​ ​ ​ ​ ​<div class="actions">
42 ​ ​ ​ ​ ​ ​ ​ ​<Button size="sm" variant="ghost">Format</Button>
43 ​ ​ ​ ​ ​ ​ ​ ​<Button size="sm" variant="ghost">Save</Button>
44 ​ ​ ​ ​ ​ ​ ​</div>
45 ​ ​ ​ ​ ​ ​</DemoHeader>
46 ​ ​ ​ ​ ​),
47 ​ ​ ​ ​ ​footer: (
48 ​ ​ ​ ​ ​ ​<Stack direction="horizontal" gap="lg" justify="space-between">
49 ​ ​ ​ ​ ​ ​ ​<DemoBlock>Modified • UTF-8</DemoBlock>
50 ​ ​ ​ ​ ​ ​ ​<DemoBlock>TypeScript</DemoBlock>
51 ​ ​ ​ ​ ​ ​</Stack>
52 ​ ​ ​ ​ ​),
53 ​ ​ ​ ​}}
54 ​ ​ ​>
55 ​ ​ ​ ​<PreformattedBlock style="height: 100%;">
56 ​ ​ ​ ​ ​{`import { component } from "@recast";
57import { Stack } from "./layout/Stack";
58import { Panel } from "./components/Panel";
59import { Button } from "./controls/Button";
60import { styled } from "@recast";
61import { theme } from "./theme";
62
63const StyledApp = styled.div /*css*/\`
64 ​& {
65 ​ ​min-height: 100vh;
66 ​ ​background: \${theme.colors.bg.base};
67 ​ ​color: \${theme.colors.text.base};
68 ​}
69\`;
70
71export const App = component(() => (
72 ​<StyledApp>
73 ​ ​<Stack direction="vertical" gap="lg">
74 ​ ​ ​<Panel
75 ​ ​ ​ ​variant="dark"
76 ​ ​ ​ ​slots={{
77 ​ ​ ​ ​ ​header: <h2>Welcome to Reface</h2>,
78 ​ ​ ​ ​ ​footer: (
79 ​ ​ ​ ​ ​ ​<Stack direction="horizontal" justify="end">
80 ​ ​ ​ ​ ​ ​ ​<Button variant="primary">Get Started</Button>
81 ​ ​ ​ ​ ​ ​</Stack>
82 ​ ​ ​ ​ ​),
83 ​ ​ ​ ​}}
84 ​ ​ ​>
85 ​ ​ ​ ​<p>Build beautiful interfaces with Reface UI</p>
86 ​ ​ ​</Panel>
87 ​ ​</Stack>
88 ​</StyledApp>
89));