Initial commit: Plane

Synced from upstream: 8853637e981ed7d8a6cff32bd98e7afe20f54362

apps/web/core/components/analytics/empty-state.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import Image from "next/image";
+import { useTheme } from "next-themes";
+// plane package imports
+import { cn } from "@plane/utils";
+// assets
+import darkBackgroundAsset from "@/app/assets/empty-state/analytics/empty-grid-background-dark.webp?url";
+import lightBackgroundAsset from "@/app/assets/empty-state/analytics/empty-grid-background-light.webp?url";
+
+type Props = {
+  title: string;
+  description?: string;
+  assetPath?: string;
+  className?: string;
+};
+
+const AnalyticsEmptyState = ({ title, description, assetPath, className }: Props) => {
+  // theme hook
+  const { resolvedTheme } = useTheme();
+  const backgroundReolvedPath = resolvedTheme === "light" ? lightBackgroundAsset : darkBackgroundAsset;
+
+  return (
+    <div
+      className={cn(
+        "flex h-full w-full items-center justify-center overflow-y-auto rounded-lg border border-custom-border-100 px-5 py-10 md:px-20",
+        className
+      )}
+    >
+      <div className={cn("flex flex-col items-center")}>
+        {assetPath && (
+          <div className="relative flex max-h-[200px] max-w-[200px] items-center justify-center">
+            <Image src={assetPath} alt={title} width={100} height={100} layout="fixed" className="z-10 h-2/3 w-2/3" />
+            <div className="absolute inset-0">
+              <Image
+                src={backgroundReolvedPath}
+                alt={title}
+                width={100}
+                height={100}
+                layout="fixed"
+                className="h-full w-full"
+              />
+            </div>
+          </div>
+        )}
+        <div className="flex flex-shrink flex-col items-center gap-1.5 text-center">
+          <h3 className={cn("text-xl font-semibold")}>{title}</h3>
+          {description && <p className="text-sm text-custom-text-300 max-w-[350px]">{description}</p>}
+        </div>
+      </div>
+    </div>
+  );
+};
+export default AnalyticsEmptyState;