reza added bugs

src/router.js

@@ -27,6 +27,7 @@ import Faq from "./views/Faq";
 import Contact from "./views/Contact";
 import Dashboard from "./views/Dashboard";
 import FooterDesign1 from "./components/Footer";
+import Bugs from './views/BugsAndProblems';
 // import VideoTube from "./views/Home/VideoTube";
 
 function Router({
@@ -351,6 +352,14 @@ function Router({
                 />
               }
             />
+            <Route
+              path="/bugs"
+              exact
+              element={
+                <Bugs
+                />
+              }
+            />
             <Route
               path="*"
               exact

src/views/BugsAndProblems/data.js

@@ -0,0 +1,166 @@
+const list = [
+  {
+    title: "r",
+    description: "r",
+    status: "r",
+    developer: "r",
+  },
+  {
+    title: "",
+    description: "",
+    status: null,
+    developer: "",
+  },
+  {
+    title: "",
+    description: "",
+    status: null,
+    developer: "",
+  },
+  {
+    title: "",
+    description: "",
+    status: null,
+    developer: "",
+  },
+  {
+    title: "",
+    description: "",
+    status: null,
+    developer: "",
+  },
+  {
+    title: "",
+    description: "",
+    status: null,
+    developer: "",
+  },
+  {
+    title: "",
+    description: "",
+    status: null,
+    developer: "",
+  },
+  {
+    title: "",
+    description: "",
+    status: null,
+    developer: "",
+  },
+  {
+    title: "",
+    description: "",
+    status: null,
+    developer: "",
+  },
+  {
+    title: "",
+    description: "",
+    status: null,
+    developer: "",
+  },
+  {
+    title: "",
+    description: "",
+    status: null,
+    developer: "",
+  },
+  {
+    title: "",
+    description: "",
+    status: null,
+    developer: "",
+  },
+  {
+    title: "",
+    description: "",
+    status: null,
+    developer: "",
+  },
+  {
+    title: "",
+    description: "",
+    status: null,
+    developer: "",
+  },
+  {
+    title: "",
+    description: "",
+    status: null,
+    developer: "",
+  },
+  {
+    title: "",
+    description: "",
+    status: null,
+    developer: "",
+  },
+  {
+    title: "",
+    description: "",
+    status: null,
+    developer: "",
+  },
+  {
+    title: "",
+    description: "",
+    status: null,
+    developer: "",
+  },
+  {
+    title: "",
+    description: "",
+    status: null,
+    developer: "",
+  },
+  {
+    title: "",
+    description: "",
+    status: null,
+    developer: "",
+  },
+  {
+    title: "",
+    description: "",
+    status: null,
+    developer: "",
+  },
+  {
+    title: "",
+    description: "",
+    status: null,
+    developer: "",
+  },
+  {
+    title: "",
+    description: "",
+    status: null,
+    developer: "",
+  },
+  {
+    title: "",
+    description: "",
+    status: null,
+    developer: "",
+  },
+  {
+    title: "",
+    description: "",
+    status: null,
+    developer: "",
+  },
+  {
+    title: "",
+    description: "",
+    status: null,
+    developer: "",
+  },
+  {
+    title: "",
+    description: "",
+    status: null,
+    developer: "",
+  },
+];
+
+export default list;

src/views/BugsAndProblems/index.js

@@ -0,0 +1,67 @@
+import React from "react";
+import list from "./data";
+
+function Bugs({}) {
+  return (
+    <ul className="flex flex-col w-4/5 gap-4 mx-auto h-screen">
+      <div className="w-full flex justify-center mx-auto h-full">
+        <div className="flex flex-col w-full h-full">
+          <div className="w-full h-full">
+            <div className="w-full  h-full">
+              <table className="w-full h-full bg-green-300">
+                <thead className="bg-gray-500">
+                  <tr>
+                    <th className="px-6 py-2 text-tiny text-white">Title</th>
+                    <th className="px-6 py-2 text-tiny text-white">
+                      Description
+                    </th>
+                    <th className="px-6 py-2 text-tiny text-white">Status</th>
+                    <th className="px-6 py-2 text-tiny text-white">
+                      Developer
+                    </th>
+                  </tr>
+                </thead>
+                <tbody
+                  className="overflow-y-scroll"
+                  style={{ minHeight: "100%" }}
+                >
+                  {list.map((bug, index) => (
+                    <tr
+                      className={`whitespace-nowrap p-2 w-full ${
+                        bug?.status
+                          ? "bg-green-200"
+                          : bug.status === null
+                          ? "bg-white"
+                          : "bg-red-200"
+                      }`}
+                      key={bug.title}
+                    >
+                      <td className="px-6 py-4 text-center">
+                        <div className="text-lg text-gray-900">{bug.title}</div>
+                      </td>
+                      <td className="px-6 py-4 text-center">
+                        <div className="text-lg text-gray-500">
+                          {bug?.description}
+                        </div>
+                      </td>
+                      <td className="px-6 py-4 text-lg text-gray-500 text-center">
+                        {bug?.status}
+                      </td>
+                      <td className="px-6 py-4 text-center">
+                        <div className="text-lg text-gray-900">
+                          {bug?.developer}
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </ul>
+  );
+}
+
+export default Bugs;