Накатил человеческий дизайн

2026-07-21 16:01:24 +03:00
parent 9cfc157124
commit 627371b221
35 changed files with 2415 additions and 293 deletions
@@ -0,0 +1,59 @@
+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 },
+});