feature components

deskripsi:
- BaseBox, TextCustom
- Perbaikan home & profile

components/Box/BaseBox.tsx

@@ -0,0 +1,59 @@
+import { AccentColor } from "@/constants/color-palet";
+import { StyleProp, TouchableHighlight, View, ViewStyle } from "react-native";
+
+interface BaseBoxProps {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  onPress?: () => void;
+  marginBottom?: number;
+  padding?: number;
+  paddingInline?: number;
+}
+
+export default function BaseBox({
+  children,
+  style,
+  onPress,
+  marginBottom = 16,
+  padding = 12,
+}: BaseBoxProps) {
+  return (
+    <>
+      {onPress ? (
+        <TouchableHighlight
+          onPress={onPress}
+          style={[
+            {
+              backgroundColor: AccentColor.darkblue,
+              borderColor: AccentColor.blue,
+              borderWidth: 1,
+              borderRadius: 10,
+              marginBottom,
+              padding,
+            },
+            style,
+          ]}
+          // activeOpacity={0.7}
+        >
+          <View>{children}</View>
+        </TouchableHighlight>
+      ) : (
+        <View
+          style={[
+            {
+              backgroundColor: AccentColor.darkblue,
+              borderColor: AccentColor.blue,
+              borderWidth: 1,
+              borderRadius: 10,
+              marginBottom,
+              padding,
+            },
+            style,
+          ]}
+        >
+          {children}
+        </View>
+      )}
+    </>
+  );
+}

components/Grid/GridCustom.tsx

@@ -0,0 +1,113 @@
+import React, { createContext, useContext, useMemo } from "react";
+import { StyleSheet, useWindowDimensions, View, ViewStyle } from "react-native";
+
+// Tipe untuk span
+type SpanValue = {
+  base?: number;
+  md?: number;
+  lg?: number;
+};
+
+// Props untuk Grid.Col
+interface ColProps {
+  children: React.ReactNode;
+  span?: number | SpanValue;
+  style?: ViewStyle;
+}
+
+// Props untuk Grid
+interface GridProps {
+  children: React.ReactNode;
+  gap?: number;
+  columns?: number;
+  containerStyle?: ViewStyle;
+}
+
+// Context untuk menyimpan konfigurasi grid
+type GridContextType = {
+  gap: number;
+  columns: number;
+};
+
+const GridContext = createContext<GridContextType>({
+  gap: 0,
+  columns: 12,
+});
+
+const useGrid = () => useContext(GridContext);
+
+// Helper untuk menentukan span berdasarkan lebar layar
+const getSpan = (
+  spanProp: number | SpanValue | undefined,
+  width: number
+): number => {
+  if (typeof spanProp === "number") return spanProp;
+
+  const span = spanProp || { base: 12 };
+
+  if (width >= 992 && span.lg) return span.lg;
+  if (width >= 768 && span.md) return span.md;
+  return span.base ?? 12;
+};
+
+// Grid Component
+const GridComponent: React.FC<GridProps> = ({
+  children,
+  gap = 6,
+  columns = 12,
+  containerStyle,
+}) => {
+  const contextValue = useMemo(() => ({ gap, columns }), [gap, columns]);
+
+  return (
+    <GridContext.Provider value={contextValue}>
+      <View
+        style={[
+          styles.container,
+          { marginHorizontal: -gap / 2 },
+          containerStyle,
+        ]}
+      >
+        {React.Children.map(children, (child) =>
+          React.isValidElement(child)
+            ? React.cloneElement(child as React.ReactElement<ColProps>, {})
+            : child
+        )}
+      </View>
+    </GridContext.Provider>
+  );
+};
+
+// Grid.Col Component
+const Col: React.FC<ColProps> = ({ children, span, style }) => {
+  const { gap, columns } = useGrid();
+  const { width } = useWindowDimensions();
+
+  const colSpan = getSpan(span, width);
+  const margin = gap / 2;
+
+  const styles = StyleSheet.create({
+    col: {
+      flexBasis: `${(100 / columns) * colSpan}%`,
+      paddingVertical: margin,
+    //   marginBottom: gap,
+      marginBlock: gap,
+    },
+  });
+
+  return <View style={[styles.col, style]}>{children}</View>;
+};
+
+// Export bersama-sama
+const Grid = Object.assign(GridComponent, { Col });
+
+export default Grid;
+
+// Styles
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "flex-start",
+  },
+});

components/Text/TextCustom.tsx

@@ -5,7 +5,10 @@ import {
   TEXT_SIZE_SMALL,
 } from "@/constants/constans-value";
 import React from "react";
-import { StyleProp, Text as RNText, TextStyle, StyleSheet } from "react-native";
+import { Text as RNText, StyleProp, StyleSheet, TextStyle } from "react-native";
+
+// Tambahkan type TextAlignProps agar lebih type-safe
+type TextAlign = "left" | "center" | "right";
 
 interface TextCustomProps {
   children: string;
@@ -13,7 +16,9 @@ interface TextCustomProps {
   bold?: boolean;
   semiBold?: boolean;
   size?: "default" | "large" | "small";
-  color?: "default" | "primary" | "secondary";
+  color?: "default" | "yellow" | "red";
+  align?: TextAlign; // Prop untuk alignment
+  truncate?: boolean | number;
 }
 
 const TextCustom: React.FC<TextCustomProps> = ({
@@ -23,6 +28,8 @@ const TextCustom: React.FC<TextCustomProps> = ({
   semiBold = false,
   size = "default",
   color = "default",
+  align = "left", // Default alignment
+  truncate = false,
 }) => {
   const getStyle = () => {
     let selectedStyles = [];
@@ -39,8 +46,13 @@ const TextCustom: React.FC<TextCustomProps> = ({
     else if (size === "small") selectedStyles.push(styles.small);
 
     // Color
-    if (color === "primary") selectedStyles.push(styles.primaryColor);
-    else if (color === "secondary") selectedStyles.push(styles.secondaryColor);
+    if (color === "yellow") selectedStyles.push(styles.yellow);
+    else if (color === "red") selectedStyles.push(styles.red);
+
+    // Alignment
+    if (align) {
+      selectedStyles.push({ textAlign: align });
+    }
 
     // Override with passed style
     if (style) selectedStyles.push(style);
@@ -48,16 +60,26 @@ const TextCustom: React.FC<TextCustomProps> = ({
     return selectedStyles;
   };
 
-  return <RNText style={getStyle()}>{children}</RNText>;
+  return (
+    <RNText
+      numberOfLines={
+        typeof truncate === "number" ? truncate : truncate ? 1 : undefined
+      }
+      ellipsizeMode="tail"
+      style={getStyle()}
+    >
+      {children}
+    </RNText>
+  );
 };
 
 export default TextCustom;
 
 export const styles = StyleSheet.create({
   default: {
-    // fontFamily: "Poppins-Regular", // Ganti dengan font yang kamu gunakan
     fontSize: TEXT_SIZE_MEDIUM,
     color: MainColor.white,
+    fontFamily: "Poppins-Regular",
   },
   bold: {
     fontFamily: "Poppins-Bold",
@@ -73,10 +95,10 @@ export const styles = StyleSheet.create({
   small: {
     fontSize: TEXT_SIZE_SMALL,
   },
-  primaryColor: {
-    color: "#007AFF", // Warna utama aplikasi kamu
+  yellow: {
+    color: MainColor.yellow,
   },
-  secondaryColor: {
-    color: "#666",
+  red: {
+    color: MainColor.red,
   },
 });

components/index.ts

@@ -8,12 +8,15 @@ import DrawerCustom from "./Drawer/DrawerCustom";
 import MenuDrawerDynamicGrid from "./Drawer/MenuDrawerDynamicGird";
 // ShareComponent
 import ViewWrapper from "./_ShareComponent/ViewWrapper";
-import TruncatedText from "./_ShareComponent/TruncatedText";
 import Spacing from "./_ShareComponent/Spacing";
 // Text
 import TextCustom from "./Text/TextCustom";
 // TextInput
 import { TextInputCustom } from "./TextInput/TextInputCustom";
+// Grid
+import Grid from "./Grid/GridCustom";
+// Box
+import BaseBox from "./Box/BaseBox";
 
 export {
   AlertCustom,
@@ -25,10 +28,13 @@ export {
   MenuDrawerDynamicGrid,
   // ShareComponent
   Spacing,
-  TruncatedText,
   ViewWrapper,
   // Text
   TextCustom,
   // TextInput
   TextInputCustom,
+  // Grid
+  Grid,
+  // Box
+  BaseBox,
 };

screens/Authentication/LoginView.tsx

@@ -25,7 +25,9 @@ export default function LoginView() {
     const callingCode = selectedCountry?.callingCode.replace(/^\+/, "") || "";
     const fixNumber = callingCode + inputValue;
     console.log(fixNumber);
-    router.navigate("/(application)/profile/1");
+    // router.navigate("/(application)/profile/1");
+    router.navigate("/(application)/home");
+
   }
 
   return (

screens/Home/HomeView.tsx

@@ -1,120 +0,0 @@
-import Spacing from "@/components/_ShareComponent/Spacing";
-import DynamicTruncatedText from "@/components/_ShareComponent/TruncatedText";
-import { GStyles } from "@/styles/global-styles";
-import { Ionicons } from "@expo/vector-icons";
-import { Image } from "expo-image";
-import { router } from "expo-router";
-import { ScrollView, Text, TouchableOpacity, View } from "react-native";
-import Icon from "react-native-vector-icons/FontAwesome";
-import { stylesHome } from "./homeViewStyle";
-
-export default function HomeView() {
-  return (
-    <>
-      <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
-        <View style={GStyles.homeContainer}>
-          <Spacing height={20} />
-          <View
-            style={{
-              alignItems: "center",
-              justifyContent: "center",
-              backgroundColor: "#fff",
-              borderRadius: 10,
-            }}
-          >
-            <Image
-              source={require("@/assets/images/constants/home-hipmi.png")}
-              // placeholder={{ blurhash: "" }}
-              contentFit="cover"
-              transition={1000}
-              style={{
-                width: "100%",
-                height: 120,
-                borderRadius: 10,
-              }}
-            />
-          </View>
-
-          <Spacing height={10} />
-
-          {/* Grid Section */}
-          <View style={stylesHome.gridContainer}>
-            <TouchableOpacity
-              style={stylesHome.gridItem}
-              onPress={() => router.push("/(application)/event")}
-            >
-              <Ionicons name="analytics" size={48} color="white" />
-              <Text style={stylesHome.gridLabel}>Event</Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={stylesHome.gridItem}>
-              <Ionicons name="share" size={48} color="white" />
-              <Text style={stylesHome.gridLabel}>Collaboration</Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={stylesHome.gridItem}>
-              <Ionicons name="cube" size={48} color="white" />
-              <Text style={stylesHome.gridLabel}>Voting</Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={stylesHome.gridItem}>
-              <Ionicons name="heart" size={48} color="white" />
-              <Text style={stylesHome.gridLabel}>Crowdfunding</Text>
-            </TouchableOpacity>
-          </View>
-
-          <Spacing height={10} />
-
-          {/* Job Vacancy Section */}
-          <View style={stylesHome.jobVacancyContainer}>
-            <View style={stylesHome.jobVacancyHeader}>
-              <Icon name="briefcase" size={24} color="white" />
-              <Text style={stylesHome.jobVacancyTitle}>Job Vacancy</Text>
-            </View>
-
-            <View style={stylesHome.vacancyList}>
-              {/* Vacancy Item 1 */}
-              <View style={stylesHome.vacancyItem}>
-                {/* <Icon name="user" size={20} color="#FFD700" /> */}
-                <View style={stylesHome.vacancyDetails}>
-                  <DynamicTruncatedText
-                    text="Bagas_banuna"
-                    fontSize={14}
-                    fontFamily="System"
-                    style={stylesHome.vacancyName}
-                  />
-                  <Spacing height={5} />
-                  <DynamicTruncatedText
-                    text="Dicari perawat kucing"
-                    fontSize={12}
-                    fontFamily="System"
-                    style={stylesHome.vacancyDescription}
-                  />
-                </View>
-              </View>
-
-              {/* Vacancy Item 2 */}
-              <View style={stylesHome.vacancyItem}>
-                {/* <Icon name="user" size={20} color="#FFD700" /> */}
-                <View style={stylesHome.vacancyDetails}>
-                  <DynamicTruncatedText
-                    text="fibramarcell"
-                    fontSize={14}
-                    fontFamily="System"
-                    style={stylesHome.vacancyName}
-                  />
-                  <Spacing height={5} />
-                  <DynamicTruncatedText
-                    text="Di Butuhkan Seorang..."
-                    fontSize={12}
-                    fontFamily="System"
-                    style={stylesHome.vacancyDescription}
-                  />
-                </View>
-              </View>
-            </View>
-          </View>
-
-          <Spacing height={20} />
-        </View>
-      </ScrollView>
-    </>
-  );
-}

screens/Home/bottomFeatureSection.tsx

@@ -1,6 +1,7 @@
+import { TextCustom } from "@/components";
 import Spacing from "@/components/_ShareComponent/Spacing";
-import DynamicTruncatedText from "@/components/_ShareComponent/TruncatedText";
-import { Text, View } from "react-native";
+import React from "react";
+import { View } from "react-native";
 import Icon from "react-native-vector-icons/FontAwesome";
 import { stylesHome } from "./homeViewStyle";
 
@@ -10,7 +11,10 @@ export default function Home_BottomFeatureSection() {
       <View style={stylesHome.jobVacancyContainer}>
         <View style={stylesHome.jobVacancyHeader}>
           <Icon name="briefcase" size={24} color="white" />
-          <Text style={stylesHome.jobVacancyTitle}>Job Vacancy</Text>
+          <Spacing width={10}/>
+          <TextCustom bold size="large">
+            Job Vacancy
+          </TextCustom>
         </View>
 
         <View style={stylesHome.vacancyList}>
@@ -18,19 +22,13 @@ export default function Home_BottomFeatureSection() {
           <View style={stylesHome.vacancyItem}>
             {/* <Icon name="user" size={20} color="#FFD700" /> */}
             <View style={stylesHome.vacancyDetails}>
-              <DynamicTruncatedText
-                text="Bagas_banuna"
-                fontSize={14}
-                fontFamily="System"
-                style={stylesHome.vacancyName}
-              />
+              <TextCustom bold color="yellow" truncate size="large">
+                Bagas_banuna
+              </TextCustom>
               <Spacing height={5} />
-              <DynamicTruncatedText
-                text="Dicari perawat kucing"
-                fontSize={12}
-                fontFamily="System"
-                style={stylesHome.vacancyDescription}
-              />
+              <TextCustom truncate={2}>
+                Dicari perawat kucing dan perawat anjing
+              </TextCustom>
             </View>
           </View>
 
@@ -38,19 +36,13 @@ export default function Home_BottomFeatureSection() {
           <View style={stylesHome.vacancyItem}>
             {/* <Icon name="user" size={20} color="#FFD700" /> */}
             <View style={stylesHome.vacancyDetails}>
-              <DynamicTruncatedText
-                text="fibramarcell"
-                fontSize={14}
-                fontFamily="System"
-                style={stylesHome.vacancyName}
-              />
+              <TextCustom bold color="yellow" truncate size="large">
+                fibramarcell
+              </TextCustom>
               <Spacing height={5} />
-              <DynamicTruncatedText
-                text="Di Butuhkan Seorang..."
-                fontSize={12}
-                fontFamily="System"
-                style={stylesHome.vacancyDescription}
-              />
+              <TextCustom truncate={2}>
+                Di Butuhkan Seorang Programer dan Designer
+              </TextCustom>
             </View>
           </View>
         </View>

screens/Profile/profilSection.tsx

@@ -1,9 +1,10 @@
-import { Spacing, TextCustom } from "@/components";
-import { AccentColor, MainColor } from "@/constants/color-palet";
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { BaseBox, Grid, Spacing, TextCustom } from "@/components";
+import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import { FontAwesome5, Ionicons } from "@expo/vector-icons";
-import { router, useLocalSearchParams } from "expo-router";
-import { Text, TouchableHighlight, View } from "react-native";
+import { useLocalSearchParams } from "expo-router";
+import { Image, ImageBackground, StyleSheet, View } from "react-native";
 
 export default function ProfilSection() {
   const { id } = useLocalSearchParams();
@@ -41,51 +42,79 @@ export default function ProfilSection() {
 
   return (
     <>
-      <View
-        style={{
-          backgroundColor: MainColor.soft_darkblue,
-          borderColor: AccentColor.blue,
-          borderWidth: 1,
-          padding: 10,
-          borderRadius: 6,
-          marginTop: 10,
-        }}
-      >
-        <View
-          style={{
-            flexDirection: "row",
-            alignItems: "center",
-            flexWrap: "wrap",
-            // backgroundColor: MainColor.red,
-          }}
-        >
-          {listData.map((item, index) => (
-            <View
-              key={index}
+      <BaseBox>
+        <ProfileScreen />
+        <Spacing height={50} />
+
+        <View style={{ alignItems: "center" }}>
+          <TextCustom bold size="large" align="center">
+            Nama User
+          </TextCustom>
+          <Spacing height={5} />
+          <TextCustom size="small">@Username</TextCustom>
+        </View>
+        <Spacing height={30} />
+
+        {listData.map((item, index) => (
+          <Grid key={index}>
+            <Grid.Col
+              span={2}
               style={{
-                flexDirection: "row",
                 alignItems: "center",
-                marginBottom: 20,
-                // flexWrap: "wrap",
-                // backgroundColor: "gray",
+                justifyContent: "center",
               }}
             >
               {item.icon}
-              <Spacing />
+            </Grid.Col>
+            <Grid.Col span={10}>
+              <TextCustom bold>{item.label}</TextCustom>
+            </Grid.Col>
+          </Grid>
+        ))}
+      </BaseBox>
 
-              <TextCustom bold style={{ backgroundColor: "" }}>
-                {`${item.label} Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis dolorem ipsam velit culpa consequuntur porro esse asperiores, debitis, qui numquam excepturi tempora fuga dolor totam quam, provident ipsum repellat hic.`}
-              </TextCustom>
-              {/* <View style={{ flexDirection: "row", alignItems: "center" }}>
-                    {item.icon}
-                    <Spacing />
-                </View> */}
-            </View>
+      <BaseBox>
+        <View>
+          <TextCustom bold size="large" align="center">
+            Portofolio
+          </TextCustom>
+          <Spacing />
+
+          {Array.from({ length: 2 }).map((_, index) => (
+            <BaseBox
+              key={index}
+              style={{ backgroundColor: MainColor.darkblue }}
+              onPress={() => console.log("pressed")}
+            >
+              <Grid>
+                <Grid.Col
+                  span={10}
+                  style={{ justifyContent: "center", backgroundColor: "" }}
+                >
+                  <TextCustom bold size="large" truncate={1}>
+                    Nama usaha portofolio
+                  </TextCustom>
+                  <TextCustom size="small" color="yellow">
+                    #id-porofolio12345
+                  </TextCustom>
+                </Grid.Col>
+                <Grid.Col
+                  span={2}
+                  style={{ alignItems: "flex-end", justifyContent: "center" }}
+                >
+                  <Ionicons
+                    name="caret-forward"
+                    size={ICON_SIZE_SMALL}
+                    color="white"
+                  />
+                </Grid.Col>
+              </Grid>
+            </BaseBox>
           ))}
         </View>
-      </View>
+      </BaseBox>
 
-      <TouchableHighlight
+      {/* <TouchableHighlight
         onPress={() => router.push(`/(application)/portofolio/${id}`)}
       >
         <View
@@ -98,7 +127,77 @@ export default function ProfilSection() {
         >
           <Text>Portofolio</Text>
         </View>
-      </TouchableHighlight>
+      </TouchableHighlight> */}
     </>
   );
 }
+
+const ProfileScreen = () => {
+  return (
+    <View style={styles.container}>
+      {/* Background Image */}
+      <ImageBackground
+        source={require("@/assets/images/dummy/dummy-image-background.jpg")}
+        style={styles.backgroundImage}
+        resizeMode="cover"
+      />
+
+      {/* Avatar yang sedikit keluar */}
+      <View style={styles.avatarOverlap}>
+        <Image
+          source={require("@/assets/images/dummy/dummy-avatar.png")}
+          style={styles.overlappingAvatar}
+          resizeMode="cover"
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  backgroundImage: {
+    width: "100%",
+    height: 150, // Tinggi background sesuai kebutuhan
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 6,
+    overflow: "hidden",
+  },
+  userOverlay: {
+    width: 100,
+    height: 100,
+    borderRadius: 50,
+    overflow: "hidden",
+    backgroundColor: "white",
+    borderWidth: 3,
+    borderColor: "#fff",
+    position: "absolute", // Untuk posisi overlay
+    top: 75, // Posisi overlay di tengah background
+    left: "50%", // Sentralisasi horizontal
+    transform: [{ translateX: -50 }], // Menggeser ke kiri 50% lebarnya
+  },
+  userImage: {
+    width: "100%",
+    height: "100%",
+    borderRadius: 50,
+  },
+  avatarOverlap: {
+    position: "absolute", // Meletakkan avatar di atas background
+    top: 90, // Posisi avatar sedikit keluar dari background
+    left: "50%", // Sentralisasi horizontal
+    transform: [{ translateX: -50 }], // Menggeser ke kiri 50% lebarnya
+  },
+  overlappingAvatar: {
+    width: 100,
+    height: 100,
+    borderRadius: 50,
+    borderWidth: 3,
+    borderColor: "#fff",
+    backgroundColor: MainColor.white,
+  },
+});