From 56f4d86f4c5773f2b52511053a2ef79dbae84417 Mon Sep 17 00:00:00 2001
From: Leon Xu <dcwinfield362@gmail.com>
Date: Mon, 23 Jan 2023 16:24:39 -0800
Subject: [PATCH] doc: add useState hooks and section tags

---
 src/pages/Home.jsx | 39 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 38 insertions(+), 1 deletion(-)

diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 164a5a1..ff3ab95 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -2,7 +2,44 @@ import React, { useState, useEffect } from "react";
 import { Loader, Card, FormField } from "../components";
 
 const Home = () => {
-  return <div>Home</div>;
+  const [loading, setLoading] = useState(false);
+  const [allPosts, setAllPosts] = useState(null);
+  const [searchText, setSearchText] = useState("");
+
+  return (
+    <section className="max-w-7xl mx-auto">
+      <div>
+        <h1 className="font-extrabold text-[#222328] text-[32px]">
+          The Community Showcase
+        </h1>
+        <p className="mt-2 text-[#666e75] text-[16px] max-w[500px]">
+          Browse through a collection of imaginative and visually stunning
+          images generated by DALL-E AI
+        </p>
+      </div>
+
+      <div className="mt-16">
+        <FormField />
+      </div>
+
+      <div className="mt-10">
+        {loading ? (
+          <div className="flex justify-center items-center">
+            <Loader />
+          </div>
+        ) : (
+          <>
+            {searchText && (
+              <h2 className="font-medium text-[#666e75] text-xl mb-3">
+                Showing results for{" "}
+                <span className="text-[#222328]">{searchText}</span>
+              </h2>
+            )}
+          </>
+        )}
+      </div>
+    </section>
+  );
 };
 
 export default Home;