Collacoration

Add :
- collaboration page
- collaboration component

Component
Fix:
- Base box : tambah props background

# No Issue

components/Box/BaseBox.tsx

@@ -1,10 +1,11 @@
-import { AccentColor } from "@/constants/color-palet";
+import { AccentColor, MainColor } from "@/constants/color-palet";
 import {
   PADDING_MEDIUM,
   PADDING_SMALL
 } from "@/constants/constans-value";
 import { Href, router } from "expo-router";
 import {
+  AccessibilityInfo,
   StyleProp,
   TouchableOpacity,
   View,
@@ -22,6 +23,7 @@ interface BaseBoxProps {
   paddingBottom?: number;
   paddingInline?: number;
   paddingBlock?: number;
+  backgroundColor?: string;
 }
 
 export default function BaseBox({
@@ -34,6 +36,7 @@ export default function BaseBox({
   paddingInline = PADDING_SMALL,
   paddingTop = PADDING_MEDIUM,
   paddingBottom = PADDING_MEDIUM,
+  backgroundColor = AccentColor.darkblue,
 }: BaseBoxProps) {
 
   return (
@@ -44,7 +47,7 @@ export default function BaseBox({
           onPress={href ? () => router.navigate(href) : onPress}
           style={[
             {
-              backgroundColor: AccentColor.darkblue,
+              backgroundColor,
               borderColor: AccentColor.blue,
               borderWidth: 1,
               borderRadius: 10,
@@ -63,7 +66,7 @@ export default function BaseBox({
         <View
           style={[
             {
-              backgroundColor: AccentColor.darkblue,
+              backgroundColor,
               borderColor: AccentColor.blue,
               borderWidth: 1,
               borderRadius: 10,

components/_ShareComponent/TabBarBackground.tsx

@@ -0,0 +1,15 @@
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import { View } from "react-native";
+
+export default function TabBarBackground() {
+  return (
+    <View
+      style={{
+        flex: 1,
+        backgroundColor: MainColor.darkblue,
+        borderTopWidth: 1,
+        borderTopColor: AccentColor.blue,
+      }}
+    />
+  );
+}

components/index.ts

@@ -5,6 +5,7 @@ import LeftButtonCustom from "./Button/BackButton";
 import ButtonCenteredOnly from "./Button/ButtonCenteredOnly";
 import ButtonCustom from "./Button/ButtonCustom";
 import DotButton from "./Button/DotButton";
+import FloatingButton from "./Button/FloatingButton";
 // Drawer
 import DrawerCustom from "./Drawer/DrawerCustom";
 import MenuDrawerDynamicGrid from "./Drawer/MenuDrawerDynamicGird";
@@ -42,36 +43,46 @@ import ScrollableCustom from "./Scroll/ScrollCustom";
 import AvatarUsernameAndOtherComponent from "./_ShareComponent/AvataraAndOtherHeaderComponent";
 import Spacing from "./_ShareComponent/Spacing";
 import ViewWrapper from "./_ShareComponent/ViewWrapper";
+import TabBarBackground from "./_ShareComponent/TabBarBackground";
+
 export {
   AlertCustom,
   // Image
   AvatarCustom,
   // ShareComponent
-  AvatarUsernameAndOtherComponent, LeftButtonCustom as BackButton,
+  AvatarUsernameAndOtherComponent,
   // Box
   BaseBox,
-  BoxButtonOnFooter, BoxWithHeaderSection,
+  BoxButtonOnFooter,
+  BoxWithHeaderSection,
   // Button
+  LeftButtonCustom as BackButton,
   ButtonCenteredOnly,
   ButtonCustom,
+  FloatingButton,
+  DotButton,
   // Center
   CenterCustom,
   // Clickable
   ClickableCustom,
   // Divider
-  DividerCustom, DotButton,
+  DividerCustom,
   // Drawer
   DrawerCustom,
   // Grid
-  Grid, InformationBox, LandscapeFrameUploaded,
+  Grid,
+  InformationBox,
+  LandscapeFrameUploaded,
   // Map
-  MapCustom, MenuDrawerDynamicGrid,
+  MapCustom,
+  MenuDrawerDynamicGrid,
   // Scroll
   ScrollableCustom,
   // Select
   SelectCustom,
   // ShareComponent
   Spacing,
+  TabBarBackground,
   // Stack
   StackCustom,
   // TextArea
@@ -81,6 +92,5 @@ export {
   // TextInput
   TextInputCustom,
   // ViewWrapper
-  ViewWrapper
+  ViewWrapper,
 };
-