deskripsi:
- new page daftar portofolio
This commit is contained in:
2025-07-09 15:29:04 +08:00
parent b7e774a556
commit bfb029058c
4 changed files with 87 additions and 19 deletions

View File

@@ -0,0 +1,47 @@
import { BaseBox, Grid, TextCustom, ViewWrapper } from "@/components";
import { MainColor } from "@/constants/color-palet";
import { ICON_SIZE_SMALL } from "@/constants/constans-value";
import { Ionicons } from "@expo/vector-icons";
import { router, useLocalSearchParams } from "expo-router";
export default function ListPortofolio() {
const { id } = useLocalSearchParams();
return (
<ViewWrapper>
{Array.from({ length: 10 }).map((_, index) => (
<BaseBox
key={index}
style={{ backgroundColor: MainColor.darkblue }}
onPress={() => {
console.log("press to Portofolio");
router.push(`/portofolio/${id}`);
}}
>
<Grid>
<Grid.Col
span={10}
style={{ justifyContent: "center", backgroundColor: "" }}
>
<TextCustom bold size="large" truncate={1}>
Nama usaha portofolio
</TextCustom>
<TextCustom size="small" color="yellow">
#id-porofolio12345
</TextCustom>
</Grid.Col>
<Grid.Col
span={2}
style={{ alignItems: "flex-end", justifyContent: "center" }}
>
<Ionicons
name="caret-forward"
size={ICON_SIZE_SMALL}
color="white"
/>
</Grid.Col>
</Grid>
</BaseBox>
))}
</ViewWrapper>
);
}

View File

@@ -1,6 +1,5 @@
import LeftButtonCustom from "@/components/Button/BackButton";
import { GStyles } from "@/styles/global-styles";
import { HeaderStyles } from "@/styles/header-styles";
import { Stack } from "expo-router";
export default function PortofolioLayout() {
@@ -8,10 +7,7 @@ export default function PortofolioLayout() {
<>
<Stack
screenOptions={{
headerStyle: GStyles.headerStyle,
headerTitleStyle: GStyles.headerTitleStyle,
headerTitleAlign: "center",
headerBackButtonDisplayMode: "minimal",
...HeaderStyles,
headerLeft: () => <LeftButtonCustom />,
}}
>
@@ -20,7 +16,10 @@ export default function PortofolioLayout() {
name="[id]/create"
options={{ title: "Tambah Portofolio" }}
/>
<Stack.Screen
name="[id]/list"
options={{ title: "Daftar Portofolio" }}
/>
</Stack>
</>
);

View File

@@ -5,7 +5,7 @@ import {
TEXT_SIZE_SMALL,
} from "@/constants/constans-value";
import React from "react";
import { Text as RNText, StyleProp, StyleSheet, TextStyle } from "react-native";
import { Text as RNText, StyleProp, StyleSheet, TextStyle, TouchableOpacity } from "react-native";
// Tambahkan type TextAlignProps agar lebih type-safe
type TextAlign = "left" | "center" | "right";
@@ -19,6 +19,7 @@ interface TextCustomProps {
color?: "default" | "yellow" | "red";
align?: TextAlign; // Prop untuk alignment
truncate?: boolean | number;
onPress?: () => void;
}
const TextCustom: React.FC<TextCustomProps> = ({
@@ -30,6 +31,7 @@ const TextCustom: React.FC<TextCustomProps> = ({
color = "default",
align = "left", // Default alignment
truncate = false,
onPress,
}) => {
const getStyle = () => {
let selectedStyles = [];
@@ -61,15 +63,29 @@ const TextCustom: React.FC<TextCustomProps> = ({
};
return (
<RNText
numberOfLines={
typeof truncate === "number" ? truncate : truncate ? 1 : undefined
}
ellipsizeMode="tail"
style={getStyle()}
>
{children}
</RNText>
onPress ? (
<TouchableOpacity onPress={onPress}>
<RNText
numberOfLines={
typeof truncate === "number" ? truncate : truncate ? 1 : undefined
}
ellipsizeMode="tail"
style={getStyle()}
>
{children}
</RNText>
</TouchableOpacity>
) : (
<RNText
numberOfLines={
typeof truncate === "number" ? truncate : truncate ? 1 : undefined
}
ellipsizeMode="tail"
style={getStyle()}
>
{children}
</RNText>
)
);
};

View File

@@ -115,9 +115,15 @@ export default function ProfilSection() {
</BaseBox>
))}
</View>
<TextCustom
bold
align="right"
onPress={() => router.push(`/portofolio/${id}/list`)}
>
Lihat semua
</TextCustom>
</BaseBox>
</>
);
}