Composable Coin Sheet component

Author: youngkidwarrior

packages/app/components/CoinSheet.tsx

@@ -0,0 +1,74 @@
+import { Button, Paragraph, Sheet, type SheetProps, useMedia, XStack, YStack } from '@my/ui'
+import { IconCoin } from 'app/components/icons/IconCoin'
+import type { coin } from 'app/data/coins'
+import type { PropsWithChildren } from 'react'
+import { IconX } from './icons'
+
+export const CoinSheet = ({ children, ...props }: PropsWithChildren<SheetProps>) => {
+  const media = useMedia()
+  return (
+    <Sheet
+      modal={media.lg}
+      dismissOnSnapToBottom
+      snapPoints={['fit']}
+      snapPointsMode="fit"
+      animation={'quick'}
+      zIndex={100_000}
+      {...props}
+    >
+      <Sheet.Frame elevation={'$5'} w={'100%'} bc={'$color1'}>
+        {children}
+      </Sheet.Frame>
+      {media.lg ? (
+        <Sheet.Overlay animation="quick" enterStyle={{ opacity: 0 }} exitStyle={{ opacity: 0 }} />
+      ) : (
+        <Sheet.Overlay opacity={0} />
+      )}
+    </Sheet>
+  )
+}
+
+const Handle = ({ children, onPress }: PropsWithChildren & { onPress: () => void }) => (
+  <Sheet.Handle py="$6" f={1} bc="transparent" jc={'space-between'} opacity={1} m={0}>
+    <XStack ai="center" jc="space-between" w="100%" px="$4">
+      <Paragraph fontSize={'$5'} fontWeight={'700'} color={'$color12'}>
+        {children}
+      </Paragraph>
+      <Button chromeless icon={<IconX color={'$color12'} size={'$2'} />} onPress={onPress} />
+    </XStack>
+  </Sheet.Handle>
+)
+
+const Item = ({ coin }: { coin: coin }) => {
+  return (
+    <XStack gap={'$2'} jc={'space-between'} py="$2" px="$3">
+      <XStack gap={'$2'} ai={'center'}>
+        <IconCoin symbol={coin.symbol} />
+        <Paragraph
+          fontSize={'$5'}
+          fontWeight={'500'}
+          textTransform={'uppercase'}
+          color={'$color12'}
+        >
+          {coin.label}
+        </Paragraph>
+      </XStack>
+    </XStack>
+  )
+}
+
+const Items = ({ children }: PropsWithChildren) => {
+  return (
+    <Sheet.ScrollView>
+      <XStack als="flex-start" w="100%" boc={'transparent'} f={1} jc={'flex-start'}>
+        <YStack gap="$1" p={'$2'} w="100%">
+          {children}
+        </YStack>
+      </XStack>
+    </Sheet.ScrollView>
+  )
+}
+
+CoinSheet.Item = Item
+CoinSheet.Handle = Handle
+CoinSheet.Items = Items