Skip to content

Commit

Permalink
fix #232 (#233)
Browse files Browse the repository at this point in the history
* resource page added with few free resource list

* vercel deploy issue fix

* card color issue fixed
  • Loading branch information
devvsakib authored Jul 31, 2024
1 parent 7a02263 commit 69202cf
Show file tree
Hide file tree
Showing 10 changed files with 80 additions and 73 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion src/components/Error/Error.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const Error = ({ search, type }) => {
}}
></Toaster>
</div>
<section className="mx-4 md:w-5/6 my-12 grid grid-cols-12 justify-center gap-8 md:mx-auto ">
<section className="mx-4 md:w-5/6 my-12 grid grid-cols-12 px-5 md:px-0 justify-center gap-8 md:mx-auto ">
{filteredErrorByType.length === 0 ? (
<div className="col-span-12">
<h1 className="text-center text-2xl text-gray-500 mx-auto">
Expand Down
4 changes: 2 additions & 2 deletions src/components/Error/ErrorCard.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<div
id="main-div"
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}]`}
className={borderColor}
>
<h3 className="title">{error.title}</h3>

Expand Down
18 changes: 14 additions & 4 deletions src/components/Error/ErrorType.jsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,20 @@
import useColorBorderBox from "../../hooks/useColorBorderBox";

function ErrorType({ type }) {
const { errorTypeColor } = useColorBorderBox(type)
return (
<span
className={`before:block mb-3 mt-1 top-2 left-2 h-4 before:absolute before:-inset-1 before:-skew-y-3 relative block before:bg-[${errorTypeColor}]`}
className={`before:block mb-3 mt-1 top-2 left-2 h-4 before:absolute before:-inset-1 before:-skew-y-3 relative inline-block ${type === "add"
? "before:bg-add"
: type === "commit"
? "before:bg-commit"
: type === "merge"
? "before:bg-merge"
: type === "push"
? "before:bg-push"
: type === "branch"
? "before:bg-branch"
: type === "cmd"
? "before:bg-cmd"
: "before:bg-default"
}`}
>
<span className="relative text-sm -top-1">{type}</span>
</span>
Expand Down
10 changes: 5 additions & 5 deletions src/components/Error/ModalSolutions.jsx
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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 (
Expand All @@ -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: {
Expand Down
3 changes: 2 additions & 1 deletion src/components/Error/css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
61 changes: 28 additions & 33 deletions src/components/Search/SearchInput.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,23 +52,21 @@ function SearchInput({ search, setSearch, setType }) {
{errorType.map((item, i) => (
<li
key={i}
className={`${
item === "add"
? "bg-[#4024e0]"
className={`${item === "add"
? "bg-add"
: item === "commit"
? "bg-[#1a5ba5]"
? "bg-commit"
: item === "merge"
? "bg-[#118d7c]"
? "bg-merge"
: item === "push"
? "bg-[#8d54e1]"
? "bg-push"
: item === "cmd"
? "bg-[#e100ff]"
? "bg-cmd"
: item === "branch"
? "bg-[#099104]"
: "bg-[#7e1aa5]"
} ${
selectedTag === item ? "ring-4 ring-red-500" : ""
} w-full md:w-auto rounded-md capitalize text-white font-bold py-1 px-3 cursor-pointer`}
? "bg-branch"
: "bg-default"
} ${selectedTag === item ? "ring-4 ring-red-500" : ""
} w-full md:w-auto rounded-md capitalize text-white font-bold py-1 px-3 cursor-pointer`}
onClick={() => {
setSelectedTag(item);
setType(item);
Expand Down Expand Up @@ -97,30 +95,27 @@ function SearchInput({ search, setSearch, setType }) {
transition={{ duration: 0.5 }}
>
<ul
className={`animate flex flex-col sm:flex-row mx-auto mt-2 items-start gap-4 py-3 pt-4 px-6 rounded-lg bg-white backdrop-blur-md w-[60vw] md:w-auto text-left ${
open ? "hidden" : "block"
}`}
className={`animate flex flex-col sm:flex-row mx-auto mt-2 items-start gap-4 py-3 pt-4 px-6 rounded-lg bg-white backdrop-blur-md w-[60vw] md:w-auto text-left ${open ? "hidden" : "block"
}`}
>
{errorType.map((item, i) => (
<li
key={i}
className={`${
item === "add"
? "bg-[#4024e0]"
: item === "commit"
? "bg-[#1a5ba5]"
: item === "merge"
? "bg-[#118d7c]"
: item === "push"
? "bg-[#8d54e1]"
: item === "cmd"
? "bg-[#40f058a8]"
: item === "branch"
? "bg-[#099104]"
: "bg-[#7e1aa5]"
} ${
selectedTag === item ? "ring-4 ring-red-500" : ""
} w-full md:w-auto rounded-md text-white font-bold py-2 px-3 cursor-pointer`}
className={`${item === "add"
? "bg-[#4024e0]"
: item === "commit"
? "bg-[#1a5ba5]"
: item === "merge"
? "bg-merge"
: item === "push"
? "bg-push"
: item === "cmd"
? "bg-[#40f058a8]"
: item === "branch"
? "bg-branch"
: "bg-default"
} ${selectedTag === item ? "ring-4 ring-red-500" : ""
} w-full md:w-auto rounded-md text-white font-bold py-2 px-3 cursor-pointer`}
onClick={() => {
setSelectedTag(item);
setType(item);
Expand All @@ -137,7 +132,7 @@ function SearchInput({ search, setSearch, setType }) {
</div>
)}
</div>
</div>
</div >
);
}

Expand Down
2 changes: 1 addition & 1 deletion src/data/error.json
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@
"type": "branch",
"title": "error: You have local changes to <branch_name>; 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 <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.'},{'git switch -f <branch-name>':'-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.'<git switch -f branch-name :'-f is short for --force, which is an alias for --discard-changes , works for git 2.23'"
},
{
"type": "push",
Expand Down
42 changes: 17 additions & 25 deletions src/hooks/useColorBorderBox.js
Original file line number Diff line number Diff line change
@@ -1,29 +1,21 @@
import { useState, useEffect } from "react";
const useColorBorderBox = (error = "") => {
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;
10 changes: 9 additions & 1 deletion tailwind.config.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down

0 comments on commit 69202cf

Please sign in to comment.