feat : Première navigation

src/components/organizer/CreateActionSheet.tsx

@@ -0,0 +1,150 @@
+/* ------------------------------------------------------------------ *
+ * CreateActionSheet — le choix ouvert par le bouton central.
+ * Deux actions, rien d'autre : créer un événement, publier un post.
+ * ------------------------------------------------------------------ */
+import { LinearGradient } from 'expo-linear-gradient';
+import {
+    Modal,
+    Pressable,
+    StyleSheet,
+    Text,
+    View,
+    type ViewStyle,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { colors, gradientDirection, gradients } from '@/theme/colors';
+import { typography } from '@/theme/typography';
+import { Plus } from 'lucide-react-native';
+
+type Props = {
+  visible: boolean;
+  onClose: () => void;
+  onCreateEvent: () => void;
+  onCreatePost: () => void;
+};
+
+export function CreateActionSheet({
+  visible,
+  onClose,
+  onCreateEvent,
+  onCreatePost,
+}: Props) {
+  const insets = useSafeAreaInsets();
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="slide"
+      onRequestClose={onClose}
+    >
+      <Pressable style={styles.scrim} onPress={onClose} accessibilityLabel="Fermer" />
+      <View style={[styles.sheet, { paddingBottom: insets.bottom + 24 }]}>
+        <View style={styles.handle} />
+
+        <Pressable
+          accessibilityRole="button"
+          onPress={onCreateEvent}
+          style={({ pressed }) => [styles.row, pressed && styles.rowPressed]}
+        >
+          <LinearGradient
+            colors={gradients.signature}
+            start={gradientDirection.start}
+            end={gradientDirection.end}
+            style={styles.iconBox}
+          >
+            <Plus size={22} color={colors.onPrimary} />
+          </LinearGradient>
+          <View style={styles.rowText}>
+            <Text style={styles.rowTitle}>Créer un événement</Text>
+            <Text style={styles.rowSub}>Date, lieu, line-up, billetterie</Text>
+          </View>
+        </Pressable>
+
+        <Pressable
+          accessibilityRole="button"
+          onPress={onCreatePost}
+          style={({ pressed }) => [styles.row, pressed && styles.rowPressed]}
+        >
+          <View style={[styles.iconBox, styles.iconBoxPlain]}>
+            <Plus size={22} color={colors.tertiary} />
+          </View>
+          <View style={styles.rowText}>
+            <Text style={styles.rowTitle}>Publier un post</Text>
+            <Text style={styles.rowSub}>Sur un de tes événements à venir</Text>
+          </View>
+        </Pressable>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  scrim: {
+    flex: 1,
+    backgroundColor: 'rgba(6,6,12,0.62)',
+  } as ViewStyle,
+
+  sheet: {
+    backgroundColor: colors.surface,
+    borderTopLeftRadius: 28,
+    borderTopRightRadius: 28,
+    borderTopWidth: 1,
+    borderTopColor: colors.border,
+    paddingHorizontal: 20,
+    paddingTop: 10,
+    gap: 10,
+  },
+
+  handle: {
+    width: 44,
+    height: 5,
+    borderRadius: 999,
+    backgroundColor: colors.border,
+    alignSelf: 'center',
+    marginBottom: 10,
+  },
+
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 14,
+    padding: 12,
+    borderRadius: 18,
+    backgroundColor: colors.surfaceElevated,
+    borderWidth: 1,
+    borderColor: colors.border,
+  },
+
+  rowPressed: { opacity: 0.7 },
+
+  iconBox: {
+    width: 48,
+    height: 48,
+    borderRadius: 15,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+
+  iconBoxPlain: {
+    backgroundColor: colors.surface,
+    borderWidth: 1,
+    borderColor: colors.border,
+  },
+
+  rowText: { flex: 1, gap: 2 },
+
+  rowTitle: {
+    ...typography.label,
+    fontSize: 16,
+    color: colors.textPrimary,
+  },
+
+  rowSub: {
+    ...typography.caption,
+    color: colors.textSecondary,
+  },
+});
+
+export default CreateActionSheet;