From b0f0bcf5dfabed21aa8b443229b73cea1a7fc6c3 Mon Sep 17 00:00:00 2001 From: devvsakib Date: Tue, 30 Jul 2024 22:14:21 +0600 Subject: [PATCH 1/3] resource page added with few free resource list --- src/components/Common/MainTitle.jsx | 8 ++++ src/components/Header/Header.jsx | 7 ++-- src/components/Resources/ResourceSection.jsx | 21 ++++++++++ src/data/Resources.json | 44 ++++++++++++++++++++ src/main.jsx | 7 +++- src/pages/Doc/index.jsx | 5 ++- src/pages/Resources.jsx | 27 ++++++++++++ 7 files changed, 113 insertions(+), 6 deletions(-) create mode 100644 src/components/Common/MainTitle.jsx create mode 100644 src/components/Resources/ResourceSection.jsx create mode 100644 src/data/Resources.json create mode 100644 src/pages/Resources.jsx diff --git a/src/components/Common/MainTitle.jsx b/src/components/Common/MainTitle.jsx new file mode 100644 index 0000000..6899055 --- /dev/null +++ b/src/components/Common/MainTitle.jsx @@ -0,0 +1,8 @@ +const MainTitle = ({ + title, + highlight +}) => { + return

{title} {highlight}

; +}; + +export default MainTitle; diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index cedd611..76e9fe0 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -4,6 +4,7 @@ import { MdClose, MdMenu, MdHome, + MdStore, } from "react-icons/md"; import { AiFillGithub } from "react-icons/ai"; import { Link } from "react-router-dom"; @@ -28,9 +29,9 @@ function Header({ countStar, notice }) { icon: , }, { - name: "Contributors", - link: "/Contributors", - icon: , + name: "Resources", + link: "/resources", + icon: , }, { name: "Github", diff --git a/src/components/Resources/ResourceSection.jsx b/src/components/Resources/ResourceSection.jsx new file mode 100644 index 0000000..11df0e6 --- /dev/null +++ b/src/components/Resources/ResourceSection.jsx @@ -0,0 +1,21 @@ +import { Link } from "react-router-dom"; + +const ResourceSection = ({ title, resources }) => ( +
+

{title}

+
+ {resources.map((resource, index) => ( +
+ {resource.image && {resource.title}} +

{resource.title}

+

{resource.description}

+ + Learn More + +
+ ))} +
+
+); + +export default ResourceSection; diff --git a/src/data/Resources.json b/src/data/Resources.json new file mode 100644 index 0000000..b616b58 --- /dev/null +++ b/src/data/Resources.json @@ -0,0 +1,44 @@ +{ + "learningResources": [ + { + "title": "FreeCodeCamp", + "description": "Learn web development for free with interactive tutorials.", + "link": "https://www.freecodecamp.org", + "image": "https://upload.wikimedia.org/wikipedia/commons/3/39/FreeCodeCamp_logo.png" + }, + { + "title": "MDN Web Docs", + "description": "Comprehensive documentation and tutorials for web technologies.", + "link": "https://developer.mozilla.org", + "image": "https://community.mozilla.org/wp-content/uploads/2021/11/mdn_web_docs_feature.png" + } + ], + "toolsLibraries": [ + { + "title": "React", + "description": "A JavaScript library for building user interfaces.", + "link": "https://reactjs.org", + "image": "https://www.nexoid.com/technology/reactjs/react_js_logo.webp" + }, + { + "title": "Bootstrap", + "description": "A popular framework for building responsive and mobile-first websites.", + "link": "https://getbootstrap.com", + "image": "https://icons.getbootstrap.com/assets/img/icons-hero.png" + } + ], + "careerRoadmaps": [ + { + "title": "Frontend Developer Roadmap", + "description": "A comprehensive guide for becoming a frontend developer.", + "link": "https://roadmap.sh/frontend", + "image": "https://roadmap.sh/og/roadmap/frontend" + }, + { + "title": "Backend Developer Roadmap", + "description": "A complete guide for becoming a backend developer.", + "link": "https://roadmap.sh/backend", + "image": "https://roadmap.sh/og/roadmap/backend" + } + ] +} \ No newline at end of file diff --git a/src/main.jsx b/src/main.jsx index 0402dc5..f81c419 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -10,6 +10,7 @@ import BGShape from "./components/BGShape"; import NotFound from "./pages/NotFound"; import DocList from "./pages/Doc"; import DocDetail from "./pages/Doc/single doc"; +import Resources from "./pages/Resources"; const router = createBrowserRouter( [ @@ -26,7 +27,11 @@ const router = createBrowserRouter( element: }, { - path: '/Contributors', + path: '/resources', + element: + }, + { + path: '/contributors', element: }, { diff --git a/src/pages/Doc/index.jsx b/src/pages/Doc/index.jsx index d155ae0..4ac049a 100644 --- a/src/pages/Doc/index.jsx +++ b/src/pages/Doc/index.jsx @@ -3,6 +3,7 @@ import { Link } from 'react-router-dom'; import { List, Spin, Alert } from 'antd'; import Layout from '../../components/Layout/Layout'; import { FaArrowRight } from "react-icons/fa"; +import MainTitle from '../../components/Common/MainTitle'; const DocList = () => { const [docs, setDocs] = useState([]); @@ -37,12 +38,12 @@ const DocList = () => { return (
-

Documentation

+
    { docs.map(item => {item.title.replace(/_/g, ' ')} - + ) } diff --git a/src/pages/Resources.jsx b/src/pages/Resources.jsx new file mode 100644 index 0000000..8ed2043 --- /dev/null +++ b/src/pages/Resources.jsx @@ -0,0 +1,27 @@ +import React from 'react'; +import Layout from '../components/Layout/Layout'; +import { Space } from 'antd'; +import MainTitle from '../components/Common/MainTitle'; +import ResourceSection from '../components/Resources/ResourceSection'; +import resources from '../data/resources'; + + +const Resources = () => { + return ( + +
    + + + + + + +
    +     + ); +}; + +export default Resources; From f7667ec7ce092213ae3893f9be064ebb5ea532c6 Mon Sep 17 00:00:00 2001 From: devvsakib Date: Tue, 30 Jul 2024 22:16:09 +0600 Subject: [PATCH 2/3] vercel deploy issue fix --- src/pages/Resources.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/Resources.jsx b/src/pages/Resources.jsx index 8ed2043..2a6f999 100644 --- a/src/pages/Resources.jsx +++ b/src/pages/Resources.jsx @@ -1,9 +1,8 @@ -import React from 'react'; import Layout from '../components/Layout/Layout'; import { Space } from 'antd'; import MainTitle from '../components/Common/MainTitle'; import ResourceSection from '../components/Resources/ResourceSection'; -import resources from '../data/resources'; +import resources from '../data/Resources'; const Resources = () => { From c20645171ed2cd65007b63c802760eede83dc19c Mon Sep 17 00:00:00 2001 From: devvsakib Date: Wed, 31 Jul 2024 11:41:23 +0600 Subject: [PATCH 3/3] card color issue fixed --- package.json | 1 + src/components/Error/Error.jsx | 2 +- src/components/Error/ErrorCard.jsx | 4 +- src/components/Error/ErrorType.jsx | 18 ++++++-- src/components/Error/ModalSolutions.jsx | 10 ++-- src/components/Error/css/style.css | 3 +- src/components/Search/SearchInput.jsx | 61 ++++++++++++------------- src/data/error.json | 2 +- src/hooks/useColorBorderBox.js | 42 +++++++---------- tailwind.config.cjs | 10 +++- 10 files changed, 80 insertions(+), 73 deletions(-) diff --git a/package.json b/package.json index 191dc56..4567c49 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "@tailwindcss/typography": "^0.5.13", "antd": "^5.19.1", "axios": "^1.2.2", + "classnames": "^2.5.1", "framer-motion": "^10.8.3", "lodash": "^4.17.21", "prettier": "^3.3.3", diff --git a/src/components/Error/Error.jsx b/src/components/Error/Error.jsx index bed7a49..2aab25b 100644 --- a/src/components/Error/Error.jsx +++ b/src/components/Error/Error.jsx @@ -38,7 +38,7 @@ const Error = ({ search, type }) => { }} >
-
+
{filteredErrorByType.length === 0 ? (

diff --git a/src/components/Error/ErrorCard.jsx b/src/components/Error/ErrorCard.jsx index cebe658..c630885 100644 --- a/src/components/Error/ErrorCard.jsx +++ b/src/components/Error/ErrorCard.jsx @@ -13,12 +13,12 @@ function ErrorCard({ error }) { const [readMore, setReadMore] = useState(false); const [isOpenModal, setOpenModal] = useState(false); const [solution, setSolution] = useState(""); - const { errorTypeColor } = useColorBorderBox(error.type) + const { borderColor } = useColorBorderBox(error) return (

{error.title}

diff --git a/src/components/Error/ErrorType.jsx b/src/components/Error/ErrorType.jsx index f3a199d..51c23f5 100644 --- a/src/components/Error/ErrorType.jsx +++ b/src/components/Error/ErrorType.jsx @@ -1,10 +1,20 @@ -import useColorBorderBox from "../../hooks/useColorBorderBox"; - function ErrorType({ type }) { - const { errorTypeColor } = useColorBorderBox(type) return ( {type} diff --git a/src/components/Error/ModalSolutions.jsx b/src/components/Error/ModalSolutions.jsx index d56eab4..6f811ad 100644 --- a/src/components/Error/ModalSolutions.jsx +++ b/src/components/Error/ModalSolutions.jsx @@ -1,4 +1,4 @@ -import React,{ useContext } from "react"; +import React, { useContext } from "react"; import { MdKeyboardArrowLeft, MdContentCopy } from "react-icons/md"; import ErrorSolutions from "./ErrorSolutions"; import useColorBorderBox from "../../hooks/useColorBorderBox"; @@ -10,10 +10,10 @@ import { ThemeContext } from '../../context/ThemeContext'; Modal.setAppElement("#root"); const ModalSolutions = ({ isOpen, setOpenModal, error }) => { - const { errorTypeColor } = useColorBorderBox(error.type); + const { borderColor } = useColorBorderBox(error) const { theme } = useContext(ThemeContext); - const overlayBackgroundColor = theme === 'dark' - ? 'rgba(0, 0, 0, 0.6)' + const overlayBackgroundColor = theme === 'dark' + ? 'rgba(0, 0, 0, .5)' : 'rgba(0, 0, 0, 0.2)'; return ( @@ -24,7 +24,7 @@ const ModalSolutions = ({ isOpen, setOpenModal, error }) => { () => setOpenModal((prev) => !prev) } contentLabel="Modal solution" - className={`py-4 mb-4 col-span-12 md:col-span-6 xl:col-span-4 px-2 md:px-6 border-l-4 rounded-lg items-start bg-dark/5 dark:bg-white/5 backdrop-blur-[10px] flex flex-col hover:scale-105 duration-300 border-[${errorTypeColor}] modal`} + className={borderColor + " modal !bg-black/80 max-h-[90vh] "} id="main-div" style={{ overlay: { diff --git a/src/components/Error/css/style.css b/src/components/Error/css/style.css index cd7b97a..9fc69d5 100644 --- a/src/components/Error/css/style.css +++ b/src/components/Error/css/style.css @@ -7,7 +7,8 @@ h3 { #scroll-solution{ overflow-y:scroll; - height: 100px; + min-height: 100px; + max-height: 90vh; width: 100%; padding: 0px 10px 0px 10px; text-align: left; diff --git a/src/components/Search/SearchInput.jsx b/src/components/Search/SearchInput.jsx index ec3469e..c1c1735 100644 --- a/src/components/Search/SearchInput.jsx +++ b/src/components/Search/SearchInput.jsx @@ -52,23 +52,21 @@ function SearchInput({ search, setSearch, setType }) { {errorType.map((item, i) => (
  • { setSelectedTag(item); setType(item); @@ -97,30 +95,27 @@ function SearchInput({ search, setSearch, setType }) { transition={{ duration: 0.5 }} >
      {errorType.map((item, i) => (
    • { setSelectedTag(item); setType(item); @@ -137,7 +132,7 @@ function SearchInput({ search, setSearch, setType }) {
    • )}

    - + ); } diff --git a/src/data/error.json b/src/data/error.json index 21e8112..49b8678 100644 --- a/src/data/error.json +++ b/src/data/error.json @@ -166,7 +166,7 @@ "type": "branch", "title": "error: You have local changes to ; cannot switch branches.", "description": "This error occurs when switching a branch without commiting the changes made to that branch", - "solutions": "[{'git stash':'stash your current changes'},{'git reset --hard HEAD':'if you dont' mind losing those minor changes'},{'git checkout -b ':'When switching branches, proceed even if the index or the working tree differs from HEAD. This is used to throw away local changes.'},{'git switch -f ':'-f is short for --force, which is an alias for --discard-changes , works for git 2.23'}]" + "solutions": "git stash :'stash your current changes' < git reset --hard HEAD :'if you dont' mind losing those minor changes' < git checkout -b branch_name :'When switching branches, proceed even if the index or the working tree differs from HEAD. This is used to throw away local changes.' { + let item = error.type; + let borderColor = `py-4 mb-4 col-span-12 md:col-span-6 xl:col-span-4 px-2 md:px-6 border-l-4 rounded-lg items-start bg-dark/5 dark:bg-white/5 backdrop-blur-[10px] flex flex-col hover:scale-105 duration-300 ${item === "add" + ? "border-add" + : item === "commit" + ? "border-commit" + : item === "merge" + ? "border-merge" + : item === "push" + ? "border-push" + : item === "cmd" + ? "border-cmd" + : item === "branch" + ? "border-branch" + : "border-default" + }` -const useColorBorderBox = (errorType = "") => { - const [errorTypeColor, setErrorTypeColor] = useState("#7e1aa5"); - useEffect(() => { - if (errorType == "add") { - return setErrorTypeColor("#4024e0"); - } - if (errorType == "branch") { - return setErrorTypeColor("#099104"); - } - if (errorType == "push") { - return setErrorTypeColor("#8d54e1"); - } - if (errorType == "merge") { - return setErrorTypeColor("#118d7c"); - } - if (errorType == "commit") { - return setErrorTypeColor("#1a5ba5"); - } - return setErrorTypeColor("#7e1aa5"); - }, [errorType]); - - - return { errorTypeColor, setErrorTypeColor }; + return { borderColor } } - export default useColorBorderBox; \ No newline at end of file diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 50a93e8..e79766a 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -12,7 +12,15 @@ module.exports = { white: "#F4F7F5", gray: "#A7A2A9", dark: "#1E1E1F", - "dark-secondary": "#28282A", + darkSecondary: "#28282A", + branch: "#099104", + cmd: "#e100ff", + add: "#4024e0", + pull: "#4024e0", + commit: "#1a5ba5", + merge: "#118d7c", + push: "#8d54e1", + default: "#7e1aa5", }, typography: (theme) => ({ DEFAULT: {