🚧

exactly · Nov 13, 2024 · 729468c · 729468c
1 parent 642f9cf
commit 729468c
Show file tree

Hide file tree

Showing 5 changed files with 181 additions and 2 deletions.
diff --git a/src/app/(app)/card-details/_layout.tsx → src/app/(app)/activity-details/_layout.tsx b/src/app/(app)/card-details/_layout.tsx → src/app/(app)/activity-details/_layout.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import useBackgroundColor from "../../../utils/useBackgroundColor";
 
-export default function CardDetailsLayout() {
+export default function ActivityDetailsLayout() {
   useBackgroundColor();
   return (
     <Stack initialRouteName="index" screenOptions={{ headerShown: false }}>

diff --git a/src/app/(app)/activity-details/index.tsx b/src/app/(app)/activity-details/index.tsx
@@ -0,0 +1 @@
+export { default } from "../../../components/activity/ActivityDetails";
diff --git a/src/app/(app)/card-details/index.tsx b/src/app/(app)/card-details/index.tsx
diff --git a/src/components/activity/ActivityDetails.tsx b/src/components/activity/ActivityDetails.tsx
@@ -0,0 +1,174 @@
+import React from "react";
+
+import View from "../shared/View";
+import SafeView from "../shared/SafeView";
+import { Pressable } from "react-native";
+import { router } from "expo-router";
+import { ms } from "react-native-size-matters";
+import { ArrowLeft, ArrowUpFromLine } from "@tamagui/lucide-icons";
+import { Separator, Square, styled, XStack, YStack } from "tamagui";
+import { LinearGradient } from "expo-linear-gradient";
+import Text from "../shared/Text";
+
+const StyledGradient = styled(LinearGradient, {});
+
+const action = "Paid";
+const amount = 2333.0;
+const amountUSD = "$2.333,14";
+const merchant = "Apple Inc.";
+const activity = "Purchase";
+
+export default function ActivityDetails() {
+  const { canGoBack } = router;
+  return (
+    <View fullScreen backgroundColor="$backgroundSoft">
+      <StyledGradient
+        colors={["$backgroundSoft", "transparent"]}
+        position="absolute"
+        top={0}
+        left={0}
+        right={0}
+        height={300}
+      />
+      <SafeView backgroundColor="transparent">
+        <View fullScreen padded>
+          <View gap={ms(20)}>
+            <View flexDirection="row" gap={ms(10)} justifyContent="space-between" alignItems="center">
+              {canGoBack() && (
+                <Pressable
+                  onPress={() => {
+                    router.back();
+                  }}
+                >
+                  <ArrowLeft size={ms(24)} color="$uiNeutralPrimary" />
+                </Pressable>
+              )}
+            </View>
+
+            <YStack gap="$s7" paddingBottom="$s9">
+              <XStack justifyContent="center" alignItems="center">
+                <Square borderRadius="$r4" backgroundColor="$backgroundStrong" size={80}>
+                  <ArrowUpFromLine size={ms(32)} color="$iconBrandDefault" strokeWidth={2} />
+                </Square>
+              </XStack>
+              <YStack gap="$s4_5" justifyContent="center" alignItems="center">
+                <Text secondary body>
+                  {action} &nbsp;
+                  <Text emphasized primary body>
+                    {merchant}
+                  </Text>
+                </Text>
+                <Text title>{amountUSD}</Text>
+                <XStack>
+                  <Text title>{amount} USDC</Text>
+                </XStack>
+              </YStack>
+            </YStack>
+
+            <YStack gap="$s4">
+              <YStack gap="$s4">
+                <Text emphasized headline>
+                  {activity} details
+                </Text>
+                <Separator height={1} borderColor="$borderNeutralSoft" />
+              </YStack>
+              <YStack gap="$s3_5">
+                <XStack justifyContent="space-between">
+                  <Text body color="$uiNeutralPrimary">
+                    Total
+                  </Text>
+                  <Text body color="$uiNeutralPrimary">
+                    {amountUSD}
+                  </Text>
+                </XStack>
+                <XStack justifyContent="space-between">
+                  <Text body color="$uiNeutralPrimary">
+                    Installments
+                  </Text>
+                  <Text body color="$uiNeutralPrimary">
+                    6x {amount / 6}
+                  </Text>
+                </XStack>
+                <XStack justifyContent="space-between">
+                  <Text body color="$uiNeutralPrimary">
+                    Card mode
+                  </Text>
+                  <Text body color="$uiNeutralPrimary">
+                    Credit
+                  </Text>
+                </XStack>
+                <XStack justifyContent="space-between">
+                  <Text body color="$uiNeutralPrimary">
+                    Fixed rate APR
+                  </Text>
+                  <Text body color="$uiNeutralPrimary">
+                    5,41%
+                  </Text>
+                </XStack>
+                <XStack justifyContent="space-between">
+                  <Text body color="$uiNeutralPrimary">
+                    ID
+                  </Text>
+                  <Text body color="$uiNeutralPrimary">
+                    123456789
+                  </Text>
+                </XStack>
+              </YStack>
+            </YStack>
+
+            <YStack gap="$s4">
+              <YStack gap="$s4">
+                <Text emphasized headline>
+                  {activity} details
+                </Text>
+                <Separator height={1} borderColor="$borderNeutralSoft" />
+              </YStack>
+              <YStack gap="$s3_5">
+                <XStack justifyContent="space-between">
+                  <Text body color="$uiNeutralPrimary">
+                    Transaction details
+                  </Text>
+                  <Text body color="$uiNeutralPrimary">
+                    {amountUSD}
+                  </Text>
+                </XStack>
+                <XStack justifyContent="space-between">
+                  <Text body color="$uiNeutralPrimary">
+                    Installments
+                  </Text>
+                  <Text body color="$uiNeutralPrimary">
+                    6x {amount / 6}
+                  </Text>
+                </XStack>
+                <XStack justifyContent="space-between">
+                  <Text body color="$uiNeutralPrimary">
+                    Card mode
+                  </Text>
+                  <Text body color="$uiNeutralPrimary">
+                    Credit
+                  </Text>
+                </XStack>
+                <XStack justifyContent="space-between">
+                  <Text body color="$uiNeutralPrimary">
+                    Fixed rate APR
+                  </Text>
+                  <Text body color="$uiNeutralPrimary">
+                    5,41%
+                  </Text>
+                </XStack>
+                <XStack justifyContent="space-between">
+                  <Text body color="$uiNeutralPrimary">
+                    ID
+                  </Text>
+                  <Text body color="$uiNeutralPrimary">
+                    123456789
+                  </Text>
+                </XStack>
+              </YStack>
+            </YStack>
+          </View>
+        </View>
+      </SafeView>
+    </View>
+  );
+}
diff --git a/src/components/activity/ActivityItem.tsx b/src/components/activity/ActivityItem.tsx
@@ -8,6 +8,7 @@ import { titleCase } from "title-case";
 import type { getActivity } from "../../utils/server";
 import Text from "../shared/Text";
 import View from "../shared/View";
+import { router } from "expo-router";
 
 registerLocale(require("i18n-iso-countries/langs/en.json") as LocaleData); // eslint-disable-line @typescript-eslint/no-require-imports, unicorn/prefer-module
 
@@ -19,6 +20,9 @@ export default function ActivityItem({
   isLast: boolean;
 }) {
   const { amount, id, usdAmount, currency, type, timestamp } = item;
+  function handlePress() {
+    router.push({ pathname: "/activity-details", params: { id } });
+  }
   return (
     <View
       key={id}
@@ -28,6 +32,7 @@ export default function ActivityItem({
       paddingHorizontal="$s5"
       paddingTop="$s3"
       paddingBottom={isLast ? "$s4" : "$s3"}
+      onPress={handlePress}
     >
       <View
         width={ms(40)}