feat(components, hooks): add empty-list component for empty state handling and implement animation on view hook

Author: tyronejosee

src/app/(public)/explore/page.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 
 import { getResources } from "@/actions/resources";
 import { ResourceList } from "@/components/resources";
+import { EmptyList } from "@/components/layout";
 import { Heading } from "@/components/ui";
 import { PROJECT_NAME } from "@/config/constants";
 
@@ -12,12 +13,18 @@ export const metadata: Metadata = {
 
 export default async function ExplorePage() {
   const resources = await getResources();
-  if (resources.length === 0) return <div>No resources found</div>;
+
+  const renderResources = () => {
+    if (resources.length === 0) {
+      return <EmptyList type="resources" />;
+    }
+    return <ResourceList resources={resources} />;
+  };
 
   return (
-    <main className="max-w-screen-xl mx-auto p-4">
+    <main className="max-w-screen-xl mx-auto p-4 flex flex-col gap-4">
       <Heading title="Explore" subtitle="Discover new resources" />
-      <ResourceList resources={resources} />
+      {renderResources()}
     </main>
   );
 }

src/app/(public)/resources/page.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 
 import { getResources } from "@/actions/resources";
 import { ResourceList } from "@/components/resources";
+import { EmptyList } from "@/components/layout";
 import { Heading } from "@/components/ui";
 import { PROJECT_NAME } from "@/config/constants";
 
@@ -12,12 +13,18 @@ export const metadata: Metadata = {
 
 export default async function ResourcesPage() {
   const resources = await getResources();
-  if (resources.length === 0) return <div>No resources found</div>;
+
+  const renderResources = () => {
+    if (resources.length === 0) {
+      return <EmptyList type="resources" />;
+    }
+    return <ResourceList resources={resources} />;
+  };
 
   return (
-    <main className="max-w-screen-xl mx-auto p-4">
+    <main className="max-w-screen-xl mx-auto p-4 flex flex-col gap-4">
       <Heading title="Resources" subtitle="Explore all the resources" />
-      <ResourceList resources={resources} />
+      {renderResources()}
     </main>
   );
 }

src/components/layout/empty-list.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { FolderOpen } from "lucide-react";
+
+type Props = {
+  type: string;
+};
+
+export default function EmptyList({ type }: Props) {
+  return (
+    <section className="relative flex flex-col items-center justify-center gap-4 text-center border-2 border-neutral-200 dark:border-neutral-800 p-10 rounded-xl h-[calc(100vh-200px)]">
+      <motion.header
+        className="flex flex-col gap-4 justify-center items-center z-10"
+        initial={{ opacity: 0, scale: 0.8 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 0.3, ease: "easeOut" }}
+      >
+        <FolderOpen
+          size={40}
+          className="text-neutral-950 dark:text-white animate-pulse"
+        />
+        <h2 className="text-2xl font-bold z-10">No {type} found.</h2>
+      </motion.header>
+      <motion.div
+        className="text-sm text-center"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3, ease: "easeOut" }}
+      >
+        <p className="text-sm text-neutral-500">
+          Try searching for a different keyword or category.
+        </p>
+      </motion.div>
+    </section>
+  );
+}

src/components/layout/index.ts

@@ -1,3 +1,4 @@
+export { default as EmptyList } from "./empty-list";
 export { default as Footer } from "./footer";
 export { default as Navbar } from "./navbar";
 export { default as Sidebar } from "./sidebar";

src/hooks/use-animate-on-view.ts

@@ -0,0 +1,28 @@
+"use client";
+
+import { useEffect } from "react";
+import { useInView } from "react-intersection-observer";
+import { useAnimation } from "framer-motion";
+
+export const useAnimateOnView = (threshold = 0.1, triggerOnce = false) => {
+  const controls = useAnimation();
+  const { ref, inView } = useInView({
+    triggerOnce,
+    threshold,
+  });
+
+  useEffect(() => {
+    if (inView) {
+      controls.start("visible");
+    } else {
+      controls.start("hidden");
+    }
+  }, [inView, controls]);
+
+  const itemVariants = {
+    hidden: { opacity: 0, x: 0 },
+    visible: { opacity: 1, x: 0 },
+  };
+
+  return { ref, controls, itemVariants };
+};