Revert "fix bug: search query overlaps search result" (rupali-codes#1293

)

components/Header/Header.tsx

@@ -4,6 +4,7 @@ import { AiOutlineMenu } from 'react-icons/ai'
 import Logo from 'components/logo'
 import { GlobalContext } from 'context/GlobalContext'
 import { ThemeToggler } from '../ThemeToggler/themeToggler'
+import { TopBar } from '../TopBar/TopBar'
 import { SocialMediaIconsList } from 'components/SocialMedia/SocialMediaIconsList'
 
 export const Header: FC<{}> = () => {
@@ -17,6 +18,7 @@ export const Header: FC<{}> = () => {
         </Link>
       </div>
       <div className="bg-base-200 relative h-full grow px-8 dark:bg-gray-900 lg:bg-gray-100 lg:dark:bg-[#101623]">
+        <TopBar className="absolute left-8 hidden h-full md:flex" />
         <div className="absolute right-8 flex h-full gap-4">
           <SocialMediaIconsList className="hidden lg:flex" />
           <ThemeToggler />

components/TopBar/CategoryDescriptions.ts

@@ -0,0 +1,72 @@
+type CategoryDescriptions = {
+  [key: string]: string
+}
+
+const categoryDescriptions: CategoryDescriptions = {
+  //frontend
+  accessibility: 'Accessibility category description',
+  animations: 'Animations category description',
+  colors: 'Colors category description',
+  'design inspiration': 'Design Inspiration category description',
+  fonts: 'Fonts category description',
+  icons: 'Icons category description',
+  illustrations: 'Illustrations category description',
+  images: 'Images category description',
+  onlineCodeEditors: 'Online Code Editors category description',
+  react: 'React category description',
+  'themes templates': 'Themes and Templates category description',
+  'ui generator': 'UI Generators category description',
+  videos: 'Videos Category description',
+  //backend
+  architecture: 'Architecture category description',
+  authentication: 'Authentication category description',
+  caching: 'Caching category description',
+  database: 'Database category description',
+  security: 'Security category description',
+  'system design': 'System Design category description',
+  testing: 'Testing category description',
+  validation: 'Validation category description',
+  // languages
+  'c programming': 'CProgramming category description',
+  csharp: 'csharp category description',
+  golang: 'Golang category description',
+  javascript: 'JavaScript category description',
+  python: 'Python category description',
+  ruby: 'ruby category description',
+  typescript: 'typescript category description',
+  // ml & ai
+  'data science': 'Data Science category description',
+  'deep learning': 'Deep Learning category description',
+  'machine-learning': 'ML category description',
+  // Open-source
+  openSourceBlogs: 'Open Source Blogs category description',
+  openSourceProjects: 'Open Source Projects category description',
+  openSourceTools: 'Open Source Tools category description',
+  // resources
+  blogs: 'Blogs category description',
+  ebook: 'E-Book category description',
+  hosting: 'Hosting category description',
+  officialdocs: 'Official Docs category description',
+  'project ideas': 'Project category description',
+  // youtube
+  android: 'Android category description',
+  'competitive programming': 'Competitive Programming category description',
+  'computer science': 'Computer Science category description',
+  css: 'CSS category description',
+  'data structures': 'Data Structures category description',
+  fintech: 'Fintech category description',
+  'game development': 'Game Development category description',
+  'machine learning': 'Machine Learning category description',
+  tensorflow: 'TensorFlow category description',
+  youtubeTesting: 'Youtube Testing category description',
+  'web development': 'Web Development category description',
+  'web3 metaverse': 'Web3 Metaverse category description',
+  // other
+  communities: 'Communities category description',
+  devtools: 'DevTools category description',
+  github: 'GitHub category description',
+  'other resources': 'Other Resources category description',
+  podcasts: 'Podcasts category description',
+}
+
+export default categoryDescriptions

components/TopBar/TopBar.tsx

@@ -0,0 +1,52 @@
+import { FC, 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'
+
+export const TopBar: FC<{ className?: string | undefined }> = (props) => {
+  const { className } = props
+  const [currentCategory, setCurrentCategory] = useState<ICategoryData | null>(
+    null
+  )
+  const router = useRouter()
+  const category = router.asPath.replace('/', '')
+  const categoryName = category.split('-').join(' ')
+
+  if (router.pathname.length === 1) {
+    return null
+  }
+
+  const handleCardClick = () => {
+    const description = categoryDescriptions[categoryName] || ''
+    const categoryInfo = {
+      name: categoryName,
+      description,
+    }
+    setCurrentCategory(categoryInfo)
+  }
+
+  const removeCurrentCard = () => {
+    setCurrentCategory(null)
+  }
+
+  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="flex uppercase text-gray-900 dark:text-gray-100">
+        {category.split('-').join(' ')}
+        <FaInfoCircle
+          className="ml-4 mt-2 text-sm cursor-pointer"
+          onClick={handleCardClick}
+        />
+        <PopupDesc
+          currentCategory={currentCategory}
+          onClose={removeCurrentCard}
+        />
+      </span>
+    </div>
+  )
+}

components/TopBar/index.ts

@@ -0,0 +1 @@
+import { TopBar } from './TopBar'

pages/[subcategory]/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { TopBar } from 'components/TopBar/TopBar'
 import { useRouter } from 'next/router'
 import Head from 'next/head'
 import useFilterDB from 'hooks/useFilterDB'
@@ -26,6 +27,7 @@ const SubCategory = () => {
         <title>{title}</title>
         <meta name="theme-color" content="#202c46" />
       </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" />
       <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/search.tsx

@@ -3,6 +3,7 @@ import React, { useEffect } from 'react'
 import { useRouter } from 'next/router'
 
 import CardsList from 'components/Cards/CardsList'
+import { TopBar } from 'components/TopBar/TopBar'
 import ComingSoon from 'components/NewIssue/NewIssue'
 
 import useFilterSearch from 'hooks/useFilterSearch'
@@ -35,6 +36,7 @@ const Search = () => {
         <title>{title}</title>
         <meta name="theme-color" content="#202c46" />
       </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" />
       <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>