fix gluestackUI

ArtisanConnect/components/ui/vstack/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+import { View } from 'react-native';
+
+import { vstackStyle } from './styles';
+
+type IVStackProps = React.ComponentProps<typeof View> &
+  VariantProps<typeof vstackStyle>;
+
+const VStack = React.forwardRef<React.ComponentRef<typeof View>, IVStackProps>(
+  function VStack({ className, space, reversed, ...props }, ref) {
+    return (
+      <View
+        className={vstackStyle({ space, reversed, class: className })}
+        {...props}
+        ref={ref}
+      />
+    );
+  }
+);
+
+VStack.displayName = 'VStack';
+
+export { VStack };

ArtisanConnect/components/ui/vstack/index.web.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+
+import { vstackStyle } from './styles';
+
+type IVStackProps = React.ComponentProps<'div'> &
+  VariantProps<typeof vstackStyle>;
+
+const VStack = React.forwardRef<React.ComponentRef<'div'>, IVStackProps>(
+  function VStack({ className, space, reversed, ...props }, ref) {
+    return (
+      <div
+        className={vstackStyle({ space, reversed, class: className })}
+        {...props}
+        ref={ref}
+      />
+    );
+  }
+);
+
+VStack.displayName = 'VStack';
+
+export { VStack };

ArtisanConnect/components/ui/vstack/styles.tsx

@@ -0,0 +1,25 @@
+import { isWeb } from '@gluestack-ui/nativewind-utils/IsWeb';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+
+const baseStyle = isWeb
+  ? 'flex flex-col relative z-0 box-border border-0 list-none min-w-0 min-h-0 bg-transparent items-stretch m-0 p-0 text-decoration-none'
+  : '';
+
+export const vstackStyle = tva({
+  base: `flex-col ${baseStyle}`,
+  variants: {
+    space: {
+      'xs': 'gap-1',
+      'sm': 'gap-2',
+      'md': 'gap-3',
+      'lg': 'gap-4',
+      'xl': 'gap-5',
+      '2xl': 'gap-6',
+      '3xl': 'gap-7',
+      '4xl': 'gap-8',
+    },
+    reversed: {
+      true: 'flex-col-reverse',
+    },
+  },
+});