diff --git a/app/(application)/(user)/_layout.tsx b/app/(application)/(user)/_layout.tsx index 1ef2af6..5779e43 100644 --- a/app/(application)/(user)/_layout.tsx +++ b/app/(application)/(user)/_layout.tsx @@ -107,6 +107,25 @@ export default function UserLayout() { headerLeft: () => , }} /> + {/* ========== End Event Section ========= */} + + {/* ========== Collaboration Section ========= */} + , + }} + /> + , + }} + /> + + {/* ========== End Collaboration Section ========= */} {/* ========== Forum Section ========= */} , + headerLeft: () => , }} /> + ( + + ), + }} + /> + ( + + ), + }} + /> + ( + + ), + }} + /> + + ); +} diff --git a/app/(application)/(user)/collaboration/(tabs)/group.tsx b/app/(application)/(user)/collaboration/(tabs)/group.tsx new file mode 100644 index 0000000..c976f4c --- /dev/null +++ b/app/(application)/(user)/collaboration/(tabs)/group.tsx @@ -0,0 +1,10 @@ +import { TextCustom } from "@/components"; +import ViewWrapper from "@/components/_ShareComponent/ViewWrapper"; + +export default function CollaborationGroup() { + return ( + + CollaborationGroup + + ); +} diff --git a/app/(application)/(user)/collaboration/(tabs)/index.tsx b/app/(application)/(user)/collaboration/(tabs)/index.tsx new file mode 100644 index 0000000..93ff764 --- /dev/null +++ b/app/(application)/(user)/collaboration/(tabs)/index.tsx @@ -0,0 +1,29 @@ +import { + FloatingButton, + ViewWrapper +} from "@/components"; +import Collaboration_BoxPublishSection from "@/screens/Collaboration/BoxPublishSection"; +import { router } from "expo-router"; + +export default function CollaborationBeranda() { + return ( + { + router.push("/collaboration/create") + }} + /> + } + > + {Array.from({ length: 10 }).map((_, index) => ( + + ))} + + ); +} diff --git a/app/(application)/(user)/collaboration/(tabs)/participans.tsx b/app/(application)/(user)/collaboration/(tabs)/participans.tsx new file mode 100644 index 0000000..7c0f8b4 --- /dev/null +++ b/app/(application)/(user)/collaboration/(tabs)/participans.tsx @@ -0,0 +1,10 @@ +import { TextCustom } from "@/components"; +import ViewWrapper from "@/components/_ShareComponent/ViewWrapper"; + +export default function CollaborationParticipans() { + return ( + + CollaborationParticipans + + ); +} diff --git a/app/(application)/(user)/collaboration/create.tsx b/app/(application)/(user)/collaboration/create.tsx new file mode 100644 index 0000000..366c58e --- /dev/null +++ b/app/(application)/(user)/collaboration/create.tsx @@ -0,0 +1,11 @@ +import { TextCustom, ViewWrapper } from "@/components"; + +export default function CollaborationCreate() { + return ( + + + Tambah Koleksi + + + ); +} diff --git a/components/Box/BaseBox.tsx b/components/Box/BaseBox.tsx index a9cf39c..18b8ac5 100644 --- a/components/Box/BaseBox.tsx +++ b/components/Box/BaseBox.tsx @@ -1,10 +1,11 @@ -import { AccentColor } from "@/constants/color-palet"; +import { AccentColor, MainColor } from "@/constants/color-palet"; import { PADDING_MEDIUM, PADDING_SMALL } from "@/constants/constans-value"; import { Href, router } from "expo-router"; import { + AccessibilityInfo, StyleProp, TouchableOpacity, View, @@ -22,6 +23,7 @@ interface BaseBoxProps { paddingBottom?: number; paddingInline?: number; paddingBlock?: number; + backgroundColor?: string; } export default function BaseBox({ @@ -34,6 +36,7 @@ export default function BaseBox({ paddingInline = PADDING_SMALL, paddingTop = PADDING_MEDIUM, paddingBottom = PADDING_MEDIUM, + backgroundColor = AccentColor.darkblue, }: BaseBoxProps) { return ( @@ -44,7 +47,7 @@ export default function BaseBox({ onPress={href ? () => router.navigate(href) : onPress} style={[ { - backgroundColor: AccentColor.darkblue, + backgroundColor, borderColor: AccentColor.blue, borderWidth: 1, borderRadius: 10, @@ -63,7 +66,7 @@ export default function BaseBox({ + ); +} \ No newline at end of file diff --git a/components/index.ts b/components/index.ts index b064049..92eec67 100644 --- a/components/index.ts +++ b/components/index.ts @@ -5,6 +5,7 @@ import LeftButtonCustom from "./Button/BackButton"; import ButtonCenteredOnly from "./Button/ButtonCenteredOnly"; import ButtonCustom from "./Button/ButtonCustom"; import DotButton from "./Button/DotButton"; +import FloatingButton from "./Button/FloatingButton"; // Drawer import DrawerCustom from "./Drawer/DrawerCustom"; import MenuDrawerDynamicGrid from "./Drawer/MenuDrawerDynamicGird"; @@ -42,36 +43,46 @@ import ScrollableCustom from "./Scroll/ScrollCustom"; import AvatarUsernameAndOtherComponent from "./_ShareComponent/AvataraAndOtherHeaderComponent"; import Spacing from "./_ShareComponent/Spacing"; import ViewWrapper from "./_ShareComponent/ViewWrapper"; +import TabBarBackground from "./_ShareComponent/TabBarBackground"; + export { AlertCustom, // Image AvatarCustom, // ShareComponent - AvatarUsernameAndOtherComponent, LeftButtonCustom as BackButton, + AvatarUsernameAndOtherComponent, // Box BaseBox, - BoxButtonOnFooter, BoxWithHeaderSection, + BoxButtonOnFooter, + BoxWithHeaderSection, // Button + LeftButtonCustom as BackButton, ButtonCenteredOnly, ButtonCustom, + FloatingButton, + DotButton, // Center CenterCustom, // Clickable ClickableCustom, // Divider - DividerCustom, DotButton, + DividerCustom, // Drawer DrawerCustom, // Grid - Grid, InformationBox, LandscapeFrameUploaded, + Grid, + InformationBox, + LandscapeFrameUploaded, // Map - MapCustom, MenuDrawerDynamicGrid, + MapCustom, + MenuDrawerDynamicGrid, // Scroll ScrollableCustom, // Select SelectCustom, // ShareComponent Spacing, + TabBarBackground, // Stack StackCustom, // TextArea @@ -81,6 +92,5 @@ export { // TextInput TextInputCustom, // ViewWrapper - ViewWrapper + ViewWrapper, }; - diff --git a/screens/Authentication/LoginView.tsx b/screens/Authentication/LoginView.tsx index 64ff6cd..aac55c3 100644 --- a/screens/Authentication/LoginView.tsx +++ b/screens/Authentication/LoginView.tsx @@ -30,9 +30,9 @@ export default function LoginView() { const id = randomAlfabet + randomNumber + fixNumber; console.log("login user id :", id); - router.navigate("/verification"); + // 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}`); diff --git a/screens/Collaboration/BoxPublishSection.tsx b/screens/Collaboration/BoxPublishSection.tsx new file mode 100644 index 0000000..4732d28 --- /dev/null +++ b/screens/Collaboration/BoxPublishSection.tsx @@ -0,0 +1,63 @@ +import { + BoxWithHeaderSection, + StackCustom, + AvatarUsernameAndOtherComponent, + TextCustom, + BaseBox, +} from "@/components"; +import { MainColor } from "@/constants/color-palet"; +import { Href } from "expo-router"; + +function Collaboration_BoxPublishSection({ + id, + title, + username, + description, + href, + + // Avatar + sourceAvatar, + rightComponentAvatar, +}: { + id: string; + title?: string; + username?: string; + description?: string; + href: Href; + + // Avatar + sourceAvatar?: string; + rightComponentAvatar?: React.ReactNode; +}) { + return ( + <> + + + + + + + {title || "Lorem ipsum dolor sit"} + + + {description || + "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!"} + + + + + + 2 Partisipan + + + + + ); +} + +export default Collaboration_BoxPublishSection; diff --git a/screens/Home/topFeatureSection.tsx b/screens/Home/topFeatureSection.tsx index c842f45..80b4286 100644 --- a/screens/Home/topFeatureSection.tsx +++ b/screens/Home/topFeatureSection.tsx @@ -14,7 +14,10 @@ export default function Home_FeatureSection() { Event - + router.push("/(application)/(user)/collaboration/(tabs)")} + > Collaboration diff --git a/styles/tabs-styles.ts b/styles/tabs-styles.ts new file mode 100644 index 0000000..70fe42b --- /dev/null +++ b/styles/tabs-styles.ts @@ -0,0 +1,25 @@ +import { TabBarBackground } from "@/components"; +import { MainColor } from "@/constants/color-palet"; +import { OS_IOS_HEIGHT, OS_ANDROID_HEIGHT } from "@/constants/constans-value"; +import { BottomTabNavigationOptions } from "@react-navigation/bottom-tabs"; +import { Platform } from "react-native"; + +export const TabsStyles: BottomTabNavigationOptions = { + headerShown: false, + tabBarActiveTintColor: MainColor.yellow, + tabBarInactiveTintColor: MainColor.white_gray, + tabBarStyle: Platform.select({ + ios: { + borderTopWidth: 0, + paddingTop: 5, + height: OS_IOS_HEIGHT, + }, + android: { + borderTopWidth: 0, + paddingTop: 5, + height: OS_ANDROID_HEIGHT, + }, + default: {}, + }), + tabBarBackground: TabBarBackground, +};