doc: add useState hooks and section tags

2023-01-23 16:24:39 -08:00
parent 1a7d81e8b5
commit 56f4d86f4c
1 changed files with 38 additions and 1 deletions
@@ -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;