mobile-darmasaba/components/home/projectHome.tsx

import Styles from "@/constants/Styles";
import React from "react";
import { Dimensions, Text, View } from "react-native";
import Carousel, { ICarouselInstance } from "react-native-reanimated-carousel";
import ProgressBar from "../progressBar";
import { ColorsStatus } from "@/constants/ColorsStatus";
import PaperGridContent from "../paperGridContent";

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

   return (
      <View style={[Styles.mb15]}>
         <Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Kegiatan Terupdate</Text>
         <Carousel
            ref={ref}
            style={{ width: "100%" }}
            width={width * 0.8}
            height={235}
            data={data}
            loop={true}
            autoPlay={false}
            autoPlayReverse={false}
            pagingEnabled={true}
            snapEnabled={true}
            vertical={false}
            renderItem={({ index }) => (
               <PaperGridContent content="carousel" title="Pembangunan Jembatan" headerColor="primary">
                  <ProgressBar />
                  <View style={[Styles.rowSpaceBetween]}>
                     <Text style={[Styles.textDefault, Styles.cGray]}>13 Februari 2025</Text>
                     <View style={[Styles.labelStatus, ColorsStatus.warning]}>
                        <Text style={[Styles.textMediumSemiBold, Styles.cWhite]}>DIKERJAKAN</Text>
                     </View>
                  </View>
               </PaperGridContent>
            )}
         />
      </View>
   )
}