wibu/mobile-darmasaba
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upd: ui home

Browse Source 
Deskripsi:
- update package
- ui diskusi home
- ui event home
- ui bar chart home
- ui pie chart home
- ui divisi home

No Issues
This commit is contained in:
amel
2025-02-26 12:32:01 +08:00
parent 31b85dad69
commit 633b18e92d
19 changed files with 477 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/home/carouselHome.tsx
View File

@@ -11,7 +11,7 @@ export default function CaraouselHome() {
const progress = useSharedValue<number>(0);
return (
<View style={{ marginVertical: 20 }}>
<View style={[Styles.mv15]}>
<Carousel
ref={ref}
width={width}

39
components/home/chartDokumenHome.tsx Normal file
View File

@@ -0,0 +1,39 @@
import Styles from "@/constants/Styles";
import { Dimensions, Text, View } from "react-native";
import { BarChart } from "react-native-gifted-charts";
export default function ChartDokumenHome() {
const barData = [
{ value: 23, label: 'Gambar', frontColor: '#fac858' },
{ value: 12, label: 'Dokumen', frontColor: '#92cc76' },
];
const width = Dimensions.get("window").width;
return (
<View style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.mb15]}>
<Text style={[Styles.textSubtitle, Styles.mv15]}>JUMLAH DOKUMEN</Text>
<BarChart
showFractionalValues={false}
showYAxisIndices
noOfSections={4}
maxValue={25}
data={barData}
isAnimated
width={width - 140}
barWidth={width * 0.25}
renderTooltip={(item: any, index: any) => {
return (
<View
style={{
alignItems: 'center',
justifyContent: 'center',
width: width * 0.25
}}>
<Text>{item.value}</Text>
</View>
);
}}
/>
</View>
)
}

31
components/home/chartProgresHome.tsx Normal file
View File

@@ -0,0 +1,31 @@
import Styles from "@/constants/Styles";
import { Text, View } from "react-native";
import { PieChart } from "react-native-gifted-charts";
export default function ChartProgresHome() {
const pieData = [
{ value: 54, text: "54%", color: '#177AD5' },
{ value: 40, text: "40%", color: '#92cc76' },
{ value: 20, text: "20%", color: '#ED6665' },
{ value: 0, text: "0%", color: '#fac858' },
];
return (
<View style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.mb15]}>
<Text style={[Styles.textSubtitle, Styles.mv15]}>PROGRES KEGIATAN</Text>
<PieChart
data={pieData}
showText
showValuesAsTooltipText
textColor="black"
radius={120}
textSize={15}
focusOnPress={false}
showValuesAsLabels
showTextBackground={false}
textBackgroundRadius={0}
isAnimated
/>
</View>
)
}

16
components/home/discussionHome.tsx Normal file
View File

@@ -0,0 +1,16 @@
import Styles from "@/constants/Styles";
import { Text, View } from "react-native";
import DiscussionItem from "../discussionItem";
export default function DisccussionHome() {
return (
<View style={[Styles.mb15]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Diskusi</Text>
<View style={[Styles.wrapPaper]}>
<DiscussionItem title="Bagaimana cara mengatasi banjir?" user="Amalia" date="13 Februari 2025" />
<DiscussionItem title="Bagaimana cara mengatasi banjir?" user="Amalia" date="13 Februari 2025" />
<DiscussionItem title="Bagaimana cara mengatasi banjir?" user="Amalia" date="13 Februari 2025" />
</View>
</View>
)
}

38
components/home/divisionHome.tsx Normal file
View File

@@ -0,0 +1,38 @@
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 PaperGridContent from "../paperGridContent";
export default function DivisionHome() {
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]}>Divisi Teraktif</Text>
<Carousel
ref={ref}
width={width}
height={235}
data={data}
loop={true}
autoPlay={false}
autoPlayReverse={false}
pagingEnabled={true}
snapEnabled={true}
vertical={false}
renderItem={({ index }) => (
<PaperGridContent content="carousel" title="Kesekretariatan" headerColor="warning">
<View>
<Text style={{ fontSize: 50, textAlign: "center", fontWeight: 'bold' }}>12</Text>
<Text style={[Styles.textSubtitle, { textAlign: "center" }]}>KEGIATAN</Text>
</View>
</PaperGridContent>
)}
/>
</View>
)
}

15
components/home/eventHome.tsx Normal file
View File

@@ -0,0 +1,15 @@
import Styles from "@/constants/Styles";
import { Text, View } from "react-native";
import EventItem from "../eventItem";
export default function EventHome() {
return (
<View style={[Styles.mb15]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Acara Hari Ini</Text>
<View style={[Styles.wrapPaper]}>
<EventItem category="purple" title="Meeting Pertama" user="Amalia" jamAwal="10.00" jamAkhir="11.00" />
<EventItem category="orange" title="Meeting Pertama" user="Amalia" jamAwal="10.00" jamAkhir="11.00" />
</View>
</View>
)
}

20
components/home/fiturHome.tsx
View File

@@ -1,3 +1,19 @@
export default function FiturHome(){
import Styles from "@/constants/Styles"
import { AntDesign, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"
import React from "react"
import { Text, View } from "react-native"
import { ButtonFiturMenu } from "../buttonFiturMenu"
export default function FiturHome() {
return (
<View style={[Styles.mb15]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Fitur</Text>
<View style={[Styles.rowSpaceBetween]}>
<ButtonFiturMenu icon={<MaterialIcons name="group" size={35} color="black" />} text="Divisi" />
<ButtonFiturMenu icon={<AntDesign name="areachart" size={35} color="black" />} text="Kegiatan" />
<ButtonFiturMenu icon={<MaterialIcons name="campaign" size={35} color="black" />} text="Pengumuman" />
<ButtonFiturMenu icon={<MaterialCommunityIcons name="view-grid" size={35} color="black" />} text="Semua" />
</View>
</View>
)
}

7
components/home/headerRightHome.tsx
View File

@@ -2,14 +2,11 @@ import { View } from "react-native"
import { router } from "expo-router"
import Feather from '@expo/vector-icons/Feather';
import { ButtonHeader } from "../buttonHeader";
import Styles from "@/constants/Styles";
export function HeaderRightHome() {
return (
<View style={{
flexDirection: 'row',
justifyContent: 'space-between',
width: 140,
}}>
<View style={[Styles.rowSpaceBetween, { width: 140 }]}>
<ButtonHeader item={<Feather name="search" size={20} color="white" />} onPress={() => { router.push('/') }} />
<ButtonHeader item={<Feather name="bell" size={20} color="white" />} onPress={() => { router.push('/') }} />
<ButtonHeader item={<Feather name="user" size={20} color="white" />} onPress={() => { router.push('/') }} />

42
components/home/projectHome.tsx Normal file
View File

@@ -0,0 +1,42 @@
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}
width={width}
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>
)
}