feat(card-onboard): split mobile and desktop into separate components

components/CardWaitlist/CardWaitlistPage.tsx

@@ -1,63 +1,11 @@
-import React, { useState } from 'react';
-import { Pressable, View } from 'react-native';
-import { Image } from 'expo-image';
-import { ChevronRight } from 'lucide-react-native';
-
-import AuthButton from '@/components/AuthButton';
-import CardFeesModal from '@/components/CardWaitlist/CardFeesModal';
-import CardWaitlistContainer from '@/components/CardWaitlist/CardWaitlistContainer';
-import CardWaitlistHeader from '@/components/CardWaitlist/CardWaitlistHeader';
-import CardWaitlistHeaderButtons from '@/components/CardWaitlist/CardWaitlistHeaderButtons';
-import CardWaitlistHeaderTitle from '@/components/CardWaitlist/CardWaitlistHeaderTitle';
-import GetCardButton from '@/components/CardWaitlist/GetCardButton';
-import SolidCardSummary from '@/components/CardWaitlist/SolidCardSummary';
-import { Text } from '@/components/ui/text';
+import CardWaitlistPageDesktop from '@/components/CardWaitlist/CardWaitlistPageDesktop';
+import CardWaitlistPageMobile from '@/components/CardWaitlist/CardWaitlistPageMobile';
 import { useDimension } from '@/hooks/useDimension';
-import { getAsset } from '@/lib/assets';
 
 const CardWaitlistPage = () => {
   const { isScreenMedium } = useDimension();
-  const [feesOpen, setFeesOpen] = useState(false);
-
-  return (
-    <CardWaitlistHeader
-      content={
-        <View className="md:flex-row md:items-center md:justify-between">
-          <CardWaitlistHeaderTitle />
-          {isScreenMedium && <CardWaitlistHeaderButtons />}
-        </View>
-      }
-    >
-      <CardWaitlistContainer>
-        <View className="flex-1 gap-8 bg-transparent p-5 py-7 pb-20 md:justify-center md:gap-10 md:px-12 md:py-10">
-          <SolidCardSummary />
-
-          {!isScreenMedium && (
-            <Image
-              source={getAsset('images/cards.png')}
-              style={{ width: 289, height: 305 }}
-              contentFit="contain"
-            />
-          )}
-
-          <View className="flex-row items-center gap-6">
-            <AuthButton>
-              <GetCardButton />
-            </AuthButton>
-            <Pressable
-              onPress={() => setFeesOpen(true)}
-              className="flex-row items-center gap-1 web:hover:opacity-70"
-            >
-              <Text className="text-base font-bold">Fees and charges</Text>
-              <ChevronRight size={16} color="white" />
-            </Pressable>
-          </View>
-        </View>
-      </CardWaitlistContainer>
 
-      <CardFeesModal isOpen={feesOpen} onOpenChange={setFeesOpen} />
-    </CardWaitlistHeader>
-  );
+  return isScreenMedium ? <CardWaitlistPageDesktop /> : <CardWaitlistPageMobile />;
 };
 
 export default CardWaitlistPage;

components/CardWaitlist/CardWaitlistPageDesktop.tsx

@@ -0,0 +1,51 @@
+import { useState } from 'react';
+import { Pressable, View } from 'react-native';
+import { ChevronRight } from 'lucide-react-native';
+
+import AuthButton from '@/components/AuthButton';
+import CardFeesModal from '@/components/CardWaitlist/CardFeesModal';
+import CardWaitlistContainer from '@/components/CardWaitlist/CardWaitlistContainer';
+import CardWaitlistHeader from '@/components/CardWaitlist/CardWaitlistHeader';
+import CardWaitlistHeaderButtons from '@/components/CardWaitlist/CardWaitlistHeaderButtons';
+import CardWaitlistHeaderTitle from '@/components/CardWaitlist/CardWaitlistHeaderTitle';
+import GetCardButton from '@/components/CardWaitlist/GetCardButton';
+import SolidCardSummary from '@/components/CardWaitlist/SolidCardSummary';
+import { Text } from '@/components/ui/text';
+
+const CardWaitlistPageDesktop = () => {
+  const [feesOpen, setFeesOpen] = useState(false);
+
+  return (
+    <CardWaitlistHeader
+      content={
+        <View className="md:flex-row md:items-center md:justify-between">
+          <CardWaitlistHeaderTitle />
+          <CardWaitlistHeaderButtons />
+        </View>
+      }
+    >
+      <CardWaitlistContainer>
+        <View className="flex-1 justify-center gap-10 bg-transparent px-12 py-10">
+          <SolidCardSummary />
+
+          <View className="flex-row items-center gap-6">
+            <AuthButton>
+              <GetCardButton />
+            </AuthButton>
+            <Pressable
+              onPress={() => setFeesOpen(true)}
+              className="flex-row items-center gap-1 web:hover:opacity-70"
+            >
+              <Text className="text-base font-bold">Fees and charges</Text>
+              <ChevronRight size={16} color="white" />
+            </Pressable>
+          </View>
+        </View>
+      </CardWaitlistContainer>
+
+      <CardFeesModal isOpen={feesOpen} onOpenChange={setFeesOpen} />
+    </CardWaitlistHeader>
+  );
+};
+
+export default CardWaitlistPageDesktop;

components/CardWaitlist/CardWaitlistPageMobile.tsx

@@ -0,0 +1,55 @@
+import { useState } from 'react';
+import { Pressable, View } from 'react-native';
+import { Image } from 'expo-image';
+import { ChevronRight } from 'lucide-react-native';
+
+import AuthButton from '@/components/AuthButton';
+import CardFeesModal from '@/components/CardWaitlist/CardFeesModal';
+import GetCardButton from '@/components/CardWaitlist/GetCardButton';
+import PageLayout from '@/components/PageLayout';
+import { Text } from '@/components/ui/text';
+import { getAsset } from '@/lib/assets';
+
+const CardWaitlistPageMobile = () => {
+  const [feesOpen, setFeesOpen] = useState(false);
+
+  return (
+    <PageLayout
+      scrollable={false}
+      additionalContent={<CardFeesModal isOpen={feesOpen} onOpenChange={setFeesOpen} />}
+    >
+      <View className="flex-1 px-5 pb-4 pt-2">
+        <View className="flex-1 items-center justify-center">
+          <Image
+            source={getAsset('images/cards.png')}
+            style={{ width: 280, height: 305 }}
+            contentFit="contain"
+          />
+        </View>
+
+        <View className="mb-10 items-center gap-3">
+          <Text className="text-center text-3xl font-semibold">Free Visa Card</Text>
+          <Text className="max-w-xs text-center text-base text-muted-foreground">
+            3% cashback on all purchases. No monthly charge or hidden fees
+          </Text>
+        </View>
+
+        <View className="mb-6 items-center">
+          <Pressable
+            onPress={() => setFeesOpen(true)}
+            className="flex-row items-center gap-1 web:hover:opacity-70"
+          >
+            <Text className="text-base font-bold">Fees and charges</Text>
+            <ChevronRight size={16} color="white" />
+          </Pressable>
+        </View>
+
+        <AuthButton>
+          <GetCardButton className="w-full" />
+        </AuthButton>
+      </View>
+    </PageLayout>
+  );
+};
+
+export default CardWaitlistPageMobile;