1import { Content } from "./Content.tsx";
2
3export const meta = {
4 title: "Data/Content",
5 description:
6 "A component for displaying formatted content with consistent styling",
7};
8
9export function Overview() {
10 return (
11 <Content>
12 <h1>Getting Started</h1>
13 <p>
14 Welcome to our application! Here's a quick guide to get you started.
15 </p>
16
17 <h2>Installation</h2>
18 <p>You can install the package using npm:</p>
19 <pre><code>npm install @reface-ui</code></pre>
20
21 <h2>Basic Usage</h2>
22 <p>Here are the main components you'll be working with:</p>
23
24 <h3>Controls</h3>
25 <ul>
26 <li>
27 Use <code>NumberInput</code> for numeric values
28 </li>
29 <li>
30 Use <code>ColorPicker</code> for color selection
31 </li>
32 <li>
33 Use <code>Vector3Input</code> for 3D coordinates
34 </li>
35 </ul>
36
37 <h3>Keyboard Shortcuts</h3>
38 <table>
39 <tr>
40 <th>Action</th>
41 <th>Shortcut</th>
42 </tr>
43 <tr>
44 <td>Save</td>
45 <td>
46 <kbd>Ctrl</kbd> + <kbd>S</kbd>
47 </td>
48 </tr>
49 <tr>
50 <td>Undo</td>
51 <td>
52 <kbd>Ctrl</kbd> + <kbd>Z</kbd>
53 </td>
54 </tr>
55 </table>
56
57 <blockquote>
58 <strong>Note:</strong> Make sure to save your changes regularly.
59 </blockquote>
60
61 <h2>Examples</h2>
62 <p>Here's a sample configuration:</p>
63 <pre><code>{`{
64 "theme": "dark",
65 "autoSave": true,
66 "shortcuts": {
67 "save": "ctrl+s",
68 "undo": "ctrl+z"
69 }
70}`}</code></pre>
71
72 <hr />
73
74 <p>
75 For more information, check out our <a href="#">documentation</a>.
76 </p>
77 </Content>
78 );
79}
80
81export function Headings() {
82 return (
83 <Content>
84 <h1>Heading Level 1</h1>
85 <h2>Heading Level 2</h2>
86 <h3>Heading Level 3</h3>
87 </Content>
88 );
89}
90
91export function Lists() {
92 return (
93 <Content>
94 <h2>Unordered List</h2>
95 <ul>
96 <li>First item</li>
97 <li>Second item</li>
98 <li>Third item</li>
99 </ul>
100
101 <h2>Ordered List</h2>
102 <ol>
103 <li>First item</li>
104 <li>Second item</li>
105 <li>Third item</li>
106 </ol>
107 </Content>
108 );
109}
110