Skip to content

Commit 912e06c

Browse files
devvsakibdevvsakib
committed
code clean up + code optimize for color
1 parent dcc0649 commit 912e06c

File tree

12 files changed

+90
-176
lines changed

12 files changed

+90
-176
lines changed

‎src/components/Doc/css/style.css

Whitespace-only changes.

‎src/components/Error/ErrorCard.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,12 @@ function ErrorCard({ error }) {
1313
const [readMore, setReadMore] = useState(false);
1414
const [isOpenModal, setOpenModal] = useState(false);
1515
const [solution, setSolution] = useState("");
16-
const colorBorderBox = useColorBorderBox(error)
16+
const { errorTypeColor } = useColorBorderBox(error.type)
1717

1818
return (
1919
<div
2020
id="main-div"
21-
className={colorBorderBox}
21+
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}]`}
2222
>
2323
<h3 className="title">{error.title}</h3>
2424

‎src/components/Error/ErrorType.jsx

Lines changed: 4 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,10 @@
1+
import useColorBorderBox from "../../hooks/useColorBorderBox";
2+
13
function ErrorType({ type }) {
4+
const { errorTypeColor } = useColorBorderBox(type)
25
return (
36
<span
4-
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 ${
5-
type === "add"
6-
? "before:bg-[#4024e0]"
7-
: type === "commit"
8-
? "before:bg-[#1a5ba5]"
9-
: type === "merge"
10-
? "before:bg-[#118d7c]"
11-
: type === "push"
12-
? "before:bg-[#8d54e1]"
13-
: type === "branch"
14-
? "before:bg-[#ff0000]"
15-
: type === "cmd"
16-
? "before:bg-[#e100ff]"
17-
: "before:bg-[#7e1aa5]"
18-
}`}
7+
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}]`}
198
>
209
<span className="relative text-white text-sm -top-1">{type}</span>
2110
</span>

‎src/components/Error/ModalSolutions.jsx

Lines changed: 52 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -9,63 +9,63 @@ import toast from "react-hot-toast";
99
Modal.setAppElement("#root");
1010

1111
const ModalSolutions = ({ isOpen, setOpenModal, error }) => {
12-
const colorBorderBox = useColorBorderBox(error);
12+
const { errorTypeColor } = useColorBorderBox(error.type);
1313

14-
return (
15-
<Modal
16-
isOpen={isOpen}
17-
shouldCloseOnOverlayClick={true}
18-
onRequestClose={
19-
() => setOpenModal((prev) => !prev)
20-
}
21-
contentLabel="Modal solution"
22-
className={colorBorderBox + " modal"}
23-
id="main-div"
24-
style={{
25-
overlay: {
26-
backgroundColor: "rgba(0, 0 ,0, .6)",
27-
},
28-
content: {
29-
position: "fixed",
30-
top: "50%",
31-
left: "50%",
32-
transform: "translate(-50%,-50%)",
33-
padding: "30px",
34-
},
35-
}}
36-
>
37-
<h3 className="title">{error.title}</h3>
14+
return (
15+
<Modal
16+
isOpen={isOpen}
17+
shouldCloseOnOverlayClick={true}
18+
onRequestClose={
19+
() => setOpenModal((prev) => !prev)
20+
}
21+
contentLabel="Modal solution"
22+
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`}
23+
id="main-div"
24+
style={{
25+
overlay: {
26+
backgroundColor: "rgba(0, 0 ,0, .6)",
27+
},
28+
content: {
29+
position: "fixed",
30+
top: "50%",
31+
left: "50%",
32+
transform: "translate(-50%,-50%)",
33+
padding: "30px",
34+
},
35+
}}
36+
>
37+
<h3 className="title">{error.title}</h3>
3838

39-
<ErrorType type={error.type} />
39+
<ErrorType type={error.type} />
4040

41-
<div className="bg-primary w-full h-[2px] my-4" />
41+
<div className="bg-primary w-full h-[2px] my-4" />
4242

43-
<ErrorSolutions solutions={error.solutions} />
43+
<ErrorSolutions solutions={error.solutions} />
4444

45-
<div className="bg-primary w-full h-[2px] my-4" />
46-
<div className="flex flex-row">
47-
<button
48-
className="flex mt-8 items-center gap-2 px-3 py-2 border border-gray rounded-lg hover:border-primary hover:text-primary"
49-
onClick={() => setOpenModal((prev) => !prev)}
50-
>
51-
<MdKeyboardArrowLeft className="text-lg" />
52-
<span className="text-xs">Back</span>
53-
</button>
54-
<button
55-
className="flex mt-8 items-center gap-2 mx-4 px-3 py-2 border border-gray rounded-lg hover:border-primary hover:text-primary"
56-
onClick={() => {
57-
toast.success("Commands copied to clipboard");
58-
navigator.clipboard.writeText(
59-
error.solutions.split("<").join(" ")
60-
);
61-
}}
62-
>
63-
<MdContentCopy className="text-lg" />
64-
<span className="text-xs">Copy</span>
65-
</button>
66-
</div>
67-
</Modal>
68-
);
45+
<div className="bg-primary w-full h-[2px] my-4" />
46+
<div className="flex flex-row">
47+
<button
48+
className="flex mt-8 items-center gap-2 px-3 py-2 border border-gray rounded-lg hover:border-primary hover:text-primary"
49+
onClick={() => setOpenModal((prev) => !prev)}
50+
>
51+
<MdKeyboardArrowLeft className="text-lg" />
52+
<span className="text-xs">Back</span>
53+
</button>
54+
<button
55+
className="flex mt-8 items-center gap-2 mx-4 px-3 py-2 border border-gray rounded-lg hover:border-primary hover:text-primary"
56+
onClick={() => {
57+
toast.success("Commands copied to clipboard");
58+
navigator.clipboard.writeText(
59+
error.solutions.split("<").join(" ")
60+
);
61+
}}
62+
>
63+
<MdContentCopy className="text-lg" />
64+
<span className="text-xs">Copy</span>
65+
</button>
66+
</div>
67+
</Modal>
68+
);
6969
};
7070

7171
export default ModalSolutions;

‎src/components/Error/css/style.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,12 @@ h3 {
2222
border-radius: 10px;
2323
}
2424

25+
h3{
26+
max-width: 100%;
27+
overflow-wrap: break-word;
28+
font-size: 15px;
29+
}
30+
2531
.modal {
2632
width: 400px;
2733
max-height: 450px;

‎src/components/Error/css/style.css.map

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/components/Error/css/style.scss

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎src/components/Search/SearchInput.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ function SearchInput({ search, setSearch, setType }) {
6464
: item === "cmd"
6565
? "bg-[#e100ff]"
6666
: item === "branch"
67-
? "bg-[#ff0000]"
67+
? "bg-[#099104]"
6868
: "bg-[#7e1aa5]"
6969
} ${
7070
selectedTag === item ? "ring-4 ring-red-500" : ""
@@ -116,7 +116,7 @@ function SearchInput({ search, setSearch, setType }) {
116116
: item === "cmd"
117117
? "bg-[#40f058a8]"
118118
: item === "branch"
119-
? "bg-[#ff0000]"
119+
? "bg-[#099104]"
120120
: "bg-[#7e1aa5]"
121121
} ${
122122
selectedTag === item ? "ring-4 ring-red-500" : ""

‎src/hooks/useColorBorderBox.js

Lines changed: 21 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,29 @@
11
import { useState, useEffect } from "react";
22

3-
const useColorBorderBox = (error = "") => {
4-
const [errorTypeColor, setErrorTypeColor] = useState("#7e1aa5");
5-
6-
useEffect(() => {
7-
if (error.type == "add") {
8-
return setErrorTypeColor("#4024e0");
9-
}
10-
if (error.type == "branch") {
11-
return setErrorTypeColor("#ff0000");
12-
}
13-
if (error.type == "push") {
14-
return setErrorTypeColor("#8d54e1");
15-
}
16-
if (error.type == "merge") {
17-
return setErrorTypeColor("#118d7c");
18-
}
19-
if (error.type == "commit") {
20-
return setErrorTypeColor("#1a5ba5");
21-
}
22-
return setErrorTypeColor("#7e1aa5");
23-
}, [errorTypeColor]);
3+
const useColorBorderBox = (errorType = "") => {
4+
const [errorTypeColor, setErrorTypeColor] = useState("#7e1aa5");
245

25-
let item = error.type;
6+
useEffect(() => {
7+
if (errorType == "add") {
8+
return setErrorTypeColor("#4024e0");
9+
}
10+
if (errorType == "branch") {
11+
return setErrorTypeColor("#099104");
12+
}
13+
if (errorType == "push") {
14+
return setErrorTypeColor("#8d54e1");
15+
}
16+
if (errorType == "merge") {
17+
return setErrorTypeColor("#118d7c");
18+
}
19+
if (errorType == "commit") {
20+
return setErrorTypeColor("#1a5ba5");
21+
}
22+
return setErrorTypeColor("#7e1aa5");
23+
}, [errorType]);
2624

27-
let response = `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 ${
28-
item === "add"
29-
? "border-[#4024e0]"
30-
: item === "commit"
31-
? "border-[#1a5ba5]"
32-
: item === "merge"
33-
? "border-[#118d7c]"
34-
: item === "push"
35-
? "border-[#8d54e1]"
36-
: item === "cmd"
37-
? "border-[#e100ff]"
38-
: item === "branch"
39-
? "border-[#ff0000]"
40-
: "border-[#7e1aa5]"
41-
}`
4225

43-
return response
26+
return { errorTypeColor, setErrorTypeColor };
4427
}
4528

4629
export default useColorBorderBox;

‎src/main.jsx

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,9 @@ import {
77
} from "react-router-dom";
88
import Contributors from "./components/Contributors/contributors";
99
import BGShape from "./components/BGShape";
10-
import NotFound from "./pages/404";
11-
import SingleDoc from "./pages/single doc";
10+
import NotFound from "./pages/NotFound";
1211
import DocList from "./pages/Doc";
1312
import DocDetail from "./pages/Doc/single doc";
14-
import 'antd/dist/reset.css'; // Import Ant Design styles
15-
import 'tailwindcss/tailwind.css'; // Import Tailwind CSS styles
1613

1714
const router = createBrowserRouter(
1815
[
@@ -28,10 +25,6 @@ const router = createBrowserRouter(
2825
path: '/doc/:slug',
2926
element: <DocDetail />
3027
},
31-
{
32-
path: '/doc/:doc_name',
33-
element: <SingleDoc />
34-
},
3528
{
3629
path: '/Contributors',
3730
element: <Contributors />

0 commit comments

Comments
 (0)