mi
60 lines
2.0 KiB
TypeScript
60 lines
2.0 KiB
TypeScript
import { Feather } from "@expo/vector-icons";
|
|
import React from "react";
|
|
import { Pressable, StyleSheet, Text, View } from "react-native";
|
|
import { colors, radii, spacing } from "../theme";
|
|
|
|
const icons = ["map-pin", "credit-card", "briefcase", "alert-circle"] as const;
|
|
|
|
type Question = { id?: string; text: string };
|
|
|
|
export function PopularQuestionsList({ questions, onSelect }: { questions: Question[]; onSelect: (text: string) => void }) {
|
|
if (!questions.length) return null;
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<Text style={styles.heading}>Популярные вопросы</Text>
|
|
<View style={styles.list}>
|
|
{questions.map((question, index) => (
|
|
<Pressable
|
|
key={question.id ?? index}
|
|
accessibilityRole="button"
|
|
onPress={() => onSelect(question.text)}
|
|
style={({ pressed }) => [styles.item, pressed && styles.pressed]}
|
|
>
|
|
<View style={styles.iconWrap}>
|
|
<Feather name={icons[index % icons.length]} size={16} color={colors.primary} />
|
|
</View>
|
|
<Text style={styles.itemText}>{question.text}</Text>
|
|
</Pressable>
|
|
))}
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: { paddingHorizontal: spacing.lg, paddingVertical: spacing.md, borderTopWidth: 1, borderTopColor: colors.border, backgroundColor: colors.background },
|
|
heading: { fontSize: 14, fontWeight: "500", color: colors.mutedForeground, marginBottom: 10, paddingHorizontal: 4 },
|
|
list: { gap: spacing.sm },
|
|
item: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: 10,
|
|
backgroundColor: colors.card,
|
|
borderWidth: 1,
|
|
borderColor: colors.border,
|
|
borderRadius: radii.lg,
|
|
padding: 10,
|
|
},
|
|
iconWrap: {
|
|
width: 28,
|
|
height: 28,
|
|
borderRadius: radii.full,
|
|
backgroundColor: "rgba(3, 2, 19, 0.1)",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
},
|
|
itemText: { flex: 1, fontSize: 14, color: colors.foreground },
|
|
pressed: { backgroundColor: colors.accent },
|
|
});
|