feature & fix

deskripsi:
- new component : Scroll
- fix : notifikasi, use search, portofolio item drawer
- new constats : padding value
- fix component :
Text custom : tambah warna gray di props
Text Input: tambah props container Style

# No Issue

components/Button/buttonCustomStyles.ts

@@ -7,7 +7,7 @@ import { StyleSheet } from "react-native";
 export const stylesButton = StyleSheet.create({
     button: {
       backgroundColor: MainColor.yellow,
-      paddingVertical: 12,
+      paddingVertical: 10,
       paddingHorizontal: 20,
       flexDirection: "row", // 👈 Tambahkan baris ini
       alignItems: "center",

components/Scroll/ScrollCustom.tsx

@@ -0,0 +1,60 @@
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import React from "react";
+import { ScrollView, StyleSheet } from "react-native";
+import ButtonCustom from "../Button/ButtonCustom";
+
+interface ButtonData {
+  id: string | number;
+  label: string;
+}
+
+interface ScrollableCustomProps {
+  data: ButtonData[];
+  onButtonPress: (item: ButtonData) => void;
+  activeId?: string | number;
+}
+
+const ScrollableCustom = ({
+  data,
+  onButtonPress,
+  activeId,
+}: ScrollableCustomProps) => {
+  return (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      contentContainerStyle={styles.buttonContainer}
+      style={styles.scrollView}
+    >
+      {data.map((item) => {
+        const isActive = activeId === item.id;
+
+        return (
+          <ButtonCustom
+            key={item.id}
+            backgroundColor={isActive ? MainColor.yellow : AccentColor.blue}
+            textColor={isActive ? MainColor.black : MainColor.white}
+            onPress={() => onButtonPress(item)}
+          >
+            {item.label}
+          </ButtonCustom>
+        );
+      })}
+    </ScrollView>
+  );
+};
+
+export default ScrollableCustom;
+
+const styles = StyleSheet.create({
+  scrollView: {
+    // maxHeight: 50,
+  },
+  buttonContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    // paddingHorizontal: 16,
+    // paddingVertical: 10,
+    gap: 12,
+  },
+});

components/Text/TextCustom.tsx

@@ -22,7 +22,7 @@ interface TextCustomProps {
   bold?: boolean;
   semiBold?: boolean;
   size?: "default" | "large" | "small";
-  color?: "default" | "yellow" | "red";
+  color?: "default" | "yellow" | "red" | "gray";
   align?: TextAlign; // Prop untuk alignment
   truncate?: boolean | number;
   onPress?: () => void;
@@ -56,6 +56,7 @@ const TextCustom: React.FC<TextCustomProps> = ({
     // Color
     if (color === "yellow") selectedStyles.push(styles.yellow);
     else if (color === "red") selectedStyles.push(styles.red);
+    else if (color === "gray") selectedStyles.push(styles.gray);
 
     // Alignment
     if (align) {
@@ -122,4 +123,7 @@ export const styles = StyleSheet.create({
   red: {
     color: MainColor.red,
   },
+  gray: {
+    color: MainColor.placeholder,
+  },
 });

components/TextInput/TextInputCustom.tsx

@@ -24,6 +24,7 @@ type Props = {
   borderRadius?: number;
   style?: StyleProp<ViewStyle>;
   maxLength?: number;
+  containerStyle?: StyleProp<ViewStyle>;
 } & Omit<React.ComponentProps<typeof RNTextInput>, "style">;
 
 const TextInputCustom = ({
@@ -40,6 +41,7 @@ const TextInputCustom = ({
   keyboardType,
   onChangeText,
   maxLength,
+  containerStyle,
   ...rest
 }: Props) => {
   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
@@ -73,7 +75,7 @@ const TextInputCustom = ({
   };
 
   return (
-    <View style={GStyles.inputContainerArea}>
+    <View style={[GStyles.inputContainerArea, containerStyle]}>
       {label && (
         <Text style={GStyles.inputLabel}>
           {label}

components/index.ts

@@ -37,6 +37,8 @@ import MapCustom from "./Map/MapCustom";
 import CenterCustom from "./Center/CenterCustom";
 // Clickable
 import ClickableCustom from "./Clickable/ClickableCustom";
+// Scroll
+import ScrollableCustom from "./Scroll/ScrollCustom";
 
 export {
   AlertCustom,
@@ -78,4 +80,6 @@ export {
   CenterCustom,
   // Clickable
   ClickableCustom,
+  // Scroll
+  ScrollableCustom,
 };