mobile-darmasaba/components/calendar/itemHistoryEvent.tsx

import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { Text, View } from "react-native";

export default function ItemHistoryEvent() {
   return (
      <>
         <View style={[{ flexDirection: 'row' }, Styles.mv05, ColorsStatus.lightGreen, Styles.p10, Styles.round10]}>
            <View style={[Styles.mr10, Styles.ph05]}>
               <Text style={[Styles.textSubtitle]}>22 Jan</Text>
               <Text style={[Styles.textDefault, { textAlign: 'center' }]}>Kamis</Text>
            </View>
            <View>
               <View style={[Styles.mb05]}>
                  <Text style={[Styles.textDefaultSemiBold]}>Acara 1</Text>
                  <Text style={[Styles.textDefault]}>07:00 | 08:00</Text>
               </View>
               <View style={[Styles.mb05]}>
                  <Text style={[Styles.textDefaultSemiBold]}>Acara 2</Text>
                  <Text style={[Styles.textDefault]}>10:30 | 12:00</Text>
               </View>
            </View>
         </View>
         <View style={[{ flexDirection: 'row' }, Styles.mv05, ColorsStatus.lightGreen, Styles.p10, Styles.round10]}>
            <View style={[Styles.mr10, Styles.ph05]}>
               <Text style={[Styles.textSubtitle]}>15 Feb</Text>
               <Text style={[Styles.textDefault, { textAlign: 'center' }]}>Senin</Text>
            </View>
            <View>
               <View style={[Styles.mb05]}>
                  <Text style={[Styles.textDefaultSemiBold]}>Acara 1</Text>
                  <Text style={[Styles.textDefault]}>07:00 | 08:00</Text>
               </View>
            </View>
         </View>
         <View style={[{ flexDirection: 'row' }, Styles.mv05, ColorsStatus.lightGreen, Styles.p10, Styles.round10]}>
            <View style={[Styles.mr10, Styles.ph05]}>
               <Text style={[Styles.textSubtitle]}>15 Feb</Text>
               <Text style={[Styles.textDefault, { textAlign: 'center' }]}>Senin</Text>
            </View>
            <View>
               <View style={[Styles.mb05]}>
                  <Text style={[Styles.textDefaultSemiBold]}>Acara 1</Text>
                  <Text style={[Styles.textDefault]}>07:00 | 08:00</Text>
               </View>
            </View>
         </View>
         <View style={[{ flexDirection: 'row' }, Styles.mv05, ColorsStatus.lightGreen, Styles.p10, Styles.round10]}>
            <View style={[Styles.mr10, Styles.ph05]}>
               <Text style={[Styles.textSubtitle]}>15 Feb</Text>
               <Text style={[Styles.textDefault, { textAlign: 'center' }]}>Senin</Text>
            </View>
            <View>
               <View style={[Styles.mb05]}>
                  <Text style={[Styles.textDefaultSemiBold]}>Acara 1</Text>
                  <Text style={[Styles.textDefault]}>07:00 | 08:00</Text>
               </View>
            </View>
         </View>
         <View style={[{ flexDirection: 'row' }, Styles.mv05, ColorsStatus.lightGreen, Styles.p10, Styles.round10]}>
            <View style={[Styles.mr10, Styles.ph05]}>
               <Text style={[Styles.textSubtitle]}>15 Feb</Text>
               <Text style={[Styles.textDefault, { textAlign: 'center' }]}>Senin</Text>
            </View>
            <View>
               <View style={[Styles.mb05]}>
                  <Text style={[Styles.textDefaultSemiBold]}>Acara 1</Text>
                  <Text style={[Styles.textDefault]}>07:00 | 08:00</Text>
               </View>
            </View>
         </View>
      </>
   )
}