67 lines
2.6 KiB
TypeScript
67 lines
2.6 KiB
TypeScript
import { useTranslation } from "react-i18next";
|
||
import { View, Text, Pressable, FlatList, Alert } from "react-native";
|
||
import { useNavigation } from "@react-navigation/native";
|
||
import type { NativeStackNavigationProp } from "@react-navigation/native-stack";
|
||
import type { WorkoutStackParamList } from "@navigation/types";
|
||
import { useTemplates } from "../hooks/useTemplates";
|
||
|
||
export function TemplatesScreen() {
|
||
const { t } = useTranslation("common");
|
||
const navigation = useNavigation<NativeStackNavigationProp<WorkoutStackParamList>>();
|
||
const { templates, remove, toggleFavorite } = useTemplates();
|
||
|
||
const handleDelete = (id: string, name: string) => {
|
||
Alert.alert(t("alert.deleteTemplate"), t("alert.deleteConfirm", { name }), [
|
||
{ text: t("cancel"), style: "cancel" },
|
||
{ text: t("delete"), style: "destructive", onPress: () => remove(id) },
|
||
]);
|
||
};
|
||
|
||
return (
|
||
<View className="flex-1 bg-white">
|
||
<FlatList
|
||
data={templates}
|
||
keyExtractor={(item) => item.id}
|
||
contentContainerClassName="p-4"
|
||
ListEmptyComponent={
|
||
<View className="py-12 items-center">
|
||
<Text className="text-slate-400 text-lg">{t("alert.deleteTemplate")}</Text>
|
||
<Text className="text-slate-400 text-sm mt-1">
|
||
{t("noTemplatesYet")}
|
||
</Text>
|
||
</View>
|
||
}
|
||
renderItem={({ item }) => (
|
||
<Pressable
|
||
onPress={() => navigation.navigate("Builder", { templateId: item.id })}
|
||
className="bg-slate-50 rounded-2xl p-4 mb-3 border border-slate-200"
|
||
>
|
||
<View className="flex-row justify-between items-start">
|
||
<View className="flex-1">
|
||
<Text className="font-semibold text-slate-900 text-base">{item.name}</Text>
|
||
<Text className="text-slate-500 text-sm mt-1">
|
||
{t("pool", { length: item.poolLength })}
|
||
</Text>
|
||
</View>
|
||
<View className="flex-row gap-2">
|
||
<Pressable
|
||
onPress={() => toggleFavorite(item.id, item.isFavorite)}
|
||
className="p-1"
|
||
>
|
||
<Text className="text-lg">{item.isFavorite ? "★" : "☆"}</Text>
|
||
</Pressable>
|
||
<Pressable
|
||
onPress={() => handleDelete(item.id, item.name)}
|
||
className="p-1"
|
||
>
|
||
<Text className="text-red-400 text-lg">×</Text>
|
||
</Pressable>
|
||
</View>
|
||
</View>
|
||
</Pressable>
|
||
)}
|
||
/>
|
||
</View>
|
||
);
|
||
}
|