feat: added popup when clicked on card (#248)

* Clean up (#246) * [clean-up] chores: code clean up and bug fixes * [clean-up] chores: code clean up and bug fixes * [clean-up] chores: code clean up and bug fixes * [clean-up] chores: code clean up and bug fixes * [clean-up] chores: code clean up and bug fixes * chore: code clean up and bug fixes (#223) * [clean-up] chores: code clean up and bug fixes * [clean-up] chores: code clean up and bug fixes * [clean-up] chores: code clean up and bug fixes * [clean-up] chores: code clean up and bug fixes * [clean-up] chores: code clean up and bug fixes * chore: add new links (#211) * add new links * fix wrong spelling * format design-inspiration.json file * Remove ids from database --------- Co-authored-by: Rupali Haldiya <78981177+rupali-codes@users.noreply.github.com> * feat: added run command in README.md(#229) * Fixing the README.md file * Fixing the README.md file * chore: adding a sub-category under youtube (#228) * Adding a sub-category under youtube * fixed all the issues regarding the new sub-category * resolved some issues * chore: added new illustration link (#225) * chore: added two icons websites (#231) * Update: Added two icons websites * Resolved * chore: adding table of content (#241) * Added Contributors * Update README.md * Update README.md * Update README.md * Added Discord Icon * Update README.md * Update README.md * Update README.md * chore: added dope ui link (#239) * fix: change theme toggler color (#238) * single card page setup * single card page setup * single card page setup * single card page setup * single card popup setup --------- Co-authored-by: Oyebolade Oladokun <57053389+Oyebolade@users.noreply.github.com> Co-authored-by: Rupali Haldiya <78981177+rupali-codes@users.noreply.github.com> Co-authored-by: Harsh Parashar <96375055+hparashar27@users.noreply.github.com> Co-authored-by: RAGHAV <94848646+raghav1030@users.noreply.github.com> Co-authored-by: Sofiritari Amgbara <38821635+swissjake@users.noreply.github.com> Co-authored-by: Priyankar Pal <88102392+priyankarpal@users.noreply.github.com> Co-authored-by: Atharva Salitri <121221252+the-amazing-atharva@users.noreply.github.com> Co-authored-by: ALIND SHARMA <alindsharmasimply@gmail.com> * chore: designing popup & adding language for youtube * chore:adding language in youtube category * fix: fixing popup color for light theme * chore: fixing colors --------- Co-authored-by: Eugene44-hub <75457464+Eugene44-hub@users.noreply.github.com> Co-authored-by: Oyebolade Oladokun <57053389+Oyebolade@users.noreply.github.com> Co-authored-by: Harsh Parashar <96375055+hparashar27@users.noreply.github.com> Co-authored-by: RAGHAV <94848646+raghav1030@users.noreply.github.com> Co-authored-by: Sofiritari Amgbara <38821635+swissjake@users.noreply.github.com> Co-authored-by: Priyankar Pal <88102392+priyankarpal@users.noreply.github.com> Co-authored-by: Atharva Salitri <121221252+the-amazing-atharva@users.noreply.github.com> Co-authored-by: ALIND SHARMA <alindsharmasimply@gmail.com>
rupali-codes · Feb 26, 2023 · 0a0db19 · 0a0db19 · vercel · Feb 26, 2023
1 parent 48ab0b9
commit 0a0db19
Show file tree

Hide file tree

Showing 28 changed files with 718 additions and 665 deletions.
diff --git a/components/LinksContainer/LinkContainer.jsx b/components/LinksContainer/LinkContainer.jsx
@@ -1,18 +1,30 @@
 import React from "react";
-import {BsBoxArrowUpRight} from 'react-icons/bs';
+import { BsBoxArrowUpRight } from "react-icons/bs";
 
-export const LinkContainer = ({ name, description, url }) => {
+export const LinkContainer = (props) => {
+  const { name, description, url, getCardId } = props;
   return (
-    <div className="transition-all ease-in duration-300 w-full md:w-72 h-64 bg-white shadow-xl border border-dashed border-violet-500 rounded-3xl dark:bg-gray-900 dark:text-gray-300">
+    <div
+      onClick={() => getCardId(props)}
+      className="transition-all ease-in duration-100 w-full cursor-pointer md:w-72 h-64 bg-gray-100 shadow-lg dark:shadow-sm border hover:scale-[1.02] border-dashed border-violet-500 rounded-3xl dark:bg-gray-900 dark:text-gray-300"
+    >
       <div className="card-body">
-        <h2 className="card-title text-violet-500 text-2xl truncate cursor-default" title={name}>{name}</h2>
-        <p className="w-full text-clip-30 h-24 overflow-hidden">{description}</p>
+        <h2
+          className="text-violet-500 text-xl cursor-default truncate ..."
+          title={name}
+        >
+          {name}
+        </h2>
+        <p className="w-full font-sans text-clip-30 h-24 w-full overflow-hidden">
+          {description}
+        </p>
         <div className="card-actions justify-end">
           <a
+            onClick={(e) => e.stopPropagation()}
             href={url}
             target="_blank"
             rel="noreferrer"
-            className="mt-2 px-6 py-2 text-white text-center font-semibold bg-violet-600 rounded-2xl w-full hover:bg-transparent hover:text-violet-500 border border-dashed border-transparent duration-100 hover:border-violet-400  bottom-0 flex items-center justify-center"
+            className="mt-2 px-6 py-2 text-white text-center bg-violet-600 rounded-2xl w-full hover:bg-transparent hover:text-violet-500 border border-dashed border-transparent duration-100 hover:border-violet-400  bottom-0 flex items-center justify-center"
           >
             Visit site
             <span className="ml-2">

diff --git a/components/SideNavbar/SideNavbar.tsx b/components/SideNavbar/SideNavbar.tsx
@@ -42,7 +42,7 @@ export const SideNavbar = () => {
     <div
       className={`lg:w-[290px] fixed top-0 left-0 w-full h-[87px] z-[10] lg:h-full`}
     >
-      <div className="flex bg-white p-4 justify-between dark:bg-gray-900 transition-all ease-in duration-300">
+      <div className="flex bg-gray-100 p-4 justify-between dark:bg-gray-900 transition-all ease-in duration-300">
         <Link href={"/"}>
           <Logo className="text-3xl mb-4" />
         </Link>

diff --git a/components/SideNavbar/SideNavbarCategory.tsx b/components/SideNavbar/SideNavbarCategory.tsx
@@ -40,7 +40,7 @@ export const SideNavbarCategory: FC<{item: ISidebar, openByDefault: string}> = (
         className="flex w-full cursor-pointer justify-between py-2 hover:text-violet-500 focus-visible:rounded-md focus-visible:outline-none focus-visible:ring focus-visible:ring-violet-500" 
         onClick={handleToggle}
       >
-        <h2 className="text-xl font-bold uppercase">
+        <h2 className="text-xl uppercase">
           {item.category}
         </h2>
         <FaAngleDown className={`${isOpen && 'rotate-180'} self-center transition duration-300 ease-in-out`}/>  

diff --git a/components/SideNavbar/SideNavbarCategoryList.tsx b/components/SideNavbar/SideNavbarCategoryList.tsx
@@ -6,7 +6,7 @@ export const SideNavbarCategoryList: FC<{items: ISidebar[], openByDefault: strin
   const { items, openByDefault } = props;
 
   return (
-    <ul className="mt-2 flex flex-col justify-center gap-4 px-4 pb-24">
+    <ul className="mt-2 flex flex-col justify-center px-4 pb-24">
       {items.map((item, index) => {
         return (
           <SideNavbarCategory key={index} item={item} openByDefault={openByDefault} />

diff --git a/components/SideNavbar/SideNavbarElement.tsx b/components/SideNavbar/SideNavbarElement.tsx
@@ -18,7 +18,7 @@ export const SideNavbarElement = ({ name, url }: SubCategories) => {
           : ""
       } collapse w-full hover:bg-gradient-to-l hover:text-gray-200 from-violet-900 to-violet-500 text-start rounded `}
     >
-      <div className="text-md border-b py-3 font-medium uppercase transition-all duration-300 hover:pl-5 dark:border-gray-600">{name}</div>
+      <div className="text-sm py-3 uppercase transition-all duration-300 hover:pl-5 dark:border-gray-600">{name}</div>
     </Link>
   );
 };
diff --git a/components/TopBar/TopBar.tsx b/components/TopBar/TopBar.tsx
@@ -10,7 +10,7 @@ export const TopBar = ({ header }: { header?: string }) => {
     <div className="sticky top-0 dark:bg-[#101623] bg-gray-100 transition-all ease-in duration-300 w-full xs:overflow-x-hidden mb-4 flex flex-col-reverse items-center md:flex-row md:justify-between md:py-4">
       <div className="my-2 flex items-center place-self-start text-lg dark:text-gray-300 sm:text-3xl">
         <FaSlackHash className="mt-1 mr-2 text-gray-600 dark:text-gray-300" />
-        <span className="text-gray-900 dark:text-gray-100 uppercase font-bold">
+        <span className="text-gray-900 dark:text-gray-100 uppercase font-semmibold">
           {header ?? category}
         </span>
       </div>

diff --git a/components/cards/index.tsx b/components/cards/index.tsx
@@ -1,38 +1,27 @@
-import { useRouter } from "next/router";
-import React from "react";
+import React, { useState } from "react";
 import { LinkContainer } from "../LinksContainer/LinkContainer";
 import { BackToTopButton } from "../BackToTop/BackToTopButton";
-import * as DB from "database";
-import { database } from "database/data";
+import useFilterDB from "hooks/useFilterDB";
+import Popup from "components/popup";
+import { DBType } from "types";
 
 const Cards = () => {
-  const router = useRouter();
-  const { subcategory } = router.query;
-
-  // This filters trough the DB with the subcategory which results in an array of arrays
-  const filterSubCat = database?.map((item: any) =>
-    item?.filter((cat: any) => cat.subcategory.includes(subcategory))
-  );
-
-  // This filters out an empty array from the filterSubCat
-  const filterDB = filterSubCat.filter(
-    (item: any, index: number) => item.length !== 0
-  );
-
-  console.log(database)
-
+  const { filterDB } = useFilterDB();
+  const [currentCard, setCurrentCard] = useState<DBType | null>(null);
+  const getCardId = (item: DBType | null) => {
+    setCurrentCard(item);
+  };
   return (
     <div
       className={`flex flex-wrap md:flex-row w-full md:justify-start gap-4 content-start lg:min-h-[calc(90vh-80px)] min-h-[calc(90vh-150px)] mb-2 ${
         filterDB.length < 3 && "lg:justify-start"
       }`}
     >
-      {filterDB[0]?.map((data: any, key: number) => (
+      {filterDB[0]?.map((data: DBType, key: number) => (
         <LinkContainer
-          name={data.name}
-          description={data.description}
-          url={data.url}
+          {...data}
           key={key + "-" + data.name}
+          getCardId={getCardId}
         />
       ))}
       <div>
@@ -46,6 +35,7 @@ const Cards = () => {
         )}
       </div>
       <BackToTopButton />
+      <Popup getCardId={getCardId} currentCard={currentCard} />
     </div>
   );
 };

diff --git a/components/popup/index.tsx b/components/popup/index.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+import { DBType } from "types";
+import { BsGlobe } from "react-icons/bs";
+
+const Popup: React.FC<{
+  currentCard: null | DBType;
+  getCardId: (item: DBType | null) => void;
+}> = ({ currentCard, getCardId }) => {
+  return (
+    <div
+      onClick={() => getCardId(null)}
+      className={` ${
+        currentCard ? "w-full h-screen" : "w-0 h-0"
+      } overflow-hidden flex fixed top-0 left-0 bg-[rgba(0,0,0,.5)] backdrop-blur-md z-20`}
+    >
+      <div
+        onClick={(e) => e.stopPropagation()}
+        className={`max-w-[500px] transition-all ${
+          currentCard ? "scale-100" : "scale-0"
+        } h-fit w-full overflow-hidden  px-5 md:py-10 dark:bg-gray-900 bg-gray-100 rounded-2xl m-auto gap-5 flex flex-col justify-between border border-dashed border-violet-600`}
+      >
+        <div className="flex flex-col gap-5">
+          <div className="flex justify-between items-center">
+            <h2 className="max-w-[80%] text-2xl text-violet-500 capitalize">
+              {currentCard?.name}
+            </h2>
+            <h5 className="max-w-[20%] text-xsm text-violet-500 capitalize flex items-center gap-1">
+              {
+                currentCard?.language ? (
+                  <>
+                  <BsGlobe />
+                  {currentCard?.language}
+                  </>
+                ) : ''
+              }
+            </h5>
+          </div>
+          <p className="">{currentCard?.description}</p>
+        </div>
+        <div className="card-actions justify-end">
+          <a
+            onClick={(e) => e.stopPropagation()}
+            href={currentCard?.url}
+            target="_blank"
+            rel="noreferrer"
+            className="mt-2 px-6 py-2 text-white text-center bg-violet-600 rounded-2xl w-full hover:bg-transparent hover:text-violet-500 border border-dashed border-transparent duration-100 hover:border-violet-400  bottom-0 flex items-center justify-center bottom-0 relative"
+          >
+            Visit site
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Popup;
diff --git a/database/frontend/animations.json b/database/frontend/animations.json
@@ -1,37 +1,36 @@
-[
-  {
-    "name": "Lottie files",
-    "description": "LottieFiles takes away the complexity from Motion Design. It lets you Create, Edit, Test, Collaborate and Ship a Lottie in the easiest way possible.",
-    "url": "https://lottiefiles.com/",
-    "category": "frontend",
-    "subcategory": "animations"
-  },
-  {
-    "name": "Cubic Bezier",
-    "description": "A tool for visualisation and creation of cubic-bezier curves for animation in CSS",
-    "url": "https://cubic-bezier.com/",
-    "category": "frontend",
-    "subcategory": "animations"
-  },
-  {
-    "name": "Framer Motion",
-    "description": "Framer Motion is a production-ready motion library for React from Framer, It's simple yet powerful, allowing you to express complex user interactions with robust, semantic markup.",
-    "url": "https://www.framer.com/motion/",
-    "category": "frontend",
-    "subcategory": "animations"
-  },
-  {
-    "name": "Proton",
-    "description": "A JavaScript particle based animation engine. Which provides you tones of animated elements.",
-    "url": "https://drawcall.github.io/Proton/",
-    "category": "frontend",
-    "subcategory": "animations"
-  },
-  {
-    "name": "AutoAnimate",
-    "description": "Add motion to your apps with a single line of code.",
-    "url": "https://auto-animate.formkit.com/",
-    "category": "frontend",
-    "subcategory": "animations"
-  }
+[{
+        "name": "Lottie files",
+        "description": "LottieFiles takes away the complexity from Motion Design. It lets you Create, Edit, Test, Collaborate and Ship a Lottie in the easiest way possible.",
+        "url": "https://lottiefiles.com/",
+        "category": "frontend",
+        "subcategory": "animations"
+    },
+    {
+        "name": "Cubic Bezier",
+        "description": "A tool for visualisation and creation of cubic-bezier curves for animation in CSS",
+        "url": "https://cubic-bezier.com/",
+        "category": "frontend",
+        "subcategory": "animations"
+    },
+    {
+        "name": "Framer Motion",
+        "description": "Framer Motion is a production-ready motion library for React from Framer, It's simple yet powerful, allowing you to express complex user interactions with robust, semantic markup.",
+        "url": "https://www.framer.com/motion/",
+        "category": "frontend",
+        "subcategory": "animations"
+    },
+    {
+        "name": "Proton",
+        "description": "A JavaScript particle based animation engine. Which provides you tones of animated elements.",
+        "url": "https://drawcall.github.io/Proton/",
+        "category": "frontend",
+        "subcategory": "animations"
+    },
+    {
+        "name": "AutoAnimate",
+        "description": "Add motion to your apps with a single line of code.",
+        "url": "https://auto-animate.formkit.com/",
+        "category": "frontend",
+        "subcategory": "animations"
+    }
 ]
diff --git a/database/frontend/colors.json b/database/frontend/colors.json
@@ -1,58 +1,57 @@
-[
-  {
-    "name": "Open Color",
-    "description": "An open-source color scheme, optimized for UI. My go-to resource to choose colors from scratch. ",
-    "url": "https://yeun.github.io/open-color/",
-    "category": "frontend",
-    "subcategory": "colors"
-  },
-  {
-    "name": "UI Gradients",
-    "description": "Collection of beautiful color gradients for you to choose from and export to your project. ",
-    "url": "https://uigradients.com/#MoonlitAsteroid",
-    "category": "frontend",
-    "subcategory": "colors"
-  },
-  {
-    "name": "Tailwind Colors",
-    "description": "This an excellent and popular set of color pallettes by TailwindCSS. Get beautiful colors of all shades ",
-    "url": "https://tailwindcss.com/docs/customizing-colors",
-    "category": "frontend",
-    "subcategory": "colors"
-  },
-  {
-    "name": "Color Contract Checker",
-    "description": "This an excellent site to check whether contrast of two colors is good or not ",
-    "url": "https://coolors.co/contrast-checker",
-    "category": "frontend",
-    "subcategory": "colors"
-  },
-  {
-    "name": "0to255",
-    "description": "0to255 is a color tool that makes it easy to find lighter and darker colors, or tints and shades, based on any color. ",
-    "url": "https://0to255.com/",
-    "category": "frontend",
-    "subcategory": "colors"
-  },
-  {
-    "name": "Coolors",
-    "description": "Coolors is the essential tool for creating color palettes. It generates perfect matching colors in seconds.",
-    "url": "https://coolors.co/",
-    "category": "frontend",
-    "subcategory": "colors"
-  },
-  {
-    "name": "HTML Color Picker",
-    "description": "This is a color picker by w3schools which provides different shades of colors based on your requirements. It also gives Hex and RGB value of color.",
-    "url": "https://w3schools.com/colors/colors_picker.asp",
-    "category": "frontend",
-    "subcategory": "colors"
-  },
-  {
-    "name": "UI Color Picker",
-    "description": "A color picker that contains different shades of solid colors & gradients. Which can be used in any kind of projects.",
-    "url": "https://uicolorpicker.com/",
-    "category": "frontend",
-    "subcategory": "colors"
-  }
+[{
+        "name": "Open Color",
+        "description": "An open-source color scheme, optimized for UI. My go-to resource to choose colors from scratch. ",
+        "url": "https://yeun.github.io/open-color/",
+        "category": "frontend",
+        "subcategory": "colors"
+    },
+    {
+        "name": "UI Gradients",
+        "description": "Collection of beautiful color gradients for you to choose from and export to your project. ",
+        "url": "https://uigradients.com/#MoonlitAsteroid",
+        "category": "frontend",
+        "subcategory": "colors"
+    },
+    {
+        "name": "Tailwind Colors",
+        "description": "This an excellent and popular set of color pallettes by TailwindCSS. Get beautiful colors of all shades ",
+        "url": "https://tailwindcss.com/docs/customizing-colors",
+        "category": "frontend",
+        "subcategory": "colors"
+    },
+    {
+        "name": "Color Contract Checker",
+        "description": "This an excellent site to check whether contrast of two colors is good or not ",
+        "url": "https://coolors.co/contrast-checker",
+        "category": "frontend",
+        "subcategory": "colors"
+    },
+    {
+        "name": "0to255",
+        "description": "0to255 is a color tool that makes it easy to find lighter and darker colors, or tints and shades, based on any color. ",
+        "url": "https://0to255.com/",
+        "category": "frontend",
+        "subcategory": "colors"
+    },
+    {
+        "name": "Coolors",
+        "description": "Coolors is the essential tool for creating color palettes. It generates perfect matching colors in seconds.",
+        "url": "https://coolors.co/",
+        "category": "frontend",
+        "subcategory": "colors"
+    },
+    {
+        "name": "HTML Color Picker",
+        "description": "This is a color picker by w3schools which provides different shades of colors based on your requirements. It also gives Hex and RGB value of color.",
+        "url": "https://w3schools.com/colors/colors_picker.asp",
+        "category": "frontend",
+        "subcategory": "colors"
+    },
+    {
+        "name": "UI Color Picker",
+        "description": "A color picker that contains different shades of solid colors & gradients. Which can be used in any kind of projects.",
+        "url": "https://uicolorpicker.com/",
+        "category": "frontend",
+        "subcategory": "colors"
+    }
 ]