Merge pull request #1507 from rupali-codes/restructure

components/BackToTop/BackToTopButton.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { useTransition } from 'react-transition-state'
 import { FaArrowUp } from 'react-icons/fa'
 import { SCROLL_LIMIT } from 'app/constants'
+import { Tooltip } from 'react-tooltip'
 
 export const BackToTopButton = () => {
   const [scrollY, setScrollY] = useState(0)
@@ -51,10 +52,13 @@ export const BackToTopButton = () => {
       <button
         className={buttonClasses}
         onClick={handleClick}
-        title="Back to top"
+        data-tooltip-id="btn-tooltip"
+        data-tooltip-content="Back to Top"
+        data-tooltip-place="top"
       >
         <FaArrowUp className="group-hover:text-theme-secondary" />
       </button>
+        <Tooltip id="btn-tooltip" style={{ backgroundColor: '#8b5cf6', fontSize: '13px', paddingLeft: '6px', paddingRight: '6px', paddingTop: '2px', paddingBottom: '2px' }} />
       <span className="absolute left-1/2 top-1/2 -z-10 hidden -translate-x-1/2 -translate-y-1/2 rotate-0 text-2xl transition-all duration-100 ease-in-out group-hover:ml-8 group-hover:block group-hover:rotate-45">
         👾
       </span>

components/Cards/Card.tsx

@@ -1,14 +1,14 @@
 import { FC, useState, useRef, useEffect } from 'react'
 import { BsBoxArrowUpRight } from 'react-icons/bs'
-import { CopyToClipboard } from 'components/CopyToClipboard'
-import { Share } from 'components/Share'
+import { CopyToClipboard } from 'components/CopyToClipboard/CopyToClipboard'
+import Share from 'components/Share/Share'
 import type { IData } from 'types'
 
 interface CardProps {
   data: IData
 }
 
-const Card: FC<CardProps> = ({ data }) => {
+export const Card: FC<CardProps> = ({ data }) => {
   const { name, description, url } = data
   const descriptionRef = useRef<HTMLParagraphElement>(null)
   const [isOverflow, setIsOverflow] = useState(false)
@@ -25,7 +25,7 @@ const Card: FC<CardProps> = ({ data }) => {
   return (
     <article className="z-10 h-full w-full rounded-3xl border border-dashed border-theme-secondary dark:border-theme-primary bg-[rgba(255,255,255,0.3)] shadow-md dark:bg-dark dark:text-text-primary dark:shadow-sm">
       <div className="card-body">
-        <header className="flex justify-between items-center">
+        <header className="flex justify-between items-center gap-2">
           <h2
             className="cursor-default md:truncate ... text-xl text-theme-secondary dark:text-theme-primary"
             title={name}
@@ -69,4 +69,3 @@ const Card: FC<CardProps> = ({ data }) => {
   )
 }
 
-export default Card

components/Cards/CardsList.tsx

@@ -1,6 +1,6 @@
 import { FC, useState } from 'react'
 import { BackToTopButton } from '../BackToTop/BackToTopButton'
-import Popup from 'components/popup'
+import { PopupInfo } from 'components/popup/popupInfo'
 import CardsListItem from './CardsListItem'
 import type { IData } from 'types'
 
@@ -29,7 +29,7 @@ const CardsList: FC<{ cards: IData[] }> = ({ cards }) => {
         ))}
       </ul>
       <BackToTopButton />
-      <Popup currentCard={currentCard} onClose={removeCurrentCard} />
+      <PopupInfo currentCard={currentCard} onClose={removeCurrentCard} />
     </>
   )
 }

components/Cards/CardsListItem.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import Card from './Card'
+import { Card } from './Card'
 import type { IData } from 'types'
 
 const CardsListItem: FC<{ data: IData; onClick: () => void }> = (props) => {

components/CopyToClipboard/CopyToClipboard.tsx

@@ -1,14 +1,14 @@
 import useCopyToClipboard from 'hooks/useCopyToClipboard'
-import React, { useState } from 'react'
+import React from 'react'
 import { FaRegCopy } from 'react-icons/fa'
+import { Tooltip } from 'react-tooltip'
 
 type CopyToClipboardProps = {
   url: string
 }
 
 export const CopyToClipboard = ({ url }: CopyToClipboardProps): JSX.Element => {
   const [copyToClipboard, { success }] = useCopyToClipboard()
-  const [isHovering, setIsHovering] = useState(false)
 
   function handleCopy(e: React.MouseEvent<SVGElement, MouseEvent>) {
     e.stopPropagation()
@@ -17,34 +17,17 @@ export const CopyToClipboard = ({ url }: CopyToClipboardProps): JSX.Element => {
 
   return (
     <div
-      className="dropdown dropdown-left dropdown-hover"
-      onMouseEnter={() => setIsHovering(true)}
-      onMouseLeave={() => setIsHovering(false)}
-    >
+      className="dropdown dropdown-left dropdown-hover">
       <div style={{ position: 'relative' }}>
-        <FaRegCopy
+      <button data-tooltip-id="copy-tooltip" data-tooltip-content={success ? 'Copied!' : 'Copy'} data-tooltip-place="top">
+      <FaRegCopy
           size={'1.3rem'}
           className="text-theme-primary cursor-pointer"
-          title="Copy link"
           onClick={(e) => handleCopy(e)}
         />
-        {isHovering && (
-          <p
-            className="bg-theme-secondary text-white text-sm rounded-lg px-3 py-1 cursor-default"
-            style={{
-              position: 'absolute',
-              top: '-2rem', // Adjust this value to position the text above the icon
-              left: '50%',
-              transform: 'translateX(-50%)',
-              zIndex: 1,
-            }}
-          >
-            {success ? 'Copied!' : 'Copy'}
-          </p>
-        )}
+        </button>
+      <Tooltip id='copy-tooltip' style={{ backgroundColor: '#8b5cf6', fontSize: '13px', paddingLeft: '6px', paddingRight: '6px', paddingTop: '2px', paddingBottom: '2px' }} />
       </div>
     </div>
   )
 }
-
-export default CopyToClipboard

components/Share/Share.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { FaShareAlt } from 'react-icons/fa'
+import { FiShare2 } from 'react-icons/fi'
+import { Tooltip } from 'react-tooltip'
 
 type ShareProps = {
   url: string
@@ -16,7 +17,6 @@ export const Share: React.FC<ShareProps> = ({ url, title }) => {
           title: title,
           url: url,
         })
-        console.log('Share was successful.')
       } catch (error) {
         console.error('Error sharing:', error)
       }
@@ -33,15 +33,16 @@ export const Share: React.FC<ShareProps> = ({ url, title }) => {
         position: 'relative',
         display: 'inline-block',
       }}
-      onMouseEnter={() => setShowShareOptions(true)}
-      onMouseLeave={() => setShowShareOptions(false)}
     >
-      <FaShareAlt
+      <button data-tooltip-id="share-tooltip" data-tooltip-content="Share" data-tooltip-place="bottom">
+      <FiShare2
         size={'1.2rem'}
         className="text-theme-primary cursor-pointer"
-        title="Share link"
         onClick={handleShare}
       />
+        </button>
+      <Tooltip id='share-tooltip' style={{ backgroundColor: '#8b5cf6', fontSize: '13px', paddingLeft: '6px', paddingRight: '6px', paddingTop: '2px', paddingBottom: '2px' }} />
+
       {showShareOptions && (
         <p
           className="bg-theme-secondary text-white text-sm rounded-lg px-3 py-1"

components/SideNavbar/SideNavbarBody.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { Searchbar } from '../Searchbar'
+import { Searchbar } from 'components/Searchbar/Searchbar'
 import useSidebarSearch from 'hooks/useSidebarSearch'
 import classNames from 'classnames'
 import { useTheme } from 'next-themes'

components/TopBar/TopBar.tsx

@@ -4,6 +4,7 @@ import { FaSlackHash, FaInfoCircle } from 'react-icons/fa'
 import PopupDesc from 'components/popup/popupCategoryDesc'
 import { ICategoryData } from 'types'
 import categoryDescriptions from './CategoryDescriptions'
+import { Tooltip } from 'react-tooltip'
 
 export const TopBar: FC<{ className?: string | undefined }> = (props) => {
   const { className } = props
@@ -36,17 +37,24 @@ export const TopBar: FC<{ className?: string | undefined }> = (props) => {
       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">
+      <span className="text-gray-900 dark:text-gray-100 uppercase">
         {category.split('-').join(' ')}
-        <FaInfoCircle
-          className="ml-4 mt-2 text-sm cursor-pointer"
-          onClick={handleCardClick}
-        />
+      </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}
         />
-      </span>
     </div>
   )
 }

components/popup/index.tsx → components/popup/popupInfo.tsx

@@ -4,9 +4,9 @@ import { BsGlobe } from 'react-icons/bs'
 import { Backdrop } from 'components/Backdrop/Backdrop'
 import { createPortal } from 'react-dom'
 import useDelayUnmount from 'hooks/useDelayUnmount'
-import { CopyToClipboard } from 'components/CopyToClipboard'
+import { CopyToClipboard } from 'components/CopyToClipboard/CopyToClipboard'
 
-const Popup: React.FC<{
+export const PopupInfo: React.FC<{
   currentCard: IData | null
   onClose: () => void
 }> = ({ currentCard, onClose }) => {
@@ -73,4 +73,3 @@ const Popup: React.FC<{
   )
 }
 
-export default Popup

database/machine_learning/data-science.json → database/artificial_intelligence/data-science.json

@@ -3,28 +3,28 @@
     "name": "KDnuggets",
     "description": "KDnuggets is a popular data science website that provides news, tutorials, and resources.",
     "url": "https://www.kdnuggets.com/",
-    "category": "ml & ai",
+    "category": "artificial intelligence",
     "subcategory": "data-science"
   },
   {
     "name": "Datacamp Tutorials",
     "description": "Provides tutorials for aspirational full stack Data Scientists.",
     "url": "https://www.datacamp.com/tutorial",
-    "category": "ml & ai",
+    "category": "artificial intelligence",
     "subcategory": "data-science"
   },
   {
     "name": "Analytics Vidhya",
     "description": "Analytics Vidhya is a platform for data science enthusiasts, offering tutorials, competitions, and community support.",
     "url": "https://www.analyticsvidhya.com/",
-    "category": "ml & ai",
+    "category": "artificial intelligence",
     "subcategory": "data-science"
   },
   {
     "name": "Kaggle",
     "description": "Kaggle is an online platform that hosts data science competitions. It's also where data scientists and machine learning practitioners worldwide come and network with each other.",
     "url": "https://www.kaggle.com/",
-    "category": "ml & ai",
+    "category": "artificial intelligence",
     "subcategory": "data-science"
   }
 ]

database/machine_learning/deep-learning.json → database/artificial_intelligence/deep-learning.json

@@ -3,7 +3,7 @@
     "name": "Distill",
     "description": "A platform that focuses on explaining and visualizing complex concepts in deep learning, providing in-depth articles, tutorials, and interactive visualizations to help understand and explore deep learning techniques.",
     "url": "https://distill.pub/",
-    "category": "ml & ai",
+    "category": "artificial intelligence",
     "subcategory": "deep-learning"
   }
 ]

database/data.ts

@@ -49,21 +49,6 @@ export const sidebarData: ISidebar[] = [
       { name: 'videos', url: '/videos', resources: DB.videos },
     ],
   },
-  {
-    category: 'devops',
-    subcategory: [
-      { name: 'CI/CD', url: '/cicd', resources: DB.cicd },
-      { name: 'DevOps Life Cycle', url: '/devopsLifecycle', resources: DB.devopsLifecycle },
-      { name: 'DevOps Methodologies', url: '/devopsMethodologies', resources: DB.devopsMethodologies },
-      { name: 'docker', url: '/docker', resources: DB.docker },
-      {
-        name: 'kubernetes',
-        url: '/kubernetes',
-        resources: DB.kubernetes,
-      },
-      { name: 'microservices', url: '/microservices', resources: DB.microservices },
-    ],
-  },
   {
     category: 'backend',
     subcategory: [
@@ -136,36 +121,39 @@ export const sidebarData: ISidebar[] = [
     ],
   },
   {
-    category: 'machine learning',
+    category: 'devops',
     subcategory: [
+      { name: 'CI/CD', url: '/cicd', resources: DB.cicd },
+      { name: 'DevOps Life Cycle', url: '/devopsLifecycle', resources: DB.devopsLifecycle },
+      { name: 'DevOps Methodologies', url: '/devopsMethodologies', resources: DB.devopsMethodologies },
+      { name: 'docker', url: '/docker', resources: DB.docker },
       {
-        name: 'machine learning',
-        url: '/machine-learning',
-        resources: DB.machineLearning,
-      },
-      { name: 'data science', url: '/data-science', resources: DB.dataScience },
-      {
-        name: 'deep learning',
-        url: '/deep-learning',
-        resources: DB.deepLearning,
+        name: 'kubernetes',
+        url: '/kubernetes',
+        resources: DB.kubernetes,
       },
+      { name: 'microservices', url: '/microservices', resources: DB.microservices },
     ],
   },
   {
     category: 'artificial intelligence',
     subcategory: [
       {
-        name: 'Artificial Int.',
+        name: 'artificial intelligence',
         url: '/artificial-intelligence',
         resources: DB.artificialIntelligence,
       },
-    ],
-  },
-  {
-    category: 'internet of things',
-    subcategory: [
-      { name: 'coursera', url: '/coursera', resources: DB.coursera },
-      { name: 'raspberry', url: '/raspberry', resources: DB.raspberrypi },
+      {
+        name: 'machine learning',
+        url: '/machine-learning',
+        resources: DB.machineLearning,
+      },
+      { name: 'data science', url: '/data-science', resources: DB.dataScience },
+      {
+        name: 'deep learning',
+        url: '/deep-learning',
+        resources: DB.deepLearning,
+      },
     ],
   },
   {
@@ -182,6 +170,13 @@ export const sidebarData: ISidebar[] = [
       { name: 'IBM cloud', url: '/ibm', resources: DB.ibm },
     ],
   },
+  {
+    category: 'internet of things',
+    subcategory: [
+      { name: 'coursera', url: '/coursera', resources: DB.coursera },
+      { name: 'raspberry', url: '/raspberry', resources: DB.raspberrypi },
+    ],
+  },
   {
     category: 'resources',
     subcategory: [