add data from fire store

Author: AliNikseresht

src/layout/Layout.tsx

@@ -5,10 +5,10 @@ import Footer from "./Footer";
 
 const Layout = () => {
   return (
-    <div className="flex flex-col md:flex-row min-h-screen justify-between p-4 md:p-0">
+    <div className="flex h-screen">
       <Sidebar />
       <div className="flex flex-col w-full">
-        <div className="flex flex-col flex-1 w-full mx-auto">
+        <div className="flex-1 h-full overflow-auto">
           <Outlet />
         </div>
         <Footer />

src/layout/Sidebar.tsx

@@ -93,7 +93,7 @@ const Sidebar = () => {
             className={`block w-full py-2 px-4 text-center mb-2 rounded-md ${
               item.title === "Register"
                 ? "c-black bc-green"
-                : "c-green border border-green"
+                : "c-green border border-green bc-black"
             }`}
           >
             {item.title}

src/pages/Home/Home.tsx

@@ -12,8 +12,11 @@ interface Blog {
 }
 
 const Home = () => {
+  //state
   const [blogs, setBlogs] = useState<Blog[]>([]);
+  const [loading, setLoading] = useState(true);
 
+  //service
   useEffect(() => {
     const fetchBlogs = async () => {
       try {
@@ -26,31 +29,64 @@ const Home = () => {
         console.log(blogsData);
       } catch (error) {
         console.error("Error fetching blogs:", error);
+      } finally {
+        setLoading(false);
       }
     };
 
     fetchBlogs();
   }, []);
 
+  if (loading) {
+    return (
+      <div className="flex justify-center items-center h-screen">
+        <div className="loading loading-spinner"></div>
+      </div>
+    );
+  }
+
   return (
-    <div>
-      <h1>Blogs</h1>
-      {blogs.map((blog) => (
-        <div key={blog.id}>
-          <h2>{blog.title}</h2>
-          <p>{blog.content}</p>
-          <p>
-            <strong>Author:</strong> {blog.author}
-          </p>
-          <p>
-            <strong>Tags:</strong> {blog.tags.join(", ")}
-          </p>
-          <p>
-            <strong>Created At:</strong>{" "}
-            {new Date(blog.createdAt.seconds * 1000).toLocaleString()}
-          </p>
-        </div>
-      ))}
+    <div className="flex flex-col p-[3em] gap-[2em]">
+      <div className="flex flex-col items-center w-10">
+        <div className="w-4 h-0.5 bc-green"></div>
+        <h1>Latest</h1>
+      </div>
+      {blogs.length === 0 ? (
+        <p className="text-center text-lg font-medium">There is no blog.</p>
+      ) : (
+        blogs.map((blog) => (
+          <div key={blog.id} className="flex items-start h-[13rem] mb-4">
+            <div className="flex flex-col items-start justify-between relative h-44">
+              <p className="text-left text-3xl uppercase font-semibold w-20">
+                {new Date(blog.createdAt.seconds * 1000).toLocaleDateString(
+                  "en-GB",
+                  {
+                    day: "numeric",
+                    month: "short",
+                  }
+                )}
+              </p>
+              <p className="-rotate-90 absolute -left-6 bottom-5 text-xs w-36 text-center">
+                {blog.author}
+              </p>
+            </div>
+            <div className="flex flex-col justify-between h-full">
+              <h2 className="c-green text-3xl font-semibold">{blog.title}</h2>
+              <p className="text-sm my-3">{blog.content}</p>
+              <div>
+                {blog.tags.map((tagItem, index) => (
+                  <span
+                    key={index}
+                    className="border border-green mx-1 px-2 py-1 text-xs rounded-full c-green"
+                  >
+                    #{tagItem}
+                  </span>
+                ))}
+              </div>
+            </div>
+          </div>
+        ))
+      )}
     </div>
   );
 };