From 25793d90870df33abd9630c5dd6b49a25a18beda Mon Sep 17 00:00:00 2001 From: Anmol Baranwal Date: Sat, 23 Mar 2024 00:39:00 +0530 Subject: [PATCH 1/7] feat: add icons component and improve codebase structure --- assets/icons/HeartIcon.tsx | 20 - assets/icons/StarIcon.tsx | 27 -- assets/icons/svg/AddIcon.svg | 23 - assets/icons/svg/ArrowIcon.svg | 25 - assets/icons/svg/HomeIcon.svg | 12 - assets/icons/svg/MessageIcon.svg | 30 -- assets/icons/svg/angle-down.svg | 3 - assets/icons/svg/discord.svg | 3 - assets/icons/svg/github.svg | 3 - assets/icons/svg/heart.svg | 3 - assets/icons/svg/linkedin.svg | 3 - assets/icons/svg/moon.svg | 3 - assets/icons/svg/nav/home-active.svg | 3 - assets/icons/svg/nav/home-inactive.svg | 4 - assets/icons/svg/nav/save-active.svg | 3 - assets/icons/svg/nav/save-inactive.svg | 3 - assets/icons/svg/nav/search-active.svg | 4 - assets/icons/svg/nav/search-inactive.svg | 4 - assets/icons/svg/nav/team-active.svg | 3 - assets/icons/svg/nav/team-inactive.svg | 8 - assets/icons/svg/question-mark.svg | 4 - assets/icons/svg/search-icon.svg | 3 - assets/icons/svg/search.svg | 3 - assets/icons/svg/starIcon.svg | 6 - assets/icons/svg/sun.svg | 4 - assets/icons/svg/x.svg | 3 - assets/{icons/svg => }/logo.svg | 0 components/Breadcrumbs/index.tsx | 7 +- components/Header/Header.tsx | 58 +-- .../MobileBottomNav/MobileBottomNav.tsx | 27 +- components/NotFound/NotFound.tsx | 35 +- components/Searchbar/Searchbar.tsx | 4 +- components/SideNavbar/SideNavbarCategory.tsx | 6 +- components/Sidebar/Sidebar.tsx | 10 +- components/ThemeToggler/themeToggler.tsx | 12 +- components/TopBar/TopBar.tsx | 16 +- components/icons.tsx | 434 ++++++++++++++++++ pages/[category]/index.tsx | 12 +- pages/contributors.tsx | 29 +- pages/index.tsx | 69 +-- pages/search.tsx | 1 + 41 files changed, 567 insertions(+), 363 deletions(-) delete mode 100644 assets/icons/HeartIcon.tsx delete mode 100644 assets/icons/StarIcon.tsx delete mode 100644 assets/icons/svg/AddIcon.svg delete mode 100644 assets/icons/svg/ArrowIcon.svg delete mode 100644 assets/icons/svg/HomeIcon.svg delete mode 100644 assets/icons/svg/MessageIcon.svg delete mode 100644 assets/icons/svg/angle-down.svg delete mode 100644 assets/icons/svg/discord.svg delete mode 100644 assets/icons/svg/github.svg delete mode 100644 assets/icons/svg/heart.svg delete mode 100644 assets/icons/svg/linkedin.svg delete mode 100644 assets/icons/svg/moon.svg delete mode 100644 assets/icons/svg/nav/home-active.svg delete mode 100644 assets/icons/svg/nav/home-inactive.svg delete mode 100644 assets/icons/svg/nav/save-active.svg delete mode 100644 assets/icons/svg/nav/save-inactive.svg delete mode 100644 assets/icons/svg/nav/search-active.svg delete mode 100644 assets/icons/svg/nav/search-inactive.svg delete mode 100644 assets/icons/svg/nav/team-active.svg delete mode 100644 assets/icons/svg/nav/team-inactive.svg delete mode 100644 assets/icons/svg/question-mark.svg delete mode 100644 assets/icons/svg/search-icon.svg delete mode 100644 assets/icons/svg/search.svg delete mode 100644 assets/icons/svg/starIcon.svg delete mode 100644 assets/icons/svg/sun.svg delete mode 100644 assets/icons/svg/x.svg rename assets/{icons/svg => }/logo.svg (100%) create mode 100644 components/icons.tsx diff --git a/assets/icons/HeartIcon.tsx b/assets/icons/HeartIcon.tsx deleted file mode 100644 index 5327665c2..000000000 --- a/assets/icons/HeartIcon.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react' - -function HeartIcon() { - return ( - - - - ) -} - -export default HeartIcon diff --git a/assets/icons/StarIcon.tsx b/assets/icons/StarIcon.tsx deleted file mode 100644 index eac8edae4..000000000 --- a/assets/icons/StarIcon.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react' - -function StarIcon() { - return ( - - - - - ) -} - -export default StarIcon diff --git a/assets/icons/svg/AddIcon.svg b/assets/icons/svg/AddIcon.svg deleted file mode 100644 index d01ac7fb5..000000000 --- a/assets/icons/svg/AddIcon.svg +++ /dev/null @@ -1,23 +0,0 @@ - - - - diff --git a/assets/icons/svg/ArrowIcon.svg b/assets/icons/svg/ArrowIcon.svg deleted file mode 100644 index 25a2df777..000000000 --- a/assets/icons/svg/ArrowIcon.svg +++ /dev/null @@ -1,25 +0,0 @@ - - - - \ No newline at end of file diff --git a/assets/icons/svg/HomeIcon.svg b/assets/icons/svg/HomeIcon.svg deleted file mode 100644 index 7f29ae8db..000000000 --- a/assets/icons/svg/HomeIcon.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - \ No newline at end of file diff --git a/assets/icons/svg/MessageIcon.svg b/assets/icons/svg/MessageIcon.svg deleted file mode 100644 index b12b6b8fb..000000000 --- a/assets/icons/svg/MessageIcon.svg +++ /dev/null @@ -1,30 +0,0 @@ - - - - - \ No newline at end of file diff --git a/assets/icons/svg/angle-down.svg b/assets/icons/svg/angle-down.svg deleted file mode 100644 index 1f2051c9c..000000000 --- a/assets/icons/svg/angle-down.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/assets/icons/svg/discord.svg b/assets/icons/svg/discord.svg deleted file mode 100644 index 49d7a8436..000000000 --- a/assets/icons/svg/discord.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/assets/icons/svg/github.svg b/assets/icons/svg/github.svg deleted file mode 100644 index 7a2a4767c..000000000 --- a/assets/icons/svg/github.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/assets/icons/svg/heart.svg b/assets/icons/svg/heart.svg deleted file mode 100644 index ba2d42616..000000000 --- a/assets/icons/svg/heart.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/assets/icons/svg/linkedin.svg b/assets/icons/svg/linkedin.svg deleted file mode 100644 index 625080f23..000000000 --- a/assets/icons/svg/linkedin.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/assets/icons/svg/moon.svg b/assets/icons/svg/moon.svg deleted file mode 100644 index e37a13dc0..000000000 --- a/assets/icons/svg/moon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/assets/icons/svg/nav/home-active.svg b/assets/icons/svg/nav/home-active.svg deleted file mode 100644 index 2d06d35e8..000000000 --- a/assets/icons/svg/nav/home-active.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/assets/icons/svg/nav/home-inactive.svg b/assets/icons/svg/nav/home-inactive.svg deleted file mode 100644 index 1afbff998..000000000 --- a/assets/icons/svg/nav/home-inactive.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/assets/icons/svg/nav/save-active.svg b/assets/icons/svg/nav/save-active.svg deleted file mode 100644 index 73d8c32df..000000000 --- a/assets/icons/svg/nav/save-active.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/assets/icons/svg/nav/save-inactive.svg b/assets/icons/svg/nav/save-inactive.svg deleted file mode 100644 index a731e233f..000000000 --- a/assets/icons/svg/nav/save-inactive.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/assets/icons/svg/nav/search-active.svg b/assets/icons/svg/nav/search-active.svg deleted file mode 100644 index 1f64c1ff9..000000000 --- a/assets/icons/svg/nav/search-active.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/assets/icons/svg/nav/search-inactive.svg b/assets/icons/svg/nav/search-inactive.svg deleted file mode 100644 index b57d9c8d7..000000000 --- a/assets/icons/svg/nav/search-inactive.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/assets/icons/svg/nav/team-active.svg b/assets/icons/svg/nav/team-active.svg deleted file mode 100644 index 2345b5778..000000000 --- a/assets/icons/svg/nav/team-active.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/assets/icons/svg/nav/team-inactive.svg b/assets/icons/svg/nav/team-inactive.svg deleted file mode 100644 index a2ae6d885..000000000 --- a/assets/icons/svg/nav/team-inactive.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/assets/icons/svg/question-mark.svg b/assets/icons/svg/question-mark.svg deleted file mode 100644 index 03c9503d5..000000000 --- a/assets/icons/svg/question-mark.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/assets/icons/svg/search-icon.svg b/assets/icons/svg/search-icon.svg deleted file mode 100644 index 0f1921ee1..000000000 --- a/assets/icons/svg/search-icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/assets/icons/svg/search.svg b/assets/icons/svg/search.svg deleted file mode 100644 index b3b41b2b4..000000000 --- a/assets/icons/svg/search.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/assets/icons/svg/starIcon.svg b/assets/icons/svg/starIcon.svg deleted file mode 100644 index 8aa546250..000000000 --- a/assets/icons/svg/starIcon.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/assets/icons/svg/sun.svg b/assets/icons/svg/sun.svg deleted file mode 100644 index 15be44d0c..000000000 --- a/assets/icons/svg/sun.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/assets/icons/svg/x.svg b/assets/icons/svg/x.svg deleted file mode 100644 index d5711cacf..000000000 --- a/assets/icons/svg/x.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/assets/icons/svg/logo.svg b/assets/logo.svg similarity index 100% rename from assets/icons/svg/logo.svg rename to assets/logo.svg diff --git a/components/Breadcrumbs/index.tsx b/components/Breadcrumbs/index.tsx index 1a9831d41..418977bb1 100644 --- a/components/Breadcrumbs/index.tsx +++ b/components/Breadcrumbs/index.tsx @@ -1,6 +1,5 @@ -import HomeIcon from 'assets/icons/svg/HomeIcon.svg' import Link from 'next/link' -import { IoChevronBack } from 'react-icons/io5' +import { Icons } from 'components/icons' interface ComponentProps { sections: { name: string; url: string }[] @@ -13,7 +12,7 @@ const BreadCrumbs: React.FC = ({ sections }) => { href={`/`} className="flex gap-x-2 bg-theme-quinary bg-opacity-20 text-text-primary-light dark:text-text-quaternary text-lg py-0.5 px-2.5 rounded-lg cursor-pointer" > - +
Home
@@ -34,7 +33,7 @@ const BreadCrumbs: React.FC = ({ sections }) => { href={`/`} className="flex gap-x-2 text-text-quaternary text-lg py-0.5 rounded-lg cursor-pointer my-auto capitalize" > - +
{sections[0].name?.split('-').join(' ')} diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx index 756070299..228d20944 100644 --- a/components/Header/Header.tsx +++ b/components/Header/Header.tsx @@ -6,43 +6,35 @@ import { useRouter } from 'next/router' import { ThemeToggler } from 'components/ThemeToggler/themeToggler' import Button from 'components/Button' -import Logo from 'assets/icons/svg/logo.svg' -import DiscordIcon from 'assets/icons/svg/discord.svg' -import GithubIcon from 'assets/icons/svg/github.svg' -import LinkedinIcon from 'assets/icons/svg/linkedin.svg' -import XIcon from 'assets/icons/svg/x.svg' -import HeartIcon from 'assets/icons/svg/heart.svg' -import SaveInActiveIcon from 'assets/icons/svg/nav/save-inactive.svg' -import SaveActiveIcon from 'assets/icons/svg/nav/save-active.svg' -import TeamInActiveIcon from 'assets/icons/svg/nav/team-inactive.svg' -import TeamActiveIcon from 'assets/icons/svg/nav/team-active.svg' +import Logo from 'assets/logo.svg' +import { Icons } from 'components/icons' export const Header: FC = () => { const router = useRouter() const iconClass = - 'fill-zinc-600 group-hover:fill-primary dark:fill-zinc-400 dark:group-hover:fill-slate-300' + 'text-zinc-600 group-hover:text-primary dark:text-zinc-400 dark:group-hover:text-slate-300 h-6 w-6' const socialIcons = [ { - icon: , + icon: , title: 'X (Twitter)', href: 'https://twitter.com/linkshubdotdev', ariaLabel: 'Follow us on X(Twitter)', }, { - icon: , + icon: , title: 'Linkedin', href: 'https://www.linkedin.com/company/linkshub-dev', ariaLabel: 'Follow us on Linkedin', }, { - icon: , + icon: , title: 'Discord', href: 'https://discord.com/invite/NvK67YnJX5', ariaLabel: 'Join the Community', }, { - icon: , + icon: , title: 'Github', href: 'https://github.com/rupali-codes/LinksHub', ariaLabel: 'Explore on GitHub', @@ -51,19 +43,19 @@ export const Header: FC = () => { ] const inActiveIconCls = 'stroke-gray-400' - const activeIconCls = 'fill-primary dark:fill-white' + const activeIconCls = 'text-primary dark:text-white' const navLinks = [ { - inActiveIcon: , - activeIcon: , + inActiveIcon: , + activeIcon: , label: 'Saved', href: '/saved', isDisabled: true, }, { - inActiveIcon: , - activeIcon: , + inActiveIcon: , + activeIcon: , label: 'Our Team', href: '/contributors', isDisabled: false, @@ -81,18 +73,18 @@ export const Header: FC = () => { return ( <>
  • - - - {isActive ? activeIcon : inActiveIcon} - - {label} - -
    • + + + {isActive ? activeIcon : inActiveIcon} + + {label} + + ) }) @@ -133,7 +125,7 @@ export const Header: FC = () => {
    diff --git a/components/Searchbar/Searchbar.tsx b/components/Searchbar/Searchbar.tsx index 8a2874349..7582b9acd 100644 --- a/components/Searchbar/Searchbar.tsx +++ b/components/Searchbar/Searchbar.tsx @@ -7,7 +7,7 @@ const ShortcutKey = dynamic(() => import('./ShortcutKey'), { ssr: false }) import { SearchbarSuggestions } from './SearchbarSuggestions' import { ErrorMessage } from 'components/ErrorMessage' -import SearchIcon from 'assets/icons/svg/search.svg' +import { Icons } from 'components/icons' import { SubCategories, subcategoryArray } from '../../types' import { SearchbarAction } from './SearchbarReducer' @@ -132,7 +132,7 @@ export const Searchbar: React.FC = ({ required /> - + diff --git a/components/SideNavbar/SideNavbarCategory.tsx b/components/SideNavbar/SideNavbarCategory.tsx index 780e80c8e..45551d702 100644 --- a/components/SideNavbar/SideNavbarCategory.tsx +++ b/components/SideNavbar/SideNavbarCategory.tsx @@ -7,7 +7,7 @@ import { SideNavbarElement } from './SideNavbarElement' import useOnClickOutside from 'hooks/useOnClickOutside' import type { ISidebar } from '../../types' -import AngleIcon from 'assets/icons/svg/angle-down.svg' +import { Icons } from 'components/icons' export const SideNavbarCategory: FC<{ categoryData: ISidebar @@ -54,10 +54,10 @@ export const SideNavbarCategory: FC<{ > {category.split('-').join(' ')} -
    { const inputRef: React.RefObject = useRef(null) useSearchShortcut({ inputRef }) @@ -32,11 +32,11 @@ const Sidebar: FC = () => {
    ) diff --git a/components/ThemeToggler/themeToggler.tsx b/components/ThemeToggler/themeToggler.tsx index 70aa93b08..397220566 100644 --- a/components/ThemeToggler/themeToggler.tsx +++ b/components/ThemeToggler/themeToggler.tsx @@ -1,10 +1,8 @@ import { useState, useEffect } from 'react' import { useTheme } from 'next-themes' -import SunIcon from 'assets/icons/svg/sun.svg' -import MoonIcon from 'assets/icons/svg/moon.svg' - import { Helmet, HelmetProvider } from 'react-helmet-async' +import { Icons } from 'components/icons' export function ThemeToggler() { const { resolvedTheme, setTheme } = useTheme() @@ -42,14 +40,14 @@ export function ThemeToggler() { className="group w-[32px] h-[32px] flex items-center justify-center rounded-md hover:bg-slate-100 dark:hover:bg-white dark:hover:bg-opacity-20 transition-colors" > {resolvedTheme === 'dark' ? ( - ) : ( - )} diff --git a/components/TopBar/TopBar.tsx b/components/TopBar/TopBar.tsx index 3d9e102be..abe570eb3 100644 --- a/components/TopBar/TopBar.tsx +++ b/components/TopBar/TopBar.tsx @@ -1,14 +1,12 @@ import { FC } from 'react' import { useRouter } from 'next/router' import { useTheme } from 'next-themes' -import { RxSlash } from 'react-icons/rx' -import HomeIcon from 'assets/icons/svg/HomeIcon.svg' -import { FaInfoCircle } from 'react-icons/fa' -import { IoIosArrowBack } from 'react-icons/io' import categoryDescriptions from './CategoryDescriptions' import { isValidResource, regEx } from './utils' import Link from 'next/link' import CardTooltip from 'components/CardTooltip/CardTooltip' +import { Icons } from 'components/icons' + interface TopBarProps { className?: string } @@ -50,25 +48,25 @@ export const TopBar: FC = ({}) => { href={'/'} className="gap-x-2 items-center bg-[#EDEDED] bg-opacity-20 px-[10px] py-[6px] rounded-md cursor-pointer hidden md:flex" > - +

    Home

    - +

    {capitalizeEachWord(categoryName)}

    - + - +

    {capitalizeEachWord(cleanedCategory)}