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

feature

Browse Source 
deskripsi:
- portofolio: detail bisnis, maps, media social
- new component divide
# No Issue
This commit is contained in:
Bagasbanuna02
2025-07-10 11:58:23 +08:00
parent 71ea0ca5f2
commit 862af44c03
8 changed files with 485 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
screens/Portofolio/BusinessLocationSection.tsx Normal file
View File

@@ -0,0 +1,11 @@
import { BaseBox, TextCustom } from "@/components";
export default function Portofolio_BusinessLocation() {
return (
<>
<BaseBox>
<TextCustom bold>Lokasi Bisnis</TextCustom>
</BaseBox>
</>
);
}

14
screens/Portofolio/ButtonDelete.tsx Normal file
View File

@@ -0,0 +1,14 @@
import { ButtonCustom } from "@/components";
import { MainColor } from "@/constants/color-palet";
import { Ionicons } from "@expo/vector-icons";
export default function Portofolio_ButtonDelete() {
const handleDelete = () => {
console.log("Delete");
};
return (
<ButtonCustom textColor={MainColor.white} iconLeft={<Ionicons name="trash-outline" size={20} color="white" />} onPress={handleDelete} backgroundColor={MainColor.red}>
Hapus
</ButtonCustom>
);
}

154
screens/Portofolio/DataPortofolio.tsx Normal file
View File

@@ -0,0 +1,154 @@
import {
AvatarCustom,
BaseBox,
Grid,
StackCustom,
TextCustom,
} from "@/components";
import DividerCustom from "@/components/Divider/DividerCustom";
import { AccentColor } from "@/constants/color-palet";
import { ICON_SIZE_SMALL } from "@/constants/constans-value";
import { FontAwesome, Ionicons } from "@expo/vector-icons";
import { useLocalSearchParams } from "expo-router";
import { View } from "react-native";
export default function Portofolio_Data() {
const { id } = useLocalSearchParams();
const listData = [
{
icon: (
<FontAwesome name="building-o" size={ICON_SIZE_SMALL} color="white" />
),
label: "PT.Bali Interakrtif Perkasa",
},
{
icon: (
<Ionicons name="call-outline" size={ICON_SIZE_SMALL} color="white" />
),
label: "+6282340374412",
},
{
icon: (
<Ionicons name="home-outline" size={ICON_SIZE_SMALL} color="white" />
),
label: "Jl. Raya Kuta No. 123, Bandung, Indonesia",
},
{
icon: (
<Ionicons name="list-outline" size={ICON_SIZE_SMALL} color="white" />
),
label: "Teknologia",
},
];
const listSubBidang = [
{
icon: (
<Ionicons
name="chevron-forward-outline"
size={ICON_SIZE_SMALL}
color="white"
/>
),
label: "Security System",
},
{
icon: (
<Ionicons
name="chevron-forward-outline"
size={ICON_SIZE_SMALL}
color="white"
/>
),
label: "Web Developers",
},
{
icon: (
<Ionicons
name="chevron-forward-outline"
size={ICON_SIZE_SMALL}
color="white"
/>
),
label: "Mobile Developers",
},
];
return (
<>
<BaseBox>
<StackCustom>
<Grid>
<Grid.Col span={6}>
<TextCustom bold>Data Bisnis</TextCustom>
</Grid.Col>
<Grid.Col span={6} style={{ alignItems: "flex-end" }}>
<TextCustom color="yellow">ID: {id}</TextCustom>
</Grid.Col>
</Grid>
<View style={{ alignItems: "center" }}>
<AvatarCustom size="xl" />
</View>
{/* <Spacing height={10}/> */}
<View>
{listData.map((item, index) => (
<Grid key={index}>
<Grid.Col span={2} style={{ alignItems: "center" }}>
{item.icon}
</Grid.Col>
<Grid.Col span={10}>
<TextCustom style={{ paddingLeft: 5 }}>
{item.label}
</TextCustom>
</Grid.Col>
</Grid>
))}
<View style={{ paddingLeft: 10 }}>
{listSubBidang.map((item, index) => (
<Grid key={index}>
<Grid.Col span={2} style={{ alignItems: "center" }}>
{item.icon}
</Grid.Col>
<Grid.Col span={10}>
<TextCustom style={{ paddingLeft: 5 }}>
{item.label}
</TextCustom>
</Grid.Col>
</Grid>
))}
</View>
</View>
<DividerCustom labelPosition="top" color={AccentColor.blue} />
<View>
<Grid>
<Grid.Col span={2} style={{ alignItems: "center" }}>
<Ionicons
name="pin-outline"
size={ICON_SIZE_SMALL}
color="white"
/>
</Grid.Col>
<Grid.Col span={10}>
<TextCustom bold style={{ paddingLeft: 5 }}>
Tentang Kami
</TextCustom>
</Grid.Col>
</Grid>
<TextCustom style={{ paddingInline: 10 }}>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Doloremque, alias perspiciatis quis enim eos facilis sit est?
Doloremque, rerum. Cumque error asperiores harum temporibus
cupiditate ullam, id quibusdam! Harum, rerum!
</TextCustom>
</View>
</StackCustom>
</BaseBox>
</>
);
}

17
screens/Portofolio/PorfofolioSection.tsx Normal file
View File

@@ -0,0 +1,17 @@
import { Spacing, StackCustom } from "@/components";
import Portofolio_BusinessLocation from "./BusinessLocationSection";
import Portofolio_Data from "./DataPortofolio";
import Portofolio_SocialMediaSection from "./SocialMediaSection";
import Portofolio_ButtonDelete from "./ButtonDelete";
export default function PorfofolioSection() {
return (
<StackCustom>
<Portofolio_Data />
<Portofolio_BusinessLocation />
<Portofolio_SocialMediaSection />
<Portofolio_ButtonDelete/>
<Spacing/>
</StackCustom>
);
}

79
screens/Portofolio/SocialMediaSection.tsx Normal file
View File

@@ -0,0 +1,79 @@
import { BaseBox, Grid, StackCustom, TextCustom } from "@/components";
import { MainColor } from "@/constants/color-palet";
import { ICON_SIZE_SMALL } from "@/constants/constans-value";
import { Ionicons } from "@expo/vector-icons";
import { View } from "react-native";
export default function Portofolio_SocialMediaSection() {
const listData = [
{
label: "Facebook ku bagas",
icon: (
<Ionicons
name="logo-facebook"
size={ICON_SIZE_SMALL}
color={MainColor.white}
/>
),
},
{
label: "Tiktok ku bagas",
icon: (
<Ionicons
name="logo-tiktok"
size={ICON_SIZE_SMALL}
color={MainColor.white}
/>
),
},
{
label: "Instagram ku bagas",
icon: (
<Ionicons
name="logo-instagram"
size={ICON_SIZE_SMALL}
color={MainColor.white}
/>
),
},
{
label: "Twitter ku bagas",
icon: (
<Ionicons
name="logo-twitter"
size={ICON_SIZE_SMALL}
color={MainColor.white}
/>
),
},
{
label: "Youtube ku bagas",
icon: (
<Ionicons
name="logo-youtube"
size={ICON_SIZE_SMALL}
color={MainColor.white}
/>
),
},
];
return (
<>
<BaseBox>
<StackCustom>
<TextCustom bold>Media Sosial Bisnis</TextCustom>
{listData.map((item, index) => (
<Grid key={index}>
<Grid.Col span={2} style={{ alignItems: "center" }}>
{item.icon}
</Grid.Col>
<Grid.Col span={10} style={{ paddingLeft: 5 }}>
<TextCustom>{item.label}</TextCustom>
</Grid.Col>
</Grid>
))}
</StackCustom>
</BaseBox>
</>
);
}