84 lines
1.8 KiB
TypeScript
84 lines
1.8 KiB
TypeScript
import React from "react";
|
|
import { TouchableOpacity, Text, StyleSheet, Platform } from "react-native";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
import { useI18n } from "@/hooks/use-i18n";
|
|
import { useThemeContext } from "@/hooks/use-theme-context";
|
|
|
|
interface FilterButtonProps {
|
|
onPress?: () => void;
|
|
isFiltered?: boolean;
|
|
}
|
|
|
|
export default function FilterButton({
|
|
onPress,
|
|
isFiltered,
|
|
}: FilterButtonProps) {
|
|
const { t } = useI18n();
|
|
const { colors } = useThemeContext();
|
|
|
|
const themedStyles = {
|
|
button: {
|
|
backgroundColor: colors.card,
|
|
borderColor: colors.border,
|
|
},
|
|
text: {
|
|
color: isFiltered ? colors.primary : colors.textSecondary,
|
|
},
|
|
};
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
style={[styles.button, themedStyles.button]}
|
|
onPress={onPress}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Ionicons
|
|
name="filter"
|
|
size={20}
|
|
color={isFiltered ? colors.primary : colors.textSecondary}
|
|
/>
|
|
<Text style={[styles.text, themedStyles.text]}>
|
|
{t("diary.filter")}
|
|
</Text>
|
|
{isFiltered && (
|
|
<Ionicons
|
|
name="ellipse"
|
|
size={10}
|
|
color={colors.primary}
|
|
style={{ marginLeft: 4 }}
|
|
/>
|
|
)}
|
|
</TouchableOpacity>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
button: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
borderRadius: 12,
|
|
paddingHorizontal: 20,
|
|
paddingVertical: 12,
|
|
borderWidth: 1,
|
|
shadowColor: "#000",
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 1,
|
|
},
|
|
shadowOpacity: 0.05,
|
|
shadowRadius: 2,
|
|
elevation: 1,
|
|
},
|
|
text: {
|
|
fontSize: 16,
|
|
fontWeight: "500",
|
|
marginLeft: 8,
|
|
fontFamily: Platform.select({
|
|
ios: "System",
|
|
android: "Roboto",
|
|
default: "System",
|
|
}),
|
|
},
|
|
});
|