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

Donation

Browse Source 
Add:
- ProgressSection.tsx
- ComponentInfoFundrising.tsx
- donation/[id]/infromation-fundrising.tsx
- donation/[id]/detail-story.tsx

Fix:
- Donation/ComponentStoryFunrising.tsx
- Donation/ComponentBoxDetailData.tsx

## No Issue
This commit is contained in:
Bagasbanuna02
2025-08-04 14:06:40 +08:00
parent d437365b5e
commit 3bcadbf643
11 changed files with 315 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
screens/Donation/BoxPublish.tsx Normal file
View File

@@ -0,0 +1,41 @@
import {
BaseBox,
Grid,
DummyLandscapeImage,
StackCustom,
TextCustom,
ProgressCustom,
} from "@/components";
import { View } from "react-native";
export default function Donation_BoxPublish({ id }: { id: string }) {
return (
<>
<BaseBox paddingTop={7} paddingBottom={7} href={`/donation/${id}`}>
<Grid>
<Grid.Col span={5}>
<DummyLandscapeImage unClickPath height={100} />
</Grid.Col>
<Grid.Col span={1}>
<View />
</Grid.Col>
<Grid.Col span={6}>
<StackCustom>
<View>
<TextCustom truncate>
Judul Donasi: Lorem ipsum dolor sit amet consectetur
adipisicing elit.
</TextCustom>
<TextCustom size="small">Sisa hari: 0</TextCustom>
</View>
<ProgressCustom value={(Number(id) % 5) * 20} size="lg" />
{/* <TextCustom>
Terkumpul : Rp 300.000
</TextCustom> */}
</StackCustom>
</Grid.Col>
</Grid>
</BaseBox>
</>
);
}

8
screens/Donation/ComponentBoxDetailData.tsx
View File

@@ -5,9 +5,14 @@ import {
TextCustom,
Grid,
} from "@/components";
import React from "react";
import { View } from "react-native";
export default function Donation_ComponentBoxDetailData() {
export default function Donation_ComponentBoxDetailData({
bottomSection,
}: {
bottomSection?: React.ReactNode;
}) {
return (
<>
<BaseBox>
@@ -39,6 +44,7 @@ export default function Donation_ComponentBoxDetailData() {
</View>
</Grid.Col>
</Grid>
{bottomSection}
</StackCustom>
</BaseBox>
</>

48
screens/Donation/ComponentInfoFundrising.tsx Normal file
View File

@@ -0,0 +1,48 @@
import {
AvatarUsernameAndOtherComponent,
BaseBox,
Grid,
InformationBox,
StackCustom,
TextCustom,
} from "@/components";
import { MainColor } from "@/constants/color-palet";
import { ICON_SIZE_SMALL } from "@/constants/constans-value";
import { Ionicons } from "@expo/vector-icons";
export default function Donation_ComponentInfoFundrising({
id,
}: {
id: string;
}) {
return (
<>
<BaseBox href={`/donation/${id}/infromation-fundrising`} style={{paddingBottom: 0}}>
<StackCustom gap={"xs"}>
<Grid>
<Grid.Col span={10}>
<TextCustom bold size="large">
Informasi Penggalang Dana
</TextCustom>
</Grid.Col>
<Grid.Col span={2}>
<Ionicons
name="chevron-forward-circle-outline"
size={ICON_SIZE_SMALL}
color={MainColor.yellow}
style={{
alignSelf: "flex-end",
}}
/>
</Grid.Col>
</Grid>
<AvatarUsernameAndOtherComponent />
<InformationBox
text="Semua dana yang terkumpul akan disalurkan ke penggalang dana, kabar penyaluran dapat dilihat di halaman kabar terbaru."
/>
</StackCustom>
</BaseBox>
</>
);
}

70
screens/Donation/ComponentStoryFunrising.tsx
View File

@@ -3,36 +3,40 @@ import { MainColor } from "@/constants/color-palet";
import { ICON_SIZE_SMALL } from "@/constants/constans-value";
import { Ionicons } from "@expo/vector-icons";
export default function Donation_ComponentStoryFunrising() {
return (
<>
<BaseBox>
<StackCustom gap={"xs"}>
<Grid>
<Grid.Col span={10}>
<TextCustom bold size="large">
Cerita Penggalang Dana
</TextCustom>
</Grid.Col>
<Grid.Col span={2}>
<Ionicons
name="chevron-forward-circle-outline"
size={ICON_SIZE_SMALL}
color={MainColor.yellow}
style={{
alignSelf: "flex-end",
}}
/>
</Grid.Col>
</Grid>
<TextCustom truncate={3}>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam,
iusto porro quae optio accusantium amet minima deleniti temporibus
cum voluptatem vel veniam doloribus blanditiis sapiente deserunt
distinctio eaque aliquid laboriosam?
</TextCustom>
</StackCustom>
</BaseBox>
</>
);
}
export default function Donation_ComponentStoryFunrising({
id,
}: {
id: string;
}) {
return (
<>
<BaseBox href={`/donation/${id}/detail-story`}>
<StackCustom gap={"xs"}>
<Grid>
<Grid.Col span={10}>
<TextCustom bold size="large">
Cerita Penggalang Dana
</TextCustom>
</Grid.Col>
<Grid.Col span={2}>
<Ionicons
name="chevron-forward-circle-outline"
size={ICON_SIZE_SMALL}
color={MainColor.yellow}
style={{
alignSelf: "flex-end",
}}
/>
</Grid.Col>
</Grid>
<TextCustom truncate={3}>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam,
iusto porro quae optio accusantium amet minima deleniti temporibus
cum voluptatem vel veniam doloribus blanditiis sapiente deserunt
distinctio eaque aliquid laboriosam?
</TextCustom>
</StackCustom>
</BaseBox>
</>
);
}

59
screens/Donation/ProgressSection.tsx Normal file
View File

@@ -0,0 +1,59 @@
import { ProgressCustom, Spacing, Grid, TextCustom } from "@/components";
import { MainColor } from "@/constants/color-palet";
import { ICON_SIZE_MEDIUM } from "@/constants/constans-value";
import { Ionicons, MaterialIcons } from "@expo/vector-icons";
import { View } from "react-native";
export default function Donation_ProgressSection() {
return (
<>
<View>
<ProgressCustom size="lg" />
<Spacing />
<Grid>
<Grid.Col span={4}>
<View style={{ alignItems: "center" }}>
<Ionicons
name="flower-sharp"
size={ICON_SIZE_MEDIUM}
color={MainColor.yellow}
/>
<Spacing height={10} />
<TextCustom size="small">Donatur</TextCustom>
</View>
</Grid.Col>
<Grid.Col
span={4}
style={{
borderLeftWidth: 1,
borderLeftColor: MainColor.white,
borderRightWidth: 1,
borderRightColor: MainColor.white,
}}
>
<View style={{ alignItems: "center" }}>
<Ionicons
name="chatbox"
size={ICON_SIZE_MEDIUM}
color={MainColor.yellow}
/>
<Spacing height={10} />
<TextCustom size="small">Kabar Terbaru</TextCustom>
</View>
</Grid.Col>
<Grid.Col span={4}>
<View style={{ alignItems: "center" }}>
<MaterialIcons
name="transfer-within-a-station"
size={ICON_SIZE_MEDIUM}
color={MainColor.yellow}
/>
<Spacing height={10} />
<TextCustom size="small">Pencairan Dana</TextCustom>
</View>
</Grid.Col>
</Grid>
</View>
</>
);
}