138 lines
4.2 KiB
TypeScript
138 lines
4.2 KiB
TypeScript
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';
|
|
|
|
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.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({
|
|
screen: {
|
|
flex: 1,
|
|
},
|
|
content: {
|
|
paddingBottom: 40,
|
|
},
|
|
row: {
|
|
flexDirection: 'row',
|
|
gap: 14,
|
|
},
|
|
cell: {
|
|
flex: 1,
|
|
gap: 10,
|
|
},
|
|
caption: {
|
|
textAlign: 'center',
|
|
},
|
|
iconRow: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'center',
|
|
gap: 12,
|
|
},
|
|
autoWidthButton: {
|
|
alignSelf: 'center',
|
|
width: 140,
|
|
},
|
|
});
|