@shopify/shop-minis-cli 0.0.35

package/templates/__template_hello_world/src/screens/AvatarScreen.tsx

@@ -0,0 +1,95 @@
+import {Platform, SafeAreaView, ScrollView} from 'react-native'
+import {Avatar, Box, Text, useTheme} from '@shopify/shop-minis-platform-sdk'
+
+import {Header} from '../components/Header'
+
+const monospaceFontFamily = Platform.OS === 'ios' ? 'Menlo' : 'monospace'
+
+export const AvatarScreen = () => {
+  const theme = useTheme()
+  return (
+    <SafeAreaView
+      style={{flex: 1, backgroundColor: theme.colors['backgrounds-regular']}}
+    >
+      <ScrollView
+        style={{flex: 1, backgroundColor: theme.colors['backgrounds-regular']}}
+      >
+        <Header />
+        <Box px="gutter">
+          <Box marginBottom="m">
+            <Text variant="headerBold" mb="xs">
+              Avatar
+            </Text>
+            <Text variant="bodyLarge">
+              Avatars are used to show a thumbnail of a user or business.
+            </Text>
+          </Box>
+
+          <Box flexDirection="row" alignItems="center">
+            <Avatar
+              color="foregrounds-regular"
+              source={{uri: 'https://picsum.photos/id/1080/1000/1500'}}
+              size="small"
+            />
+            <Avatar
+              color="foregrounds-regular"
+              source={{uri: 'https://picsum.photos/id/1080/1000/1500'}}
+              size="medium"
+            />
+            <Avatar
+              color="foregrounds-regular"
+              source={{uri: 'https://picsum.photos/id/1080/1000/1500'}}
+              size="large"
+            />
+          </Box>
+
+          <Text mb="l" mt="s">
+            Size&nbsp;
+            <Text
+              fontFamily={monospaceFontFamily}
+              variant="bodyLargeBold"
+              color="backgrounds-success"
+            >
+              `small`
+            </Text>
+            &nbsp; | &nbsp;
+            <Text
+              fontFamily={monospaceFontFamily}
+              variant="bodyLargeBold"
+              color="backgrounds-success"
+            >
+              `medium`
+            </Text>
+            &nbsp; | &nbsp;
+            <Text
+              fontFamily={monospaceFontFamily}
+              variant="bodyLargeBold"
+              color="backgrounds-success"
+            >
+              `large`
+            </Text>
+          </Text>
+
+          <Box flexDirection="row" alignItems="center">
+            <Avatar
+              color="foregrounds-regular"
+              source={{uri: 'https://picsum.photos/id/1080/1000/1500'}}
+              title="Title"
+            />
+          </Box>
+
+          <Text mb="l" mt="s">
+            Title&nbsp;
+            <Text
+              fontFamily={monospaceFontFamily}
+              variant="bodyLargeBold"
+              color="backgrounds-dangerous"
+            >
+              string
+            </Text>
+          </Text>
+        </Box>
+      </ScrollView>
+    </SafeAreaView>
+  )
+}