feat: saved resources page

components/Sidebar/Sidebar.tsx

@@ -1,7 +1,5 @@
 import { memo, useRef, FC } from 'react'
 import { useRouter } from 'next/router'
-import Link from 'next/link'
-
 import { Searchbar } from 'components/Searchbar/Searchbar'
 import Button from 'components/Button'
 import { SideNavbarCategoryList } from 'components/SideNavbar/SideNavbarCategoryList'
@@ -60,7 +58,7 @@ const Sidebar: FC = () => {
 
       return (
         <li key={i}>
-          <Link
+          <a
             href={href}
             className={`w-full flex items-center justify-start px-4 p-3 gap-4 text-lg font-medium leading-5 rounded-xl hover:bg-slate-100 hover:bg-opacity-50 dark:hover:bg-zinc-400 dark:hover:bg-opacity-10 ${
               isActive ? 'text-primary dark:text-white' : 'text-gray-400'
@@ -70,7 +68,7 @@ const Sidebar: FC = () => {
               {isActive ? activeIcon : inActiveIcon}
             </span>
             <span>{label}</span>
-          </Link>
+          </a>
         </li>
       )
     })

pages/saved.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import Image from 'next/image'
+import { FaArrowRight } from "react-icons/fa";
+import Link from 'next/link';
+
+const Saved = () => {
+  return (
+    <>
+      <div className="p-2 sm:p-8">
+        <h1 className='text-2xl font-medium'>Saved</h1>
+        <p className='text-[#A6ABBF]'>Your saved resources, ready when you are.</p>
+      </div>
+      <div className='flex min-h-[calc(100vh-256px)] justify-center items-center flex-col'>
+        <Image src="/SaveRemove.png" width={120} height={120} alt={''} />
+        <h1 className='mt-5 text-lg font-medium !text-center'>Your collection is empty! Start saving items for later reference.</h1>
+        <Link className='mt-5' href={'/'}><button className='bg-[#714EFF] text-white flex p-3 rounded-lg items-center'>Explore now<FaArrowRight/></button></Link>
+      </div>
+    </>
+  )
+}
+
+export default Saved