update empty

src/app/layout.tsx

@@ -14,8 +14,8 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Review Data",
+  description: "",
 };
 
 export default function RootLayout({

src/app/page.tsx

@@ -1,8 +1,18 @@
 import HomePagination from "@/components/home/home-pagination";
 import Item from "@/components/home/item";
 import SKUListSidebar from "@/components/home/sku-list-sidebar";
+import { Button } from "@/components/ui/button";
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty";
 import { Sku } from "@/entities/Sku";
 import axios from "@/lib/axios";
+import { Box } from "lucide-react";
 import { use } from "react";
 
 const getData = async (query: { page: number; search: string }) => {
@@ -30,21 +40,33 @@ export default function Home({
   return (
     <div className="grid grid-cols-12 min-h-[1000px] px-5 gap-4 py-2 pb-20">
       <div className="col-span-8 display flex flex-col gap-10">
-        {(data.data || []).map(
-          (
-            item: Pick<
-              Sku,
-              | "id"
-              | "normalized_title"
-              | "normalized_short_description"
-              | "sku"
-              | "normalized_html"
-              | "status"
-            >,
-            index: number
-          ) => {
-            return <Item key={item?.sku || index} data={item} />;
-          }
+        {data?.data?.length > 0 &&
+          (data.data || []).map(
+            (
+              item: Pick<
+                Sku,
+                | "id"
+                | "normalized_title"
+                | "normalized_short_description"
+                | "sku"
+                | "normalized_html"
+                | "status"
+              >,
+              index: number
+            ) => {
+              return <Item key={item?.sku || index} data={item} />;
+            }
+          )}
+
+        {data?.data?.length <= 0 && (
+          <Empty>
+            <EmptyHeader>
+              <EmptyMedia variant="icon">
+                <Box />
+              </EmptyMedia>
+              <EmptyTitle>No Products</EmptyTitle>
+            </EmptyHeader>
+          </Empty>
         )}
       </div>
       <div className="col-span-4 -my-2 border-l">

src/components/ui/empty.tsx

@@ -0,0 +1,104 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+function Empty({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty"
+      className={cn(
+        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-header"
+      className={cn(
+        "flex max-w-sm flex-col items-center gap-2 text-center",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const emptyMediaVariants = cva(
+  "flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      data-slot="empty-icon"
+      data-variant={variant}
+      className={cn(emptyMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-title"
+      className={cn("text-lg font-medium tracking-tight", className)}
+      {...props}
+    />
+  )
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <div
+      data-slot="empty-description"
+      className={cn(
+        "text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-content"
+      className={cn(
+        "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+}