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

22
components/buttonFiturMenu.tsx Normal file
View File

@@ -0,0 +1,22 @@
import Styles from "@/constants/Styles";
import React from "react";
import { Text, TouchableWithoutFeedback, View } from "react-native";
type Props = {
onPress?: () => void;
icon: React.ReactNode;
text: string;
};
export function ButtonFiturMenu({ onPress, icon, text }: Props) {
return (
<TouchableWithoutFeedback onPress={onPress}>
<View style={{ alignItems: 'center' }}>
<View style={[Styles.btnFiturMenu]}>
{icon}
</View>
<Text style={[Styles.mt05]}>{text}</Text>
</View>
</TouchableWithoutFeedback>
)
}

30
components/discussionItem.tsx Normal file
View File

@@ -0,0 +1,30 @@
import Styles from "@/constants/Styles";
import { Ionicons, Feather } from "@expo/vector-icons";
import { Text, View } from "react-native";
type Props = {
title: string
user: string
date: string
}
export default function DiscussionItem({ title, user, date }: Props) {
return (
<View style={[Styles.wrapItemDiscussion]}>
<View style={[Styles.rowItemsCenter, Styles.mb10]}>
<Ionicons name="chatbox-ellipses-outline" size={22} color="black" style={Styles.mr10} />
<Text style={{ fontWeight: 'bold' }}>{title}</Text>
</View>
<View style={Styles.rowSpaceBetween}>
<View style={Styles.rowItemsCenter}>
<Feather name="user" size={18} color="grey" style={Styles.mr05} />
<Text style={[Styles.textInformation]}>{user}</Text>
</View>
<View style={Styles.rowItemsCenter}>
<Feather name="clock" size={18} color="grey" style={Styles.mr05} />
<Text style={[Styles.textInformation]}>{date}</Text>
</View>
</View>
</View>
)
}

23
components/eventItem.tsx Normal file
View File

@@ -0,0 +1,23 @@
import Styles from "@/constants/Styles"
import { Text, View } from "react-native"
type Props = {
category: 'purple' | 'orange'
title: string
user: string
jamAwal: string
jamAkhir: string
}
export default function EventItem({ category, title, user, jamAwal, jamAkhir }: Props) {
return (
<View style={[Styles.itemEvent, { backgroundColor: category == 'orange' ? '#FED6C5' : '#D8D8F1' }]}>
<View style={[Styles.dividerEvent, { backgroundColor: category == 'orange' ? '#FB804C' : '#535FCA' }]} />
<View>
<Text>{jamAwal} - {jamAkhir}</Text>
<Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>{title}</Text>
<Text>Dibuat oleh : {user}</Text>
</View>
</View>
)
}

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>
)
}

23
components/paperGridContent.tsx Normal file
View File

@@ -0,0 +1,23 @@
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { Text, View } from "react-native";
import ProgressBar from "./progressBar";
type Props = {
content: 'carousel' | 'page';
children: React.ReactNode;
title: string
headerColor: 'primary' | 'warning'
};
export default function PaperGridContent({ content, children, title, headerColor }: Props) {
return (
<View style={[content == 'carousel' ? Styles.wrapGridCaraousel : Styles.wrapGridContent, headerColor == 'warning' ? ColorsStatus.warning : ColorsStatus.primary]}>
<View style={[Styles.headerPaperGrid]}>
<Text style={[Styles.textSubtitle, headerColor == 'warning' ? Styles.cDefault : Styles.cWhite]}>{title}</Text>
</View>
<View style={[Styles.contentPaperGrid]}>
{children}
</View>
</View>
)
}

23
components/progressBar.tsx Normal file
View File

@@ -0,0 +1,23 @@
import Styles from "@/constants/Styles";
import { useEffect, useState } from "react";
import { Animated, Text, View } from "react-native";
export default function ProgressBar() {
const [progress, setProgress] = useState(new Animated.Value(0));
useEffect(() => {
Animated.timing(progress, {
// 100% = 255
toValue: 127.5,
duration: 1000,
useNativeDriver: false
}).start();
}, []);
return (
<View style={Styles.wrapBar}>
<Animated.View style={[Styles.contentBar, { width: progress }]} />
</View>
)
}