regroup etc ...

2026-07-12 15:41:17 +02:00
parent 64e7ae1679
commit db3d18cf33
10 changed files with 599 additions and 9 deletions
@@ -0,0 +1,76 @@
+import React from 'react';
+import { View, Image, FlatList, StyleSheet, TouchableOpacity, Text } from 'react-native';
+import { CapturedPhoto } from '../types';
+
+interface PhotoThumbnailStripProps {
+  photos: CapturedPhoto[];
+  onRemove: (id: string) => void;
+}
+
+export function PhotoThumbnailStrip({ photos, onRemove }: PhotoThumbnailStripProps) {
+  if (photos.length === 0) return null;
+
+  return (
+    <View style={styles.container}>
+      <FlatList
+        data={photos}
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.list}
+        keyExtractor={(item) => item.id}
+        renderItem={({ item }) => (
+          <View style={styles.thumb}>
+            <Image source={{ uri: item.uri }} style={styles.image} />
+            <TouchableOpacity
+              style={styles.removeButton}
+              onPress={() => onRemove(item.id)}
+            >
+              <Text style={styles.removeText}>✕</Text>
+            </TouchableOpacity>
+          </View>
+        )}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    bottom: 120,
+    left: 0,
+    right: 0,
+    height: 80,
+  },
+  list: {
+    paddingHorizontal: 16,
+    gap: 8,
+  },
+  thumb: {
+    width: 64,
+    height: 64,
+    borderRadius: 8,
+    overflow: 'hidden',
+    backgroundColor: '#333',
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+  removeButton: {
+    position: 'absolute',
+    top: 2,
+    right: 2,
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    backgroundColor: 'rgba(0,0,0,0.6)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  removeText: {
+    color: '#fff',
+    fontSize: 11,
+    fontWeight: '700',
+  },
+});