Merge branch 'rupali-codes:main' into patch-1

components/BackToTop/BackToTopButton.tsx

@@ -36,16 +36,20 @@ export const BackToTopButton = () => {
     })
   }
 
-  return isMounted ? (
-    <div
-      className={`group fixed z-20 bottom-12 right-12 transform transition duration-300${
-        status === 'preEnter' || status === 'exiting'
-          ? ' opacity-0 translate-y-3'
-          : ''
-      }`}
-    >
+  if (!isMounted) {
+    return null
+  }
+
+  const buttonClasses = `focus:animate-button-press rounded-full border border-white bg-violet-600 p-4 text-white shadow-xl duration-300 transition-colors focus:ring group-hover:border-dashed group-hover:border-violet-400 group-hover:bg-white dark:drop-shadow-[5px_5px_8px_rgba(124,58,237,0.25)] dark:group-hover:bg-[#101623] md:border-violet-600 ${
+    status === 'preEnter' || status === 'exiting'
+      ? 'opacity-0 translate-y-3'
+      : ''
+  }`
+
+  return (
+    <div className="group fixed z-20 bottom-12 right-12 transform transition duration-300">
       <button
-        className="focus:animate-button-press rounded-full border border-white bg-violet-600 p-4 text-white shadow-xl duration-300 transition-colors focus:ring group-hover:border-dashed group-hover:border-violet-400 group-hover:bg-white dark:drop-shadow-[5px_5px_8px_rgba(124,58,237,0.25)] dark:group-hover:bg-[#101623] md:border-violet-600"
+        className={buttonClasses}
         onClick={handleClick}
         title="Back to top"
       >
@@ -55,5 +59,5 @@ export const BackToTopButton = () => {
         👾
       </span>
     </div>
-  ) : null
+  )
 }

components/Cards/Card.tsx

@@ -3,16 +3,22 @@ import { BsBoxArrowUpRight } from 'react-icons/bs'
 import { CopyToClipboard } from 'components/CopyToClipboard'
 import type { IData } from 'types'
 
-const Card: FC<{ data: IData }> = (props) => {
-  const { data } = props
+interface CardProps {
+  data: IData
+}
+
+const Card: FC<CardProps> = ({ data }) => {
   const { name, description, url } = data
-  const descriptionRef = useRef(document.createElement('p'))
+  const descriptionRef = useRef<HTMLParagraphElement>(null)
   const [isOverflow, setIsOverflow] = useState(false)
+
   useEffect(() => {
-    setIsOverflow(
-      descriptionRef.current?.scrollHeight >
-        descriptionRef.current?.offsetHeight
-    )
+    if (descriptionRef.current) {
+      setIsOverflow(
+        descriptionRef.current.scrollHeight >
+          descriptionRef.current.offsetHeight
+      )
+    }
   }, [])
 
   return (

components/Cards/CardsList.tsx

@@ -4,8 +4,7 @@ import Popup from 'components/popup'
 import CardsListItem from './CardsListItem'
 import type { IData } from 'types'
 
-const CardsList: FC<{ cards: IData[] }> = (props) => {
-  const { cards } = props
+const CardsList: FC<{ cards: IData[] }> = ({ cards }) => {
   const [currentCard, setCurrentCard] = useState<IData | null>(null)
 
   const getCardId = (item: IData | null) => {
@@ -16,15 +15,11 @@ const CardsList: FC<{ cards: IData[] }> = (props) => {
     setCurrentCard(null)
   }
 
-  cards.sort((a: IData, b: IData) => {
-    if (a.name < b.name) return -1
-    if (a.name > b.name) return 1
-    return 0
-  })
+  cards.sort((a: IData, b: IData) => a.name.localeCompare(b.name))
 
   return (
     <>
-      <ul className={`grid grid-cols-1 md:grid-cols-3 gap-4 justify-items-stretch`}>
+      <ul className="grid grid-cols-1 md:grid-cols-3 gap-4 justify-items-stretch">
         {cards.map((data: IData) => (
           <CardsListItem
             key={data.id}

components/Header/Header.tsx

@@ -13,14 +13,14 @@ export const Header: FC<{}> = () => {
   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">
       <div className="bg-base-200 h-full w-fit flex-none px-6 py-4 dark:bg-gray-900 lg:w-[290px]">
-        <Link href={'/'}>
+        <Link href="/">
           <Logo className="text-3xl" />
         </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'} />
+          <SocialMediaIconsList className="hidden lg:flex" />
           <ThemeToggler />
           <button className="dark:text-gray-300 lg:hidden" onClick={toggleNav}>
             <AiOutlineMenu size={24} />

components/ThemeToggler/themeToggler.tsx

@@ -1,6 +1,5 @@
 import { useState, useEffect } from 'react'
 import { useTheme } from 'next-themes'
-
 import { HiSun, HiMoon } from 'react-icons/hi'
 
 export function ThemeToggler() {
@@ -11,25 +10,28 @@ export function ThemeToggler() {
     setMounted(true)
   }, [])
 
-  if (!mounted) return <></>
+  if (!mounted) {
+    return null
+  }
+
+  const handleThemeToggle = () => {
+    setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')
+  }
+
+  const iconProps = {
+    className: 'hover:text-violet-500 transition duration-300 ease-in-out',
+    size: '1.5rem',
+  }
 
   return (
     <button
-      onClick={() => {
-        setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')
-      }}
+      onClick={handleThemeToggle}
       title={`Toggle dark mode (current state: ${resolvedTheme})`}
     >
       {resolvedTheme === 'dark' ? (
-        <HiSun
-          className="text-gray-200 hover:text-violet-500 transition duration-300 ease-in-out"
-          size={'1.5rem'}
-        />
+        <HiSun {...iconProps} className="text-gray-200" />
       ) : (
-        <HiMoon
-          className="hover:text-violet-500 transition duration-300 ease-in-out"
-          size={'1.5rem'}
-        />
+        <HiMoon {...iconProps} />
       )}
     </button>
   )

database/backend/database.json

@@ -33,5 +33,12 @@
     "url": "https://surrealdb.com/",
     "category": "backend",
     "subcategory": "database"
+  },
+  {
+    "name": "MySQL",
+    "description": "MySQL is an open-source relational database management system widely used for storing and retrieving structured data efficiently.",
+    "url": "https://docs.oracle.com/en-us/iaas/mysql-database/doc/getting-started.html",
+    "category": "backend",
+    "subcategory": "database"
   }
 ]

database/data.ts

@@ -47,8 +47,9 @@ export const sidebarData: ISidebar[] = [
       { name: 'TypeScript', url: '/typescript' },
       { name: 'Ruby', url: '/ruby' },
       { name: 'C Programming', url: '/c-programming' },
-      { name: 'Java', url: '/java' },
-      { name: 'Kotlin', url: '/kotlin' },
+      { name: 'C++ Programming', url: '/cpp-programming' },
+      { name:  'Java', url: '/java'},
+      { name:  'Kotlin', url: '/kotlin'}
     ],
   },
   {

database/frontend/fonts.json

@@ -48,11 +48,18 @@
         "category": "frontend",
         "subcategory": "fonts"
     },
-  {
-    "name": "Fontshare",
-    "description": "Fontshare is a website that offers a wide selection of high-quality, free fonts for personal and commercial use.",
-    "url": "https://www.fontshare.com/",
-    "category": "frontend",
-    "subcategory": "fonts"
-  }
-]
+    {
+        "name": "Fontshare",
+        "description": "Fontshare is a website that offers a wide selection of high-quality, free fonts for personal and commercial use.",
+        "url": "https://www.fontshare.com/",
+        "category": "frontend",
+        "subcategory": "fonts"
+    },
+    {
+        "name": "Font Awesome",
+        "description": "Font Awesome is the Internet's icon library and toolkit, used by millions of designers, developers, and content creators.",
+        "url": "https://fontawesome.com/",
+        "category": "frontend",
+        "subcategory": "fonts"
+    }
+]

database/index.ts

@@ -29,8 +29,9 @@ export { default as csharp } from './languages/csharp.json'
 export { default as typescript } from './languages/typescript.json'
 export { default as ruby } from './languages/ruby.json'
 export { default as CProgramming } from './languages/c-programming.json'
-export { default as kotlin } from './languages/kotlin.json'
+export { default as kotlin} from './languages/kotlin.json'
 export { default as java } from './languages/java.json'
+export { default as cpp } from './languages/c++.json'
 // ml & ai
 export { default as ml } from './ml&ai/machine-learning.json'
 export { default as dataScience } from './ml&ai/datascience.json'

database/languages/c++.json

@@ -0,0 +1,9 @@
+[
+    {
+        "name": "Caleb Curry",
+        "description": "This course provides a complete beginner guide to learn C++ programming language with all core concepts.",
+        "url": "https://www.youtube.com/watch?v=9Myk2vcK8s8&list=PL_c9BZzLwBRIwEnaRU2LC4GkqxUbD0Auc&index=2&ab_channel=CalebCurry",
+        "category": "languages",
+        "subcategory": "cpp-programming"
+    }
+]

database/other/other-resources.json

@@ -21,10 +21,17 @@
     "subcategory": "other-resources"
   },
   {
-        "name": "Every Programmer Should Know",
-        "description": "A collection of (mostly) technical things every software developer should know about.",
-        "url": "https://github.com/mtdvio/every-programmer-should-know",
-        "category": "other",
-        "subcategory": "other-resources"
-    }
-]
+    "name": "Every Programmer Should Know",
+    "description": "A collection of (mostly) technical things every software developer should know about.",
+    "url": "https://github.com/mtdvio/every-programmer-should-know",
+    "category": "other",
+    "subcategory": "other-resources"
+  },
+  {
+    "name": "QR Code Generator using ControlNet",
+    "description": "QR codes seem to be the latest trend on stable diffusion, so let's dive in and see how we can create our own!.",
+    "url": "https://learn.thinkdiffusion.com/creating-qr-codes-with-controlnet/",
+    "category": "other",
+    "subcategory": "other-resources"
+  }
+]

database/resources/official-docs.json

@@ -20,18 +20,25 @@
     "category": "resources",
     "subcategory": "officialdocs"
   },
-   {
-   "name": "Django",
+  {
+    "name": "Django",
     "description": "This page gives an overview of the Django documentation and related resources.",
     "url": "https://docs.djangoproject.com/en/4.2/",
     "category": "resources",
     "subcategory": "officialdocs"
   },
+  {
+    "name": "Next.js",
+    "description": "This documentation is a comprehensive resource for building fast, scalable, and production-ready web apps using Next.js",
+    "url": "https://nextjs.org/",
+    "category": "resources",
+    "subcategory": "officialdocs"
+  },
   {
     "name": "Angular",
     "description": "This page is an overview of the Angular documentation and related resources.",
     "url": "https://angular.io/docs",
     "category": "resources",
     "subcategory": "officialdocs"
   }
-]
+]

database/youtube/android.json

@@ -30,5 +30,13 @@
     "category": "youtube",
     "subcategory": "android",
     "language": "hindi"
+  },
+  {
+    "name": "Android Development Tutorials in Hindi | CodeWithHarry",
+    "description": " In this Android Java Course one can learn how Android applications are built using programming in Java and XML.",
+    "url": "https://www.youtube.com/playlist?list=PLu0W_9lII9aiL0kysYlfSOUgY5rNlOhUd",
+    "category": "youtube",
+    "subcategory": "android",
+    "language": "hindi"
   }
-]
+]