Skip to content

Commit 31c9ebe

Browse files
mu29mu29
committed
feat: add showcase page
1 parent 8c8e368 commit 31c9ebe

File tree

23 files changed

+564
-27
lines changed

23 files changed

+564
-27
lines changed

‎packages/docs/app/pages/docs/editor/index.mdx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import '@app/parcel-landing/catalog';
22
import { Editor } from '@composify/react';
3+
import { VStack } from '@app/ui-system';
34
import { SourceProvider, Playground } from '@app/parcel-landing';
45

56
export const source = `
@@ -39,9 +40,11 @@ The **Editor** lets you build pages visually with your own JSX components.
3940

4041
:::code-group
4142
<div data-title="Preview">
42-
<SourceProvider source={source}>
43-
<Playground plain={true} />
44-
</SourceProvider>
43+
<VStack className={['border', 'rounded-sm', 'overflow-hidden']}>
44+
<SourceProvider source={source}>
45+
<Playground plain={true} />
46+
</SourceProvider>
47+
</VStack>
4548
</div>
4649

4750
```tsx [Code]

‎packages/docs/app/pages/showcase.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { ShowcasePage } from '@app/page-showcase';
2+
3+
export const frontmatter = {
4+
layout: 'landing',
5+
title: 'Showcase',
6+
};
7+
8+
export default ShowcasePage;

‎packages/docs/src/page-cloud/CloudHeroBanner/CloudHeroBanner.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ export const CloudHeroBanner: FC<unknown> = () => (
1616
</Link>
1717
</Button>
1818
<Button variant="outline" size="lg" asChild={true}>
19-
<Link href="#features" plain={true}>
20-
Explore features →
19+
<Link href="#setup" plain={true}>
20+
Request setup →
2121
</Link>
2222
</Button>
2323
</HStack>

‎packages/docs/src/page-cloud/FreeSetupSection/FreeSetupSection.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import type { FC } from 'react';
44

55
export const FreeSetupSection: FC<unknown> = () => (
66
<VStack
7+
id="setup"
78
alignHorizontal="center"
89
className={[
910
'gap-32',

‎packages/docs/src/page-demo/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const INITIAL_SOURCE = `
1515
Learn more ›
1616
</ButtonCta>
1717
<ButtonCta variant="outline" size="lg" href="/demo">
18-
View Demo →
18+
View demo →
1919
</ButtonCta>
2020
</HStack>
2121
</VStack>
@@ -118,7 +118,7 @@ const INITIAL_SOURCE = `
118118
</VStack>
119119
</Grid>
120120
</VStack>
121-
<VStack alignHorizontal="center" className={['gap-8', 'px-24', 'py-196']}>
121+
<VStack alignHorizontal="center" className={['gap-8', 'px-24', 'py-196', 'max-md:py-128']}>
122122
<Heading level={2} size="4xl" weight="bold" align="center">
123123
Unlock the full potential of your team
124124
</Heading>
@@ -128,7 +128,7 @@ const INITIAL_SOURCE = `
128128
Build faster, collaborate better, and ship with confidence.
129129
</Body>
130130
<ButtonCta variant="primary" size="xl" href="/docs">
131-
Start Building ›
131+
Start building ›
132132
</ButtonCta>
133133
</VStack>
134134
</VStack>

‎packages/docs/src/page-home/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const INITIAL_SOURCE = `
1515
Learn more ›
1616
</ButtonCta>
1717
<ButtonCta variant="outline" size="lg" href="/demo">
18-
View Demo →
18+
View demo →
1919
</ButtonCta>
2020
</HStack>
2121
</VStack>
@@ -128,7 +128,7 @@ const INITIAL_SOURCE = `
128128
Build faster, collaborate better, and ship with confidence.
129129
</Body>
130130
<ButtonCta variant="primary" size="xl" href="/docs">
131-
Start Building ›
131+
Start building ›
132132
</ButtonCta>
133133
</VStack>
134134
</VStack>

‎packages/docs/src/page-showcase/Example/Example.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { Playground, SourceEditor, SourceProvider, SourceRenderer } from '@app/parcel-landing';
2+
import { Body, HStack, Segment, VStack } from '@app/ui-system';
3+
import { type FC, useState } from 'react';
4+
5+
type Props = {
6+
id: string;
7+
name: string;
8+
source: string;
9+
};
10+
11+
export const Example: FC<Props> = ({ id, name, source }) => {
12+
const [preview, setPreview] = useState(true);
13+
14+
return (
15+
<VStack id={id} className={['m-24', 'max-md:m-16', 'rounded-sm', 'border', 'bg-background', 'overflow-hidden']}>
16+
<HStack
17+
alignVertical="center"
18+
alignHorizontal="between"
19+
className={['p-16', 'border-b', 'bg-background-variant']}
20+
>
21+
<Body size="md" className={['font-medium', 'text-foreground']}>
22+
{name}
23+
</Body>
24+
<Segment
25+
size="md"
26+
options={[
27+
{ label: 'Renderer', value: true },
28+
{ label: 'Editor', value: false },
29+
]}
30+
value={preview}
31+
onChange={setPreview}
32+
/>
33+
</HStack>
34+
<SourceProvider source={source}>
35+
{preview ? (
36+
<SourceRenderer />
37+
) : (
38+
<>
39+
<VStack className={['flex', 'max-lg:hidden']}>
40+
<SourceEditor />
41+
</VStack>
42+
<VStack className={['hidden', 'max-lg:flex']}>
43+
<Playground plain={true} />
44+
</VStack>
45+
</>
46+
)}
47+
</SourceProvider>
48+
</VStack>
49+
);
50+
};

‎packages/docs/src/page-showcase/Example/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { Example } from './Example';

‎packages/docs/src/page-showcase/ShowcaseHeroBanner/ShowcaseHeroBanner.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { Body, Button, Heading, HStack, Link, VStack } from '@app/ui-system';
2+
import type { FC } from 'react';
3+
4+
export const ShowcaseHeroBanner: FC<unknown> = () => (
5+
<VStack className={['gap-6', 'p-24', 'pt-64', 'bg-background', 'max-md:px-16']}>
6+
<Heading level={1} size="5xl" weight="extrabold">
7+
See what you can build
8+
</Heading>
9+
<Body size="2xl" className={['text-foreground']}>
10+
Browse examples and discover what's possible with Server Driven UI.
11+
</Body>
12+
<HStack className={['gap-8', 'mt-16']}>
13+
<Button variant="primary" size="lg" asChild={true}>
14+
<Link href="#promotion" plain={true}>
15+
Start browsing ›
16+
</Link>
17+
</Button>
18+
<Button variant="outline" size="lg" asChild={true}>
19+
<Link href="/docs" plain={true}>
20+
View docs →
21+
</Link>
22+
</Button>
23+
</HStack>
24+
</VStack>
25+
);

‎packages/docs/src/page-showcase/ShowcaseHeroBanner/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { ShowcaseHeroBanner } from './ShowcaseHeroBanner';

0 commit comments

Comments
 (0)