qrcode.react/website/demo-tool.tsx at 53fbbada54710478bc0b2d7b7fcb0201dec45f79 · zpao/qrcode.react · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
import type {ReactElement, ReactNode} from 'react';
import React from 'react';
import {useAppShellMobile} from '@astryxdesign/core/AppShell';
import {Card} from '@astryxdesign/core/Card';
import {CodeBlock} from '@astryxdesign/core/CodeBlock';
import {Heading} from '@astryxdesign/core/Heading';
import {Layout, LayoutContent, LayoutPanel} from '@astryxdesign/core/Layout';
import {Text} from '@astryxdesign/core/Text';
import {Theme} from '@astryxdesign/core/theme';
import {VStack} from '@astryxdesign/core/VStack';
import {neutralTheme} from './theme/neutralTheme';

type DemoToolProps = {
  readonly title: string;
  readonly description: string;
  readonly content: ReactNode;
  readonly panel: ReactNode;
};

type QrPreviewProps = {
  readonly title: string;
  readonly children: ReactNode;
  readonly code?: string;
};

function DemoHeading(props: {
  readonly title: string;
  readonly description: string;
}) {
  return (
    <VStack gap={1}>
      <Heading level={1}>{props.title}</Heading>
      <Text display="block" color="secondary">
        {props.description}
      </Text>
    </VStack>
  );
}

function DemoPage(props: {
  readonly title: string;
  readonly description: string;
  readonly children: ReactNode;
}): ReactElement {
  return (
    <VStack gap={6} padding={6}>
      <DemoHeading title={props.title} description={props.description} />
      {props.children}
    </VStack>
  );
}

function DemoTool(props: DemoToolProps): ReactElement {
  const {isMobile} = useAppShellMobile();

  if (isMobile) {
    return (
      <VStack gap={4} padding={4}>
        <DemoHeading title={props.title} description={props.description} />
        {props.panel}
        {props.content}
      </VStack>
    );
  }

  return (
    <Layout
      height="fill"
      start={
        <LayoutPanel
          label="Properties"
          hasDivider
          isScrollable
          width={380}
          padding={4}>
          {props.panel}
        </LayoutPanel>
      }
      content={
        <LayoutContent padding={4}>
          <VStack gap={4}>
            <DemoHeading title={props.title} description={props.description} />
            {props.content}
          </VStack>
        </LayoutContent>
      }
    />
  );
}

function QrPreview(props: QrPreviewProps): ReactElement {
  return (
    <Card>
      <VStack gap={3}>
        <Heading level={2}>{props.title}</Heading>
        <Theme theme={neutralTheme} mode="light">
          <VStack
            className="qr-preview-plate"
            padding={3}
            style={{
              background: 'var(--color-background-surface)',
              borderRadius: 'var(--radius-inner)',
              width: 'fit-content',
            }}>
            {props.children}
          </VStack>
        </Theme>
        {props.code != null ? (
          <CodeBlock code={props.code} language="tsx" />
        ) : null}
      </VStack>
    </Card>
  );
}

export {DemoTool, DemoPage, QrPreview};