mobile-darmasaba/components/itemSectionTanggalTugas.tsx

import Styles from "@/constants/Styles";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { Pressable, Text, View } from "react-native";


type Props = {
   done?: boolean
   title: string
   dateStart: string
   dateEnd: string
   onPress?: () => void
}

export default function ItemSectionTanggalTugas({ done, title, dateStart, dateEnd, onPress }: Props) {
   return (
      <Pressable style={[Styles.mb15, { borderBottomColor: '#d6d8f6', borderBottomWidth: 1 }]} onPress={onPress}>
         <View style={[Styles.rowItemsCenter]}>
            {
               done != undefined ?
                  done ?
                     <>
                        <MaterialCommunityIcons name="checkbox-marked-circle-outline" size={22} color="gray" style={[Styles.mr10]} />
                        <Text style={[Styles.cGray]}>Selesai</Text>
                     </>
                     :
                     <>
                        <MaterialCommunityIcons name="checkbox-blank-circle-outline" size={22} color="gray" style={[Styles.mr10]} />
                        <Text style={[Styles.cGray]}>Belum Selesai</Text>
                     </>
                  :
                  <></>
            }

         </View>
         <View style={[Styles.wrapPaper, Styles.mv10, Styles.p10]}>
            <View style={[Styles.rowItemsCenter]}>
               <MaterialCommunityIcons name="file-table-outline" size={25} color="black" style={[Styles.mr10]} />
               <View style={[Styles.w90]}>
                  <Text style={[Styles.textDefault]}>{title}</Text>
               </View>
            </View>
         </View>
         <View style={[Styles.rowSpaceBetween, Styles.mb15]}>
            <View style={[{ width: '48%' }]}>
               <Text style={[Styles.mb05]}>Tanggal Mulai</Text>
               <View style={[Styles.wrapPaper, Styles.p10]}>
                  <Text style={{ textAlign: 'center' }}>{dateStart}</Text>
               </View>
            </View>
            <View style={[{ width: '48%' }]}>
               <Text style={[Styles.mb05]}>Tanggal Berakhir</Text>
               <View style={[Styles.wrapPaper, Styles.p10]}>
                  <Text style={{ textAlign: 'center' }}>{dateEnd}</Text>
               </View>
            </View>
         </View>
      </Pressable>
   )
}