@shopify/shop-minis-cli 0.0.35

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

@@ -0,0 +1,274 @@
+import {ComponentProps, useState} from 'react'
+import {SafeAreaView, ScrollView} from 'react-native'
+import {
+  Box,
+  Text,
+  IconButton,
+  ScrollViewBottomSheet,
+  useTheme,
+} from '@shopify/shop-minis-platform-sdk'
+
+import {Header} from '../components/Header'
+
+interface SectionHeaderProps {
+  first?: boolean
+  title: string
+}
+
+interface DetailsBottomSheetProps {
+  fontFamily: string
+  fontSize: string
+  lineHeight: string
+  letterSpacing: string
+  onDismiss: ComponentProps<typeof ScrollViewBottomSheet>['onDismiss']
+}
+
+const DetailsBottomSheet = ({
+  fontFamily,
+  fontSize,
+  lineHeight,
+  letterSpacing,
+  onDismiss,
+}: DetailsBottomSheetProps) => {
+  return (
+    <ScrollViewBottomSheet
+      onDismiss={onDismiss}
+      variant="header"
+      headerText="Details"
+    >
+      <Box padding="m">
+        {fontFamily ? <Text>fontFamily: {fontFamily} </Text> : null}
+        {fontSize ? <Text>fontSize: {fontSize}</Text> : null}
+        {lineHeight ? <Text>lineHeight: {lineHeight} </Text> : null}
+        {letterSpacing ? <Text>letterSpacing: {letterSpacing} </Text> : null}
+      </Box>
+    </ScrollViewBottomSheet>
+  )
+}
+
+const SectionHeader = ({title, first}: SectionHeaderProps) => (
+  <Box paddingTop="m" paddingBottom="xs">
+    {first ? null : (
+      <Box
+        height={1}
+        width="100%"
+        backgroundColor="borders-regular"
+        marginBottom="s"
+      />
+    )}
+    <Text variant="label">{title}</Text>
+  </Box>
+)
+
+const TextBox = ({children}: {children: React.ReactNode}) => (
+  <Box paddingBottom="xxxs" flexDirection="row" alignItems="center">
+    {children}
+  </Box>
+)
+
+export const TypographyScreen = () => {
+  const [sheetVisible, setSheetVisible] = useState(false)
+  const [fontFamily, setFontFamily] = useState('')
+  const [fontSize, setFontSize] = useState('')
+  const [letterSpacing, setLetterSpacing] = useState('')
+  const [lineHeight, setLineHeight] = useState('')
+
+  const theme = useTheme()
+
+  return (
+    <>
+      <SafeAreaView
+        style={{flex: 1, backgroundColor: theme.colors['backgrounds-regular']}}
+      >
+        <ScrollView style={{flex: 1}}>
+          <Header />
+          <Box px="gutter">
+            <Text variant="headerBold" mb="xs">
+              Typography
+            </Text>
+
+            <SectionHeader title="hero" first />
+            <TextBox key={1}>
+              <Text variant="heroBold">heroBold</Text>
+              <IconButton
+                variant="plain"
+                name="information"
+                onPress={() => {
+                  setSheetVisible(true)
+                  setFontFamily('fonts.display.bold')
+                  setFontSize('36 (32 on smaller devices)')
+                  setLineHeight('42 (38 on smaller devices)')
+                  setLetterSpacing('-0.5')
+                }}
+                accessibilityLabel="heroBold"
+              />
+            </TextBox>
+            <TextBox key={2}>
+              <Text variant="heroNormal">heroNormal</Text>
+              <IconButton
+                variant="plain"
+                name="information"
+                onPress={() => {
+                  setSheetVisible(true)
+                  setFontFamily('fonts.display.medium')
+                  setFontSize('36 (32 on smaller devices)')
+                  setLineHeight('42 (38 on smaller devices)')
+                  setLetterSpacing('-0.5')
+                }}
+                accessibilityLabel="heroNormal"
+              />
+            </TextBox>
+            <SectionHeader title="Body" />
+            <TextBox key={3}>
+              <Text variant="bodyTitleLarge">bodyTitleLarge</Text>
+              <IconButton
+                variant="plain"
+                name="information"
+                onPress={() => {
+                  setSheetVisible(true)
+                  setFontFamily('fonts.medium')
+                  setFontSize('16 (14 on smaller devices)')
+                  setLineHeight('22 (20 on smaller devices)')
+                }}
+                accessibilityLabel="bodyTitleLarge"
+              />
+            </TextBox>
+            <TextBox key={4}>
+              <Text variant="bodyTitleSmall">bodyTitleSmall</Text>
+              <IconButton
+                variant="plain"
+                name="information"
+                onPress={() => {
+                  setSheetVisible(true)
+                  setFontFamily('fonts.medium')
+                  setFontSize('13 (12 on smaller devices)')
+                  setLineHeight('18 (17 on smaller devices)')
+                }}
+                accessibilityLabel="bodyTitleLarge"
+              />
+            </TextBox>
+            <TextBox key={5}>
+              <Text variant="bodyLargeBold">bodyLargeBold</Text>
+              <IconButton
+                variant="plain"
+                name="information"
+                onPress={() => {
+                  setSheetVisible(true)
+                  setFontFamily('fonts.bold')
+                  setFontSize('16 (14 on smaller devices)')
+                  setLineHeight('22 (20 on smaller devices)')
+                }}
+                accessibilityLabel="bodyLargeBold"
+              />
+            </TextBox>
+            <TextBox key={6}>
+              <Text variant="bodyLarge" color="foregrounds-regular">
+                bodyLarge (default variant)
+              </Text>
+              <IconButton
+                variant="plain"
+                name="information"
+                onPress={() => {
+                  setSheetVisible(true)
+                  setFontFamily('fonts.regular')
+                  setFontSize('16 (14 on smaller devices)')
+                  setLineHeight('22 (20 on smaller devices)')
+                }}
+                accessibilityLabel="bodyLarge"
+              />
+            </TextBox>
+            <TextBox key={7}>
+              <Text style={{color: '#336699'}}>
+                bodyLarge with custom color
+              </Text>
+              <IconButton
+                variant="plain"
+                name="information"
+                onPress={() => {
+                  setSheetVisible(true)
+                  setFontFamily('fonts.regular')
+                  setFontSize('16 (14 on smaller devices)')
+                  setLineHeight('22 (20 on smaller devices)')
+                }}
+                accessibilityLabel="bodyLargeBold"
+              />
+            </TextBox>
+            <TextBox key={8}>
+              <Text variant="bodySmallBold">bodySmallBold</Text>
+              <IconButton
+                variant="plain"
+                name="information"
+                onPress={() => {
+                  setSheetVisible(true)
+                  setFontFamily('fonts.bold')
+                  setFontSize('13 (12 on smaller devices)')
+                  setLineHeight('18 (17 on smaller devices)')
+                }}
+                accessibilityLabel="bodySmallBold"
+              />
+            </TextBox>
+            <TextBox key={9}>
+              <Text variant="bodySmall">bodySmall</Text>
+              <IconButton
+                variant="plain"
+                name="information"
+                onPress={() => {
+                  setSheetVisible(true)
+                  setFontFamily('fonts.regular')
+                  setFontSize('13 (12 on smaller devices)')
+                  setLineHeight('18 (17 on smaller devices)')
+                }}
+                accessibilityLabel="bodySmall"
+              />
+            </TextBox>
+            <SectionHeader title="Caption" />
+            <TextBox key={10}>
+              <Text variant="captionBold">captionBold</Text>
+              <IconButton
+                variant="plain"
+                name="information"
+                onPress={() => {
+                  setSheetVisible(true)
+                  setFontFamily('fonts.bold')
+                  setFontSize('12 (11 on smaller devices)')
+                  setLineHeight('16 (15 on smaller devices)')
+                }}
+                accessibilityLabel="captionBold"
+              />
+            </TextBox>
+            <TextBox key={11}>
+              <Text variant="caption">caption</Text>
+              <IconButton
+                variant="plain"
+                name="information"
+                onPress={() => {
+                  setSheetVisible(true)
+                  setFontFamily('fonts.regular')
+                  setFontSize('12 (11 on smaller devices)')
+                  setLineHeight('16 (15 on smaller devices)')
+                }}
+                accessibilityLabel="caption"
+              />
+            </TextBox>
+          </Box>
+        </ScrollView>
+      </SafeAreaView>
+      {sheetVisible ? (
+        <DetailsBottomSheet
+          key="bottomsheet"
+          lineHeight={lineHeight}
+          fontFamily={fontFamily}
+          fontSize={fontSize}
+          letterSpacing={letterSpacing}
+          onDismiss={() => {
+            setSheetVisible(false)
+            setFontFamily('')
+            setFontSize('')
+            setLineHeight('')
+            setLetterSpacing('')
+          }}
+        />
+      ) : null}
+    </>
+  )
+}

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

@@ -0,0 +1,42 @@
+import {useRef} from 'react'
+import {SafeAreaView} from 'react-native'
+import {
+  Box,
+  Button,
+  WebView,
+  WebViewRef,
+  useTheme,
+} from '@shopify/shop-minis-platform-sdk'
+
+import {Header} from '../components/Header'
+
+export const WebViewScreen = () => {
+  const ref = useRef<WebViewRef>(null)
+  const theme = useTheme()
+
+  return (
+    <SafeAreaView
+      style={{flex: 1, backgroundColor: theme.colors['backgrounds-regular']}}
+    >
+      <Header />
+      <WebView
+        ref={ref}
+        originAllowlist={['https://shop.app*']}
+        source={{uri: 'https://shop.app'}}
+        style={{
+          width: '100%',
+          height: '100%',
+        }}
+      />
+
+      <Box
+        position="absolute"
+        bottom={32}
+        width="100%"
+        paddingHorizontal="gutter"
+      >
+        <Button onPress={() => ref.current?.reload()} text="Reload WebView" />
+      </Box>
+    </SafeAreaView>
+  )
+}

package/templates/__template_hello_world/src/types.ts

@@ -0,0 +1,25 @@
+// @react-navigation/native-stack requires a `type` instead of an `interface`
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export type StackParamList = {
+  '__MINI_APP_HANDLE_PASCAL_CASE__.Home': undefined
+  '__MINI_APP_HANDLE_PASCAL_CASE__.Modal': undefined
+  '__MINI_APP_HANDLE_PASCAL_CASE__.ProductCard': undefined
+  '__MINI_APP_HANDLE_PASCAL_CASE__.ProductCardGrid': undefined
+  '__MINI_APP_HANDLE_PASCAL_CASE__.ProductLink': undefined
+  '__MINI_APP_HANDLE_PASCAL_CASE__.Typography': undefined
+  '__MINI_APP_HANDLE_PASCAL_CASE__.BottomSheet': undefined
+  '__MINI_APP_HANDLE_PASCAL_CASE__.Buttons': undefined
+  '__MINI_APP_HANDLE_PASCAL_CASE__.Icons': undefined
+  '__MINI_APP_HANDLE_PASCAL_CASE__.Media': undefined
+  '__MINI_APP_HANDLE_PASCAL_CASE__.QuantityPicker': undefined
+  '__MINI_APP_HANDLE_PASCAL_CASE__.WebView': undefined
+  '__MINI_APP_HANDLE_PASCAL_CASE__.Query': undefined
+  '__MINI_APP_HANDLE_PASCAL_CASE__.ShopActions': undefined
+  '__MINI_APP_HANDLE_PASCAL_CASE__.Html': undefined
+  '__MINI_APP_HANDLE_PASCAL_CASE__.Params': undefined
+  '__MINI_APP_HANDLE_PASCAL_CASE__.ProgressIndicator': undefined
+  '__MINI_APP_HANDLE_PASCAL_CASE__.Spinner': undefined
+  '__MINI_APP_HANDLE_PASCAL_CASE__.Grid': undefined
+  '__MINI_APP_HANDLE_PASCAL_CASE__.Avatar': undefined
+  '__MINI_APP_HANDLE_PASCAL_CASE__.KeyboardAvoidingView': undefined
+}

package/templates/__template_snowboardz/src/assets/assets.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: any
+  export default content
+}

package/templates/__template_snowboardz/src/assets/circle-blue.svg

@@ -0,0 +1,9 @@
+<svg width="41" height="40" viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.199997" width="40" height="40" rx="20" fill="url(#paint0_linear_277_3614)"/>
+<defs>
+<linearGradient id="paint0_linear_277_3614" x1="20.2" y1="0" x2="20.2" y2="40" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8ACDFD"/>
+<stop offset="1" stop-color="#3D5EEA"/>
+</linearGradient>
+</defs>
+</svg>

package/templates/__template_snowboardz/src/assets/circle-green.svg

@@ -0,0 +1,9 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="40" height="40" rx="20" fill="url(#paint0_linear_277_3611)"/>
+<defs>
+<linearGradient id="paint0_linear_277_3611" x1="20" y1="0" x2="20" y2="40" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2CCB29"/>
+<stop offset="1" stop-color="#23B7AE"/>
+</linearGradient>
+</defs>
+</svg>

package/templates/__template_snowboardz/src/assets/circle-purple.svg

@@ -0,0 +1,9 @@
+<svg width="41" height="40" viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.399994" width="40" height="40" rx="20" fill="url(#paint0_linear_277_3612)"/>
+<defs>
+<linearGradient id="paint0_linear_277_3612" x1="20.4" y1="0" x2="20.4" y2="40" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CE9CE4"/>
+<stop offset="1" stop-color="#6D41CB"/>
+</linearGradient>
+</defs>
+</svg>

package/templates/__template_snowboardz/src/assets/circle-rainbow.svg

@@ -0,0 +1,34 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_277_3873)">
+<circle cx="20" cy="20" r="20" transform="rotate(-180 20 20)" fill="#FFB7D8"/>
+<circle cx="20" cy="20" r="17" transform="rotate(-180 20 20)" fill="#750CD6"/>
+<circle cx="20" cy="20" r="14" transform="rotate(-180 20 20)" fill="#0098DB"/>
+<circle cx="20" cy="20" r="11" transform="rotate(-180 20 20)" fill="#78C301"/>
+<circle cx="20" cy="20" r="8" transform="rotate(-180 20 20)" fill="#F5CF3E"/>
+<circle cx="20" cy="20" r="5" transform="rotate(-180 20 20)" fill="#FE6C37"/>
+<circle cx="20" cy="20" r="2" transform="rotate(-180 20 20)" fill="#DE2826"/>
+<rect x="40" y="20" width="3" height="21" transform="rotate(-180 40 20)" fill="#FFB7D8"/>
+<rect x="3" y="20" width="3" height="21" transform="rotate(-180 3 20)" fill="#FFB7D8"/>
+<rect x="37" y="20" width="3" height="21" transform="rotate(-180 37 20)" fill="#750CD6"/>
+<rect x="6" y="20" width="3" height="21" transform="rotate(-180 6 20)" fill="#750CD6"/>
+<rect x="34" y="20" width="3" height="21" transform="rotate(-180 34 20)" fill="#0098DB"/>
+<rect x="9" y="20" width="3" height="21" transform="rotate(-180 9 20)" fill="#0098DB"/>
+<rect x="31" y="20" width="3" height="21" transform="rotate(-180 31 20)" fill="#78C301"/>
+<rect x="12" y="20" width="3" height="21" transform="rotate(-180 12 20)" fill="#78C301"/>
+<rect x="28" y="20" width="3" height="21" transform="rotate(-180 28 20)" fill="#F5CF3E"/>
+<rect x="15" y="20" width="3" height="21" transform="rotate(-180 15 20)" fill="#F5CF3E"/>
+<rect x="25" y="20" width="3" height="21" transform="rotate(-180 25 20)" fill="#FE6C37"/>
+<rect x="18" y="20" width="3" height="21" transform="rotate(-180 18 20)" fill="#FE6C37"/>
+<rect x="22" y="20" width="4" height="21" transform="rotate(-180 22 20)" fill="#DE2826"/>
+<rect width="40" height="40" fill="url(#paint0_linear_277_3873)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_277_3873" x1="20" y1="0" x2="20" y2="40" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0"/>
+<stop offset="1" stop-opacity="0.2"/>
+</linearGradient>
+<clipPath id="clip0_277_3873">
+<rect x="40" y="40" width="40" height="40" rx="20" transform="rotate(-180 40 40)" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/templates/__template_snowboardz/src/assets/circle-red.svg

@@ -0,0 +1,9 @@
+<svg width="41" height="40" viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.599991" width="40" height="40" rx="20" fill="url(#paint0_linear_277_3615)"/>
+<defs>
+<linearGradient id="paint0_linear_277_3615" x1="20.6" y1="0" x2="20.6" y2="40" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EF6767"/>
+<stop offset="1" stop-color="#731D4B"/>
+</linearGradient>
+</defs>
+</svg>

package/templates/__template_snowboardz/src/assets/circle-yellow.svg

@@ -0,0 +1,9 @@
+<svg width="41" height="40" viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.800003" width="40" height="40" rx="20" fill="url(#paint0_linear_277_3613)"/>
+<defs>
+<linearGradient id="paint0_linear_277_3613" x1="20.8" y1="0" x2="20.8" y2="40" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E8D846"/>
+<stop offset="1" stop-color="#968C34"/>
+</linearGradient>
+</defs>
+</svg>

package/templates/__template_snowboardz/src/assets/skill-level-icon-advanced.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="8" width="11" height="11" transform="rotate(-45 0 8)" fill="black"/>
+</svg>

package/templates/__template_snowboardz/src/assets/skill-level-icon-beginner.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8" cy="8" r="8" fill="#008552"/>
+</svg>

package/templates/__template_snowboardz/src/assets/skill-level-icon-intermediate.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="14" height="14" fill="#33A9EB"/>
+</svg>

package/templates/__template_snowboardz/src/components/ColorButton.tsx

@@ -0,0 +1,79 @@
+import {Box, Text} from '@shopify/shop-minis-platform-sdk'
+import {StyleSheet, TouchableOpacity} from 'react-native'
+
+import CircleGreen from '../assets/circle-green.svg'
+import CirclePurple from '../assets/circle-purple.svg'
+import CircleYellow from '../assets/circle-yellow.svg'
+import CircleBlue from '../assets/circle-blue.svg'
+import CircleRed from '../assets/circle-red.svg'
+import CircleRainbow from '../assets/circle-rainbow.svg'
+
+const colorMap = {
+  green: CircleGreen,
+  purple: CirclePurple,
+  yellow: CircleYellow,
+  blue: CircleBlue,
+  red: CircleRed,
+}
+
+interface Props {
+  onPress: () => void
+  color: string
+  selected?: boolean
+  isResetButton?: boolean
+}
+export const ColorButton = ({
+  onPress,
+  color,
+  selected,
+  isResetButton,
+}: Props) => {
+  const ColoredCircle = colorMap[color as keyof typeof colorMap]
+
+  if (isResetButton) {
+    return (
+      <TouchableOpacity onPress={onPress}>
+        <Box style={[styles.circleContainer]}>
+          {selected ? null : (
+            <Text
+              variant="bodySmall"
+              color="foregrounds-primary"
+              style={styles.resetText}
+            >
+              Reset
+            </Text>
+          )}
+          <CircleRainbow />
+        </Box>
+      </TouchableOpacity>
+    )
+  }
+
+  if (!ColoredCircle) return null
+
+  return (
+    <>
+      <TouchableOpacity onPress={onPress}>
+        <Box style={[styles.circleContainer, selected && styles.selected]}>
+          <ColoredCircle />
+        </Box>
+      </TouchableOpacity>
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  circleContainer: {
+    padding: 2,
+    borderWidth: 2,
+    borderRadius: 100,
+    borderColor: 'transparent',
+  },
+  selected: {
+    borderColor: 'black',
+  },
+  resetText: {
+    position: 'absolute',
+    top: -24,
+  },
+})

package/templates/__template_snowboardz/src/components/ColorPicker.tsx

@@ -0,0 +1,40 @@
+import {Box, Text} from '@shopify/shop-minis-platform-sdk'
+
+import {ColorButton} from './ColorButton'
+
+interface ColorPickerProps {
+  handleSelectedColor: (handleSelectedColor: string | null) => void
+  selectedColor: string | null
+  snowboardColors: string[]
+}
+export const ColorPicker = ({
+  handleSelectedColor,
+  selectedColor,
+  snowboardColors,
+}: ColorPickerProps) => {
+  if (!snowboardColors || snowboardColors.length < 1) {
+    return null
+  }
+
+  return (
+    <>
+      <Text marginBottom="xs">Select color</Text>
+      <Box justifyContent="space-between" flexDirection="row">
+        {snowboardColors.map(color => (
+          <ColorButton
+            selected={selectedColor === color}
+            key={color}
+            color={color}
+            onPress={() => handleSelectedColor(color)}
+          />
+        ))}
+        <ColorButton
+          selected={!selectedColor}
+          color="Reset"
+          isResetButton
+          onPress={() => handleSelectedColor(null)}
+        />
+      </Box>
+    </>
+  )
+}

package/templates/__template_snowboardz/src/components/EmptyResult.tsx

@@ -0,0 +1,52 @@
+import {Box, Button, Text, theme} from '@shopify/shop-minis-platform-sdk'
+import {useMemo} from 'react'
+
+import {SkillLevel} from '../types'
+
+interface Props {
+  selectedColor: string | null
+  selectedSkillLevel: SkillLevel | null
+  handleFilterReset: () => void
+}
+
+export const EmptyResult = ({
+  selectedColor,
+  selectedSkillLevel,
+  handleFilterReset,
+}: Props) => {
+  const feedback = useMemo(() => {
+    if (selectedColor && selectedSkillLevel) {
+      return `No ${selectedColor} boards for ${selectedSkillLevel.toLowerCase()} riders`
+    }
+    if (!selectedColor && selectedSkillLevel) {
+      return `No boards for ${selectedSkillLevel.toLowerCase()} riders`
+    }
+    if (selectedColor && !selectedSkillLevel) {
+      return `No ${selectedColor} boards`
+    }
+    if (!selectedColor && !selectedSkillLevel) {
+      return 'No boards'
+    }
+  }, [selectedColor, selectedSkillLevel])
+
+  const showResetButton = useMemo(() => {
+    return selectedColor || selectedSkillLevel
+  }, [selectedColor, selectedSkillLevel])
+
+  return (
+    <Box paddingVertical="l" justifyContent="center" alignContent="center">
+      <Text variant="heroNormal" textAlign="center" marginBottom="m">
+        {feedback} :&apos;-(
+      </Text>
+      {showResetButton ? (
+        <Button
+          style={{
+            marginHorizontal: theme.spacing.gutter,
+          }}
+          text="Reset Filters"
+          onPress={handleFilterReset}
+        />
+      ) : null}
+    </Box>
+  )
+}

package/templates/__template_snowboardz/src/components/SkillLevelIcon.tsx

@@ -0,0 +1,44 @@
+import {StyleSheet} from 'react-native'
+import {Box} from '@shopify/shop-minis-platform-sdk'
+
+import AdvancedIcon from '../assets/skill-level-icon-advanced.svg'
+import BeginnerIcon from '../assets/skill-level-icon-beginner.svg'
+import IntermediateIcon from '../assets/skill-level-icon-intermediate.svg'
+import {SkillLevel} from '../types'
+
+interface LevelIconProps {
+  level: SkillLevel
+}
+export const SkillLevelIcon = ({level}: LevelIconProps) => {
+  let Icon
+
+  switch (level) {
+    case 'Beginner':
+      Icon = BeginnerIcon
+      break
+    case 'Intermediate':
+      Icon = IntermediateIcon
+      break
+    case 'Advanced':
+      Icon = AdvancedIcon
+      break
+    default:
+      Icon = null
+      break
+  }
+
+  return (
+    <Box style={styles.iconWrapper}>
+      <Icon />
+    </Box>
+  )
+}
+
+const styles = StyleSheet.create({
+  iconWrapper: {
+    position: 'absolute',
+    left: 14,
+    width: 16,
+    height: 16,
+  },
+})