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

Deskripsi:

Browse Source 
Event:
Add menu drawer draft
Fix event layoutk, index (beranda) , kontribusi

Comp
Add share avatar-username

# No Issue
This commit is contained in:
Bagasbanuna02
2025-07-22 10:35:47 +08:00
parent c8cc0f0232
commit 08dfd62bfd
7 changed files with 147 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/(application)/(user)/event/(tabs)/_layout.tsx
View File

@@ -30,7 +30,7 @@ export default function EventLayout() {
<Tabs.Screen <Tabs.Screen
name="index" name="index"
options={{ options={{
title: "Home", title: "Beranda",
tabBarIcon: ({ color }) => ( tabBarIcon: ({ color }) => (
<Ionicons size={20} name="home" color={color} /> <Ionicons size={20} name="home" color={color} />
), ),

128
app/(application)/(user)/event/(tabs)/index.tsx
View File

@@ -1,7 +1,7 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
import { import {
AvatarCustom, AvatarUsernameAndOtherComponent,
BaseBox, BaseBox,
Grid,
StackCustom, StackCustom,
TextCustom, TextCustom,
} from "@/components"; } from "@/components";
@@ -11,6 +11,7 @@ import { router } from "expo-router";
export default function Event() { export default function Event() {
const index = "test-id-event"; const index = "test-id-event";
const status = "publish";
return ( return (
<ViewWrapper <ViewWrapper
hideFooter hideFooter
@@ -18,17 +19,13 @@ export default function Event() {
<FloatingButton onPress={() => router.push("/event/create")} /> <FloatingButton onPress={() => router.push("/event/create")} />
} }
> >
{/* {Array.from({ length: 10 }).map((_, index) => ( {Array.from({ length: 10 }).map((_, index) => (
<BaseBox key={index}> <BaseBox key={index} href={`/event/${index}/${status}/detail-event`}>
<StackCustom gap={"xs"}> <StackCustom gap={"xs"}>
<Grid> <AvatarUsernameAndOtherComponent
<Grid.Col span={2}> avatarHref={`/profile/${index}`}
<AvatarCustom href={`/profile/${index}`} /> name="Lorem ipsum dolor sit"
</Grid.Col> />
<Grid.Col span={10} style={{ justifyContent: "center" }}>
<TextCustom bold>Username</TextCustom>
</Grid.Col>
</Grid>
<TextCustom truncate bold> <TextCustom truncate bold>
Lorem ipsum dolor sit Lorem ipsum dolor sit
</TextCustom> </TextCustom>
@@ -40,112 +37,7 @@ export default function Event() {
</TextCustom> </TextCustom>
</StackCustom> </StackCustom>
</BaseBox> </BaseBox>
))} */} ))}
<BaseBox>
<StackCustom gap={"xs"}>
<Grid>
<Grid.Col span={2}>
<AvatarCustom href={`/profile/${index}`} />
</Grid.Col>
<Grid.Col span={10} style={{ justifyContent: "center" }}>
<TextCustom bold>Username</TextCustom>
</Grid.Col>
</Grid>
<TextCustom truncate bold>
Lorem ipsum dolor sit
</TextCustom>
<TextCustom truncate={2}>
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!
</TextCustom>
</StackCustom>
</BaseBox>
<BaseBox>
<StackCustom gap={"xs"}>
<Grid>
<Grid.Col span={2}>
<AvatarCustom href={`/profile/${index}`} />
</Grid.Col>
<Grid.Col span={10} style={{ justifyContent: "center" }}>
<TextCustom bold>Username</TextCustom>
</Grid.Col>
</Grid>
<TextCustom truncate bold>
Lorem ipsum dolor sit
</TextCustom>
<TextCustom truncate={2}>
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!
</TextCustom>
</StackCustom>
</BaseBox>
<BaseBox>
<StackCustom gap={"xs"}>
<Grid>
<Grid.Col span={2}>
<AvatarCustom href={`/profile/${index}`} />
</Grid.Col>
<Grid.Col span={10} style={{ justifyContent: "center" }}>
<TextCustom bold>Username</TextCustom>
</Grid.Col>
</Grid>
<TextCustom truncate bold>
Lorem ipsum dolor sit
</TextCustom>
<TextCustom truncate={2}>
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!
</TextCustom>
</StackCustom>
</BaseBox>
<BaseBox>
<StackCustom gap={"xs"}>
<Grid>
<Grid.Col span={2}>
<AvatarCustom href={`/profile/${index}`} />
</Grid.Col>
<Grid.Col span={10} style={{ justifyContent: "center" }}>
<TextCustom bold>Username</TextCustom>
</Grid.Col>
</Grid>
<TextCustom truncate bold>
Lorem ipsum dolor sit
</TextCustom>
<TextCustom truncate={2}>
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!
</TextCustom>
</StackCustom>
</BaseBox>
<BaseBox>
<StackCustom gap={"xs"}>
<Grid>
<Grid.Col span={2}>
<AvatarCustom href={`/profile/${index}`} />
</Grid.Col>
<Grid.Col span={10} style={{ justifyContent: "center" }}>
<TextCustom bold>Username</TextCustom>
</Grid.Col>
</Grid>
<TextCustom truncate bold>
Lorem ipsum dolor sit
</TextCustom>
<TextCustom truncate={2}>
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!
</TextCustom>
</StackCustom>
</BaseBox>
</ViewWrapper> </ViewWrapper>
); );
} }

43
app/(application)/(user)/event/(tabs)/kontribusi.tsx
View File

@@ -1,11 +1,46 @@
import ViewWrapper from "@/components/_ShareComponent/ViewWrapper"; import {
import { GStyles } from "@/styles/global-styles"; AvatarCustom,
import { Text } from "react-native"; AvatarUsernameAndOtherComponent,
BaseBox,
Grid,
StackCustom,
TextCustom,
ViewWrapper
} from "@/components";
export default function Kontribusi() { export default function Kontribusi() {
return ( return (
<ViewWrapper> <ViewWrapper>
<Text style={GStyles.textLabel}>Kontribusi</Text> {Array.from({ length: 10 }).map((_, index) => (
<BaseBox key={index} href={`/event/${index}/publish/detail-event`}>
<StackCustom>
<AvatarUsernameAndOtherComponent
avatarHref={`/profile/${index}`}
rightComponent={
<TextCustom truncate>
{new Date().toDateString().split(" ")[2] +
", " +
new Date().toDateString().split(" ")[1] +
" " +
new Date().toDateString().split(" ")[3]}
</TextCustom>
}
/>
<TextCustom bold align="center" size="xlarge">
Judul Event Disini
</TextCustom>
<Grid>
{Array.from({ length: 4 }).map((_, index2) => (
<Grid.Col span={3} key={index2}>
<AvatarCustom size="sm" href={`/profile/${index2}`} />
</Grid.Col>
))}
</Grid>
</StackCustom>
</BaseBox>
))}
</ViewWrapper> </ViewWrapper>
); );
} }

72
app/(application)/(user)/event/[id]/[status]/detail-event.tsx
View File

@@ -7,43 +7,16 @@ import {
Spacing, Spacing,
StackCustom, StackCustom,
TextCustom, TextCustom,
ViewWrapper ViewWrapper,
} from "@/components"; } from "@/components";
import { IMenuDrawerItem } from "@/components/_Interface/types"; import { IMenuDrawerItem } from "@/components/_Interface/types";
import LeftButtonCustom from "@/components/Button/BackButton"; import LeftButtonCustom from "@/components/Button/BackButton";
import { AccentColor } from "@/constants/color-palet";
import { ICON_SIZE_MEDIUM } from "@/constants/constans-value";
import Event_AlertButtonStatusSection from "@/screens/Event/AlertButtonStatusSection"; import Event_AlertButtonStatusSection from "@/screens/Event/AlertButtonStatusSection";
import Event_ButtonStatusSection from "@/screens/Event/ButtonStatusSection"; import Event_ButtonStatusSection from "@/screens/Event/ButtonStatusSection";
import { Ionicons } from "@expo/vector-icons"; import { menuDrawerDraftEvent } from "@/screens/Event/menuDrawerDraft";
import { router, Stack, useLocalSearchParams } from "expo-router"; import { router, Stack, useLocalSearchParams } from "expo-router";
import { useState } from "react"; import { useState } from "react";
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!",
},
];
export default function EventDetail() { export default function EventDetail() {
const { id, status } = useLocalSearchParams(); const { id, status } = useLocalSearchParams();
const [openDrawer, setOpenDrawer] = useState(false); const [openDrawer, setOpenDrawer] = useState(false);
@@ -56,20 +29,6 @@ export default function EventDetail() {
setOpenDrawer(false); setOpenDrawer(false);
}; };
const drawerMenuDraftEvent = ({ id }: { id: string }) => [
{
icon: (
<Ionicons
name="create"
size={ICON_SIZE_MEDIUM}
color={AccentColor.white}
/>
),
label: "Edit event",
path: `/(application)/(user)/event/${id}/edit`,
},
];
return ( return (
<> <>
<Stack.Screen <Stack.Screen
@@ -114,7 +73,7 @@ export default function EventDetail() {
height={250} height={250}
> >
<MenuDrawerDynamicGrid <MenuDrawerDynamicGrid
data={drawerMenuDraftEvent({ id: id as string })} data={menuDrawerDraftEvent({ id: id as string })}
columns={4} columns={4}
onPressItem={handlePress} onPressItem={handlePress}
/> />
@@ -131,3 +90,28 @@ export default function EventDetail() {
</> </>
); );
} }
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!",
},
];

46
components/_ShareComponent/AvataraAndOtherHeaderComponent.tsx Normal file
View File

@@ -0,0 +1,46 @@
import { ImageSourcePropType, View } from "react-native";
import Grid from "../Grid/GridCustom";
import AvatarCustom from "../Image/AvatarCustom";
import TextCustom from "../Text/TextCustom";
const AvatarUsernameAndOtherComponent = ({
avatarHref,
avatar,
name,
rightComponent,
}: {
avatarHref?: string;
avatar?: ImageSourcePropType;
name?: string;
rightComponent?: React.ReactNode;
}) => {
return (
<>
<View>
<Grid containerStyle={{ zIndex: 10 }}>
<Grid.Col span={2}>
<AvatarCustom source={avatar} href={avatarHref as any} />
</Grid.Col>
<Grid.Col
span={rightComponent ? 6 : 10}
style={{ justifyContent: "center" }}
>
<TextCustom truncate bold>
{name || "Username"}
</TextCustom>
</Grid.Col>
{rightComponent && (
<Grid.Col
span={4}
style={{ alignItems: "flex-end", justifyContent: "center" }}
>
{rightComponent}
</Grid.Col>
)}
</Grid>
</View>
</>
);
};
export default AvatarUsernameAndOtherComponent;

10
components/index.ts
View File

@@ -8,9 +8,6 @@ import DotButton from "./Button/DotButton";
// Drawer // Drawer
import DrawerCustom from "./Drawer/DrawerCustom"; import DrawerCustom from "./Drawer/DrawerCustom";
import MenuDrawerDynamicGrid from "./Drawer/MenuDrawerDynamicGird"; import MenuDrawerDynamicGrid from "./Drawer/MenuDrawerDynamicGird";
// ShareComponent
import Spacing from "./_ShareComponent/Spacing";
import ViewWrapper from "./_ShareComponent/ViewWrapper";
// Text // Text
import TextCustom from "./Text/TextCustom"; import TextCustom from "./Text/TextCustom";
// TextInput // TextInput
@@ -40,7 +37,10 @@ import CenterCustom from "./Center/CenterCustom";
import ClickableCustom from "./Clickable/ClickableCustom"; import ClickableCustom from "./Clickable/ClickableCustom";
// Scroll // Scroll
import ScrollableCustom from "./Scroll/ScrollCustom"; import ScrollableCustom from "./Scroll/ScrollCustom";
// ShareComponent
import Spacing from "./_ShareComponent/Spacing";
import ViewWrapper from "./_ShareComponent/ViewWrapper";
import AvatarUsernameAndOtherComponent from "./_ShareComponent/AvataraAndOtherHeaderComponent";
export { export {
AlertCustom, AlertCustom,
// Image // Image
@@ -84,4 +84,6 @@ export {
ClickableCustom, ClickableCustom,
// Scroll // Scroll
ScrollableCustom, ScrollableCustom,
// ShareComponent
AvatarUsernameAndOtherComponent,
}; };

17
screens/Event/menuDrawerDraft.tsx Normal file
View File

@@ -0,0 +1,17 @@
import { AccentColor } from "@/constants/color-palet";
import { ICON_SIZE_MEDIUM } from "@/constants/constans-value";
import { Ionicons } from "@expo/vector-icons";
export const menuDrawerDraftEvent = ({ id }: { id: string }) => [
{
icon: (
<Ionicons
name="create"
size={ICON_SIZE_MEDIUM}
color={AccentColor.white}
/>
),
label: "Edit event",
path: `/(application)/(user)/event/${id}/edit`,
},
];