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>
<TextCustom bold>Deskripsi diri</TextCustom>
<ScrollView style={{ height: "80%" }}>
<TextCustom>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum
dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit
amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit
amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut iqua.Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
</TextCustom>
</ScrollView>
<BaseBox>
<ScrollView style={{ height: "80%" }}>
<TextCustom>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut iqua.Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.
</TextCustom>
</ScrollView>
</BaseBox>
<Spacing />
</StackCustom>
</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 AvatarCustom from "../Image/AvatarCustom";
import TextCustom from "../Text/TextCustom";
import Divider from "../Divider/Divider"
const AvatarUsernameAndOtherComponent = ({
avatarHref,
avatar,
name,
rightComponent,
withBottomLine = false,
}: {
avatarHref?: string;
avatar?: ImageSourcePropType;
name?: string;
rightComponent?: React.ReactNode;
withBottomLine?: boolean;
}) => {
return (
<>
@@ -38,6 +41,7 @@ const AvatarUsernameAndOtherComponent = ({
</Grid.Col>
)}
</Grid>
{withBottomLine && <Divider marginTop={0} />}
</View>
</>
);

5
components/index.ts
View File

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

31
screens/Collaboration/BoxPublishSection.tsx
View File

@@ -1,11 +1,9 @@
import {
AvatarUsernameAndOtherComponent,
BoxWithHeaderSection,
StackCustom,
AvatarUsernameAndOtherComponent,
TextCustom,
BaseBox,
TextCustom
} from "@/components";
import { MainColor } from "@/constants/color-palet";
import { Href } from "expo-router";
function Collaboration_BoxPublishSection({
@@ -38,22 +36,21 @@ function Collaboration_BoxPublishSection({
name={username || "Username"}
rightComponent={rightComponentAvatar}
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
</TextCustom>
</TextCustom> */}
</StackCustom>
</StackCustom>
</BoxWithHeaderSection>
</>