feature
deskripsi: - new page daftar portofolio
This commit is contained in:
47
app/(application)/(user)/portofolio/[id]/list.tsx
Normal file
47
app/(application)/(user)/portofolio/[id]/list.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -115,9 +115,15 @@ export default function ProfilSection() {
|
||||
</BaseBox>
|
||||
))}
|
||||
</View>
|
||||
|
||||
<TextCustom
|
||||
bold
|
||||
align="right"
|
||||
onPress={() => router.push(`/portofolio/${id}/list`)}
|
||||
>
|
||||
Lihat semua
|
||||
</TextCustom>
|
||||
</BaseBox>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user