54 lines
1.8 KiB
JavaScript
54 lines
1.8 KiB
JavaScript
import React from 'react';
|
|
import { Pressable, Text, View } from 'react-native';
|
|
import Ionicons from '@expo/vector-icons/Ionicons';
|
|
import { styles } from '../styles';
|
|
import { cn } from '../utils/cn';
|
|
|
|
function TabBtn({ tab, current, onChange }) {
|
|
const active = current === tab.key;
|
|
return (
|
|
<Pressable onPress={() => onChange(tab.key)} className={styles.tabItem}>
|
|
<Ionicons name={active ? tab.iconActive : tab.icon} size={18} color={active ? '#dbeafe' : '#94a3b8'} />
|
|
<Text className={cn(styles.tabLabel, active && styles.tabLabelActive)}>{tab.label}</Text>
|
|
</Pressable>
|
|
);
|
|
}
|
|
|
|
export default function BottomTab({ current, onChange, onAddItem, canAddItem }) {
|
|
const leftTabs = [
|
|
{ key: 'trips', label: 'Trips', icon: 'airplane-outline', iconActive: 'airplane' },
|
|
{ key: 'items', label: 'Items', icon: 'briefcase-outline', iconActive: 'briefcase' },
|
|
];
|
|
|
|
const rightTabs = [
|
|
{ key: 'checkup', label: 'Check-Up', icon: 'checkmark-circle-outline', iconActive: 'checkmark-circle' },
|
|
{ key: 'history', label: 'History', icon: 'time-outline', iconActive: 'time' },
|
|
];
|
|
|
|
return (
|
|
<View className={styles.tabBarWrap}>
|
|
<View className={styles.tabBar}>
|
|
<View className={styles.tabGroupSide}>
|
|
{leftTabs.map((tab) => (
|
|
<TabBtn key={tab.key} tab={tab} current={current} onChange={onChange} />
|
|
))}
|
|
</View>
|
|
|
|
<Pressable
|
|
className={cn(styles.tabAddBtn, !canAddItem && styles.tabAddBtnDisabled)}
|
|
onPress={onAddItem}
|
|
disabled={!canAddItem}
|
|
>
|
|
<Ionicons name="add" size={26} color="#fff" />
|
|
</Pressable>
|
|
|
|
<View className={styles.tabGroupSide}>
|
|
{rightTabs.map((tab) => (
|
|
<TabBtn key={tab.key} tab={tab} current={current} onChange={onChange} />
|
|
))}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|