haneulai
f2bb131884
Some checks are pending
CI / Crawler (Python ${{ matrix.python-version }}) (3.10) (push) Waiting to run
CI / Crawler (Python ${{ matrix.python-version }}) (3.11) (push) Waiting to run
CI / API (Python 3.11) (push) Waiting to run
CI / Database migration (push) Waiting to run
CI / App web build (Node 20) (push) Waiting to run
77 lines
2.1 KiB
JavaScript
77 lines
2.1 KiB
JavaScript
import React from 'react';
|
|
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
|
|
|
const TABS = [
|
|
{ key: 'today', label: '오늘' },
|
|
{ key: 'day', label: '일간' },
|
|
{ key: 'month', label: '월간' },
|
|
{ key: 'year', label: '연간' },
|
|
];
|
|
|
|
export default function StatsPeriodControls({
|
|
dateLabel,
|
|
onMoveDate,
|
|
onPeriodChange,
|
|
period,
|
|
}) {
|
|
return (
|
|
<>
|
|
<View style={styles.dateControl}>
|
|
<TouchableOpacity onPress={() => onMoveDate(-1)} style={styles.arrowButton}>
|
|
<Text style={styles.arrowText}>◀</Text>
|
|
</TouchableOpacity>
|
|
<Text style={styles.dateText}>{dateLabel}</Text>
|
|
<TouchableOpacity onPress={() => onMoveDate(1)} style={styles.arrowButton}>
|
|
<Text style={styles.arrowText}>▶</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
<View style={styles.tabContainer}>
|
|
{TABS.map((tab) => (
|
|
<TouchableOpacity
|
|
key={tab.key}
|
|
style={[styles.tab, period === tab.key && styles.tabActive]}
|
|
onPress={() => onPeriodChange(tab.key)}
|
|
>
|
|
<Text style={[styles.tabText, period === tab.key && styles.tabTextActive]}>
|
|
{tab.label}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
</>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
dateControl: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginVertical: 12,
|
|
gap: 16,
|
|
},
|
|
arrowButton: { padding: 8 },
|
|
arrowText: { fontSize: 20, color: '#4B5563' },
|
|
dateText: { fontSize: 16, fontWeight: 'bold', color: '#1F2937' },
|
|
tabContainer: {
|
|
flexDirection: 'row',
|
|
backgroundColor: '#FFFFFF',
|
|
borderRadius: 12,
|
|
padding: 4,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 4,
|
|
elevation: 3,
|
|
},
|
|
tab: {
|
|
flex: 1,
|
|
paddingVertical: 12,
|
|
alignItems: 'center',
|
|
borderRadius: 8,
|
|
},
|
|
tabActive: { backgroundColor: '#3B82F6' },
|
|
tabText: { fontSize: 13, fontWeight: '600', color: '#6B7280' },
|
|
tabTextActive: { color: '#FFFFFF' },
|
|
});
|