feature event

deskripsi:
- resourcing component event

app/(application)/_layout.tsx

@@ -1,4 +1,5 @@
 import { AccentColor, MainColor } from "@/constants/color-palet";
+import { Styles } from "@/styles/global-styles";
 import { Ionicons } from "@expo/vector-icons";
 import { router, Stack } from "expo-router";
 
@@ -7,16 +8,16 @@ export default function ApplicationLayout() {
     <>
       <Stack
         screenOptions={{
-          headerStyle: { backgroundColor: MainColor.darkblue },
+          headerStyle: Styles.headerStyle,
-          headerTitleStyle: { color: MainColor.yellow, fontWeight: "bold" },
+          headerTitleStyle: Styles.headerTitleStyle,
           headerTitleAlign: "center",
           contentStyle: {
             borderBottomColor: AccentColor.blue,
             borderBottomWidth: 2,
           },
-          headerLargeStyle: {
+          // headerLargeStyle: {
-            backgroundColor: MainColor.darkblue,
+          //   backgroundColor: MainColor.darkblue,
-          },
+          // },
         }}
       >
         <Stack.Screen
@@ -102,10 +103,26 @@ export default function ApplicationLayout() {
           }}
         />
 
+        {/* Event */}
         <Stack.Screen
-          name="event/index"
+          name="event/(tabs)"
           options={{
             title: "Event",
+            headerLeft: () => (
+              <Ionicons
+                name="arrow-back"
+                size={20}
+                color={MainColor.yellow}
+                onPress={() => router.push("/(application)/home")}
+              />
+            ),
+          }}
+        />
+
+        <Stack.Screen
+          name="event/detail/[id]"
+          options={{
+            title: "Detail",
             headerLeft: () => (
               <Ionicons
                 name="arrow-back"
@@ -117,6 +134,7 @@ export default function ApplicationLayout() {
           }}
         />
 
+        {/* User Search */}
         <Stack.Screen
           name="user-search/index"
           options={{
@@ -132,6 +150,7 @@ export default function ApplicationLayout() {
           }}
         />
 
+        {/* Notification */}
         <Stack.Screen
           name="notifications/index"
           options={{

app/(application)/event/(tabs)/_layout.tsx

@@ -0,0 +1,64 @@
+import { MainColor } from "@/constants/color-palet";
+import { FontAwesome5, Ionicons } from "@expo/vector-icons";
+import { Tabs } from "expo-router";
+
+export default function EventLayout() {
+  return (
+    <Tabs
+      screenOptions={{
+        headerShown: false,
+        tabBarActiveTintColor: MainColor.yellow,
+        tabBarInactiveTintColor: MainColor.white,
+        tabBarStyle: {
+          backgroundColor: MainColor.darkblue,
+        },
+        //   tabBarButton: HapticTab,
+        //   tabBarBackground: BlurTabBarBackground,
+        //   tabBarStyle: Platform.select({
+        //     ios: {
+        //       // Use a transparent background on iOS to show the blur effect
+        //       position: "absolute",
+        //     },
+        //     default: {},
+        //   }),
+      }}
+    >
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: "Home",
+          tabBarIcon: ({ color }) => (
+            <Ionicons size={20} name="home" color={color} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="status"
+        options={{
+          title: "Status",
+          tabBarIcon: ({ color }) => (
+            <Ionicons size={20} name="list" color={color} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="kontribusi"
+        options={{
+          title: "Kontribusi",
+          tabBarIcon: ({ color }) => (
+            <Ionicons size={20} name="extension-puzzle" color={color} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="riwayat"
+        options={{
+          title: "Riwayat",
+          tabBarIcon: ({ color }) => (
+            <FontAwesome5 size={20} name="history" color={color} />
+          ),
+        }}
+      />
+    </Tabs>
+  );
+}

app/(application)/event/(tabs)/index.tsx

@@ -0,0 +1,25 @@
+import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import { Styles } from "@/styles/global-styles";
+import { router } from "expo-router";
+import { Text, TouchableHighlight, View } from "react-native";
+
+export default function Event() {
+  return (
+    <ViewWrapper>
+      <TouchableHighlight onPress={() => router.push("/event/detail/1")}>
+        <View
+          style={{
+            padding: 20,
+            backgroundColor: MainColor.darkblue,
+            borderRadius: 10,
+            borderColor: AccentColor.blue,
+            borderWidth: 1,
+          }}
+        >
+          <Text style={Styles.textLabel}>Event</Text>
+        </View>
+      </TouchableHighlight>
+    </ViewWrapper>
+  );
+}

app/(application)/event/(tabs)/kontribusi.tsx

@@ -0,0 +1,11 @@
+import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import { Styles } from "@/styles/global-styles";
+import { Text } from "react-native";
+
+export default function Kontribusi() {
+  return (
+    <ViewWrapper>
+      <Text style={Styles.textLabel}>Kontribusi</Text>
+    </ViewWrapper>
+  );
+}

app/(application)/event/(tabs)/riwayat.tsx

@@ -0,0 +1,11 @@
+import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import { Styles } from "@/styles/global-styles";
+import { Text } from "react-native";
+
+export default function Riwayat() {
+  return (
+    <ViewWrapper>
+      <Text style={Styles.textLabel}>Riwayat</Text>
+    </ViewWrapper>
+  );
+}

app/(application)/event/(tabs)/status.tsx

@@ -0,0 +1,11 @@
+import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import { Styles } from "@/styles/global-styles";
+import { Text } from "react-native";
+
+export default function Status() {
+  return (
+    <ViewWrapper>
+      <Text style={Styles.textLabel}>Status</Text>
+    </ViewWrapper>
+  );
+}

app/(application)/event/detail/[id].tsx

@@ -0,0 +1,14 @@
+import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import { Styles } from "@/styles/global-styles";
+import { useLocalSearchParams } from "expo-router";
+import { Text } from "react-native";
+
+export default function DetailEvent() {
+  const { id } = useLocalSearchParams();
+  console.log("id event >", id);
+  return (
+    <ViewWrapper>
+      <Text style={Styles.textLabel}>Detail Event {id}</Text>
+    </ViewWrapper>
+  );
+}

app/(application)/event/index.tsx

@@ -1,9 +0,0 @@
-import { Text, View } from "react-native";
-
-export default function Event() {
-    return (
-        <View>
-            <Text>Event</Text>
-        </View>
-    )
-}

app/(application)/home.tsx

@@ -1,9 +1,9 @@
-import NewHomeView from "@/screens/Home/UiHome";
+import UiHome from "@/screens/Home/UiHome";
 
 export default function Application() {
   return (
     <>
-      <NewHomeView />
+      <UiHome />
     </>
   );
 }

components/_Interface/types.ts

@@ -1,6 +1,13 @@
 import { Href } from "expo-router";
 
-export { ITabs };
+export { ICustomTab, ITabs };
+
+interface ICustomTab {
+  icon: string;
+  label: string;
+  isActive: boolean;
+  onPress: () => void;
+}
 
 interface ITabs {
   id: string;
@@ -9,5 +16,5 @@ interface ITabs {
   label: string;
   path: Href;
   isActive: boolean;
-  disabled: boolean;
+  disabled?: boolean;
 }

screens/Home/UiHome.tsx

@@ -9,7 +9,7 @@ import TabSection from "./tabSection";
 import { tabsHome } from "./tabsList";
 import Home_FeatureSection from "./topFeatureSection";
 
-export default function NewHomeView() {
+export default function UiHome() {
   const navigation = useNavigation();
 
   useEffect(() => {

screens/Home/tabSection.tsx

@@ -1,16 +1,11 @@
-import { ITabs } from "@/components/_Interface/types";
+import { ICustomTab, ITabs } from "@/components/_Interface/types";
 import { Styles } from "@/styles/global-styles";
 import { Ionicons } from "@expo/vector-icons";
 import { router } from "expo-router";
 import React from "react";
 import { Text, TouchableOpacity, View } from "react-native";
 
-interface ICustomTab {
+
-  icon: string;
-  label: string;
-  isActive: boolean;
-  onPress: () => void;
-}
 const CustomTab = ({ icon, label, isActive, onPress }: ICustomTab) => (
   <TouchableOpacity
     style={[Styles.tabItem, isActive && Styles.activeTab]}

screens/Home/topFeatureSection.tsx

@@ -9,7 +9,7 @@ export default function Home_FeatureSection() {
       <View style={stylesHome.gridContainer}>
         <TouchableOpacity
           style={stylesHome.gridItem}
-          onPress={() => router.push("/(application)/event")}
+          onPress={() => router.push("/(application)/event/(tabs)")}
         >
           <Ionicons name="analytics" size={48} color="white" />
           <Text style={stylesHome.gridLabel}>Event</Text>

styles/global-styles.ts

@@ -49,7 +49,7 @@ export const Styles = StyleSheet.create({
 
   // Stack Header Style
   headerStyle: {
-    backgroundColor: MainColor.darkblue,
+    backgroundColor: AccentColor.darkblue,
   },
   headerTitleStyle: {
     color: MainColor.yellow,