EmptyState.tsx

import React from "react";
import { StyleSheet, SafeAreaView, View, Image, Text, TouchableOpacity } from "react-native";
import { colors } from "../global/styles";
import { Icon } from "react-native-elements";

type Props = {
  subtitle?: string;
  title: string;
  description: string;
  image?: string;
  buttonText?: string;
  onPress?: () => void;
  secondaryButtonText?: string;
  secondaryOnPress?: () => void;
};

export function EmptyState({
  subtitle = "Almost Done!",
  title,
  description,
  image,
  buttonText = "",
  onPress,
  secondaryButtonText = "",
  secondaryOnPress = null,
}: Props) {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={styles.empty}>
        <Image alt="" source={{ uri: image || "https://storage.yarbah.co.uk/yarbah-empty.png" }} style={styles.emptyImg} />

        <Text style={styles.emptyBadge}>{subtitle}</Text>

        <Text style={styles.emptyTitle}>{title}</Text>

        <Text style={styles.emptyDescription}>{description}</Text>

        {onPress && (
          <View style={styles.emptyFooter}>
            <TouchableOpacity onPress={onPress}>
              <View style={styles.btn}>
                <Text style={styles.btnText}>{buttonText}</Text>
              </View>
            </TouchableOpacity>

            {secondaryOnPress && (
              <TouchableOpacity onPress={secondaryOnPress}>
                <View style={styles.btnSecondary}>
                  <Text style={styles.btnSecondaryText}>{secondaryButtonText}</Text>
                </View>
              </TouchableOpacity>
            )}
          </View>
        )}
      </View>
    </SafeAreaView>
  );
}

export const EmptyStateSmall = ({ message }) => {
  return (
    <View style={styles.container}>
      <Icon name="info" type="feather" size={24} color="gray" />
      <Text style={styles.message}>{message}</Text>
    </View>
  );
};

export default EmptyState;

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    marginHorizontal: 10,
  },
  message: {
    fontSize: 16,
    marginLeft: 10,
    color: colors.grey2,
  },
  empty: {
    flexGrow: 1,
    flexShrink: 1,
    flexBasis: 0,
    alignItems: "center",
    justifyContent: "center",
    paddingVertical: 48,
    paddingHorizontal: 24,
  },
  emptyImg: {
    width: 300,
    height: 300,
    marginBottom: 24,
  },
  emptyBadge: {
    fontSize: 14,
    fontWeight: "700",
    color: colors.primary,
    textTransform: "uppercase",
    letterSpacing: 1.2,
    marginBottom: 8,
  },
  emptyTitle: {
    fontSize: 27,
    fontWeight: "700",
    color: "#1d1d1d",
    marginBottom: 14,
  },
  emptyDescription: {
    marginBottom: 24,
    paddingHorizontal: 48,
    fontSize: 15,
    lineHeight: 22,
    fontWeight: "500",
    color: colors.grey2,
    textAlign: "center",
  },
  emptyFooter: {
    marginTop: 20,
    alignSelf: "stretch",
  },
  /** Button */
  btn: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    borderRadius: 8,
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderWidth: 1,
    backgroundColor: "#000",
    borderColor: "#000",
  },
  btnText: {
    fontSize: 18,
    lineHeight: 26,
    fontWeight: "600",
    color: "#fff",
  },
  btnSecondary: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    borderRadius: 8,
    paddingVertical: 8,
    paddingHorizontal: 16,
    borderWidth: 1,
    backgroundColor: "transparent",
    borderColor: "transparent",
    marginTop: 8,
  },
  btnSecondaryText: {
    fontSize: 17,
    lineHeight: 24,
    fontWeight: "600",
    color: "#000",
  },
});