bw-expo-app/components/Button.example.tsx

import React, { useState } from 'react';
import { View, StyleSheet, ScrollView, Text } from 'react-native';
import Button from './Button';

const ButtonExample: React.FC = () => {
  const [loadingStates, setLoadingStates] = useState({
    primary: false,
    secondary: false,
    outline: false,
    text: false,
  });

  const toggleLoading = (variant: keyof typeof loadingStates) => {
    setLoadingStates(prev => ({
      ...prev,
      [variant]: !prev[variant],
    }));
  };

  const handlePress = (variant: string) => {
    console.log(`Pressed ${variant} button`);
  };

  return (
    <ScrollView style={styles.container}>
      <View style={styles.section}>
        <Button
          title="Primary Button"
          variant="primary"
          onPress={() => handlePress('primary')}
        />
      </View>

      <View style={styles.section}>
        <Button
          title="Secondary Button"
          variant="secondary"
          onPress={() => handlePress('secondary')}
        />
      </View>

      <View style={styles.section}>
        <Button
          title="Outline Button"
          variant="outline"
          onPress={() => handlePress('outline')}
        />
      </View>

      <View style={styles.section}>
        <Button
          title="Text Button"
          variant="text"
          onPress={() => handlePress('text')}
        />
      </View>

      <View style={styles.divider} />

      <View style={styles.section}>
        <Button
          title="Small Button"
          size="small"
          variant="primary"
          onPress={() => handlePress('small')}
        />
      </View>

      <View style={styles.section}>
        <Button
          title="Medium Button"
          size="medium"
          variant="primary"
          onPress={() => handlePress('medium')}
        />
      </View>

      <View style={styles.section}>
        <Button
          title="Large Button"
          size="large"
          variant="primary"
          onPress={() => handlePress('large')}
        />
      </View>

      <View style={styles.divider} />

      <View style={styles.section}>
        <Button
          title="Full Width Button"
          variant="outline"
          fullWidth
          onPress={() => handlePress('fullWidth')}
        />
      </View>

      <View style={styles.section}>
        <Button
          title="Disabled Button"
          variant="primary"
          disabled
          onPress={() => handlePress('disabled')}
        />
      </View>

      <View style={styles.section}>
        <Button
          title="Primary Loading"
          variant="primary"
          loading={loadingStates.primary}
          onPress={() => toggleLoading('primary')}
        />
      </View>

      <View style={styles.section}>
        <Button
          title="Secondary Loading"
          variant="secondary"
          loading={loadingStates.secondary}
          onPress={() => toggleLoading('secondary')}
        />
      </View>

      <View style={styles.section}>
        <Button
          title="Outline Loading"
          variant="outline"
          loading={loadingStates.outline}
          onPress={() => toggleLoading('outline')}
        />
      </View>

      <View style={styles.section}>
        <Button
          title="Text Loading"
          variant="text"
          loading={loadingStates.text}
          onPress={() => toggleLoading('text')}
        />
      </View>

      <View style={styles.divider} />

      <View style={styles.section}>
        <Button
          title="Button with Icon"
          variant="primary"
          icon={
            <View style={styles.icon}>
              <Text style={styles.iconText}>⚡</Text>
            </View>
          }
          onPress={() => handlePress('withIcon')}
        />
      </View>

      <View style={styles.section}>
        <Button
          title="Large Outline with Icon"
          variant="outline"
          size="large"
          icon={
            <View style={styles.icon}>
              <Text style={[styles.iconText, { color: '#007AFF' }]}>🚀</Text>
            </View>
          }
          onPress={() => handlePress('largeOutlineWithIcon')}
        />
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#F5F5F5',
  },
  section: {
    marginBottom: 12,
  },
  divider: {
    height: 1,
    backgroundColor: '#E0E0E0',
    marginVertical: 24,
  },
  icon: {
    width: 20,
    height: 20,
    justifyContent: 'center',
    alignItems: 'center',
  },
  iconText: {
    fontSize: 16,
  },
});

export default ButtonExample;