diff --git a/src/components/challenges/Index.jsx b/src/components/challenges/Index.jsx index 88f2ad5..7ba546f 100644 --- a/src/components/challenges/Index.jsx +++ b/src/components/challenges/Index.jsx @@ -1,32 +1,30 @@ -import { useEffect, useState } from 'react'; -import Card from '../Card'; -import Filter from '../filter/index'; -import html from '../../database/challenges/html.json'; -import css from '../../database/challenges/css.json'; -import js from '../../database/challenges/javascript.json'; -import react from '../../database/challenges/reactjs.json'; -import tailwind from '../../database/challenges/tailwindcss.json'; -import nextjs from '../../database/challenges/nextjs.json'; +import { useEffect, useState } from "react"; +import Card from "../Card"; +import Filter from "../filter/index"; +import html from "../../database/challenges/html.json"; +import css from "../../database/challenges/css.json"; +import js from "../../database/challenges/javascript.json"; +import react from "../../database/challenges/reactjs.json"; +import tailwind from "../../database/challenges/tailwindcss.json"; +import nextjs from "../../database/challenges/nextjs.json"; import { useLocation } from "react-router-dom"; - const Index = () => { - const [filter, setFilter] = useState('html'); + const [filter, setFilter] = useState("html"); const [data, setData] = useState([]); const [searchData, setSearchData] = useState(); let location = useLocation(); - useEffect(() => { - if (filter === 'html') { + if (filter === "html") { setData([...html]); - } else if (filter === 'css') { + } else if (filter === "css") { setData([...css]); - } else if (filter === 'js') { + } else if (filter === "js") { setData([...js]); - } else if (filter === 'tailwind') { + } else if (filter === "tailwind") { setData([...tailwind]); - }else if (filter === 'nextjs') { + } else if (filter === "nextjs") { setData([...nextjs]); } else { setData([...react]); @@ -49,9 +47,9 @@ const Index = () => { }, [searchItem, data]); return ( -
+
-
+
{data.length > 0 ? ( (location.search !== "" ? searchData : data).map( (res, i) => diff --git a/src/components/videos/Index.jsx b/src/components/videos/Index.jsx index 18c3d65..1f78a0a 100644 --- a/src/components/videos/Index.jsx +++ b/src/components/videos/Index.jsx @@ -6,7 +6,7 @@ import css from "../../database/videos/css.json"; import js from "../../database/videos/javascript.json"; import react from "../../database/videos/reactjs.json"; import tailwind from "../../database/videos/tailwindcss.json"; -import nextjs from '../../database/videos/nextjs.json'; +import nextjs from "../../database/videos/nextjs.json"; import { useLocation } from "react-router-dom"; const Index = () => { @@ -15,7 +15,6 @@ const Index = () => { const [searchData, setSearchData] = useState(); let location = useLocation(); - useEffect(() => { if (filter === "html") { setData([...html]); @@ -27,7 +26,7 @@ const Index = () => { setData([...tailwind]); } else if (filter === "nextjs") { setData([...nextjs]); - } else { + } else { setData([...react]); } }, [filter]); @@ -36,7 +35,6 @@ const Index = () => { setFilter(target); }; - const index = location.search.indexOf("="); let searchItem = location.search.slice(index + 1); diff --git a/src/database/challenges/css.json b/src/database/challenges/css.json index d3416a6..d433893 100644 --- a/src/database/challenges/css.json +++ b/src/database/challenges/css.json @@ -1,12 +1,14 @@ [ { "tag": "css", + "title": "Title", "description": "Improve your HTML and CSS skills by practicing on real design templates.With Codewell, you can browse high quality Figma templates that you can use to sharpen your HTML and CSS skills.", "link": "https://www.codewell.cc/", "img": "https://user-images.githubusercontent.com/100681165/238244473-00725538-ef4d-4ece-8fd7-11e6b999b895.png" }, { "tag": "css", + "title": "Title", "description": "CSS code-golfing game is here! Use your CSS skills to replicate targets with smallest possible code. Feel free to check out the targets below and put your CSS skills to test.", "link": "https://cssbattle.dev/", "img": "https://user-images.githubusercontent.com/100681165/238244467-6534a6f4-f996-4fef-893b-25eb2948e4f5.png" @@ -75,12 +77,11 @@ "img": "https://user-images.githubusercontent.com/80768852/258640252-d0d23766-894c-4d93-a75b-6f0cf85da29b.png" }, - { + { "tag": "css", "title": "CSS Battle", "description": "Replicate the target images using CSS - the shorter your code, the higher your score! Happy coding!", "link": "https://cssbattle.dev/", "img": "https://github.com/jayk-gupta/web-resources-project/assets/104543751/e32c7690-aec6-483d-ab7e-8584f25c5c17" - } ]