diff --git a/app/(application)/(user)/event/(tabs)/index.tsx b/app/(application)/(user)/event/(tabs)/index.tsx index 7c8f8de..a89cc02 100644 --- a/app/(application)/(user)/event/(tabs)/index.tsx +++ b/app/(application)/(user)/event/(tabs)/index.tsx @@ -1,30 +1,151 @@ +import { + AvatarCustom, + BaseBox, + Grid, + StackCustom, + TextCustom, +} from "@/components"; import ViewWrapper from "@/components/_ShareComponent/ViewWrapper"; import FloatingButton from "@/components/Button/FloatingButton"; -import { AccentColor, MainColor } from "@/constants/color-palet"; -import { GStyles } from "@/styles/global-styles"; import { router } from "expo-router"; -import { Text, TouchableHighlight, View } from "react-native"; export default function Event() { + const index = "test-id-event"; return ( router.push("/event/create")} /> } > - router.push("/event/detail/1")}> - - Event - - + {/* {Array.from({ length: 10 }).map((_, index) => ( + + + + + + + + Username + + + + Lorem ipsum dolor sit + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro sed + doloremque tempora soluta. Dolorem ex quidem ipsum tempora, ipsa, + obcaecati quia suscipit numquam, voluptates commodi porro impedit + natus quos doloremque! + + + + ))} */} + + + + + + + + Username + + + + Lorem ipsum dolor sit + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro sed + doloremque tempora soluta. Dolorem ex quidem ipsum tempora, ipsa, + obcaecati quia suscipit numquam, voluptates commodi porro impedit + natus quos doloremque! + + + + + + + + + + + Username + + + + Lorem ipsum dolor sit + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro sed + doloremque tempora soluta. Dolorem ex quidem ipsum tempora, ipsa, + obcaecati quia suscipit numquam, voluptates commodi porro impedit + natus quos doloremque! + + + + + + + + + + + Username + + + + Lorem ipsum dolor sit + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro sed + doloremque tempora soluta. Dolorem ex quidem ipsum tempora, ipsa, + obcaecati quia suscipit numquam, voluptates commodi porro impedit + natus quos doloremque! + + + + + + + + + + + Username + + + + Lorem ipsum dolor sit + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro sed + doloremque tempora soluta. Dolorem ex quidem ipsum tempora, ipsa, + obcaecati quia suscipit numquam, voluptates commodi porro impedit + natus quos doloremque! + + + + + + + + + + + Username + + + + Lorem ipsum dolor sit + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro sed + doloremque tempora soluta. Dolorem ex quidem ipsum tempora, ipsa, + obcaecati quia suscipit numquam, voluptates commodi porro impedit + natus quos doloremque! + + + ); } diff --git a/app/(application)/(user)/event/(tabs)/status.tsx b/app/(application)/(user)/event/(tabs)/status.tsx index 9649f6e..7d48aeb 100644 --- a/app/(application)/(user)/event/(tabs)/status.tsx +++ b/app/(application)/(user)/event/(tabs)/status.tsx @@ -1,11 +1,63 @@ +import { + BaseBox, + Grid, + ScrollableCustom, + StackCustom, + TextCustom, +} from "@/components"; import ViewWrapper from "@/components/_ShareComponent/ViewWrapper"; -import { GStyles } from "@/styles/global-styles"; -import { Text } from "react-native"; +import { masterStatus } from "@/lib/dummy-data/_master/status"; +import { useState } from "react"; export default function Status() { + const id = "test-id-event"; + + const [activeCategory, setActiveCategory] = useState( + "publish" + ); + + const handlePress = (item: any) => { + setActiveCategory(item.value); + // tambahkan logika lain seperti filter dsb. + }; + + const scrollComponent = ( + ({ + id: i, + label: e.label, + value: e.value, + }))} + onButtonPress={handlePress} + activeId={activeCategory as any} + /> + ); + return ( - - Status + + + + + + + Lorem ipsum,{" "} + {activeCategory} dolor + sit amet consectetur adipisicing elit. + + + + {new Date().toLocaleDateString()} + + + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur + eveniet ab eum ducimus tempore a quia deserunt quisquam. Tempora, + atque. Aperiam minima asperiores dicta perferendis quis adipisci, + dolore optio porro! + + + ); } diff --git a/app/(application)/(user)/event/[id]/[detail]/detail-event.tsx b/app/(application)/(user)/event/[id]/[detail]/detail-event.tsx new file mode 100644 index 0000000..22f1e90 --- /dev/null +++ b/app/(application)/(user)/event/[id]/[detail]/detail-event.tsx @@ -0,0 +1,69 @@ +import { + BaseBox, + Grid, + Spacing, + StackCustom, + TextCustom, + ViewWrapper, +} from "@/components"; +import LeftButtonCustom from "@/components/Button/BackButton"; +import { Stack, useLocalSearchParams } from "expo-router"; + +export default function EventDetail() { + const { id, detail } = useLocalSearchParams(); + + const listData = [ + { + title: "Lokasi", + value: + "Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur eveniet ab eum ducimus tempore a quia deserunt quisquam. Tempora, atque. Aperiam minima asperiores dicta perferendis quis adipisci, dolore optio porro!", + }, + { + title: "Tipe Acara", + value: "Workshop", + }, + { + title: "Tanggal Mulai", + value: "Senin, 18 Juli 2025, 10:00 WIB", + }, + { + title: "Tanggal Berakhir", + value: "Selasa, 19 Juli 2025, 12:00 WIB", + }, + { + title: "Deskripsi", + value: + "Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur eveniet ab eum ducimus tempore a quia deserunt quisquam. Tempora, atque. Aperiam minima asperiores dicta perferendis quis adipisci, dolore optio porro!", + }, + ]; + + return ( + <> + , + }} + /> + + + + + Judul event {id} + + {listData.map((item, index) => ( + + + {item.title} + + + {item.value} + + + ))} + + + + + ); +} diff --git a/app/(application)/(user)/event/create.tsx b/app/(application)/(user)/event/create.tsx index 84daa3e..030c7d4 100644 --- a/app/(application)/(user)/event/create.tsx +++ b/app/(application)/(user)/event/create.tsx @@ -41,14 +41,14 @@ export default function EventCreate() { }; const buttonSubmit = ( - - + // + // ); return ( <> - + + + {buttonSubmit} + ); diff --git a/app/(application)/(user)/notifications/index.tsx b/app/(application)/(user)/notifications/index.tsx index 1fe591f..e136aad 100644 --- a/app/(application)/(user)/notifications/index.tsx +++ b/app/(application)/(user)/notifications/index.tsx @@ -11,18 +11,18 @@ import { useState } from "react"; import { View } from "react-native"; const categories = [ - { id: 1, label: "Semua" }, - { id: 2, label: "Event" }, - { id: 3, label: "Job" }, - { id: 4, label: "Voting" }, - { id: 5, label: "Donasi" }, - { id: 6, label: "Investasi" }, - { id: 7, label: "Forum" }, - { id: 8, label: "Collaboration" }, + { value: "all", label: "Semua" }, + { value: "event", label: "Event" }, + { value: "job", label: "Job" }, + { value: "voting", label: "Voting" }, + { value: "donasi", label: "Donasi" }, + { value: "investasi", label: "Investasi" }, + { value: "forum", label: "Forum" }, + { value: "collaboration", label: "Collaboration" }, ]; -const selectedCategory = (id: number) => { - const category = categories.find((c) => c.id === id); +const selectedCategory = (value: string) => { + const category = categories.find((c) => c.value === value); return category?.label; }; @@ -31,7 +31,7 @@ const BoxNotification = ({ activeCategory, }: { index: number; - activeCategory: number | null; + activeCategory: string | null; }) => { return ( <> @@ -39,13 +39,13 @@ const BoxNotification = ({ onPress={() => console.log( "Notification >", - selectedCategory(activeCategory as number) + selectedCategory(activeCategory as string) ) } > - # {selectedCategory(activeCategory as number)} + # {selectedCategory(activeCategory as string)} (1); + const [activeCategory, setActiveCategory] = useState("all"); const handlePress = (item: any) => { - setActiveCategory(item.id); + setActiveCategory(item.value); // tambahkan logika lain seperti filter dsb. }; return ( ({ + id: i, + label: e.label, + value: e.value, + }))} onButtonPress={handlePress} - activeId={activeCategory as any} + activeId={activeCategory as string} /> } > {Array.from({ length: 20 }).map((e, i) => ( - + ))} - - {/* Konten utama di sini */} - {/* - - {activeCategory - ? `Kategori Aktif: ${ - categories.find((c) => c.id === activeCategory)?.label - }` - : "Pilih kategori"} - - */} ); } diff --git a/components/Box/BaseBox.tsx b/components/Box/BaseBox.tsx index 8a64eb7..7512fbc 100644 --- a/components/Box/BaseBox.tsx +++ b/components/Box/BaseBox.tsx @@ -1,10 +1,22 @@ import { AccentColor } from "@/constants/color-palet"; -import { PADDING_EXTRA_SMALL, PADDING_MEDIUM, PADDING_SMALL } from "@/constants/constans-value"; -import { StyleProp, TouchableHighlight, View, ViewStyle } from "react-native"; +import { + PADDING_EXTRA_SMALL, + PADDING_MEDIUM, + PADDING_SMALL, +} from "@/constants/constans-value"; +import { Href, router } from "expo-router"; +import { + StyleProp, + TouchableHighlight, + TouchableOpacity, + View, + ViewStyle, +} from "react-native"; interface BaseBoxProps { children: React.ReactNode; style?: StyleProp; + href?: Href; onPress?: () => void; marginBottom?: number; padding?: number; @@ -15,16 +27,19 @@ interface BaseBoxProps { export default function BaseBox({ children, style, + href, onPress, marginBottom = PADDING_MEDIUM, - paddingBlock = PADDING_EXTRA_SMALL, + paddingBlock = PADDING_MEDIUM, paddingInline = PADDING_SMALL, }: BaseBoxProps) { + return ( <> - {onPress ? ( - router.navigate(href) : onPress} style={[ { backgroundColor: AccentColor.darkblue, @@ -37,10 +52,9 @@ export default function BaseBox({ }, style, ]} - // activeOpacity={0.7} > {children} - + ) : ( {data.map((item) => { - const isActive = activeId === item.id; + const isActive = activeId === item.value; return ( ; bold?: boolean; semiBold?: boolean; - size?: "default" | "large" | "small"; + size?: "default" | "large" | "small" | "xlarge"; color?: "default" | "yellow" | "red" | "gray" | "green" | "black" align?: TextAlign; // Prop untuk alignment truncate?: boolean | number; @@ -51,6 +52,7 @@ const TextCustom: React.FC = ({ // Size if (size === "large") selectedStyles.push(styles.large); + else if (size === "xlarge") selectedStyles.push(styles.xlarge); else if (size === "small") selectedStyles.push(styles.small); // Color @@ -113,11 +115,14 @@ export const styles = StyleSheet.create({ fontFamily: "Poppins-SemiBold", fontWeight: "500", }, + small: { + fontSize: TEXT_SIZE_SMALL, + }, large: { fontSize: TEXT_SIZE_LARGE, }, - small: { - fontSize: TEXT_SIZE_SMALL, + xlarge: { + fontSize: TEXT_SIZE_XLARGE, }, yellow: { color: MainColor.yellow, diff --git a/components/_ShareComponent/ViewWrapper.tsx b/components/_ShareComponent/ViewWrapper.tsx index 17204ee..0555ceb 100644 --- a/components/_ShareComponent/ViewWrapper.tsx +++ b/components/_ShareComponent/ViewWrapper.tsx @@ -20,15 +20,23 @@ interface ViewWrapperProps { headerComponent?: React.ReactNode; footerComponent?: React.ReactNode; floatingButton?: React.ReactNode; + hideFooter?: boolean; style?: StyleProp; } +/** + * + * @param hideFooter + * @returns meneyembunyikan footer ketika menggunakan tabs (misal: bottom tab) + */ + const ViewWrapper = ({ children, withBackground = false, headerComponent, footerComponent, floatingButton, + hideFooter = false, style, }: ViewWrapperProps) => { const assetBackground = require("../../assets/images/main-background.png"); @@ -78,10 +86,12 @@ const ViewWrapper = ({ {footerComponent} ) : ( - + hideFooter ? null : ( + + ) )} {/* Floating Component (misal: FAB) */} diff --git a/constants/constans-value.ts b/constants/constans-value.ts index edebd4c..f58de34 100644 --- a/constants/constans-value.ts +++ b/constants/constans-value.ts @@ -7,6 +7,7 @@ export { TEXT_SIZE_SMALL, TEXT_SIZE_MEDIUM, TEXT_SIZE_LARGE, + TEXT_SIZE_XLARGE, ICON_SIZE_SMALL, ICON_SIZE_MEDIUM, DRAWER_HEIGHT, @@ -27,6 +28,7 @@ const OS_HEIGHT = Platform.OS === "ios" ? OS_IOS_HEIGHT : OS_ANDROID_HEIGHT const TEXT_SIZE_SMALL = 12; const TEXT_SIZE_MEDIUM = 14; const TEXT_SIZE_LARGE = 16; +const TEXT_SIZE_XLARGE = 18; // Icon Size const ICON_SIZE_BUTTON = 18 diff --git a/lib/dummy-data/_master/status.tsx b/lib/dummy-data/_master/status.tsx new file mode 100644 index 0000000..e5f7068 --- /dev/null +++ b/lib/dummy-data/_master/status.tsx @@ -0,0 +1,6 @@ +export const masterStatus = [ + { value: "publish", label: "Publish" }, + { value: "review", label: "Review" }, + { value: "draft", label: "Draft" }, + { value: "reject", label: "Reject" }, +]; diff --git a/screens/Authentication/LoginView.tsx b/screens/Authentication/LoginView.tsx index 7f109a0..aac55c3 100644 --- a/screens/Authentication/LoginView.tsx +++ b/screens/Authentication/LoginView.tsx @@ -32,11 +32,11 @@ export default function LoginView() { // router.navigate("/verification"); // router.navigate(`/(application)/(user)/profile/${id}`); - // router.navigate("/(application)/(user)/home"); + router.navigate("/(application)/(user)/home"); // router.navigate(`/(application)/profile/${id}/edit`); // router.navigate(`/(application)/(user)/portofolio/${id}`) // router.navigate(`/(application)/(image)/preview-image/${id}`); - router.replace("/(application)/(user)/event/(tabs)"); + // router.replace("/(application)/(user)/event/(tabs)"); } return (