49 lines
2.0 KiB
TypeScript
49 lines
2.0 KiB
TypeScript
import { ColorsStatus } from "@/constants/ColorsStatus";
|
|
import Styles from "@/constants/Styles";
|
|
import { useTheme } from "@/providers/ThemeProvider";
|
|
import { View } from "react-native";
|
|
import Text from "../Text";
|
|
|
|
type Props = {
|
|
dateStart: Date
|
|
year: string
|
|
data: {
|
|
title: string
|
|
timeStart: string
|
|
timeEnd: string
|
|
}[]
|
|
}[]
|
|
|
|
export default function ItemHistoryEvent({ data }: { data: Props }) {
|
|
const { colors, activeTheme } = useTheme()
|
|
return (
|
|
<>
|
|
{
|
|
data.length > 0 ? (
|
|
data.map((item, index) => (
|
|
<View key={index} style={[{ flexDirection: 'row' }, Styles.mv05, activeTheme === 'dark' ? { backgroundColor: colors.card } : ColorsStatus.lightGreen, Styles.p10, Styles.round05, { borderBottomWidth: 1, borderColor: colors.background }]}>
|
|
<View style={[Styles.mr10, Styles.ph05]}>
|
|
<Text style={[Styles.textSubtitle]}>{String(item.dateStart)}</Text>
|
|
<Text style={[Styles.textDefault, { textAlign: 'center' }]}>{item.year}</Text>
|
|
</View>
|
|
<View style={[{ flex: 1 }]}>
|
|
{
|
|
item.data.map((item2, index2) => (
|
|
<View key={index2} style={[Styles.mb05, Styles.w80]}>
|
|
<Text style={[Styles.textDefaultSemiBold]} numberOfLines={1} ellipsizeMode="tail">{item2.title}</Text>
|
|
<Text style={[Styles.textDefault]}>{item2.timeStart} | {item2.timeEnd}</Text>
|
|
</View>
|
|
))
|
|
}
|
|
</View>
|
|
</View>
|
|
))
|
|
) : (
|
|
<View style={[Styles.p15]}>
|
|
<Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada data</Text>
|
|
</View>
|
|
)
|
|
}
|
|
</>
|
|
)
|
|
} |