add card component

packages/k2-alpine/src/components/Card/Card.stories.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import { ScrollView, Text, View } from '../Primitives'
+import { useTheme } from '../..'
+import CheckIcon from '../../assets/icons/check.svg'
+import { Card } from './Card'
+
+export default {
+  title: 'Card'
+}
+
+export const All = (): JSX.Element => {
+  const { theme } = useTheme()
+
+  return (
+    <View
+      style={{
+        width: '100%',
+        height: '100%',
+        backgroundColor: theme.colors.$surfacePrimary
+      }}>
+      <ScrollView
+        style={{ backgroundColor: 'transparent' }}
+        contentContainerStyle={{ padding: 16, gap: 16, alignItems: 'center' }}>
+        <Card sx={{ width: '100%' }}>
+          <Text>
+            Lorem Ipsum is simply dummy text of the printing and typesetting
+            industry. Lorem Ipsum has been the industry's standard dummy text
+            ever since the 1500s, when an unknown printer took a galley of type
+            and scrambled it to make a type specimen book. It has survived not
+            only five centuries, but also the leap into electronic typesetting,
+            remaining essentially unchanged.
+          </Text>
+        </Card>
+
+        <Card sx={{ width: '100%', height: 150 }} shouldCenterAlign>
+          <Text>
+            Lorem Ipsum is simply dummy text of the printing and typesetting
+            industry.
+          </Text>
+        </Card>
+
+        <Card sx={{ width: 100, height: 100 }} shouldCenterAlign>
+          <CheckIcon />
+        </Card>
+
+        <Card
+          sx={{ width: 100, height: 100 }}
+          shouldCenterAlign
+          backgroundColorOverride={{ light: 'green', dark: 'blue' }}>
+          <CheckIcon />
+        </Card>
+      </ScrollView>
+    </View>
+  )
+}

packages/k2-alpine/src/components/Card/Card.tsx

@@ -0,0 +1,43 @@
+import React, { PropsWithChildren } from 'react'
+import { SxProp } from 'dripsy'
+import { View } from '../Primitives'
+import { useTheme } from '../..'
+
+export const Card = ({
+  sx,
+  children,
+  shouldCenterAlign = false,
+  backgroundColorOverride
+}: {
+  sx?: SxProp
+  shouldCenterAlign?: boolean
+  backgroundColorOverride?: {
+    light: string
+    dark: string
+  }
+} & PropsWithChildren): React.JSX.Element => {
+  const { theme } = useTheme()
+
+  const getBackgroundColor = (): string => {
+    if (backgroundColorOverride) {
+      return theme.isDark
+        ? backgroundColorOverride.dark
+        : backgroundColorOverride?.light
+    }
+    return theme.isDark ? '#3B3B3D' : '#F2F2F3'
+  }
+
+  return (
+    <View
+      sx={{
+        borderRadius: 18,
+        padding: 17,
+        backgroundColor: getBackgroundColor(),
+        justifyContent: shouldCenterAlign ? 'center' : undefined,
+        alignItems: shouldCenterAlign ? 'center' : undefined,
+        ...sx
+      }}>
+      {children}
+    </View>
+  )
+}