Deskripsi:

Fix: event beranda dan status > tampilan
Feature: create event dan halaman detail status
Fix: Basebox: Hide safearea kalau ada tabs
Fix: TextCustom: Tambah size xlarge
Fix: ScrollCustom penambhan props value

# No Issue

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

@@ -1,11 +1,63 @@
+import {
+  BaseBox,
+  Grid,
+  ScrollableCustom,
+  StackCustom,
+  TextCustom,
+} from "@/components";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
-import { GStyles } from "@/styles/global-styles";
-import { Text } from "react-native";
+import { masterStatus } from "@/lib/dummy-data/_master/status";
+import { useState } from "react";
 
 export default function Status() {
+  const id = "test-id-event";
+
+  const [activeCategory, setActiveCategory] = useState<string | null>(
+    "publish"
+  );
+
+  const handlePress = (item: any) => {
+    setActiveCategory(item.value);
+    // tambahkan logika lain seperti filter dsb.
+  };
+
+  const scrollComponent = (
+    <ScrollableCustom
+      data={masterStatus.map((e, i) => ({
+        id: i,
+        label: e.label,
+        value: e.value,
+      }))}
+      onButtonPress={handlePress}
+      activeId={activeCategory as any}
+    />
+  );
+
   return (
-    <ViewWrapper>
-      <Text style={GStyles.textLabel}>Status</Text>
+    <ViewWrapper headerComponent={scrollComponent}>
+      <BaseBox href={`/event/${id}/${activeCategory}/detail-event`}>
+        <StackCustom gap={"xs"}>
+          <Grid>
+            <Grid.Col span={8}>
+              <TextCustom truncate bold>
+                Lorem ipsum,{" "}
+                <TextCustom color="green">{activeCategory}</TextCustom> dolor
+                sit amet consectetur adipisicing elit.
+              </TextCustom>
+            </Grid.Col>
+            <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
+              <TextCustom>{new Date().toLocaleDateString()}</TextCustom>
+            </Grid.Col>
+          </Grid>
+
+          <TextCustom truncate={2}>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
+            eveniet ab eum ducimus tempore a quia deserunt quisquam. Tempora,
+            atque. Aperiam minima asperiores dicta perferendis quis adipisci,
+            dolore optio porro!
+          </TextCustom>
+        </StackCustom>
+      </BaseBox>
     </ViewWrapper>
   );
 }