diff --git a/app/(application)/home.tsx b/app/(application)/home.tsx index 80d594d..d8f710e 100644 --- a/app/(application)/home.tsx +++ b/app/(application)/home.tsx @@ -1,7 +1,15 @@ import CaraouselHome from "@/components/home/carouselHome"; +import ChartDokumenHome from "@/components/home/chartDokumenHome"; +import ChartProgresHome from "@/components/home/chartProgresHome"; +import DisccussionHome from "@/components/home/discussionHome"; +import DivisionHome from "@/components/home/divisionHome"; +import EventHome from "@/components/home/eventHome"; +import FiturHome from "@/components/home/fiturHome"; import { HeaderRightHome } from "@/components/home/headerRightHome"; +import ProjectHome from "@/components/home/projectHome"; +import Styles from "@/constants/Styles"; import { Stack } from "expo-router"; -import { SafeAreaView, ScrollView } from "react-native"; +import { SafeAreaView, ScrollView, View } from "react-native"; export default function Home() { return ( @@ -15,7 +23,16 @@ export default function Home() { }} /> - + + + + + + + + + + ) diff --git a/bun.lockb b/bun.lockb index 466ba7b..6b99dd7 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/components/buttonFiturMenu.tsx b/components/buttonFiturMenu.tsx new file mode 100644 index 0000000..eb57baa --- /dev/null +++ b/components/buttonFiturMenu.tsx @@ -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 ( + + + + {icon} + + {text} + + + ) +} \ No newline at end of file diff --git a/components/discussionItem.tsx b/components/discussionItem.tsx new file mode 100644 index 0000000..747899d --- /dev/null +++ b/components/discussionItem.tsx @@ -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 ( + + + + {title} + + + + + {user} + + + + {date} + + + + ) +} \ No newline at end of file diff --git a/components/eventItem.tsx b/components/eventItem.tsx new file mode 100644 index 0000000..89f2674 --- /dev/null +++ b/components/eventItem.tsx @@ -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 ( + + + + {jamAwal} - {jamAkhir} + {title} + Dibuat oleh : {user} + + + ) +} \ No newline at end of file diff --git a/components/home/carouselHome.tsx b/components/home/carouselHome.tsx index a1866f5..a466451 100644 --- a/components/home/carouselHome.tsx +++ b/components/home/carouselHome.tsx @@ -11,7 +11,7 @@ export default function CaraouselHome() { const progress = useSharedValue(0); return ( - + + JUMLAH DOKUMEN + { + return ( + + {item.value} + + ); + }} + /> + + ) +} \ No newline at end of file diff --git a/components/home/chartProgresHome.tsx b/components/home/chartProgresHome.tsx new file mode 100644 index 0000000..d8a39dd --- /dev/null +++ b/components/home/chartProgresHome.tsx @@ -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 ( + + PROGRES KEGIATAN + + + ) +} \ No newline at end of file diff --git a/components/home/discussionHome.tsx b/components/home/discussionHome.tsx new file mode 100644 index 0000000..b4e6ac6 --- /dev/null +++ b/components/home/discussionHome.tsx @@ -0,0 +1,16 @@ +import Styles from "@/constants/Styles"; +import { Text, View } from "react-native"; +import DiscussionItem from "../discussionItem"; + +export default function DisccussionHome() { + return ( + + Diskusi + + + + + + + ) +} \ No newline at end of file diff --git a/components/home/divisionHome.tsx b/components/home/divisionHome.tsx new file mode 100644 index 0000000..c7a0406 --- /dev/null +++ b/components/home/divisionHome.tsx @@ -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(null); + const width = Dimensions.get("window").width; + + + return ( + + Divisi Teraktif + ( + + + 12 + KEGIATAN + + + )} + /> + + ) +} \ No newline at end of file diff --git a/components/home/eventHome.tsx b/components/home/eventHome.tsx new file mode 100644 index 0000000..ece6feb --- /dev/null +++ b/components/home/eventHome.tsx @@ -0,0 +1,15 @@ +import Styles from "@/constants/Styles"; +import { Text, View } from "react-native"; +import EventItem from "../eventItem"; + +export default function EventHome() { + return ( + + Acara Hari Ini + + + + + + ) +} \ No newline at end of file diff --git a/components/home/fiturHome.tsx b/components/home/fiturHome.tsx index 6d8d3d6..7350b66 100644 --- a/components/home/fiturHome.tsx +++ b/components/home/fiturHome.tsx @@ -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 ( + + Fitur + + } text="Divisi" /> + } text="Kegiatan" /> + } text="Pengumuman" /> + } text="Semua" /> + + + ) } \ No newline at end of file diff --git a/components/home/headerRightHome.tsx b/components/home/headerRightHome.tsx index c3b9d96..85c1e3e 100644 --- a/components/home/headerRightHome.tsx +++ b/components/home/headerRightHome.tsx @@ -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 ( - + } onPress={() => { router.push('/') }} /> } onPress={() => { router.push('/') }} /> } onPress={() => { router.push('/') }} /> diff --git a/components/home/projectHome.tsx b/components/home/projectHome.tsx new file mode 100644 index 0000000..ec9b397 --- /dev/null +++ b/components/home/projectHome.tsx @@ -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(null); + const width = Dimensions.get("window").width; + + return ( + + Kegiatan Terupdate + ( + + + + 13 Februari 2025 + + DIKERJAKAN + + + + )} + /> + + ) +} \ No newline at end of file diff --git a/components/paperGridContent.tsx b/components/paperGridContent.tsx new file mode 100644 index 0000000..5f64490 --- /dev/null +++ b/components/paperGridContent.tsx @@ -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 ( + + + {title} + + + {children} + + + ) +} \ No newline at end of file diff --git a/components/progressBar.tsx b/components/progressBar.tsx new file mode 100644 index 0000000..e8e1d42 --- /dev/null +++ b/components/progressBar.tsx @@ -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 ( + + + + ) +} \ No newline at end of file diff --git a/constants/ColorsStatus.ts b/constants/ColorsStatus.ts new file mode 100644 index 0000000..4265ca1 --- /dev/null +++ b/constants/ColorsStatus.ts @@ -0,0 +1,17 @@ +export const ColorsStatus = { + primary: { + backgroundColor: '#19345E' + }, + success: { + backgroundColor: 'green' + }, + info: { + backgroundColor: 'blue' + }, + warning: { + backgroundColor: '#FCAA4B' + }, + error: { + backgroundColor: '#DB1514' + } +} \ No newline at end of file diff --git a/constants/Styles.ts b/constants/Styles.ts index 5d89c52..cceb622 100644 --- a/constants/Styles.ts +++ b/constants/Styles.ts @@ -56,20 +56,64 @@ const Styles = StyleSheet.create({ cDefault: { color: '#19345E' }, + mb05: { + marginBottom: 5 + }, + mb10: { + marginBottom: 10 + }, mb15: { marginBottom: 15 }, mb30: { marginBottom: 30 }, + mv05: { + marginVertical: 5 + }, + mv15: { + marginVertical: 15 + }, + mv10: { + marginVertical: 10 + }, + mt05: { + marginTop: 5 + }, + mr05:{ + marginRight: 5 + }, + mr10: { + marginRight: 10 + }, + ph15: { + paddingHorizontal: 15, + }, round30: { borderRadius: 30 }, + labelStatus: { + paddingHorizontal: 15, + borderRadius: 10 + }, + rowSpaceBetween: { + justifyContent: 'space-between', + flexDirection: 'row' + }, + rowItemsCenter: { + flexDirection: 'row', + alignItems: 'center' + }, btnIconHeader: { backgroundColor: '#384288', padding: 7, borderRadius: 100, }, + btnFiturMenu: { + backgroundColor: '#FCAA4B', + padding: 10, + borderRadius: 100, + }, btnRound: { backgroundColor: '#19345E', borderWidth: 0, @@ -118,6 +162,77 @@ const Styles = StyleSheet.create({ borderRadius: 15, backgroundColor: '#19345E', display: 'flex', + }, + wrapGridContent: { + shadowColor: '#171717', + shadowOffset: { width: -2, height: 4 }, + shadowOpacity: 0.2, + shadowRadius: 3, + elevation: 10, + borderRadius: 15, + }, + wrapGridCaraousel: { + width: '80%', + height: 200, + shadowColor: '#171717', + shadowOffset: { width: -2, height: 4 }, + shadowOpacity: 0.2, + shadowRadius: 3, + elevation: 10, + borderRadius: 15, + }, + headerPaperGrid: { + paddingVertical: 25, + alignItems: 'center', + borderTopStartRadius: 15, + borderTopEndRadius: 15 + }, + contentPaperGrid: { + backgroundColor: 'white', + height: 150, + borderBottomEndRadius: 15, + borderBottomStartRadius: 15, + paddingHorizontal: 20, + justifyContent: 'space-evenly' + }, + wrapBar: { + height: 20, + backgroundColor: '#ccc', + borderRadius: 10, + margin: 10, + }, + contentBar: { + height: 20, + backgroundColor: 'orange', + borderRadius: 10, + }, + wrapPaper: { + padding: 15, + backgroundColor: 'white', + borderRadius: 15, + }, + contentItemCenter: { + justifyContent: 'center', + alignItems: 'center' + }, + itemEvent: { + padding: 10, + borderRadius: 10, + flexDirection: 'row', + alignContent: 'stretch', + marginBottom: 10 + }, + dividerEvent: { + width: 7, + borderRadius: 5, + marginRight: 10 + }, + wrapItemDiscussion: { + padding: 10, + borderRadius: 10, + borderColor: '#d6d8f6', + borderWidth: 1, + marginBottom: 10 } }) diff --git a/package.json b/package.json index f9e04f4..e99a627 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "expo-constants": "~17.0.7", "expo-font": "~13.0.4", "expo-haptics": "~14.0.1", + "expo-linear-gradient": "~14.0.2", "expo-linking": "~7.0.5", "expo-router": "~4.0.17", "expo-splash-screen": "~0.29.22", @@ -35,10 +36,12 @@ "react-native": "0.76.7", "react-native-confirmation-code-field": "^7.4.0", "react-native-gesture-handler": "~2.20.2", + "react-native-gifted-charts": "^1.4.57", "react-native-reanimated": "~3.16.1", "react-native-reanimated-carousel": "^4.0.2", "react-native-safe-area-context": "4.12.0", "react-native-screens": "~4.4.0", + "react-native-svg": "15.8.0", "react-native-web": "~0.19.13", "react-native-webview": "13.12.5" },