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

52
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>
<BaseBox>
<ScrollView style={{ height: "80%" }}> <ScrollView style={{ height: "80%" }}>
<TextCustom> <TextCustom>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem eiusmod tempor incididunt ut labore et dolore magna aliqua.
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ipsum dolor sit amet, consectetur adipiscing elit, sed do
incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
amet, consectetur adipiscing elit, sed do eiusmod tempor ipsum dolor sit amet, consectetur adipiscing elit, sed do
incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
amet, consectetur adipiscing elit, sed do eiusmod tempor ipsum dolor sit amet, consectetur adipiscing elit, sed do
incididunt ut iqua.Lorem ipsum dolor sit amet, consectetur eiusmod tempor incididunt ut iqua.Lorem ipsum dolor sit amet,
adipiscing elit, sed do eiusmod tempor incididunt ut labore et consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur labore et dolore magna aliqua.Lorem ipsum dolor sit amet,
adipiscing elit, sed do eiusmod tempor incididunt ut labore et consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur labore et dolore magna aliqua.Lorem ipsum dolor sit amet,
adipiscing elit, sed do eiusmod tempor incididunt ut labore et consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur labore et dolore magna aliqua.Lorem ipsum dolor sit amet,
adipiscing elit, sed do eiusmod tempor incididunt ut labore et consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur labore et dolore magna aliqua.Lorem ipsum dolor sit amet,
adipiscing elit, sed do eiusmod tempor incididunt ut labore et consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur labore et dolore magna aliqua.Lorem ipsum dolor sit amet,
adipiscing elit, sed do eiusmod tempor incididunt ut labore et consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur labore et dolore magna aliqua.Lorem ipsum dolor sit amet,
adipiscing elit, sed do eiusmod tempor incididunt ut labore et consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur labore et dolore magna aliqua.Lorem ipsum dolor sit amet,
adipiscing elit, sed do eiusmod tempor incididunt ut labore et consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
dolore magna aliqua. labore et dolore magna aliqua.
</TextCustom> </TextCustom>
</ScrollView> </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

17
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,8 +36,9 @@ 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> <StackCustom>
<TextCustom truncate={2} size="large" bold align="center"> <TextCustom truncate={2} size="large" bold align="center">
{title || "Lorem ipsum dolor sit"} {title || "Lorem ipsum dolor sit"}
@@ -48,12 +47,10 @@ function Collaboration_BoxPublishSection({
{description || {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!"} "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>
</StackCustom> {/* <TextCustom bold size="small" >
</BaseBox>
<TextCustom bold size="small" align="center">
2 Partisipan 2 Partisipan
</TextCustom> </TextCustom> */}
</StackCustom>
</StackCustom> </StackCustom>
</BoxWithHeaderSection> </BoxWithHeaderSection>
</> </>