fix bug: text overlap in search result

components/Header/Header.tsx

@@ -6,9 +6,11 @@ import { GlobalContext } from 'context/GlobalContext'
 import { ThemeToggler } from '../ThemeToggler/themeToggler'
 import { TopBar } from '../TopBar/TopBar'
 import { SocialMediaIconsList } from 'components/SocialMedia/SocialMediaIconsList'
+import { useResults } from 'hooks/ResultsContext'
 
 export const Header: FC = () => {
   const { toggleNav } = useContext(GlobalContext)
+  const { results } = useResults()
 
   return (
     <header className="fixed top-0 left-0 z-30 row-start-1 row-end-2 flex h-[76px] w-screen items-center justify-between bg-light-primary dark:bg-dark">
@@ -18,7 +20,10 @@ export const Header: FC = () => {
         </Link>
       </div>
       <div className="bg-light-primary relative h-full grow px-8 dark:bg-dark lg:dark:bg-dark-primary">
-        <TopBar className="absolute left-8 hidden h-full md:flex" />
+        <TopBar
+          className="absolute left-8 hidden h-full md:flex"
+          results={results}
+        />
         <div className="absolute right-8 flex h-full gap-4">
           <SocialMediaIconsList className="hidden lg:flex" />
           <ThemeToggler />

components/TopBar/TopBar.tsx

@@ -1,19 +1,42 @@
-import { FC, useState } from 'react'
+import { FC, useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 import { FaSlackHash, FaInfoCircle } from 'react-icons/fa'
 import PopupDesc from 'components/popup/popupCategoryDesc'
 import { ICategoryData } from 'types'
 import categoryDescriptions from './CategoryDescriptions'
+import { useResults } from 'hooks/ResultsContext'
 import { Tooltip } from 'react-tooltip'
 
-export const TopBar: FC<{ className?: string | undefined }> = (props) => {
-  const { className } = props
+interface TopBarProps {
+  className?: string
+  results: number
+}
+
+export const TopBar: FC<TopBarProps> = ({ className }) => {
+  const { results } = useResults()
+  const [isSearchFound, setIsSearchFound] = useState(false)
   const [currentCategory, setCurrentCategory] = useState<ICategoryData | null>(
     null
   )
   const router = useRouter()
   const category = router.asPath.replace('/', '')
   const categoryName = category.split('-').join(' ')
+  const regEx = /[ `!@#$%^&*()_+\=\[\]{};':"\\|,.<>\/?~]/
+  const removeString = 'searchquery='
+  const cleanedCategory = category
+    .replace(regEx, '')
+    .split('-')
+    .join(' ')
+    .replace(removeString, '')
+    .replaceAll('+', ' ')
+
+  useEffect(() => {
+    if (results > 0) {
+      setIsSearchFound(true)
+    } else if (results === 0) {
+      setIsSearchFound(false)
+    }
+  }, [results])
 
   if (router.pathname.length === 1) {
     return null
@@ -33,28 +56,78 @@
   }
 
   return (
-    <div
-      className={`flex items-center text-xl dark:text-gray-300 ${className}`}
-    >
-      <FaSlackHash className="mr-2 text-gray-600 dark:text-gray-300" />
-      <span className="text-gray-900 dark:text-gray-100 uppercase">
-        {category.split('-').join(' ')}
-      </span>
-      <button
-          data-tooltip-id="info-tooltip"
-          data-tooltip-content="Description"
-          data-tooltip-place="bottom"
+    <>
+      {regEx.test(category) ? (
+        <div
+          className={`flex items-center text-xl dark:text-gray-300 ${className}`}
+        >
+          <FaSlackHash className="mr-2 text-gray-600 dark:text-gray-300" />
+          <span className="flex uppercase text-gray-900 dark:text-gray-100">
+            {isSearchFound
+              ? `${cleanedCategory}`
+              : `No Results Found`}
+          </span>
+          <button
+            data-tooltip-id="info-tooltip"
+            data-tooltip-content="Description"
+            data-tooltip-place="bottom"
+          >
+            <FaInfoCircle
+              className="ml-4 mt-2 text-sm cursor-pointer hover:text-theme-primary"
+              onClick={handleCardClick}
+            />
+          </button>
+          <Tooltip
+            id="info-tooltip"
+            style={{
+              backgroundColor: '#8b5cf6',
+              fontSize: '13px',
+              paddingLeft: '6px',
+              paddingRight: '6px',
+              paddingTop: '2px',
+              paddingBottom: '2px',
+            }}
+          />
+            <PopupDesc
+              currentCategory={currentCategory}
+              onClose={removeCurrentCard}
+            />
+        </div>
+      ) : (
+        <div
+          className={`flex items-center text-xl dark:text-gray-300 ${className}`}
         >
-          <FaInfoCircle
-            className="ml-4 mt-2 text-sm cursor-pointer hover:text-theme-primary"
-            onClick={handleCardClick}
+          <FaSlackHash className="mr-2 text-gray-600 dark:text-gray-300" />
+          <span className="flex uppercase text-gray-900 dark:text-gray-100">
+            {category.split('-').join(' ')}
+          </span>
+            <button
+            data-tooltip-id="info-tooltip"
+            data-tooltip-content="Description"
+            data-tooltip-place="bottom"
+          >
+            <FaInfoCircle
+              className="ml-4 mt-2 text-sm cursor-pointer hover:text-theme-primary"
+              onClick={handleCardClick}
+            />
+          </button>
+          <Tooltip
+            id="info-tooltip"
+            style={{
+              backgroundColor: '#8b5cf6',
+              fontSize: '13px',
+              paddingLeft: '6px',
+              paddingRight: '6px',
+              paddingTop: '2px',
+              paddingBottom: '2px',
+            }}
           />
-        </button>
-        <Tooltip id="info-tooltip" style={{ backgroundColor: '#8b5cf6', fontSize: '13px', paddingLeft: '6px', paddingRight: '6px', paddingTop: '2px', paddingBottom: '2px' }} />
-        <PopupDesc
-          currentCategory={currentCategory}
-          onClose={removeCurrentCard}
-        />
-    </div>
+            <PopupDesc
+              currentCategory={currentCategory}
+              onClose={removeCurrentCard}
+            />         
+        </div>
+      )}
+    </>
   )
 }

hooks/ResultsContext.tsx

@@ -0,0 +1,28 @@
+import React, { createContext, useContext, useState, ReactNode } from 'react'
+
+interface ResultsContextValue {
+  results: number
+  setResults: React.Dispatch<React.SetStateAction<number>>
+}
+
+const ResultsContext = createContext<ResultsContextValue | null>(null)
+
+export const ResultsProvider: React.FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  const [results, setResults] = useState<number>(-1)
+
+  return (
+    <ResultsContext.Provider value={{ results, setResults }}>
+      {children}
+    </ResultsContext.Provider>
+  )
+}
+
+export const useResults = () => {
+  const context = useContext(ResultsContext)
+  if (!context) {
+    throw new Error('useResults must be used within a ResultsProvider')
+  }
+  return context
+}

pages/[subcategory]/index.tsx

@@ -5,9 +5,11 @@ import Head from 'next/head'
 import useFilterDB from 'hooks/useFilterDB'
 import CardsList from 'components/Cards/CardsList'
 import ComingSoon from 'components/NewIssue/NewIssue'
+import { useResults } from 'hooks/ResultsContext'
 
 const SubCategory = () => {
   const router = useRouter()
+  const { results } = useResults()
   const title = `LinksHub - ${router.asPath
     .charAt(1)
     .toUpperCase()}${router.asPath.slice(2)}`
@@ -32,7 +34,10 @@ const SubCategory = () => {
           content="LinksHub is the ultimate hub of ready-to-use tech resources. Discover free tools and libraries to streamline your development process and build better projects."
         />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <meta name="keywords" content="LinksHub, developers, free resources, tools, software, libraries, frameworks, applications, websites" />
+        <meta
+          name="keywords"
+          content="LinksHub, developers, free resources, tools, software, libraries, frameworks, applications, websites"
+        />
         <meta name="author" content="Rupali Haldiya" />
         <meta name="robots" content="index, follow" />
         <meta name="revisit-after" content="7 days" />
@@ -80,7 +85,10 @@ const SubCategory = () => {
           content="https://discord.com/invite/NvK67YnJX5"
         />
       </Head>
-      <TopBar className="shadow-black-500/50 fixed top-[76px] z-30 flex w-full -translate-x-4 items-center bg-gray-100 px-4 pt-6 pb-4 shadow-xl dark:bg-gray-900 md:hidden" />
+      <TopBar
+        className="shadow-black-500/50 fixed top-[76px] z-30 flex w-full -translate-x-4 items-center bg-gray-100 px-4 pt-6 pb-4 shadow-xl dark:bg-gray-900 md:hidden"
+        results={results}
+      />
       <div className="min-h-[calc(100%-68px)] w-full pt-[85px] pb-4 md:min-h-[calc(100%-76px)] md:px-10 md:pt-10">
         {content}
       </div>

pages/_app.tsx

@@ -4,15 +4,18 @@ import GeneralLayout from 'layouts/GeneralLayout'
 import { GlobalProvider } from 'context/GlobalContext'
 import { Preloader } from 'components/Loader/Preloader'
 import { ThemeProvider } from 'next-themes'
+import { ResultsProvider } from 'hooks/ResultsContext'
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <ThemeProvider defaultTheme="dark">
       <GlobalProvider>
-        <Preloader backgroundColor="bg-violet-800" color="#8b5cf6" size={40}>
-          <GeneralLayout>
-            <Component {...pageProps} />
-          </GeneralLayout>
-        </Preloader>
+        <ResultsProvider>
+          <Preloader backgroundColor="bg-violet-800" color="#8b5cf6" size={40}>
+            <GeneralLayout>
+              <Component {...pageProps} />
+            </GeneralLayout>
+          </Preloader>
+        </ResultsProvider>
       </GlobalProvider>
     </ThemeProvider>
   )

pages/search.tsx

@@ -7,8 +7,10 @@ import { TopBar } from 'components/TopBar/TopBar'
 import ComingSoon from 'components/NewIssue/NewIssue'
 
 import useFilterSearch from 'hooks/useFilterSearch'
+import { useResults } from 'hooks/ResultsContext'
 
 const Search = () => {
+  const { results, setResults } = useResults()
   const router = useRouter()
   const title = `LinksHub - ${router.asPath
     .charAt(1)
@@ -24,6 +26,14 @@ const Search = () => {
 
   const data = filterSearch(query as string)
 
+  useEffect(() => {
+    if (data.length > 0 && data.length !== -1) {
+      setResults(data.length)
+    } else {
+      setResults(0)
+    }
+  }, [data])
+
   if (data.length > 0) {
     content = <CardsList cards={data} />
   } else {
@@ -41,18 +51,18 @@ const Search = () => {
           content="LinksHub is the ultimate hub of ready-to-use tech resources. Discover free tools and libraries to streamline your development process and build better projects."
         />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <meta name="keywords" content="LinksHub, developers, free resources, tools, software, libraries, frameworks, applications, websites" />
+        <meta
+          name="keywords"
+          content="LinksHub, developers, free resources, tools, software, libraries, frameworks, applications, websites"
+        />
         <meta name="author" content="Rupali Haldiya" />
         <meta name="robots" content="index, follow" />
         <meta name="revisit-after" content="7 days" />
 
         {/* Open Graph */}
         <meta property="og:url" content="https://linkshub.dev" />
         <meta property="og:type" content="website" />
-        <meta
-          property="og:title"
-          content={title}
-        />
+        <meta property="og:title" content={title} />
         <meta
           property="og:description"
           content="LinksHub aims to provide developers with access to a wide range of free resources and tools that they can use in their work."
@@ -66,10 +76,7 @@ const Search = () => {
         {/* Twitter */}
         <meta name="twitter:card" content="summary_large_image" />
         <meta property="twitter:url" content="https://linkshub.dev" />
-        <meta
-          property="twitter:title"
-          content={title}
-        />
+        <meta property="twitter:title" content={title} />
         <meta
           property="twitter:description"
           content="LinksHub aims to provide developers with access to a wide range of free resources and tools that they can use in their work."
@@ -89,7 +96,10 @@ const Search = () => {
           content="https://discord.com/invite/NvK67YnJX5"
         />
       </Head>
-      <TopBar className="shadow-black-500/50 fixed top-[76px] z-30 flex w-full -translate-x-4 items-center bg-gray-100 px-4 pt-6 pb-4 shadow-xl dark:bg-gray-900 md:hidden" />
+      <TopBar
+        className="shadow-black-500/50 fixed top-[76px] z-30 flex w-full -translate-x-4 items-center bg-gray-100 px-4 pt-6 pb-4 shadow-xl dark:bg-gray-900 md:hidden"
+        results={results}
+      />
       <div className="min-h-[calc(100%-68px)] w-full pt-[85px] pb-4 md:min-h-[calc(100%-76px)] md:px-10 md:pt-10">
         {content}
       </div>