concrnt-world/app/src/components/welcome/AppStoreQR.tsx at 7cadf2c3224ce7fcc1e701c611d41b6de97453e7 · concrnt/concrnt-world · 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
import Box from '@mui/material/Box'
import { Paper, Typography, alpha, useTheme } from '@mui/material'
import { QRCode } from 'react-qrcode-logo'
import { useTranslation } from 'react-i18next'
import SmartphoneIcon from '@mui/icons-material/Smartphone'
import appStoreBadge from '../../resources/appstore-badge.svg'
import googlePlayBadge from '../../resources/googleplay-badge.png'

const stores = [
    {
        label: 'Download on the App Store',
        badge: appStoreBadge,
        url: 'https://apps.apple.com/jp/app/concrnt-world/id6757524249'
    },
    {
        label: 'Get it on Google Play',
        badge: googlePlayBadge,
        url: 'https://play.google.com/store/apps/details?id=world.concrnt.app'
    }
]

export default function AppStoreQR(): JSX.Element {
    const { t } = useTranslation('', { keyPrefix: 'welcome' })
    const theme = useTheme()

    return (
        <Paper
            variant="outlined"
            sx={{
                display: 'flex',
                flexDirection: 'column',
                gap: 2,
                p: 3,
                maxWidth: '600px',
                width: '100%',
                zIndex: 1,
                backdropFilter: 'blur(2px)',
                backgroundColor: alpha(theme.palette.background.paper, 0.8)
            }}
        >
            <Box display="flex" alignItems="flex-start" gap={2}>
                <Box
                    sx={{
                        width: '42px',
                        height: '42px',
                        borderRadius: 1,
                        backgroundColor: alpha(theme.palette.primary.main, 0.14),
                        color: 'primary.main',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        flexShrink: 0
                    }}
                >
                    <SmartphoneIcon />
                </Box>
                <Box display="flex" flexDirection="column" gap={1}>
                    <Typography fontWeight={700}>{t('v2NoticeTitle')}</Typography>
                    <Typography variant="body2" sx={{ opacity: 0.8 }}>
                        {t('v2NoticeDescription')}
                    </Typography>
                </Box>
            </Box>
            <Box display="flex" justifyContent="center" gap={3} flexWrap="wrap">
                {stores.map((store) => (
                    <Box
                        key={store.label}
                        component="a"
                        href={store.url}
                        target="_blank"
                        rel="noopener noreferrer"
                        sx={{
                            display: 'flex',
                            flexDirection: 'column',
                            alignItems: 'center',
                            gap: 1.5,
                            textDecoration: 'none'
                        }}
                    >
                        <Box
                            sx={{
                                padding: '8px',
                                borderRadius: 1,
                                backgroundColor: '#ffffff',
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center'
                            }}
                        >
                            <QRCode
                                value={store.url}
                                size={288}
                                ecLevel="M"
                                quietZone={0}
                                style={{ width: '144px', height: '144px' }}
                                fgColor="#000000"
                                bgColor="#ffffff"
                                qrStyle="squares"
                                eyeRadius={0}
                            />
                        </Box>
                        <img src={store.badge} alt={store.label} style={{ height: '40px', width: 'auto' }} />
                    </Box>
                ))}
            </Box>
        </Paper>
    )
}