61 lines
2.0 KiB
TypeScript
61 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, TouchableOpacity, ScrollView } from 'react-native';
|
|
import { LayoutGrid, Sun, Thermometer, Sparkles, Frame, type LucideIcon } from 'lucide-react-native';
|
|
import * as Haptics from 'expo-haptics';
|
|
|
|
export type TabId = 'recipes' | 'iq' | 'wb' | 'filters' | 'frame';
|
|
|
|
interface ToolRailProps {
|
|
activeTab: TabId | null;
|
|
onToggle: (tab: TabId) => void;
|
|
}
|
|
|
|
const TOOLS: { id: TabId; label: string; icon: LucideIcon }[] = [
|
|
{ id: 'recipes', label: 'PRESETS', icon: LayoutGrid },
|
|
{ id: 'iq', label: 'LIGHT', icon: Sun },
|
|
{ id: 'wb', label: 'WB', icon: Thermometer },
|
|
{ id: 'filters', label: 'FX', icon: Sparkles },
|
|
{ id: 'frame', label: 'FRAME', icon: Frame },
|
|
];
|
|
|
|
export default function ToolRail({ activeTab, onToggle }: ToolRailProps) {
|
|
return (
|
|
<View className="py-1.5">
|
|
<ScrollView
|
|
horizontal
|
|
showsHorizontalScrollIndicator={false}
|
|
contentContainerStyle={{ alignItems: 'center', paddingHorizontal: 8 }}
|
|
>
|
|
{TOOLS.map((tool) => {
|
|
const isActive = activeTab === tool.id;
|
|
const Icon = tool.icon;
|
|
return (
|
|
<TouchableOpacity
|
|
key={tool.id}
|
|
onPress={() => {
|
|
onToggle(tool.id);
|
|
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
|
|
}}
|
|
className={`mx-1 flex-row items-center rounded-full border px-3 py-2 ${
|
|
isActive
|
|
? 'border-amber-500/70 bg-amber-500/15'
|
|
: 'border-zinc-700/60 bg-black/40'
|
|
}`}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Icon size={14} color={isActive ? '#f59e0b' : '#e4e4e7'} strokeWidth={1.75} />
|
|
<Text
|
|
className={`ml-1.5 font-mono text-[10px] font-bold tracking-widest ${
|
|
isActive ? 'text-amber-500' : 'text-zinc-300'
|
|
}`}
|
|
>
|
|
{tool.label}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
);
|
|
})}
|
|
</ScrollView>
|
|
</View>
|
|
);
|
|
}
|