mobile-darmasaba/components/division/taskDivisionDetail.tsx

import Styles from "@/constants/Styles";
import { Feather } from "@expo/vector-icons";
import React from "react";
import { Dimensions, Text, View } from "react-native";
import Carousel, { ICarouselInstance } from "react-native-reanimated-carousel";

export default function TaskDivisionDetail() {
   const data = [...new Array(6).keys()];
   const ref = React.useRef<ICarouselInstance>(null);
   const width = Dimensions.get("window").width;

   return (
      <View>
         <Text style={[Styles.textDefaultSemiBold, Styles.mb05]}>Tugas Hari Ini</Text>
         <Carousel
            ref={ref}
            width={width}
            height={100}
            data={data}
            loop={true}
            autoPlay={false}
            autoPlayReverse={false}
            pagingEnabled={true}
            snapEnabled={true}
            vertical={false}
            renderItem={({ index }) => (
               <View style={[Styles.wrapPaper, { width: '80%'}]}>
                  <Text style={[Styles.textDefaultSemiBold]}>Rancangan Laporan - Laporan 1</Text>
                  <View style={[Styles.rowItemsCenter, Styles.mt10]}>
                     <Feather name="clock" size={18} color="grey" style={Styles.mr05} />
                     <Text style={[Styles.textInformation]}>5 Mar 2025 - 12 Mar 2025</Text>
                  </View>
               </View>
            )}
         />
      </View>
   )
}