43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
import Text from '@/components/Text';
|
|
import Styles from '@/constants/Styles';
|
|
import { useTheme } from '@/providers/ThemeProvider';
|
|
import { MaterialCommunityIcons } from "@expo/vector-icons";
|
|
import React from 'react';
|
|
import { View } from 'react-native';
|
|
|
|
interface ErrorViewProps {
|
|
title?: string;
|
|
message?: string;
|
|
icon?: keyof typeof MaterialCommunityIcons.glyphMap;
|
|
}
|
|
|
|
/**
|
|
* ErrorView component to display error or empty states.
|
|
* Used when data is not found, deleted, or an error occurs during fetching.
|
|
*/
|
|
export default function ErrorView({
|
|
title = "Terjadi Kesalahan",
|
|
message = "Data tidak ditemukan atau sudah dihapus.",
|
|
icon = "alert-circle-outline"
|
|
}: ErrorViewProps) {
|
|
const { colors } = useTheme();
|
|
|
|
return (
|
|
<View style={[Styles.flex1, Styles.contentItemCenter, Styles.ph20]}>
|
|
<View style={[Styles.mb10]}>
|
|
<MaterialCommunityIcons
|
|
name={icon}
|
|
size={40}
|
|
color={colors.dimmed}
|
|
/>
|
|
</View>
|
|
<Text style={[Styles.textDefaultSemiBold, { color: colors.text, textAlign: 'center' }]}>
|
|
{title}
|
|
</Text>
|
|
<Text style={[Styles.textMediumNormal, { color: colors.dimmed, textAlign: 'center', marginTop: 4 }]}>
|
|
{message}
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|