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

Component

Browse Source 
Add:
- Divider

Collaboration
Fix:
- index

Add:
- list pf participants

# No Issue
This commit is contained in:
Bagasbanuna02
2025-07-23 16:40:04 +08:00
parent 30d61c84aa
commit 64d5a4308c
5 changed files with 79 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
app/(application)/(user)/collaboration/[id]/list-of-participants.tsx
View File

@@ -42,36 +42,38 @@ export default function CollaborationListOfParticipants() {
> >
<StackCustom> <StackCustom>
<TextCustom bold>Deskripsi diri</TextCustom> <TextCustom bold>Deskripsi diri</TextCustom>
<ScrollView style={{ height: "80%" }}> <BaseBox>
<TextCustom> <ScrollView style={{ height: "80%" }}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do <TextCustom>
eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod eiusmod tempor incididunt ut labore et dolore magna aliqua.
tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit ipsum dolor sit amet, consectetur adipiscing elit, sed do
amet, consectetur adipiscing elit, sed do eiusmod tempor eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit ipsum dolor sit amet, consectetur adipiscing elit, sed do
amet, consectetur adipiscing elit, sed do eiusmod tempor eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
incididunt ut iqua.Lorem ipsum dolor sit amet, consectetur ipsum dolor sit amet, consectetur adipiscing elit, sed do
adipiscing elit, sed do eiusmod tempor incididunt ut labore et eiusmod tempor incididunt ut iqua.Lorem ipsum dolor sit amet,
dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
adipiscing elit, sed do eiusmod tempor incididunt ut labore et labore et dolore magna aliqua.Lorem ipsum dolor sit amet,
dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
adipiscing elit, sed do eiusmod tempor incididunt ut labore et labore et dolore magna aliqua.Lorem ipsum dolor sit amet,
dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
adipiscing elit, sed do eiusmod tempor incididunt ut labore et labore et dolore magna aliqua.Lorem ipsum dolor sit amet,
dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
adipiscing elit, sed do eiusmod tempor incididunt ut labore et labore et dolore magna aliqua.Lorem ipsum dolor sit amet,
dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
adipiscing elit, sed do eiusmod tempor incididunt ut labore et labore et dolore magna aliqua.Lorem ipsum dolor sit amet,
dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
adipiscing elit, sed do eiusmod tempor incididunt ut labore et labore et dolore magna aliqua.Lorem ipsum dolor sit amet,
dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
adipiscing elit, sed do eiusmod tempor incididunt ut labore et labore et dolore magna aliqua.Lorem ipsum dolor sit amet,
dolore magna aliqua. consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
</TextCustom> labore et dolore magna aliqua.
</ScrollView> </TextCustom>
</ScrollView>
</BaseBox>
<Spacing /> <Spacing />
</StackCustom> </StackCustom>
</DrawerCustom> </DrawerCustom>

25
components/Divider/Divider.tsx Normal file
View File

@@ -0,0 +1,25 @@
import { AccentColor } from "@/constants/color-palet";
import { View } from "react-native";
export default function Divider({
color = AccentColor.blue,
size = 1,
marginTop= 12,
marginBottom= 12,
}: {
color?: string;
size?: number;
marginTop?: number;
marginBottom?: number;
}) {
return (
<View
style={{
borderTopColor: color,
borderTopWidth: size,
marginTop,
marginBottom,
}}
/>
);
}

4
components/_ShareComponent/AvataraAndOtherHeaderComponent.tsx
View File

@@ -2,17 +2,20 @@ import { ImageSourcePropType, View } from "react-native";
import Grid from "../Grid/GridCustom"; import Grid from "../Grid/GridCustom";
import AvatarCustom from "../Image/AvatarCustom"; import AvatarCustom from "../Image/AvatarCustom";
import TextCustom from "../Text/TextCustom"; import TextCustom from "../Text/TextCustom";
import Divider from "../Divider/Divider"
const AvatarUsernameAndOtherComponent = ({ const AvatarUsernameAndOtherComponent = ({
avatarHref, avatarHref,
avatar, avatar,
name, name,
rightComponent, rightComponent,
withBottomLine = false,
}: { }: {
avatarHref?: string; avatarHref?: string;
avatar?: ImageSourcePropType; avatar?: ImageSourcePropType;
name?: string; name?: string;
rightComponent?: React.ReactNode; rightComponent?: React.ReactNode;
withBottomLine?: boolean;
}) => { }) => {
return ( return (
<> <>
@@ -38,6 +41,7 @@ const AvatarUsernameAndOtherComponent = ({
</Grid.Col> </Grid.Col>
)} )}
</Grid> </Grid>
{withBottomLine && <Divider marginTop={0} />}
</View> </View>
</> </>
); );

5
components/index.ts
View File

@@ -31,6 +31,7 @@ import SelectCustom from "./Select/SelectCustom";
import AvatarCustom from "./Image/AvatarCustom"; import AvatarCustom from "./Image/AvatarCustom";
import LandscapeFrameUploaded from "./Image/LandscapeFrameUploaded"; import LandscapeFrameUploaded from "./Image/LandscapeFrameUploaded";
// Divider // Divider
import Divider from "./Divider/Divider";
import DividerCustom from "./Divider/DividerCustom"; import DividerCustom from "./Divider/DividerCustom";
// Map // Map
import MapCustom from "./Map/MapCustom"; import MapCustom from "./Map/MapCustom";
@@ -60,12 +61,14 @@ export {
BoxButtonOnFooter, BoxButtonOnFooter,
BoxWithHeaderSection, ButtonCenteredOnly, BoxWithHeaderSection, ButtonCenteredOnly,
ButtonCustom, ButtonCustom,
DotButton,
// Center // Center
CenterCustom, CenterCustom,
// Clickable // Clickable
ClickableCustom, ClickableCustom,
// Divider // Divider
DividerCustom, DotButton, Divider,
DividerCustom,
// Drawer // Drawer
DrawerCustom, FloatingButton, DrawerCustom, FloatingButton,
// Grid // Grid

31
screens/Collaboration/BoxPublishSection.tsx
View File

@@ -1,11 +1,9 @@
import { import {
AvatarUsernameAndOtherComponent,
BoxWithHeaderSection, BoxWithHeaderSection,
StackCustom, StackCustom,
AvatarUsernameAndOtherComponent, TextCustom
TextCustom,
BaseBox,
} from "@/components"; } from "@/components";
import { MainColor } from "@/constants/color-palet";
import { Href } from "expo-router"; import { Href } from "expo-router";
function Collaboration_BoxPublishSection({ function Collaboration_BoxPublishSection({
@@ -38,22 +36,21 @@ function Collaboration_BoxPublishSection({
name={username || "Username"} name={username || "Username"}
rightComponent={rightComponentAvatar} rightComponent={rightComponentAvatar}
avatar={sourceAvatar as any} avatar={sourceAvatar as any}
withBottomLine
/> />
<BaseBox backgroundColor={MainColor.soft_darkblue}>
<StackCustom>
<TextCustom truncate={2} size="large" bold align="center">
{title || "Lorem ipsum dolor sit"}
</TextCustom>
<TextCustom truncate={2}>
{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!"}
</TextCustom>
</StackCustom>
</BaseBox>
<TextCustom bold size="small" align="center"> <StackCustom>
<TextCustom truncate={2} size="large" bold align="center">
{title || "Lorem ipsum dolor sit"}
</TextCustom>
<TextCustom truncate={2}>
{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!"}
</TextCustom>
{/* <TextCustom bold size="small" >
2 Partisipan 2 Partisipan
</TextCustom> </TextCustom> */}
</StackCustom>
</StackCustom> </StackCustom>
</BoxWithHeaderSection> </BoxWithHeaderSection>
</> </>