Deskripsi

Event:
Add  app/(application)/(user)/event/[id]/history

# No Issue"

app/(application)/(user)/event/(tabs)/contribution.tsx

@@ -1,28 +1,25 @@
 import {
   AvatarCustom,
   AvatarUsernameAndOtherComponent,
-  BaseBox,
+  BoxWithHeaderSection,
   Grid,
   StackCustom,
   TextCustom,
-  ViewWrapper,
+  ViewWrapper
 } from "@/components";
+import React from "react";
 
 export default function EventContribution() {
   return (
     <ViewWrapper hideFooter>
       {Array.from({ length: 10 }).map((_, index) => (
-        <BaseBox key={index} href={`/event/${index}/contribution`}>
+        <BoxWithHeaderSection key={index} href={`/event/${index}/contribution`}>
           <StackCustom>
             <AvatarUsernameAndOtherComponent
               avatarHref={`/profile/${index}`}
               rightComponent={
                 <TextCustom truncate>
-                  {new Date().toDateString().split(" ")[2] +
+                  {new Date().toLocaleDateString()}
-                    ", " +
-                    new Date().toDateString().split(" ")[1] +
-                    " " +
-                    new Date().toDateString().split(" ")[3]}
                 </TextCustom>
               }
             />
@@ -39,7 +36,7 @@ export default function EventContribution() {
               ))}
             </Grid>
           </StackCustom>
-        </BaseBox>
+        </BoxWithHeaderSection>
       ))}
     </ViewWrapper>
   );

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

@@ -1,9 +1,9 @@
 import {
-  BaseBox,
+  BoxWithHeaderSection,
   Grid,
   ScrollableCustom,
   StackCustom,
-  TextCustom,
+  TextCustom
 } from "@/components";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import { masterStatus } from "@/lib/dummy-data/_master/status";
@@ -35,7 +35,7 @@ export default function EventStatus() {
 
   return (
     <ViewWrapper headerComponent={scrollComponent}>
-      <BaseBox href={`/event/${id}/${activeCategory}/detail-event`}>
+      <BoxWithHeaderSection href={`/event/${id}/${activeCategory}/detail-event`}>
         <StackCustom gap={"xs"}>
           <Grid>
             <Grid.Col span={8}>
@@ -57,7 +57,7 @@ export default function EventStatus() {
             dolore optio porro!
           </TextCustom>
         </StackCustom>
-      </BaseBox>
+      </BoxWithHeaderSection>
     </ViewWrapper>
   );
 }

components/Box/BaseBox.tsx

@@ -1,16 +1,14 @@
 import { AccentColor } from "@/constants/color-palet";
 import {
-  PADDING_EXTRA_SMALL,
   PADDING_MEDIUM,
-  PADDING_SMALL,
+  PADDING_SMALL
 } from "@/constants/constans-value";
 import { Href, router } from "expo-router";
 import {
   StyleProp,
-  TouchableHighlight,
   TouchableOpacity,
   View,
-  ViewStyle,
+  ViewStyle
 } from "react-native";
 
 interface BaseBoxProps {
@@ -20,6 +18,8 @@ interface BaseBoxProps {
   onPress?: () => void;
   marginBottom?: number;
   padding?: number;
+  paddingTop?: number;
+  paddingBottom?: number;
   paddingInline?: number;
   paddingBlock?: number;
 }
@@ -32,6 +32,8 @@ export default function BaseBox({
   marginBottom = PADDING_MEDIUM,
   paddingBlock = PADDING_MEDIUM,
   paddingInline = PADDING_SMALL,
+  paddingTop = PADDING_MEDIUM,
+  paddingBottom = PADDING_MEDIUM,
 }: BaseBoxProps) {
 
   return (
@@ -49,6 +51,8 @@ export default function BaseBox({
               marginBottom,
               paddingBlock,
               paddingInline,
+              paddingTop,
+              paddingBottom,
             },
             style,
           ]}

components/Box/BoxWithHeaderInformation.tsx

@@ -0,0 +1,20 @@
+import { Href } from "expo-router";
+import BaseBox from "./BaseBox";
+
+export default function BoxWithHeaderSection({
+  children,
+  href,
+  onPress,
+}: {
+  children: React.ReactNode;
+  href?: Href;
+  onPress?: () => void;
+}) {
+  return (
+    <>
+      <BaseBox href={href} onPress={onPress} paddingTop={5}>
+        {children}
+      </BaseBox>
+    </>
+  );
+}

components/index.ts

@@ -19,6 +19,7 @@ import Grid from "./Grid/GridCustom";
 // Box
 import BaseBox from "./Box/BaseBox";
 import BoxButtonOnFooter from "./Box/BoxButtonOnFooter";
+import BoxWithHeaderSection from "./Box/BoxWithHeaderInformation";
 import InformationBox from "./Box/InformationBox";
 // Stack
 import StackCustom from "./Stack/StackCustom";
@@ -38,30 +39,35 @@ import ClickableCustom from "./Clickable/ClickableCustom";
 // Scroll
 import ScrollableCustom from "./Scroll/ScrollCustom";
 // ShareComponent
+import AvatarUsernameAndOtherComponent from "./_ShareComponent/AvataraAndOtherHeaderComponent";
 import Spacing from "./_ShareComponent/Spacing";
 import ViewWrapper from "./_ShareComponent/ViewWrapper";
-import AvatarUsernameAndOtherComponent from "./_ShareComponent/AvataraAndOtherHeaderComponent";
 export {
   AlertCustom,
   // Image
   AvatarCustom,
-  LandscapeFrameUploaded,
+  // ShareComponent
+  AvatarUsernameAndOtherComponent, LeftButtonCustom as BackButton,
   // Box
   BaseBox,
-  BoxButtonOnFooter,
+  BoxButtonOnFooter, BoxWithHeaderSection,
-  InformationBox,
   // Button
   ButtonCenteredOnly,
   ButtonCustom,
-  LeftButtonCustom as BackButton,
+  // Center
-  DotButton,
+  CenterCustom,
+  // Clickable
+  ClickableCustom,
+  // Divider
+  DividerCustom, DotButton,
   // Drawer
   DrawerCustom,
-  MenuDrawerDynamicGrid,
   // Grid
-  Grid,
+  Grid, InformationBox, LandscapeFrameUploaded,
   // Map
-  MapCustom,
+  MapCustom, MenuDrawerDynamicGrid,
+  // Scroll
+  ScrollableCustom,
   // Select
   SelectCustom,
   // ShareComponent
@@ -75,15 +81,6 @@ export {
   // TextInput
   TextInputCustom,
   // ViewWrapper
-  ViewWrapper,
+  ViewWrapper
-  // Divider
-  DividerCustom,
-  // Center
-  CenterCustom,
-  // Clickable
-  ClickableCustom,
-  // Scroll
-  ScrollableCustom,
-  // ShareComponent
-  AvatarUsernameAndOtherComponent,
 };
+

screens/Event/BoxPublishSection.tsx

@@ -1,6 +1,6 @@
 import {
   AvatarUsernameAndOtherComponent,
-  BaseBox,
+  BoxWithHeaderSection,
   StackCustom,
   TextCustom,
 } from "@/components";
@@ -26,7 +26,7 @@ export default function Event_BoxPublishSection({
 }) {
   return (
     <>
-      <BaseBox href={`/event/${id}/history`}>
+      <BoxWithHeaderSection href={`/event/${id}/history`}>
         <StackCustom gap={"xs"}>
           <AvatarUsernameAndOtherComponent
             avatarHref={`/profile/${id}`}
@@ -42,7 +42,7 @@ export default function Event_BoxPublishSection({
               "Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro sed doloremque tempora soluta. Dolorem ex quidem ipsum tempora, ipsa, obcaecati quia suscipit numquam, voluptates commodi porro impedit natus quos doloremque!"}
           </TextCustom>
         </StackCustom>
-      </BaseBox>
+      </BoxWithHeaderSection>
     </>
   );
 }