Add empty state component

2026-07-05 17:30:48 +08:00 · 2023-01-11 23:35:28 +03:00
parent 9421488619
commit 9a00e938bd
1 changed files with 32 additions and 0 deletions
@@ -0,0 +1,32 @@
+import { Center, Text, useColorMode, useColorModeValue } from "@chakra-ui/react";
+import { FiFileText } from "react-icons/fi";
+import { IconType } from "react-icons/lib";
+
+type EmptyStateProps = {
+  text: string;
+  icon: IconType;
+};
+
+export const EmptyState = (props: EmptyStateProps) => {
+  const { colorMode } = useColorMode();
+  const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-900" : "bg-slate-900 text-white";
+
+  const widgetClasses = useColorModeValue("border-gray-700 text-gray-700", "border-gray-300 text-gray-300");
+
+  return (
+    <div className={`p-12 ${mainBgClasses}`}>
+      <Center>
+        <div className={`block border-2 border-dotted rounded-lg p-24 text-center ${widgetClasses}`}>
+          <props.icon className="mx-auto h-16 w-16" />
+          <Text fontFamily="inter" fontSize="2xl">
+            {props.text}
+          </Text>
+        </div>
+      </Center>
+    </div>
+  );
+};
+
+export const TaskEmptyState = () => {
+  return <EmptyState text="No tasks found!" icon={FiFileText} />;
+};