62 lines
1.9 KiB
TypeScript
62 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, TouchableOpacity, ScrollView } from 'react-native';
|
|
import * as Haptics from 'expo-haptics';
|
|
|
|
export type TabId = 'recipes' | 'favorites' | 'iq' | 'wb' | 'filters' | 'frame';
|
|
|
|
interface ToolRailProps {
|
|
activeTab: TabId | null;
|
|
onToggle: (tab: TabId) => void;
|
|
}
|
|
|
|
const TOOLS: { id: TabId; label: string }[] = [
|
|
{ id: 'recipes', label: 'PRESETS' },
|
|
{ id: 'favorites', label: 'FAVORITED' },
|
|
{ id: 'iq', label: 'LIGHT' },
|
|
{ id: 'wb', label: 'WB' },
|
|
{ id: 'filters', label: 'FX' },
|
|
{ id: 'frame', label: 'FRAME' },
|
|
];
|
|
|
|
export default function ToolRail({ activeTab, onToggle }: ToolRailProps) {
|
|
// FRAME is on in BOTH modes: the camera composes through the frame's window
|
|
// WYSIWYG (and WATERMARK now lives inside this tab).
|
|
const tools = TOOLS;
|
|
return (
|
|
<View className="py-1.5">
|
|
<ScrollView
|
|
horizontal
|
|
showsHorizontalScrollIndicator={false}
|
|
contentContainerStyle={{ alignItems: 'center', paddingHorizontal: 8 }}
|
|
>
|
|
{tools.map((tool) => {
|
|
const isActive = activeTab === tool.id;
|
|
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}
|
|
>
|
|
<Text
|
|
className={`font-mono font-bold tracking-widest ${
|
|
isActive ? 'text-[13px] text-amber-300' : 'text-[10px] text-zinc-500'
|
|
}`}
|
|
>
|
|
{tool.label}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
);
|
|
})}
|
|
</ScrollView>
|
|
</View>
|
|
);
|
|
}
|