fix
deskripsi: - fix component : Menu drawer - fix feature : list menui drawer pada portofolio & profile # No Issue
This commit is contained in:
@@ -21,7 +21,7 @@ export default function MapsCustomPin() {
|
|||||||
<ButtonCustom
|
<ButtonCustom
|
||||||
onPress={() => {
|
onPress={() => {
|
||||||
console.log(`Simpan maps ${id}`);
|
console.log(`Simpan maps ${id}`);
|
||||||
router.replace(`/portofolio/${id}`);
|
router.back();
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Simpan
|
Simpan
|
||||||
|
|||||||
@@ -19,7 +19,7 @@ export default function MapsEdit() {
|
|||||||
<ButtonCustom
|
<ButtonCustom
|
||||||
onPress={() => {
|
onPress={() => {
|
||||||
console.log(`Simpan maps ${id}`);
|
console.log(`Simpan maps ${id}`);
|
||||||
router.replace(`/portofolio/${id}`);
|
router.back()
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Simpan
|
Simpan
|
||||||
|
|||||||
@@ -1,27 +1,37 @@
|
|||||||
import { AccentColor, MainColor } from "@/constants/color-palet";
|
import { AccentColor, MainColor } from "@/constants/color-palet";
|
||||||
import { ICON_SIZE_MEDIUM, TEXT_SIZE_SMALL } from "@/constants/constans-value";
|
import { TEXT_SIZE_SMALL } from "@/constants/constans-value";
|
||||||
import { Ionicons } from "@expo/vector-icons";
|
|
||||||
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
|
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
|
||||||
|
import { IMenuDrawerItem } from "../_Interface/types";
|
||||||
|
|
||||||
const MenuDrawerDynamicGrid = ({ data, columns = 3, onPressItem }: any) => {
|
const MenuDrawerDynamicGrid = ({ data, columns = 3, onPressItem }: any) => {
|
||||||
const numColumns = columns;
|
const numColumns = columns;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
{data.map((item: any, index: any) => (
|
{data.map((item: IMenuDrawerItem, index: any) => (
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
key={index}
|
key={index}
|
||||||
style={[styles.itemContainer, { flexBasis: `${100 / numColumns}%` }]}
|
style={[styles.itemContainer, { flexBasis: `${100 / numColumns}%` }]}
|
||||||
onPress={() => onPressItem?.(item)}
|
onPress={() => onPressItem?.(item)}
|
||||||
>
|
>
|
||||||
<View style={styles.iconContainer}>
|
<View
|
||||||
<Ionicons
|
style={[
|
||||||
|
styles.iconContainer,
|
||||||
|
{ backgroundColor: item.color || AccentColor.blue },
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
{item.icon}
|
||||||
|
{/* <Ionicons
|
||||||
name={item.icon}
|
name={item.icon}
|
||||||
size={ICON_SIZE_MEDIUM}
|
size={ICON_SIZE_MEDIUM}
|
||||||
color={item.color || MainColor.white_gray}
|
color={item.color || MainColor.white_gray}
|
||||||
/>
|
/> */}
|
||||||
</View>
|
</View>
|
||||||
<Text style={styles.label}>{item.label}</Text>
|
<Text
|
||||||
|
style={[styles.label, { color: item.color || AccentColor.white }]}
|
||||||
|
>
|
||||||
|
{item.label}
|
||||||
|
</Text>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
))}
|
))}
|
||||||
</View>
|
</View>
|
||||||
|
|||||||
@@ -20,7 +20,7 @@ interface ITabs {
|
|||||||
}
|
}
|
||||||
|
|
||||||
interface IMenuDrawerItem {
|
interface IMenuDrawerItem {
|
||||||
icon: string;
|
icon: React.ReactNode;
|
||||||
label: string;
|
label: string;
|
||||||
path?: string;
|
path?: string;
|
||||||
color?: string;
|
color?: string;
|
||||||
|
|||||||
@@ -1,4 +1,7 @@
|
|||||||
import { IMenuDrawerItem } from "@/components/_Interface/types";
|
import { IMenuDrawerItem } from "@/components/_Interface/types";
|
||||||
|
import { AccentColor } from "@/constants/color-palet";
|
||||||
|
import { ICON_SIZE_MEDIUM } from "@/constants/constans-value";
|
||||||
|
import { Ionicons } from "@expo/vector-icons";
|
||||||
|
|
||||||
export const drawerItemsPortofolio = ({
|
export const drawerItemsPortofolio = ({
|
||||||
id,
|
id,
|
||||||
@@ -6,27 +9,27 @@ export const drawerItemsPortofolio = ({
|
|||||||
id: string;
|
id: string;
|
||||||
}): IMenuDrawerItem[] => [
|
}): IMenuDrawerItem[] => [
|
||||||
{
|
{
|
||||||
icon: "create",
|
icon: <Ionicons name="create" size={ICON_SIZE_MEDIUM} color={AccentColor.white} />,
|
||||||
label: "Edit portofolio",
|
label: "Edit portofolio",
|
||||||
path: `/(application)/portofolio/${id}/edit`,
|
path: `/(application)/portofolio/${id}/edit`,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "camera",
|
icon: <Ionicons name="camera" size={ICON_SIZE_MEDIUM} color={AccentColor.white} />,
|
||||||
label: "Edit logo ",
|
label: "Edit logo ",
|
||||||
path: `/(application)/portofolio/${id}/edit-logo`,
|
path: `/(application)/portofolio/${id}/edit-logo`,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "image",
|
icon: <Ionicons name="image" size={ICON_SIZE_MEDIUM} color={AccentColor.white} />,
|
||||||
label: "Edit social media ",
|
label: "Edit social media ",
|
||||||
path: `/(application)/portofolio/${id}/edit-social-media`,
|
path: `/(application)/portofolio/${id}/edit-social-media`,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "add-circle",
|
icon: <Ionicons name="add-circle" size={ICON_SIZE_MEDIUM} color={AccentColor.white} />,
|
||||||
label: "Edit Map",
|
label: "Edit Map",
|
||||||
path: `/(application)/maps/${id}/edit`,
|
path: `/(application)/maps/${id}/edit`,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "create-outline",
|
icon: <Ionicons name="create-outline" size={ICON_SIZE_MEDIUM} color={AccentColor.white} />,
|
||||||
label: "Custom Pin Map",
|
label: "Custom Pin Map",
|
||||||
path: `/(application)/maps/${id}/custom-pin`,
|
path: `/(application)/maps/${id}/custom-pin`,
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,23 +1,54 @@
|
|||||||
import { IMenuDrawerItem } from "@/components/_Interface/types";
|
import { IMenuDrawerItem } from "@/components/_Interface/types";
|
||||||
|
import { AccentColor, MainColor } from "@/constants/color-palet";
|
||||||
|
import { ICON_SIZE_MEDIUM } from "@/constants/constans-value";
|
||||||
|
import { Ionicons } from "@expo/vector-icons";
|
||||||
|
|
||||||
export const drawerItemsProfile = ({ id }: { id: string }): IMenuDrawerItem[] => [
|
export const drawerItemsProfile = ({
|
||||||
|
id,
|
||||||
|
}: {
|
||||||
|
id: string;
|
||||||
|
}): IMenuDrawerItem[] => [
|
||||||
{
|
{
|
||||||
icon: "create",
|
icon: (
|
||||||
|
<Ionicons
|
||||||
|
name="create"
|
||||||
|
size={ICON_SIZE_MEDIUM}
|
||||||
|
color={AccentColor.white}
|
||||||
|
/>
|
||||||
|
),
|
||||||
label: "Edit profile",
|
label: "Edit profile",
|
||||||
path: `/(application)/profile/${id}/edit`,
|
path: `/(application)/profile/${id}/edit`,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "camera",
|
icon: (
|
||||||
|
<Ionicons
|
||||||
|
name="camera"
|
||||||
|
size={ICON_SIZE_MEDIUM}
|
||||||
|
color={AccentColor.white}
|
||||||
|
/>
|
||||||
|
),
|
||||||
label: "Ubah foto profile",
|
label: "Ubah foto profile",
|
||||||
path: `/(application)/profile/${id}/update-photo`,
|
path: `/(application)/profile/${id}/update-photo`,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "image",
|
icon: (
|
||||||
|
<Ionicons
|
||||||
|
name="image"
|
||||||
|
size={ICON_SIZE_MEDIUM}
|
||||||
|
color={AccentColor.white}
|
||||||
|
/>
|
||||||
|
),
|
||||||
label: "Ubah latar belakang",
|
label: "Ubah latar belakang",
|
||||||
path: `/(application)/profile/${id}/update-background`,
|
path: `/(application)/profile/${id}/update-background`,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "add-circle",
|
icon: (
|
||||||
|
<Ionicons
|
||||||
|
name="add-circle"
|
||||||
|
size={ICON_SIZE_MEDIUM}
|
||||||
|
color={AccentColor.white}
|
||||||
|
/>
|
||||||
|
),
|
||||||
label: "Tambah portofolio",
|
label: "Tambah portofolio",
|
||||||
path: `/(application)/portofolio/${id}/create`,
|
path: `/(application)/portofolio/${id}/create`,
|
||||||
},
|
},
|
||||||
@@ -26,9 +57,26 @@ export const drawerItemsProfile = ({ id }: { id: string }): IMenuDrawerItem[] =>
|
|||||||
// label: "Dashboard Admin",
|
// label: "Dashboard Admin",
|
||||||
// path: `/(application)/profile/dashboard-admin`,
|
// path: `/(application)/profile/dashboard-admin`,
|
||||||
// },
|
// },
|
||||||
{ icon: "log-out", label: "Keluar", color: "red", path: "" },
|
|
||||||
{
|
{
|
||||||
icon: "create-outline",
|
icon: (
|
||||||
|
<Ionicons
|
||||||
|
name="log-out"
|
||||||
|
size={ICON_SIZE_MEDIUM}
|
||||||
|
color={AccentColor.white}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
label: "Keluar",
|
||||||
|
color: MainColor.red,
|
||||||
|
path: "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: (
|
||||||
|
<Ionicons
|
||||||
|
name="create-outline"
|
||||||
|
size={ICON_SIZE_MEDIUM}
|
||||||
|
color={AccentColor.white}
|
||||||
|
/>
|
||||||
|
),
|
||||||
label: "Create profile",
|
label: "Create profile",
|
||||||
path: `/(application)/profile/${id}/create`,
|
path: `/(application)/profile/${id}/create`,
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user