price-tracker/app/routes/app.additional.tsx at main · MarlonPerez-01/price-tracker · 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
import {
    Box,
    Card,
    Layout,
    Link,
    List,
    Page,
    Text,
    BlockStack,
} from '@shopify/polaris';

export default function AdditionalPage() {
    return (
        <Page>
            <ui-title-bar title="Additional page" />
            <Layout>
                <Layout.Section>
                    <Card>
                        <BlockStack gap="300">
                            <Text as="p" variant="bodyMd">
                                The app template comes with an additional page
                                which demonstrates how to create multiple pages
                                within app navigation using{' '}
                                <Link
                                    url="https://shopify.dev/docs/apps/tools/app-bridge"
                                    target="_blank"
                                    removeUnderline
                                >
                                    App Bridge
                                </Link>
                                .
                            </Text>
                            <Text as="p" variant="bodyMd">
                                To create your own page and have it show up in
                                the app navigation, add a page inside{' '}
                                <Code>app/routes</Code>, and a link to it in the{' '}
                                <Code>&lt;ui-nav-menu&gt;</Code> component found
                                in <Code>app/routes/app.jsx</Code>.
                            </Text>
                        </BlockStack>
                    </Card>
                </Layout.Section>
                <Layout.Section variant="oneThird">
                    <Card>
                        <BlockStack gap="200">
                            <Text as="h2" variant="headingMd">
                                Resources
                            </Text>
                            <List>
                                <List.Item>
                                    <Link
                                        url="https://shopify.dev/docs/apps/design-guidelines/navigation#app-nav"
                                        target="_blank"
                                        removeUnderline
                                    >
                                        App nav best practices
                                    </Link>
                                </List.Item>
                            </List>
                        </BlockStack>
                    </Card>
                </Layout.Section>
            </Layout>
        </Page>
    );
}

function Code({ children }: { children: React.ReactNode }) {
    return (
        <Box
            as="span"
            padding="025"
            paddingInlineStart="100"
            paddingInlineEnd="100"
            background="bg-surface-active"
            borderWidth="025"
            borderColor="border"
            borderRadius="100"
        >
            <code>{children}</code>
        </Box>
    );
}