remove all filters button working

app/components/EmptyState.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import { useRouter } from "next/navigation";
+
+import Heading from "./Heading";
+import Button from "./Button";
+
+interface EmptyState {
+    title?: string;
+    subtitle?: string;
+    showReset?: boolean;
+}
+
+const EmptyState: React.FC<EmptyState> = ({
+    title= "No exact matches",
+    subtitle = "Try changing or removing some of your filters",
+    showReset
+}) => {
+    const router = useRouter()
+
+    return <div className="h-[60vh] flex flex-col gap-2 justify-center items-center"><Heading center title={title} subtitle={subtitle} />
+        <div className="w-48 mt-4">
+            {showReset && (
+                <Button outline label="Remove all filters" onClick={() => router.push('/')} />
+            )}
+        </div>
+    </div>;
+}
+
+export default EmptyState;

app/layout.tsx

@@ -34,7 +34,9 @@ export default async function RootLayout({
         <LoginModal />
         <RegisterModal />
         <Navbar currentUser={currentUser} />
-        {children}
+        <div className='pb-20 pt-28'>
+          {children}
+        </div>
       </body>
     </html>
   );

app/page.tsx

@@ -1,3 +1,20 @@
+import Container from "./components/Container";
+import EmptyState from "./components/EmptyState";
+
 export default function Home() {
-  return <div className="text-rose-500 text-2xl">Hello Airbnb!</div>;
+  const isEmpty = true;
+
+  if (isEmpty) {
+    return <EmptyState showReset />
+  }
+
+  return (
+    <Container>
+      <div className="pt-24 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-8">
+        <div>
+          My future listings
+        </div>
+      </div>
+    </Container>
+  )
 }