72 lines
2.1 KiB
TypeScript
72 lines
2.1 KiB
TypeScript
import { ICustomTab, ITabs } from "@/components/_Interface/types";
|
|
import { GStyles } from "@/styles/global-styles";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
import { router } from "expo-router";
|
|
import React from "react";
|
|
import { Platform, Text, TouchableOpacity, View } from "react-native";
|
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|
import { MainColor } from "@/constants/color-palet";
|
|
|
|
interface HomeTabsProps {
|
|
tabs: ITabs[];
|
|
}
|
|
|
|
const CustomTab = ({ icon, label, isActive, onPress }: ICustomTab) => (
|
|
<TouchableOpacity
|
|
style={[GStyles.tabItem, isActive && GStyles.activeTab]}
|
|
onPress={onPress}
|
|
activeOpacity={0.7}
|
|
>
|
|
<View
|
|
style={[GStyles.iconContainer, isActive && GStyles.activeIconContainer]}
|
|
>
|
|
<Ionicons
|
|
name={icon as any}
|
|
size={18}
|
|
color={isActive ? "#fff" : "#666"}
|
|
/>
|
|
</View>
|
|
<Text style={[GStyles.tabLabel, isActive && GStyles.activeTabLabel]}>
|
|
{label}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
);
|
|
|
|
/**
|
|
* Home Tabs Component dengan Safe Area handling
|
|
*
|
|
* Component ini menggunakan pattern yang sama dengan Expo Router Tabs
|
|
* untuk konsistensi safe area di Android
|
|
*/
|
|
export default function HomeTabs({ tabs }: HomeTabsProps) {
|
|
const insets = useSafeAreaInsets();
|
|
const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
|
|
|
|
return (
|
|
<View style={{ backgroundColor: MainColor.darkblue }}>
|
|
{/* Tabs content */}
|
|
<View style={GStyles.tabBar}>
|
|
<View style={GStyles.tabContainer}>
|
|
{tabs.map((e) => (
|
|
<CustomTab
|
|
key={e.id}
|
|
icon={e.icon}
|
|
label={e.label}
|
|
isActive={e.isActive}
|
|
onPress={() => {
|
|
// eslint-disable-next-line no-unused-expressions
|
|
e.disabled ? console.log("disabled") : router.push(e.path);
|
|
}}
|
|
/>
|
|
))}
|
|
</View>
|
|
</View>
|
|
|
|
{/* Safe area padding untuk Android */}
|
|
{Platform.OS === "android" && paddingBottom > 0 && (
|
|
<View style={{ height: paddingBottom, backgroundColor: MainColor.darkblue }} />
|
|
)}
|
|
</View>
|
|
);
|
|
}
|