From c5b981b2a56f40358363f6eee1dd524589bb69a7 Mon Sep 17 00:00:00 2001
From: Peace <syneffort@gmail.com>
Date: Thu, 11 Sep 2025 14:12:59 +0900
Subject: [PATCH] sp

---
 expo.project/components/ui/card/index.tsx     | 26 +++++++++++++++++++
 expo.project/components/ui/card/index.web.tsx | 23 ++++++++++++++++
 expo.project/components/ui/card/styles.tsx    | 20 ++++++++++++++
 3 files changed, 69 insertions(+)
 create mode 100755 expo.project/components/ui/card/index.tsx
 create mode 100755 expo.project/components/ui/card/index.web.tsx
 create mode 100755 expo.project/components/ui/card/styles.tsx

diff --git a/expo.project/components/ui/card/index.tsx b/expo.project/components/ui/card/index.tsx
new file mode 100755
index 0000000..27ee60f
--- /dev/null
+++ b/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 };
diff --git a/expo.project/components/ui/card/index.web.tsx b/expo.project/components/ui/card/index.web.tsx
new file mode 100755
index 0000000..687f649
--- /dev/null
+++ b/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 };
diff --git a/expo.project/components/ui/card/styles.tsx b/expo.project/components/ui/card/styles.tsx
new file mode 100755
index 0000000..aa154e9
--- /dev/null
+++ b/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',
+    },
+  },
+});