Smoky Focus Card

1import React from 'react';
2import {
3    StyleSheet,
4    View,
5    Text,
6    Image,
7    TouchableOpacity,
8    Dimensions,
9    ImageSourcePropType,
10} from 'react-native';
11import { LinearGradient } from 'expo-linear-gradient';
12
13const { width } = Dimensions.get('window');
14
15interface SmokyCardProps {
16    title?: string;
17    description?: string;
18    bgNumber?: string; // The subtle background text (e.g., '24H')
19    participantCount?: string;
20    image: ImageSourcePropType;

import React from 'react';
import { StyleSheet, View, SafeAreaView, StatusBar } from 'react-native';
import SmokyFocusCard from './components/SmokyFocusCard';

export default function App() {
    return (
        <SafeAreaView style={styles.container}>
            <StatusBar barStyle="light-content" />
            <SmokyFocusCard
                image={{ uri: 'https://images.unsplash.com/photo-1499750310107-5fef28a66643?q=80&w=1000&auto=format&fit=crop' }}
                onJoinPress={() => console.log('Joined Camp')}
            />
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#121212', // Match the dark theme