🎉 wip: add the discover functionality

ui/app/discover/page.tsx

@@ -1,5 +1,87 @@
+/* eslint-disable @next/next/no-img-element */
+'use client';
+import { useEffect, useState } from 'react';
+import { Eye, Share2, Clock, Feather } from 'lucide-react';
+import axios from 'axios';
+
+interface Discover {
+  id?: string;
+  title: string;
+  content: string;
+  url: string;
+}
+
 const Page = () => {
-  return <div>page</div>;
+  const [discover, setDiscover] = useState<Discover[] | null>(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await axios.get(
+          `${process.env.NEXT_PUBLIC_API_URL}/discover`,
+        );
+        setDiscover(response.data);
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  return (
+    <>
+      <div className="container">
+        <div className="row">
+          <div className="flex items-center">
+            <Feather />
+            <h1 className="text-3xl font-medium p-2">Discover</h1>
+          </div>
+          <hr className="border-t-2 border-[#2B2C2C] my-4 w-full" />
+        </div>
+
+        {discover &&
+          discover?.map((item, index) => (
+            <>
+              <div className="p-4 flex gap-4" key={index}>
+                <div>
+                  <img
+                    src={`https://s2.googleusercontent.com/s2/favicons?domain_url=${item.url}`}
+                    alt=""
+                    className="h-10 w-auto"
+                  />
+                </div>
+                <div>
+                  <div className="text-md font-semibold">{item.title}</div>
+                  <div className="text-[#8D9191]">{item.content}</div>
+                  <div className="flex flex-row gap-6 text-[#8D9191]">
+                    <div className="flex gap-1 justify-center items-center">
+                      <div>
+                        <Eye size={16} />
+                      </div>
+                      <div>15744</div>
+                    </div>
+                    <div className="flex gap-1 justify-center items-center">
+                      <div>
+                        <Share2 size={16} />
+                      </div>
+                      <div>154</div>
+                    </div>
+                    <div className="flex gap-1 justify-center items-center">
+                      <div>
+                        <Clock size={16} />
+                      </div>
+                      <div>15</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <hr className="border-t-1 border-[#2B2C2C] my-1 w-full" />
+            </>
+          ))}
+      </div>
+    </>
+  );
 };
 
 export default Page;