dashboard layout updated

src/components/MainBtn.jsx

@@ -3,7 +3,7 @@ export default function MainBtn({
     className,
     text,
     shrinkAside,
-    icon,
+    children,
     loading,
     disabled
 }) {
@@ -13,7 +13,7 @@ export default function MainBtn({
         className={`py-3 px-4 rounded text-12 lg:text-lg ${className || ''} ${(disabled || loading) && 'opacity-60'}`}
         onClick={onClick}
     >
-        {icon && <i className={`fa-solid ${icon}`}></i>}
+        {children && children}
         {shrinkAside ? '' : loading? 'Loading...' : text}
     </button>
   )

src/components/breadcrumb/BreadcrumbCom.jsx

@@ -6,7 +6,7 @@ export default function BreadcrumbCom({title, paths}) {
     <div className='w-full py-2 flex justify-between items-center'>
         <h1 className='text-12 sm:text-lg md:text-2xl text-black dark:text-black-gray font-semibold'>{title}</h1>
         <div className='flex gap-2 items-center text-black-gray dark:text-black-gray text-base'>
-            <TiHomeOutline />
+            <TiHomeOutline className='text-black dark:text-black-gray' />
             {paths.map((item, index) => (
               <div className='flex gap-2 items-center text-black dark:text-black-gray text-10 sm:text-sm' key={index}>
                 <MdKeyboardDoubleArrowRight />

src/components/layouts/aside/AsideLink.jsx

@@ -1,6 +1,6 @@
 import { Link, useLocation } from "react-router-dom"
 
-export default function AsideLink({shrinkAside, name, to, icon}) {
+export default function AsideLink({shrinkAside, name, to, children}) {
 
   const {pathname} = useLocation()
 
@@ -9,8 +9,7 @@ export default function AsideLink({shrinkAside, name, to, icon}) {
         className={`w-full flex items-center gap-2 px-4 py-2 my-1 text-[13px] font-semibold rounded-md hover:text-white-light hover:bg-white/10 ${pathname == to ? 'bg-white/10 text-white-light' : 'text-slate-400'}`} 
         to={to}
     >   
-        {/* {icon && <span className={`after:content-['24']`}></span>} */}
-        {icon && <i className={`${icon}`}></i>}
+        {children && children}
         {shrinkAside ? '' : name}
     </Link>
   )

src/components/layouts/aside/DashboardAside.jsx

@@ -11,6 +11,7 @@ import { generalLayoutContext } from "../../../context/GeneralLayoutContext";
 import { AiOutlineDashboard } from "react-icons/ai";
 import { IoPeople } from "react-icons/io5";
 import { GoDotFill } from "react-icons/go";
+import { TbLogout2 } from "react-icons/tb";
 
 
 export default function DashboardAside({shrinkAside=false}) {
@@ -44,54 +45,55 @@ export default function DashboardAside({shrinkAside=false}) {
         <hr className="border-slate-400" />
 
         <div className="p-4 w-full h-full overflow-y-auto">
-            <Link 
-                className={`w-full flex items-center gap-2 px-4 py-2 my-1 text-[13px] font-semibold rounded hover:text-white-light hover:bg-white/10 ${pathname == RouteLinks.homePage ? 'bg-white/10 text-white-light' : 'text-slate-400'}`} 
+            <AsideLink
                 to={RouteLinks.homePage}
-            >   
+                shrinkAside={shrinkAside}
+                name='Dashboard'
+            >
                 <AiOutlineDashboard className="text-base" />
-                <span>{shrinkAside ? '' : 'Dashboard'}</span>
-            </Link>
+            </AsideLink>
 
             <div className="w-full">
-                <h1 className="px-4 py-2 text-12 text-slate-400 font-semibold uppercase mt-3 mb-1 border-b border-slate-800">ADMIN</h1>
-                <Link 
-                    className={`w-full flex items-center gap-2 px-4 py-2 my-1 text-[13px] font-semibold rounded-md hover:text-white-light hover:bg-white/10 ${pathname == RouteLinks.usersPage ? 'bg-white/10 text-white-light' : 'text-slate-400'}`} 
+                <h1 className="px-4 py-2 text-12 text-slate-400 font-semibold uppercase mt-3 mb-1 border-b border-slate-800">ADMIN</h1> 
+                <AsideLink
                     to={RouteLinks.usersPage}
-                >   
+                    shrinkAside={shrinkAside}
+                    name='Users'
+                >
                     <IoPeople className="text-base" />
-                    <span>{shrinkAside ? '' : 'Users'}</span>
-                </Link>            
+                </AsideLink>          
             </div>
 
             <div className="w-full">
                 {/* <h1 className="px-4 py-2 text-12 text-slate-400 font-semibold uppercase mt-3 mb-1 border-b border-slate-800">LOANS</h1> */}
                 <AsideLinkWithSubLinks hideSubMenu={hideSubMenu} setHideSubMenu={handleHideSubMenu} shrinkAside={shrinkAside} name='Loans' icon='fa-solid fa-list'>
-                    <Link 
-                        className={`w-full flex items-center gap-2 px-4 py-2 my-1 text-[13px] font-semibold rounded-md hover:text-white-light hover:bg-white/10 ${pathname == RouteLinks.approvedLoans ? 'bg-white/10 text-white-light' : 'text-slate-400'}`} 
+                    <AsideLink
                         to={RouteLinks.approvedLoans}
-                    >   
+                        shrinkAside={shrinkAside}
+                        name='Approved'
+                    >
                         <GoDotFill className="text-base" />
-                        <span>{shrinkAside ? '' : 'Approved'}</span>
-                    </Link> 
-                    <Link 
-                        className={`w-full flex items-center gap-2 px-4 py-2 my-1 text-[13px] font-semibold rounded-md hover:text-white-light hover:bg-white/10 ${pathname == RouteLinks.pendingLoans ? 'bg-white/10 text-white-light' : 'text-slate-400'}`} 
+                    </AsideLink> 
+                    <AsideLink
                         to={RouteLinks.pendingLoans}
-                    >   
-                        <GoDotFill className="text-base" />
-                        <span>{shrinkAside ? '' : 'Pending'}</span>
-                    </Link> 
+                        shrinkAside={shrinkAside}
+                        name='Pending'
+                    >
+                        <IoPeople className="text-base" />
+                    </AsideLink> 
                 </AsideLinkWithSubLinks>
             </div>
         </div>
         <div className='px-4 py-2'>
             <div className="bg-primary rounded w-full flex justify-center items-center gap-2">
-                <MainBtn 
+                <MainBtn
                     shrinkAside={shrinkAside} 
-                    icon='fa-solid fa-right-from-bracket' 
                     text='Logout' 
                     className="w-full text-center flex justify-center gap-2 items-center" 
                     onClick={()=>setLogoutModal(true)}
-                />
+                >
+                    <TbLogout2 className="text-base" />
+                </MainBtn>
             </div>
         </div>
     </div>

src/pages/HomePage.jsx

@@ -7,13 +7,13 @@ export default function HomePage() {
       <BreadcrumbCom title='Dashboard' paths={['Home', 'Dashboard']} />
       <div className='grid grid-cols-1 2xl:grid-cols-2 gap-8'>
         <div className='w-full grid grid-cols-1 sm:grid-cols-2 gap-8'>
-          <div className='w-full bg-white dark:bg-slate-800 hover:scale-[1.03] cursor-pointer rounded h-[300px] shadow-round_black dark:shadow-round_white'></div>
-          <div className='w-full bg-white dark:bg-slate-800 hover:scale-[1.03] cursor-pointer rounded h-[300px] shadow-round_black dark:shadow-round_white'></div>
-          <div className='w-full bg-white dark:bg-slate-800 hover:scale-[1.03] cursor-pointer rounded h-[300px] shadow-round_black dark:shadow-round_white'></div>
-          <div className='w-full bg-white dark:bg-slate-800 hover:scale-[1.03] cursor-pointer rounded h-[300px] shadow-round_black dark:shadow-round_white'></div>
+          <div className='w-full bg-white dark:bg-slate-800 hover:scale-[1.02] cursor-pointer rounded h-[300px] shadow-round_black dark:shadow-round_white'></div>
+          <div className='w-full bg-white dark:bg-slate-800 hover:scale-[1.02] cursor-pointer rounded h-[300px] shadow-round_black dark:shadow-round_white'></div>
+          <div className='w-full bg-white dark:bg-slate-800 hover:scale-[1.02] cursor-pointer rounded h-[300px] shadow-round_black dark:shadow-round_white'></div>
+          <div className='w-full bg-white dark:bg-slate-800 hover:scale-[1.02] cursor-pointer rounded h-[300px] shadow-round_black dark:shadow-round_white'></div>
         </div>
         <div className='w-full'>
-          <div className='w-full bg-white dark:bg-slate-800 hover:scale-[1.03] cursor-pointer rounded h-full shadow-round_black dark:shadow-round_white'></div>
+          <div className='w-full bg-white dark:bg-slate-800 hover:scale-[1.02] cursor-pointer rounded h-full shadow-round_black dark:shadow-round_white'></div>
         </div>
       </div>
     </div>