feat : Composant Bouton

src/app/index.tsx

@@ -1,48 +1,137 @@
-import { StyleSheet, Text, View } from 'react-native';
+import { ArrowUp, ArrowUpRight, Plus } from 'lucide-react-native';
+import { useCallback } from 'react';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+
+import { Button } from '@/components/Button';
+import { useTheme } from '@/theme/useTheme';
 
 import '../global.css';
-import { useTheme } from '../theme';
 
 export default function Index() {
   const { colors, spacing, typography } = useTheme();
 
+  const simulateSubmit = useCallback(async () => {
+    await new Promise<void>((resolve) => {
+      setTimeout(resolve, 1300);
+    });
+  }, []);
+
   return (
-    <View style={styles.container}>
-        <Text
-          style={[
-            styles.title,
-            {
-              color: colors.textSecondary,
-              fontFamily: typography.sectionLabel.fontFamily,
-              fontSize: typography.sectionLabel.fontSize,
-              lineHeight: typography.sectionLabel.lineHeight,
-              letterSpacing: typography.sectionLabel.letterSpacing,
-            },
-          ]}>
-          GradientButton variants
-        </Text>
-      </View>
+    <View style={[styles.screen, { backgroundColor: colors.deepBackground }]}>
+      <ScrollView
+        contentContainerStyle={[
+          styles.content,
+          {
+            padding: spacing[24],
+            gap: spacing[24],
+          },
+        ]}
+        showsVerticalScrollIndicator={false}
+      >
+        <View style={{ gap: spacing[8] }}>
+          <Text
+            style={[
+              typography.sectionLabel,
+              {
+                color: colors.textSecondary,
+                letterSpacing: 1.1,
+              },
+            ]}
+          >
+            BOUTONS · HAUTEUR 52 PX · RAYON 14 PX
+          </Text>
+        </View>
+
+        <View style={styles.row}>
+          <View style={styles.cell}>
+            <Button label="Publier" variant="primary" />
+            <Text style={[styles.caption, typography.digits, { color: colors.textSecondary }]}>Primaire</Text>
+          </View>
+          <View style={styles.cell}>
+            <Button label="Publier" variant="primary" />
+            <Text style={[styles.caption, typography.digits, { color: colors.textSecondary }]}>Pressé (tap)</Text>
+          </View>
+        </View>
+
+        <View style={styles.row}>
+          <View style={styles.cell}>
+            <Button label="Intéressé" variant="secondary" rightIcon={ArrowUpRight} />
+            <Text style={[styles.caption, typography.digits, { color: colors.textSecondary }]}>Secondaire</Text>
+          </View>
+          <View style={styles.cell}>
+            <Button label="Publier" variant="primary" disabled />
+            <Text style={[styles.caption, typography.digits, { color: colors.textSecondary }]}>Désactivé</Text>
+          </View>
+        </View>
+
+        <View style={styles.row}>
+          <View style={styles.cell}>
+            <Button label="Tout voir" variant="ghost" fullWidth={false} style={styles.autoWidthButton} />
+            <Text style={[styles.caption, typography.digits, { color: colors.textSecondary }]}>Texte</Text>
+          </View>
+          <View style={styles.cell}>
+            <Button label="Envoyer" variant="primary" autoLoading loadingLabel="Envoi..." onPress={simulateSubmit} />
+            <Text style={[styles.caption, typography.digits, { color: colors.textSecondary }]}>Chargement</Text>
+          </View>
+        </View>
+
+        <View style={styles.row}>
+          <View style={styles.cell}>
+            <Button label="Supprimer" variant="destructive" />
+            <Text style={[styles.caption, typography.digits, { color: colors.textSecondary }]}>Destructif</Text>
+          </View>
+          <View style={styles.cell}>
+            <View style={styles.iconRow}>
+              <Button
+                iconOnly
+                variant="secondary"
+                fullWidth={false}
+                icon={ArrowUp}
+                iconOnlyShape="default"
+                accessibilityLabel="Partager"
+              />
+              <Button
+                iconOnly
+                variant="primary"
+                fullWidth={false}
+                icon={Plus}
+                iconOnlyShape="round"
+                accessibilityLabel="Ajouter"
+              />
+            </View>
+            <Text style={[styles.caption, typography.digits, { color: colors.textSecondary }]}>Icône / FAB</Text>
+          </View>
+        </View>
+      </ScrollView>
+    </View>
   );
 }
 
 const styles = StyleSheet.create({
-  safeArea: {
+  screen: {
     flex: 1,
   },
-  container: {
+  content: {
+    paddingBottom: 40,
+  },
+  row: {
+    flexDirection: 'row',
+    gap: 14,
+  },
+  cell: {
     flex: 1,
-    paddingHorizontal: 20,
-    paddingTop: 24,
+    gap: 10,
+  },
+  caption: {
+    textAlign: 'center',
+  },
+  iconRow: {
+    flexDirection: 'row',
     justifyContent: 'center',
+    gap: 12,
   },
-  title: {
-    textTransform: 'uppercase',
-    marginBottom: 20,
-  },
-  stack: {
-    width: '100%',
-  },
-  disabledWrap: {
-    marginTop: 24,
+  autoWidthButton: {
+    alignSelf: 'center',
+    width: 140,
   },
 });