Merge pull request #69 from GenerateNU/feature/guide-collections

Feature/guide collections

.pre-commit-config.yaml

@@ -1,19 +1,19 @@
 repos:
--   repo: https://github.com/pre-commit/pre-commit-hooks
+  - repo: https://github.com/pre-commit/pre-commit-hooks
     rev: v4.4.0
     hooks:
-      -   id: check-added-large-files
-      -   id: check-executables-have-shebangs
-      -   id: check-merge-conflict
--   repo: https://github.com/dnephin/pre-commit-golang
+      - id: check-added-large-files
+      - id: check-executables-have-shebangs
+      - id: check-merge-conflict
+  - repo: https://github.com/dnephin/pre-commit-golang
     rev: v0.5.1
     hooks:
-      -   id: go-fmt
-      -   id: go-mod-tidy
--   repo: local
-    hooks:
-      -   id: yarn-format"
-          name: "yarn format"
-          entry: ./scripts/precommit-yarn-format.sh
-          language: script
-          always_run: true
+      - id: go-fmt
+      - id: go-mod-tidy
+# -   repo: local
+#     hooks:
+#       -   id: yarn-format"
+#           name: "yarn format"
+#           entry: ./scripts/precommit-yarn-format.sh
+#           language: script
+#           always_run: true

client-new/src/components/guideCollection/GuideCard.tsx

@@ -0,0 +1,74 @@
+import { Box, Image, Text, View } from 'native-base';
+
+import React from 'react';
+import {
+  heightPercentageToDP as h,
+  widthPercentageToDP as w
+} from 'react-native-responsive-screen';
+
+import { moderateScale } from '../../utils/FontSizeUtils';
+import CoupleIcon from '../icons/CoupleIcon';
+import SheWritingIcon from '../icons/SheWritingIcon';
+import SittingIcon from '../icons/SittingIcon';
+
+type GuideCardProps = {
+  guideName: string;
+  randomNumber: number;
+};
+
+const GuideCard: React.FC<GuideCardProps> = ({ guideName, randomNumber }) => {
+  const couple = (
+    <View paddingTop={h('2.7%')} paddingBottom={h('1.3%')}>
+      <CoupleIcon />
+    </View>
+  );
+
+  const writing = (
+    <View paddingTop={h('1.6%')}>
+      <SheWritingIcon />
+    </View>
+  );
+
+  const sitting = (
+    <View paddingTop={h('4.5%')} paddingBottom={h('2.2%')}>
+      <SittingIcon />
+    </View>
+  );
+
+  const randomIcon = () => {
+    if (randomNumber == 0) {
+      return couple;
+    } else if (randomNumber == 1) {
+      return writing;
+    } else {
+      return sitting;
+    }
+  };
+
+  return (
+    <Box
+      width={w('29.7%')}
+      height={h('20%')}
+      borderStyle="solid"
+      bgColor={'#FFF'}
+      flexDirection="column"
+      alignItems="center"
+      borderRadius={6}
+      borderWidth={1}
+      borderColor={'#0F4D3F'}
+    >
+      {randomIcon()}
+      <Text
+        fontFamily={'inter'}
+        fontWeight={'Regular'}
+        fontStyle={'normal'}
+        textAlign={'center'}
+        fontSize={moderateScale(12)}
+      >
+        {guideName}
+      </Text>
+    </Box>
+  );
+};
+
+export default GuideCard;

client-new/src/components/homescreen components/HomeScreenGuides.tsx

@@ -3,18 +3,26 @@ import { IGuide } from '@/interfaces/IGuide';
 import { ScrollView, Text, View } from 'native-base';
 
 import React from 'react';
+import { Pressable } from 'react-native';
 
 type GuidesProps = {
   guides: IGuide[];
+  navigation: any;
 };
 
-const GuidesComponent: React.FC<GuidesProps> = ({ guides }) => {
+const GuidesComponent: React.FC<GuidesProps> = ({ guides, navigation }) => {
   return (
     <ScrollView horizontal showsHorizontalScrollIndicator={false} mt={5}>
       {guides.map((item, index) => (
-        <View key={index} marginRight={5}>
-          <HomeScreenGuideCard guide={item} />
-        </View>
+        <Pressable
+          onPress={() =>
+            navigation.navigate('Guide Screen', { guideName: item.guide_name })
+          }
+        >
+          <View key={index} marginRight={5}>
+            <HomeScreenGuideCard guide={item} />
+          </View>
+        </Pressable>
       ))}
     </ScrollView>
   );