From e565f450b89fa870872c6377ad7fb6ff18e84b89 Mon Sep 17 00:00:00 2001
From: VividTruthKeeper <mr.aydogdy02@gmail.com>
Date: Mon, 19 Sep 2022 17:28:11 +0500
Subject: [PATCH] app theme changed

---
 src/App.tsx                                   |   5 +-
 src/assets/styles/_aside.scss                 |   3 +-
 src/assets/styles/_dashboard.scss             |   1 +
 src/assets/styles/_general.scss               |  57 ++++++-
 src/assets/styles/_login.scss                 |  15 +-
 src/assets/styles/_main.scss                  |   1 +
 src/assets/styles/_nav.scss                   |  15 +-
 src/assets/styles/_posts.scss                 |  34 +++--
 .../styles/{_category.scss => _source.scss}   |  51 ++++++-
 src/assets/styles/_variables.scss             |  15 +-
 src/assets/styles/style.scss                  |   2 +-
 src/components/Aside.tsx                      |  46 ++++--
 src/components/Nav.tsx                        |  14 +-
 src/helpers/apiRequests.ts                    |   6 +-
 src/pages/Category.tsx                        |  92 ------------
 src/pages/Dashboard.tsx                       |   6 +-
 src/pages/Posts.tsx                           |  12 +-
 src/pages/Source.tsx                          | 139 ++++++++++++++++++
 18 files changed, 350 insertions(+), 164 deletions(-)
 rename src/assets/styles/{_category.scss => _source.scss} (69%)
 delete mode 100644 src/pages/Category.tsx
 create mode 100644 src/pages/Source.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 6974abe..3f3216a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -17,7 +17,7 @@ import Dashboard from "./pages/Dashboard";
 import Posts from "./pages/Posts";
 import Details from "./pages/Details";
 import Post from "./pages/Post";
-import Category from "./pages/Category";
+import Source from "./pages/Source";
 
 const App = () => {
   const navigate = useNavigate();
@@ -52,6 +52,7 @@ const App = () => {
 
   useEffect(() => {
     if (!user.username) {
+      // localStorage.removeItem("lastLocation");
       navigate("/login");
     } else {
       navigate(localStorage.getItem("lastLocation") || "/dashboard");
@@ -66,7 +67,7 @@ const App = () => {
             <Route path="/" element={<Main />} />
             <Route path="/dashboard" element={<Main child={<Dashboard />} />} />
             <Route path="/posts" element={<Main child={<Posts />} />} />
-            <Route path="/category" element={<Main child={<Category />} />} />
+            <Route path="/source" element={<Main child={<Source />} />} />
             <Route path="/posts/:id" element={<Main child={<Post />} />} />
             <Route
               path="/user_details"
diff --git a/src/assets/styles/_aside.scss b/src/assets/styles/_aside.scss
index 9515d54..b74a537 100644
--- a/src/assets/styles/_aside.scss
+++ b/src/assets/styles/_aside.scss
@@ -20,6 +20,7 @@
     display: flex;
     flex-direction: column;
     gap: 1rem;
+    background: $light-black;
 
     &__element {
       min-width: 13.12rem;
@@ -44,7 +45,7 @@
 
       &:hover {
         @include transition-std;
-        background: #cccccc;
+        background: $base-black;
       }
 
       &__img {
diff --git a/src/assets/styles/_dashboard.scss b/src/assets/styles/_dashboard.scss
index f4063f7..01fad4c 100644
--- a/src/assets/styles/_dashboard.scss
+++ b/src/assets/styles/_dashboard.scss
@@ -12,6 +12,7 @@
   &__img {
     width: 4rem;
     height: 4rem;
+    stroke: $base-blue;
   }
 
   &__content {
diff --git a/src/assets/styles/_general.scss b/src/assets/styles/_general.scss
index 5adf3aa..184a19e 100644
--- a/src/assets/styles/_general.scss
+++ b/src/assets/styles/_general.scss
@@ -1,7 +1,7 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");
 
 * {
-  font-family: "Roboto", sans-serif;
+  font-family: "Lato", sans-serif;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
@@ -22,7 +22,7 @@ html {
 }
 
 body {
-  background-color: #f1f4f8;
+  background-color: $base-black;
 }
 
 body,
@@ -49,12 +49,26 @@ button:disabled {
 }
 
 a {
-  color: #000;
   text-decoration: none;
 }
 
+a,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+span,
+label,
+input,
+textarea,
+p {
+  color: $base-gray;
+}
+
 .green {
-  color: green;
+  color: $base-blue;
   font-size: 1.6rem;
   font-weight: bold;
 }
@@ -65,6 +79,35 @@ a {
   font-weight: bold;
 }
 
-@mixin transition-std {
-  transition: 0.3s all ease;
+input,
+textarea,
+select {
+  @include transition-fast;
+  border: 0.1rem $base-gray solid;
+  outline: $base-blue 0rem solid;
+  &:focus {
+    @include transition-fast;
+    border: 0.1rem $light-black solid;
+    outline: $base-blue 0.3rem solid;
+  }
+}
+
+/* width */
+::-webkit-scrollbar {
+  width: 1rem;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: $light-blue;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: $base-blue;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: $hover-blue;
 }
diff --git a/src/assets/styles/_login.scss b/src/assets/styles/_login.scss
index f9bee4d..5e10180 100644
--- a/src/assets/styles/_login.scss
+++ b/src/assets/styles/_login.scss
@@ -19,9 +19,9 @@
 
   &__form {
     min-width: 35rem;
-    background: #fff;
+    background: $light-black;
     padding: 3.5rem;
-    border: 1px solid #d9e2ef;
+    border: 1px solid $base-black;
     border-radius: 0.5rem;
     display: flex;
     flex-direction: column;
@@ -42,7 +42,7 @@
     }
 
     &__button {
-      border-radius: 0.2rem;
+      border-radius: 0.5rem;
       cursor: pointer;
       width: 100%;
       padding: 0.6rem 1.2rem;
@@ -50,14 +50,14 @@
       font-size: 1.6rem;
 
       &--violet {
-        background-color: #7c69ef;
-        border: 0.1rem solid #7c69ef;
+        background-color: $base-blue;
+        border: 0.1rem solid $base-blue;
         @include transition-std;
 
         &:hover {
           @include transition-std;
-          background-color: #705ed6;
-          border: 0.1rem solid #705ed6;
+          background-color: $hover-blue;
+          border: 0.1rem solid $hover-blue;
         }
       }
     }
@@ -73,7 +73,6 @@
       input {
         font-size: 1.6rem;
         padding: 0.6rem 1.2rem;
-        border: 1px solid #d9e2ef;
         border-radius: 0.2rem;
       }
 
diff --git a/src/assets/styles/_main.scss b/src/assets/styles/_main.scss
index d02acc8..704ba55 100644
--- a/src/assets/styles/_main.scss
+++ b/src/assets/styles/_main.scss
@@ -1,5 +1,6 @@
 .main {
   &__mid {
+    padding: 3rem 0;
     display: grid;
     grid-template-columns: auto 1fr;
   }
diff --git a/src/assets/styles/_nav.scss b/src/assets/styles/_nav.scss
index 556e509..f5eedfd 100644
--- a/src/assets/styles/_nav.scss
+++ b/src/assets/styles/_nav.scss
@@ -1,6 +1,6 @@
 .nav {
   &__dropdown {
-    background: #f1f4f8;
+    background: $light-black;
     z-index: 5;
     border-radius: 1rem;
     width: 100%;
@@ -12,7 +12,7 @@
     left: 0;
     height: 0;
 
-    border: 0.1rem solid #c8c8c8;
+    border: 0.1rem solid $base-black;
 
     &.active {
       height: 14.7rem;
@@ -52,8 +52,8 @@
     &__user {
       cursor: pointer;
       position: relative;
-      background: #f1f4f8;
-      border: 0.1rem solid #c8c8c8;
+      background: $light-black;
+      border: 0.1rem solid $base-black;
       border-radius: 1rem;
       padding: 1rem;
       display: flex;
@@ -63,7 +63,8 @@
 
       &:hover {
         @include transition-std;
-        background: #b9b9b9;
+        border: 0.1rem solid $light-black;
+        background: $base-black;
       }
 
       button {
@@ -134,7 +135,7 @@
     width: 4.8rem;
     height: 3.2rem;
     padding: 0.4rem 0;
-    border: 0.1rem solid rgba(0, 0, 0, 0.4);
+    border: 0.1rem solid $light-black;
     border-radius: 0.5rem;
     @include transition-std;
 
@@ -146,7 +147,7 @@
 
     &:active {
       @include transition-std;
-      border: 0.3rem solid rgba(0, 0, 0, 0.8);
+      border: 0.3rem solid $light-black;
     }
   }
 }
diff --git a/src/assets/styles/_posts.scss b/src/assets/styles/_posts.scss
index b10c7b9..3be6245 100644
--- a/src/assets/styles/_posts.scss
+++ b/src/assets/styles/_posts.scss
@@ -7,19 +7,27 @@
     justify-content: flex-end;
 
     input {
+      border-radius: 0.5rem;
+      border: none !important;
       width: 5%;
       text-align: center;
       font-weight: bold;
     }
 
     button {
+      @include transition-std;
       cursor: pointer;
       font-size: 1.6rem;
       width: 15%;
       padding: 1rem 2rem;
       border-radius: 0.5rem;
-      background: #7c69ef;
+      background: $base-blue;
       color: white;
+
+      &:hover {
+        @include transition-std;
+        background: $hover-blue;
+      }
     }
   }
   &__select {
@@ -32,12 +40,12 @@
     }
 
     input {
+      background: $light-black;
+      color: $base-gray;
       font-size: 1.6rem;
       padding: 1rem 1.2rem;
-      border: 1px solid #b8b9bb;
       border-radius: 0.2rem;
       cursor: default;
-      background: #fff;
     }
 
     &__wrapper {
@@ -47,20 +55,20 @@
   }
   select {
     padding: 1rem 1.2rem;
-    border: 1px solid #b8b9bb;
+    color: $base-gray;
+    background: $light-black;
   }
 
   &.inner {
     display: flex;
     flex-direction: column;
     gap: 4rem;
-    padding-bottom: 3rem;
   }
 
   &__table {
     &__head {
       min-height: unset !important;
-      background: #dbdbdb;
+      background: $light-black;
     }
 
     th {
@@ -71,20 +79,23 @@
       font-size: 1.6rem;
       justify-self: center;
       background: transparent;
-      color: #000;
+      color: $base-gray;
       @include transition-std;
 
       &.active {
-        background: rgb(98, 98, 98);
-        color: #fff;
+        background: $light-blue;
+        color: $base-black;
         @include transition-std;
       }
     }
 
     .post-link {
-      background: #f2f0fd;
+      background: $base-black;
       &:nth-child(2n) {
-        background: #fafafa;
+        background: $light-blue;
+        td {
+          color: $light-black;
+        }
       }
     }
 
@@ -97,6 +108,7 @@
     }
 
     td {
+      color: $base-gray;
       text-align: center;
       width: 100%;
       overflow: hidden;
diff --git a/src/assets/styles/_category.scss b/src/assets/styles/_source.scss
similarity index 69%
rename from src/assets/styles/_category.scss
rename to src/assets/styles/_source.scss
index fe97196..aad0a52 100644
--- a/src/assets/styles/_category.scss
+++ b/src/assets/styles/_source.scss
@@ -12,6 +12,18 @@
     }
   }
 
+  th {
+    cursor: pointer;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    font-size: 1.6rem;
+    justify-self: center;
+    background: transparent;
+    color: $base-gray;
+    @include transition-std;
+  }
+
   &__form {
     display: flex;
     flex-direction: column;
@@ -71,18 +83,23 @@
       }
     }
     &__head {
+      cursor: default;
       min-height: unset !important;
-      background: #dbdbdb !important;
+      background: $light-black !important;
     }
     tr {
       min-height: 7rem;
       padding: 1rem;
       display: grid;
-      grid-template-columns: 1fr 3fr 5fr;
+      grid-template-columns: 1fr 2fr 3fr 4fr;
       gap: 1rem;
-      background: #f2f0fd;
+      color: $base-gray;
+      background: $base-black;
       &:nth-child(2n) {
-        background: #fafafa;
+        background: $light-blue;
+        td {
+          color: $light-black;
+        }
       }
     }
 
@@ -105,3 +122,29 @@
     }
   }
 }
+
+.source-action {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  justify-content: center;
+
+  &__block {
+    button,
+    a {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 0.6rem;
+    }
+
+    svg {
+      width: 1.2rem;
+      height: 1.2rem;
+    }
+
+    span {
+      font-size: 1.6rem;
+    }
+  }
+}
diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss
index 77af207..da84345 100644
--- a/src/assets/styles/_variables.scss
+++ b/src/assets/styles/_variables.scss
@@ -1,4 +1,15 @@
 $base-gray: #f2f2f2;
-$base-orange: #f96d00;
-$light-dark: #393e46;
+$light-black: #393e46;
 $base-black: #222831;
+$dark-blue: #00785a;
+$light-blue: #c9fce9;
+$base-blue: #2fad8c;
+$hover-blue: #268a6f;
+
+@mixin transition-std {
+  transition: 0.3s all ease;
+}
+
+@mixin transition-fast {
+  transition: 0.1s all ease;
+}
diff --git a/src/assets/styles/style.scss b/src/assets/styles/style.scss
index 0715961..e9acb50 100644
--- a/src/assets/styles/style.scss
+++ b/src/assets/styles/style.scss
@@ -7,4 +7,4 @@
 @import "./dashboard";
 @import "./posts";
 @import "./details";
-@import "./category";
+@import "./source";
diff --git a/src/components/Aside.tsx b/src/components/Aside.tsx
index ca21291..3c7b1eb 100644
--- a/src/components/Aside.tsx
+++ b/src/components/Aside.tsx
@@ -3,14 +3,15 @@ import React from "react";
 import { useContext } from "react";
 import { Link } from "react-router-dom";
 import { UserContext } from "../context/UserContext";
+import { IconContext } from "react-icons";
 
 // Icons
-import { BsFillFileEarmarkPostFill } from "react-icons/bs";
-import { AiOutlineBlock } from "react-icons/ai";
+import { FaBox } from "react-icons/fa";
+import { FaHive } from "react-icons/fa";
 import { MdOutlineManageAccounts } from "react-icons/md";
-import { CgDetailsLess } from "react-icons/cg";
-import { BiLogOut } from "react-icons/bi";
-import { IoIosCreate } from "react-icons/io";
+import { FaAlignLeft } from "react-icons/fa";
+import { FaSignOutAlt } from "react-icons/fa";
+import { FaSourcetree } from "react-icons/fa";
 
 // Types
 import { userContextType } from "../types/user";
@@ -25,7 +26,10 @@ const Aside = ({ aside, setAside }: Props) => {
     <aside className={aside ? "aside active" : "aside"}>
       <ul className="aside__list">
         <li className="aside__list__element aside__list__element--title">
-          <AiOutlineBlock className="aside__img" />
+          <IconContext.Provider value={{ color: "#8DD77F" }}>
+            <FaHive className="aside__img" />
+          </IconContext.Provider>
+
           <h2>Elements</h2>
         </li>
         <li className="aside__list__element">
@@ -33,21 +37,30 @@ const Aside = ({ aside, setAside }: Props) => {
             to={"/posts"}
             onClick={() => localStorage.setItem("lastLocation", "/posts")}
           >
-            <BsFillFileEarmarkPostFill className="aside__list__element__img" />
+            <IconContext.Provider value={{ color: "#8DD77F" }}>
+              <FaBox className="aside__list__element__img" />
+            </IconContext.Provider>
+
             <span>Posts</span>
           </Link>
         </li>
         <li className="aside__list__element">
           <Link
-            to={"/category"}
-            onClick={() => localStorage.setItem("lastLocation", "/category")}
+            to={"/source"}
+            onClick={() => localStorage.setItem("lastLocation", "/source")}
           >
-            <IoIosCreate className="aside__list__element__img" />
-            <span>Category</span>
+            <IconContext.Provider value={{ color: "#8DD77F" }}>
+              <FaSourcetree />
+            </IconContext.Provider>
+
+            <span>Source</span>
           </Link>
         </li>
         <li className="aside__list__element aside__list__element--title">
-          <MdOutlineManageAccounts className="aside__img" />
+          <IconContext.Provider value={{ color: "#8DD77F" }}>
+            <MdOutlineManageAccounts className="aside__img" />
+          </IconContext.Provider>
+
           <h2>Account</h2>
         </li>
         <li className="aside__list__element">
@@ -57,7 +70,10 @@ const Aside = ({ aside, setAside }: Props) => {
               localStorage.setItem("lastLocation", "/user_details")
             }
           >
-            <CgDetailsLess className="aside__list__element__img" />
+            <IconContext.Provider value={{ color: "#8DD77F" }}>
+              <FaAlignLeft className="aside__list__element__img" />
+            </IconContext.Provider>
+
             <span>Details</span>
           </Link>
         </li>
@@ -69,7 +85,9 @@ const Aside = ({ aside, setAside }: Props) => {
           }}
         >
           <div>
-            <BiLogOut className="aside__list__element__img" />
+            <IconContext.Provider value={{ color: "#8DD77F" }}>
+              <FaSignOutAlt className="aside__list__element__img" />
+            </IconContext.Provider>
             <span>Log out</span>
           </div>
         </li>
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index 8c11c6b..d628f77 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -5,9 +5,9 @@ import { Link } from "react-router-dom";
 import { IconContext } from "react-icons";
 
 // Icons
-import { ImStatsDots } from "react-icons/im";
+import { FaMeteor } from "react-icons/fa";
 import { GiHamburgerMenu } from "react-icons/gi";
-import { AiOutlineUser } from "react-icons/ai";
+import { FaUserCog } from "react-icons/fa";
 
 // Types
 import { userContextType } from "../types/user";
@@ -32,11 +32,11 @@ const Nav = ({ aside, setAside }: Props) => {
                 localStorage.setItem("lastLocation", "/dashboard");
               }}
             >
-              <IconContext.Provider value={{ color: "#393e46" }}>
-                <ImStatsDots />
+              <IconContext.Provider value={{ color: "#8DD77F" }}>
+                <FaMeteor />
               </IconContext.Provider>
             </Link>
-            <IconContext.Provider value={{ color: "#393e46" }}>
+            <IconContext.Provider value={{ color: "#8DD77F" }}>
               <GiHamburgerMenu
                 type="button"
                 className="nav__btn"
@@ -51,8 +51,8 @@ const Nav = ({ aside, setAside }: Props) => {
                 setDropdown(!dropdown);
               }}
             >
-              <IconContext.Provider value={{ color: "#393e46" }}>
-                <AiOutlineUser className="nav__right__user__img" />
+              <IconContext.Provider value={{ color: "#8DD77F" }}>
+                <FaUserCog className="nav__right__user__img" />
               </IconContext.Provider>
 
               <span>Profile</span>
diff --git a/src/helpers/apiRequests.ts b/src/helpers/apiRequests.ts
index 46451db..44e85f3 100644
--- a/src/helpers/apiRequests.ts
+++ b/src/helpers/apiRequests.ts
@@ -18,14 +18,14 @@ export const getPosts = (
     .catch((err) => {});
 };
 
-export const deleteLink = (setSuccess: React.Dispatch<string>, id: number) => {
+export const deleteLink = (setSuccess: React.Dispatch<boolean>, id: number) => {
   axios
     .delete(`http://95.85.124.41:8080/link/delete/${id}`)
     .then((res) => {
-      setSuccess(res.data.message);
+      setSuccess(true);
     })
     .catch((err) => {
-      setSuccess("error");
+      setSuccess(false);
     });
 };
 
diff --git a/src/pages/Category.tsx b/src/pages/Category.tsx
deleted file mode 100644
index 6d6e3ad..0000000
--- a/src/pages/Category.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-// Modules
-import { v4 as uuidv4 } from "uuid";
-import { useState, useEffect } from "react";
-
-// Icons
-import { IoIosCreate } from "react-icons/io";
-import { getLinks } from "../helpers/apiRequests";
-import { LinksAll } from "../types/links";
-
-interface dataType {
-  createName: string;
-  createLink: string;
-  delete: number;
-  updateId: number;
-  updateName: string;
-  updateLink: string;
-}
-
-interface successType {
-  create: string;
-  delete: string;
-  update: string;
-  hasCreateUpdated: boolean;
-  hasDeleteUpdated: boolean;
-  hasUpdateUpdated: boolean;
-}
-
-const Category = () => {
-  const defaultDate = new Date("00-00-00");
-
-  const [all, setAll] = useState<LinksAll[]>([
-    {
-      id: -1,
-      name: "",
-      source: "",
-      createdAt: defaultDate,
-      updatedAt: defaultDate,
-    },
-  ]);
-
-  useEffect(() => {
-    getLinks(setAll);
-  }, []);
-
-  return (
-    <main className="category">
-      <div className="container">
-        <div className="category inner">
-          <div className="dashboard__head category__head">
-            <IoIosCreate />
-            <h1>Source</h1>
-          </div>
-          <div className="category__table__wrapper">
-            <h3>All sources</h3>
-            <table className="category__table">
-              <thead>
-                <tr className="category__table__head">
-                  <th>ID</th>
-                  <th>Name</th>
-                  <th>Source</th>
-                </tr>
-              </thead>
-              <tbody>
-                {all[0].id !== -1 ? (
-                  all.map((source: LinksAll) => {
-                    return (
-                      <tr key={uuidv4()}>
-                        <td>{source.id}</td>
-                        <td>{source.name}</td>
-                        <td className="category__table__tab">
-                          {source.source}
-                        </td>
-                      </tr>
-                    );
-                  })
-                ) : (
-                  <tr>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                  </tr>
-                )}
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-    </main>
-  );
-};
-
-export default Category;
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index f2405e6..b340605 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -1,4 +1,5 @@
 // Modules
+import { IconContext } from "react-icons";
 
 // Icons
 import { AiOutlineDashboard } from "react-icons/ai";
@@ -12,7 +13,10 @@ const Dashboard = () => {
       <div className="container">
         <div className="dashboard inner">
           <div className="dashboard__head">
-            <AiOutlineDashboard className="dashboard__img" />
+            <IconContext.Provider value={{ color: "#8DD77F" }}>
+              <AiOutlineDashboard className="dashboard__img" />
+            </IconContext.Provider>
+
             <h1>Dashboard</h1>
           </div>
           <div className="dashboard__content__stats">
diff --git a/src/pages/Posts.tsx b/src/pages/Posts.tsx
index 297f7d7..7df758d 100644
--- a/src/pages/Posts.tsx
+++ b/src/pages/Posts.tsx
@@ -2,9 +2,10 @@
 import { v4 as uuidv4 } from "uuid";
 import React, { useContext, useEffect, useState } from "react";
 import { PostContext } from "../context/PostContext";
+import { IconContext } from "react-icons";
 
 // Icons
-import { BsFillFileEarmarkPostFill } from "react-icons/bs";
+import { FaBox } from "react-icons/fa";
 import { BiLinkExternal } from "react-icons/bi";
 
 // Helpers
@@ -12,7 +13,6 @@ import { getPosts } from "../helpers/apiRequests";
 import { PostType } from "../types/posts";
 import { Link } from "react-router-dom";
 import { parseDate } from "../helpers/parseDate";
-// import { capitalizeFirstLetter } from "../helpers/stringMethods";
 
 // Types
 import { paramsType } from "../types/posts";
@@ -75,7 +75,9 @@ const Posts = () => {
       <div className="container">
         <div className="posts inner">
           <div className="dashboard__head">
-            <BsFillFileEarmarkPostFill className="dashboard__img" />
+            <IconContext.Provider value={{ color: "#8DD77F" }}>
+              <FaBox className="dashboard__img" />
+            </IconContext.Provider>
             <h1>Posts</h1>
           </div>
           <div className="posts__select__wrapper">
@@ -140,7 +142,7 @@ const Posts = () => {
             </div>
           </div>
           <table className="posts__table">
-            <tbody>
+            <thead>
               <tr className="posts__table__head">
                 <th
                   className={sort === "id" ? "active" : ""}
@@ -220,6 +222,8 @@ const Posts = () => {
                   Updated
                 </th>
               </tr>
+            </thead>
+            <tbody>
               {posts[0] ? (
                 posts[0].id !== -1 ? (
                   category === "All" ? (
diff --git a/src/pages/Source.tsx b/src/pages/Source.tsx
new file mode 100644
index 0000000..e9068fe
--- /dev/null
+++ b/src/pages/Source.tsx
@@ -0,0 +1,139 @@
+// Modules
+import { v4 as uuidv4 } from "uuid";
+import { useState, useEffect } from "react";
+import { IconContext } from "react-icons";
+import { Link } from "react-router-dom";
+
+// Icons
+import { FaSourcetree } from "react-icons/fa";
+import { FaRegEdit } from "react-icons/fa";
+import { FaTrash } from "react-icons/fa";
+import { getLinks } from "../helpers/apiRequests";
+
+// Helpers
+import { deleteLink } from "../helpers/apiRequests";
+
+// Types
+import { LinksAll } from "../types/links";
+// interface dataType {
+//   createName: string;
+//   createLink: string;
+//   delete: number;
+//   updateId: number;
+//   updateName: string;
+//   updateLink: string;
+// }
+// interface successType {
+//   create: string;
+//   delete: string;
+//   update: string;
+//   hasCreateUpdated: boolean;
+//   hasDeleteUpdated: boolean;
+//   hasUpdateUpdated: boolean;
+// }
+
+const Source = () => {
+  const defaultDate = new Date("00-00-00");
+
+  const [deleted, setDeleted] = useState<boolean>(false);
+
+  const [all, setAll] = useState<LinksAll[]>([
+    {
+      id: -1,
+      name: "",
+      source: "",
+      createdAt: defaultDate,
+      updatedAt: defaultDate,
+    },
+  ]);
+
+  useEffect(() => {
+    getLinks(setAll);
+  }, []);
+
+  useEffect(() => {
+    if (deleted) {
+      setTimeout(() => {
+        setDeleted(false);
+        getLinks(setAll);
+      }, 2000);
+    }
+  }, [deleted, setDeleted]);
+
+  return (
+    <main className="category">
+      <div className="container">
+        <div className="category inner">
+          <div className="dashboard__head category__head">
+            <IconContext.Provider value={{ color: "#8DD77F" }}>
+              <FaSourcetree />
+            </IconContext.Provider>
+            <h1>Source</h1>
+          </div>
+          <div className="category__table__wrapper">
+            <h3>All sources</h3>
+            <table className="category__table">
+              <thead>
+                <tr className="category__table__head">
+                  <th>ID</th>
+                  <th>Name</th>
+                  <th>Source</th>
+                  <th>Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                {all[0].id !== -1 ? (
+                  all.map((source: LinksAll) => {
+                    return (
+                      <tr key={uuidv4()}>
+                        <td>{source.id}</td>
+                        <td>{source.name}</td>
+                        <td className="category__table__tab">
+                          {source.source}
+                        </td>
+                        <td className="source-action">
+                          <div className="source-action__block">
+                            <Link to={`/source/edit/${source.id}`}>
+                              <span>Edit</span>
+                              <IconContext.Provider
+                                value={{ color: "#8DD77F" }}
+                              >
+                                <FaRegEdit />
+                              </IconContext.Provider>
+                            </Link>
+                          </div>
+                          <div className="source-action__block">
+                            <button
+                              onClick={() => {
+                                deleteLink(setDeleted, source.id);
+                              }}
+                            >
+                              <span>Delete</span>
+                              <IconContext.Provider
+                                value={{ color: "#8DD77F" }}
+                              >
+                                <FaTrash />
+                              </IconContext.Provider>
+                            </button>
+                          </div>
+                        </td>
+                      </tr>
+                    );
+                  })
+                ) : (
+                  <tr>
+                    <td></td>
+                    <td></td>
+                    <td></td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default Source;