Admin App Information
Add: - app-information/information-bank/ Component Fix: - constans-value: Icon size re name ### No Issue
This commit is contained in:
59
components/ActionIcon/ActionIcon.tsx
Normal file
59
components/ActionIcon/ActionIcon.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
import { MainColor } from "@/constants/color-palet";
|
||||
import { Href, router } from "expo-router";
|
||||
import { DimensionValue, TouchableOpacity } from "react-native";
|
||||
|
||||
type SizeType = "xs" | "sm" | "md" | "lg" | "xl" | number | string | undefined;
|
||||
|
||||
export default function ActionIcon({
|
||||
href,
|
||||
onPress,
|
||||
icon,
|
||||
size = "md",
|
||||
}: {
|
||||
href?: Href;
|
||||
onPress?: () => void;
|
||||
icon: React.ReactNode;
|
||||
size?: SizeType;
|
||||
}) {
|
||||
const sizeMap = {
|
||||
xs: 22,
|
||||
sm: 26,
|
||||
md: 30,
|
||||
lg: 34,
|
||||
xl: 38,
|
||||
};
|
||||
|
||||
const getSize = (size: SizeType): DimensionValue => {
|
||||
if (!size) return sizeMap.md; // Default to 'md' if size is undefined
|
||||
if (typeof size === 'string' && size in sizeMap) {
|
||||
return sizeMap[size as keyof typeof sizeMap];
|
||||
}
|
||||
return size as DimensionValue;
|
||||
};
|
||||
|
||||
const iconSize = getSize(size);
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
activeOpacity={0.7}
|
||||
style={{
|
||||
backgroundColor: MainColor.yellow,
|
||||
padding: 5,
|
||||
borderRadius: 50,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: iconSize,
|
||||
height: iconSize,
|
||||
}}
|
||||
onPress={() => {
|
||||
if (href) {
|
||||
router.push(href);
|
||||
} else {
|
||||
onPress?.();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{icon}
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}
|
||||
13
components/_ShareComponent/Admin/BackButton.tsx
Normal file
13
components/_ShareComponent/Admin/BackButton.tsx
Normal file
@@ -0,0 +1,13 @@
|
||||
import ActionIcon from "@/components/ActionIcon/ActionIcon";
|
||||
import { MainColor } from "@/constants/color-palet";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { router } from "expo-router";
|
||||
|
||||
export default function AdminBackButton() {
|
||||
return (
|
||||
<ActionIcon
|
||||
icon={<Ionicons name="arrow-back" size={16} color={MainColor.darkblue} />}
|
||||
onPress={() => router.back()}
|
||||
/>
|
||||
);
|
||||
}
|
||||
31
components/_ShareComponent/Admin/BackButtonAntTitle.tsx
Normal file
31
components/_ShareComponent/Admin/BackButtonAntTitle.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import Grid from "@/components/Grid/GridCustom";
|
||||
import TextCustom from "@/components/Text/TextCustom";
|
||||
import { View } from "react-native";
|
||||
import AdminBackButton from "./BackButton";
|
||||
|
||||
export default function AdminBackButtonAntTitle({
|
||||
title,
|
||||
}: {
|
||||
title: string;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<Grid>
|
||||
<Grid.Col span={2}>
|
||||
<AdminBackButton />
|
||||
</Grid.Col>
|
||||
<Grid.Col
|
||||
span={8}
|
||||
style={{ alignItems: "center", justifyContent: "center" }}
|
||||
>
|
||||
<TextCustom bold size={"large"} align="center">
|
||||
{title}
|
||||
</TextCustom>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={2}>
|
||||
<View />
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,6 +1,8 @@
|
||||
// Alert
|
||||
import AlertCustom from "./Alert/AlertCustom";
|
||||
import AlertDefaultSystem from "./Alert/AlertDefaultSystem";
|
||||
// ActionIcon
|
||||
import ActionIcon from "./ActionIcon/ActionIcon";
|
||||
// Button
|
||||
import LeftButtonCustom from "./Button/BackButton";
|
||||
import ButtonCenteredOnly from "./Button/ButtonCenteredOnly";
|
||||
@@ -60,6 +62,9 @@ import GridComponentView from "./_ShareComponent/GridSectionView";
|
||||
import ProgressCustom from "./Progress/ProgressCustom";
|
||||
|
||||
export {
|
||||
// ActionIcon
|
||||
ActionIcon,
|
||||
// Alert
|
||||
AlertCustom,
|
||||
AlertDefaultSystem,
|
||||
// Image
|
||||
|
||||
Reference in New Issue
Block a user