99 lines
2.3 KiB
TypeScript
99 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { AppColors } from '@/constants/theme';
|
|
import { Chapter } from '@/data/mockData';
|
|
|
|
interface ChapterItemProps {
|
|
chapter: Chapter;
|
|
onPress: () => void;
|
|
}
|
|
|
|
export function ChapterItem({ chapter, onPress }: ChapterItemProps) {
|
|
const getStatusText = () => {
|
|
switch (chapter.status) {
|
|
case 'complete':
|
|
return `已整理 · 约${chapter.pageCount}页`;
|
|
case 'partial':
|
|
return `部分整理 · 约${chapter.pageCount}页`;
|
|
case 'pending':
|
|
return '待补充';
|
|
}
|
|
};
|
|
|
|
const isComplete = chapter.status === 'complete';
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
style={styles.container}
|
|
onPress={onPress}
|
|
activeOpacity={0.7}
|
|
>
|
|
<View style={styles.number}>
|
|
<Text style={styles.numberText}>
|
|
{chapter.number.toString().padStart(2, '0')}
|
|
</Text>
|
|
</View>
|
|
|
|
<View style={styles.content}>
|
|
<Text style={styles.title}>{chapter.title}</Text>
|
|
<Text style={[styles.status, isComplete && styles.statusComplete]}>
|
|
{getStatusText()}
|
|
</Text>
|
|
</View>
|
|
|
|
<Ionicons
|
|
name="chevron-forward"
|
|
size={20}
|
|
color={AppColors.slatePurple}
|
|
/>
|
|
</TouchableOpacity>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
padding: 16,
|
|
backgroundColor: AppColors.white,
|
|
borderRadius: 14,
|
|
marginBottom: 12,
|
|
shadowColor: AppColors.deepPurple,
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.04,
|
|
shadowRadius: 8,
|
|
elevation: 1,
|
|
},
|
|
number: {
|
|
width: 32,
|
|
height: 32,
|
|
borderRadius: 10,
|
|
backgroundColor: AppColors.lavender,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginRight: 14,
|
|
},
|
|
numberText: {
|
|
fontSize: 14,
|
|
fontWeight: '600',
|
|
color: AppColors.deepPurple,
|
|
},
|
|
content: {
|
|
flex: 1,
|
|
},
|
|
title: {
|
|
fontSize: 15,
|
|
fontWeight: '500',
|
|
color: AppColors.deepPurple,
|
|
marginBottom: 2,
|
|
},
|
|
status: {
|
|
fontSize: 12,
|
|
color: AppColors.slatePurple,
|
|
},
|
|
statusComplete: {
|
|
color: AppColors.mediumPurple,
|
|
},
|
|
});
|