sp

expo.project/components/ui/card/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { VariantProps } from '@gluestack-ui/utils/nativewind-utils';
+import { View, ViewProps } from 'react-native';
+import { cardStyle } from './styles';
+
+type ICardProps = ViewProps &
+  VariantProps<typeof cardStyle> & { className?: string };
+
+const Card = React.forwardRef<React.ComponentRef<typeof View>, ICardProps>(
+  function Card(
+    { className, size = 'md', variant = 'elevated', ...props },
+    ref
+  ) {
+    return (
+      <View
+        className={cardStyle({ size, variant, class: className })}
+        {...props}
+        ref={ref}
+      />
+    );
+  }
+);
+
+Card.displayName = 'Card';
+
+export { Card };

expo.project/components/ui/card/index.web.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { cardStyle } from './styles';
+import type { VariantProps } from '@gluestack-ui/utils/nativewind-utils';
+
+type ICardProps = React.ComponentPropsWithoutRef<'div'> &
+  VariantProps<typeof cardStyle>;
+
+const Card = React.forwardRef<HTMLDivElement, ICardProps>(function Card(
+  { className, size = 'md', variant = 'elevated', ...props },
+  ref
+) {
+  return (
+    <div
+      className={cardStyle({ size, variant, class: className })}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+
+Card.displayName = 'Card';
+
+export { Card };

expo.project/components/ui/card/styles.tsx

@@ -0,0 +1,20 @@
+import { tva } from '@gluestack-ui/utils/nativewind-utils';
+import { isWeb } from '@gluestack-ui/utils/nativewind-utils';
+const baseStyle = isWeb ? 'flex flex-col relative z-0' : '';
+
+export const cardStyle = tva({
+  base: baseStyle,
+  variants: {
+    size: {
+      sm: 'p-3 rounded',
+      md: 'p-4 rounded-md',
+      lg: 'p-6 rounded-xl',
+    },
+    variant: {
+      elevated: 'bg-background-0',
+      outline: 'border border-outline-200 ',
+      ghost: 'rounded-none',
+      filled: 'bg-background-50',
+    },
+  },
+});