-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #17 from atlp-rwanda/187783612-create-admin-landin…
…g-page [#finishes 187783612] Implementing admin dashboard UI
- Loading branch information
Showing
13 changed files
with
387 additions
and
62 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,19 @@ | ||
| import globals from "globals"; | ||
| import pluginJs from "@eslint/js"; | ||
| import tseslint from "typescript-eslint"; | ||
| import pluginReactConfig from "eslint-plugin-react/configs/recommended.js"; | ||
| import eslintConfigPrettier from "eslint-config-prettier"; | ||
| import globals from 'globals'; | ||
| import pluginJs from '@eslint/js'; | ||
| import tseslint from 'typescript-eslint'; | ||
| import pluginReactConfig from 'eslint-plugin-react/configs/recommended.js'; | ||
| import eslintConfigPrettier from 'eslint-config-prettier'; | ||
|
|
||
| export default [ | ||
| { languageOptions: { globals: globals.browser } }, | ||
| pluginJs.configs.recommended, | ||
| ...tseslint.configs.recommended, | ||
| pluginReactConfig, | ||
| eslintConfigPrettier | ||
| eslintConfigPrettier, | ||
| { | ||
| rules: { | ||
| 'react/jsx-uses-react': 'off', | ||
| 'react/react-in-jsx-scope': 'off', | ||
| }, | ||
| }, | ||
| ]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| import React from 'react'; | ||
| import { FaRegListAlt, FaUserFriends, FaUserTie, FaRegEnvelope, FaCog } from 'react-icons/fa'; | ||
| import { FiLogOut } from 'react-icons/fi'; | ||
| import { RxDashboard } from 'react-icons/rx'; | ||
| import logo from '../assets/Rectangle 2487.png'; | ||
| import { Link } from 'react-router-dom'; | ||
|
|
||
| export default function Sidebar({ isOpen, toggleSidebar }: { isOpen: boolean; toggleSidebar: () => void }) { | ||
| const [activeLink, setActiveLink] = React.useState('Dashboard'); | ||
|
|
||
| const handleLinkClick = (link: string) => { | ||
| setActiveLink(link); | ||
| }; | ||
|
|
||
| const linkClasses = (link: string) => | ||
| `flex items-center py-2.5 px-4 rounded transition duration-200 hover:bg-[#E5E7EB] text-[#8F8183] ${ | ||
| activeLink === link ? 'bg-skyBlue text-skyBlueText hover:bg-skyBlue' : '' | ||
| }`; | ||
|
|
||
| return ( | ||
| <> | ||
| <div | ||
| className={`fixed inset-0 bg-blackColor opacity-50 z-40 ${isOpen ? 'block' : 'hidden'} md:hidden`} | ||
| onClick={toggleSidebar} | ||
| ></div> | ||
| <div | ||
| className={`w-64 h-screen bg-whiteColor shadow-md flex flex-col justify-between fixed z-50 transition-transform transform ${isOpen ? 'translate-x-0' : '-translate-x-full'} md:translate-x-0`} | ||
| > | ||
| <div className='p-6'> | ||
| <div className='text-center font-semibold text-2xl mb-6 static'> | ||
| <a href='#'> | ||
| MAVERICKS <img src={logo} alt='' className='absolute top-5 right-5' width={40} height={40} /> | ||
| </a> | ||
| </div> | ||
| <nav> | ||
| <ul className='space-y-2'> | ||
| <li> | ||
| <Link to={'/admin'} className={linkClasses('Dashboard')} onClick={() => handleLinkClick('Dashboard')}> | ||
| <RxDashboard className='mr-3' /> | ||
| Dashboard | ||
| </Link> | ||
| </li> | ||
| <li> | ||
| <Link to={'categories'} className={linkClasses('Category')} onClick={() => handleLinkClick('Category')}> | ||
| <FaRegListAlt className='mr-3' /> | ||
| Category | ||
| </Link> | ||
| </li> | ||
| <li> | ||
| <Link to={''} className={linkClasses('Sellers')} onClick={() => handleLinkClick('Sellers')}> | ||
| <FaUserTie className='mr-3' /> | ||
| Sellers | ||
| </Link> | ||
| </li> | ||
| <li> | ||
| <Link to={''} className={linkClasses('Buyers')} onClick={() => handleLinkClick('Buyers')}> | ||
| <FaUserFriends className='mr-3' /> | ||
| Buyers | ||
| </Link> | ||
| </li> | ||
| <li> | ||
| <Link to={''} className={linkClasses('Messages')} onClick={() => handleLinkClick('Messages')}> | ||
| <FaRegEnvelope className='mr-3' /> | ||
| Messages | ||
| </Link> | ||
| </li> | ||
| <li> | ||
| <Link to={''} className={linkClasses('Settings')} onClick={() => handleLinkClick('Settings')}> | ||
| <FaCog className='mr-3' /> | ||
| Settings | ||
| </Link> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| </div> | ||
| <div className='p-6'> | ||
| <a href='#' className='flex items-center py-2.5 px-4 rounded transition duration-200 hover:bg-[#E5E7EB]'> | ||
| <FiLogOut className='mr-3' /> | ||
| Logout | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,56 +1,62 @@ | ||
| import clothes from '../../assets/clothes.png' | ||
| import watches from '../../assets/watches.png' | ||
| import education from '../../assets/education.png' | ||
| import suppliment from '../../assets/supplement.png' | ||
| import shoes from '../../assets/shoes.png' | ||
| import electronics from '../../assets/electronics.png' | ||
| import { Link, NavLink } from 'react-router-dom' | ||
| import clothes from '../../assets/clothes.png'; | ||
| import watches from '../../assets/watches.png'; | ||
| import education from '../../assets/education.png'; | ||
| import suppliment from '../../assets/supplement.png'; | ||
| import shoes from '../../assets/shoes.png'; | ||
| import electronics from '../../assets/electronics.png'; | ||
| import { Link, NavLink } from 'react-router-dom'; | ||
|
|
||
| export function PopularCategory({ title }: { title: string }) { | ||
| return ( | ||
| <> | ||
| <div className='p-3'> | ||
| <h2 className="capitalize font-bold text-2xl">{title}</h2> | ||
| </div> | ||
| <SidebarLink icon={clothes} to='/' name='women clothes' /> | ||
| <SidebarLink icon={watches} to='/' name='watches' /> | ||
| <SidebarLink icon={education} to='/' name='education' /> | ||
| <SidebarLink icon={suppliment} to='/' name='suppliment' /> | ||
| <SidebarLink icon={shoes} to='/' name='shoes' /> | ||
| <SidebarLink icon={electronics} to='/' name='electronics' /> | ||
| </> | ||
| ) | ||
| return ( | ||
| <> | ||
| <div className='p-3'> | ||
| <h2 className='capitalize font-bold text-2xl'>{title}</h2> | ||
| </div> | ||
| <SidebarLink icon={clothes} to='/' name='women clothes' /> | ||
| <SidebarLink icon={watches} to='/' name='watches' /> | ||
| <SidebarLink icon={education} to='/' name='education' /> | ||
| <SidebarLink icon={suppliment} to='/' name='suppliment' /> | ||
| <SidebarLink icon={shoes} to='/' name='shoes' /> | ||
| <SidebarLink icon={electronics} to='/' name='electronics' /> | ||
| </> | ||
| ); | ||
| } | ||
| export function SidebarLink({ icon, name, to }: { icon: string, name: string, to: string }) { | ||
| return ( | ||
| <NavLink to={to} className="flex items-center justify-start gap-3 px-3 cursor-pointer active:bg-grayColor transition-all ease-in py-1 hover:bg-grayColor"> | ||
| <div className="rounded-md h-[50px] w-[50px] flex justify-center items-center"> | ||
| <img src={icon} alt="" className="w-full rounded-md" /> | ||
| </div> | ||
| <p className="leading-none font-medium text-base capitalize">{name}</p> | ||
| </NavLink> | ||
| ) | ||
| export function SidebarLink({ icon, name, to }: { icon: string; name: string; to: string }) { | ||
| return ( | ||
| <NavLink | ||
| to={to} | ||
| className='flex items-center justify-start gap-3 px-3 cursor-pointer active:bg-grayColor transition-all ease-in py-1 hover:bg-grayColor' | ||
| > | ||
| <div className='rounded-md h-[50px] w-[50px] flex justify-center items-center'> | ||
| <img src={icon} alt='' className='w-full rounded-md' /> | ||
| </div> | ||
| <p className='leading-none font-medium text-base capitalize'>{name}</p> | ||
| </NavLink> | ||
| ); | ||
| } | ||
| export function DesktopNav() { | ||
| return ( | ||
| <div className="bg-blackColor text-whiteColor hidden md:block w-full"> | ||
| <div className="flex justify-center items-center border-whiteColor"> | ||
| <DeskNavLink to="/" name='Plus' /> | ||
| <DeskNavLink to="/" name='Flash Sales' /> | ||
| <DeskNavLink to="/" name='Babies' /> | ||
| <DeskNavLink to="/" name='Fathers' /> | ||
| <DeskNavLink to="/" name='Electronics' /> | ||
| <DeskNavLink to="/" name='Beauty' /> | ||
| <DeskNavLink to="/" name='Sports' /> | ||
| </div> | ||
| </div> | ||
| ) | ||
| return ( | ||
| <div className='bg-blackColor text-whiteColor hidden md:block w-full'> | ||
| <div className='flex justify-center items-center border-whiteColor'> | ||
| <DeskNavLink to='/' name='Plus' /> | ||
| <DeskNavLink to='/' name='Flash Sales' /> | ||
| <DeskNavLink to='/' name='Babies' /> | ||
| <DeskNavLink to='/' name='Fathers' /> | ||
| <DeskNavLink to='/' name='Electronics' /> | ||
| <DeskNavLink to='/' name='Beauty' /> | ||
| <DeskNavLink to='/' name='Sports' /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| function DeskNavLink({ to, name }: { to: string, name: string }) { | ||
| return ( | ||
| <Link to={to} className={`px-5 py-2 cursor-pointer hover:bg-whiteColor hover:text-blackColor transition-all delay-100 ease-linear`}> | ||
| {name} | ||
| </Link> | ||
| ); | ||
| function DeskNavLink({ to, name }: { to: string; name: string }) { | ||
| return ( | ||
| <Link | ||
| to={to} | ||
| className={`px-5 py-2 cursor-pointer hover:bg-whiteColor hover:text-blackColor transition-all delay-100 ease-linear`} | ||
| > | ||
| {name} | ||
| </Link> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| export default function Category() { | ||
| return <div>This is a Category</div>; | ||
| } |
Oops, something went wrong.