Skip to content

Commit 7d32e61

Browse files
parham-abparham-ab
committed
making codes and folder structure cleaner
1 parent 3ca5d5b commit 7d32e61

File tree

5 files changed

+103
-84
lines changed

5 files changed

+103
-84
lines changed

‎src/App.js

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,10 @@ import ColorGenerator from "./components/ColorGenerator";
1414
import TextEditor from "./components/TextEditor";
1515
import ScrollToTop from "./components/functions/ScrollTotop";
1616
// mui
17-
import { createTheme, ThemeProvider } from "@mui/material/styles";
17+
import { ThemeProvider } from "@mui/material/styles";
1818
import MarkdownGenerator from "./components/MarkdownGenerator";
19-
// font customizing
20-
const theme = createTheme({
21-
typography: {
22-
fontFamily: ["Quicksand"].join(","),
23-
fontSize: 14,
24-
fontWeightLight: 400,
25-
fontWeightMedium: 500,
26-
fontWeightRegular: 600,
27-
fontWeightBold: 700,
28-
},
29-
});
19+
import BorderGenerator from "./components/BorderGenerator";
20+
import { theme } from "./utils/theme";
3021

3122
const App = () => {
3223
return (
@@ -42,6 +33,7 @@ const App = () => {
4233
<Route path="/border-radius" element={<BorderRadius />} />
4334
<Route path="/image-filter" element={<ImageFilter />} />
4435
<Route path="/skew" element={<Skew />} />
36+
<Route path="/borderGenerator" element={<BorderGenerator />} />
4537
<Route path="/color-picker" element={<ColorPicker />} />
4638
<Route path="/color-generator" element={<ColorGenerator />} />
4739
<Route path="/text-editor" element={<TextEditor />} />

‎src/components/BorderGenerator.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const BorderGenerator = () => {
2+
return (
3+
<div>
4+
5+
</div>
6+
);
7+
};
8+
9+
export default BorderGenerator;

‎src/components/layout/Header.js

Lines changed: 3 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -12,85 +12,16 @@ import List from "@mui/material/List";
1212
import Typography from "@mui/material/Typography";
1313
import { IconButton } from "@mui/material";
1414
// icons
15-
import GradientIcon from "@mui/icons-material/Gradient";
16-
import AutoFixNormalIcon from "@mui/icons-material/AutoFixNormal";
17-
import FormatColorTextIcon from "@mui/icons-material/FormatColorText";
1815
import GitHubIcon from "@mui/icons-material/GitHub";
19-
import VignetteIcon from "@mui/icons-material/Vignette";
20-
import AspectRatioIcon from "@mui/icons-material/AspectRatio";
21-
import ColorLensIcon from "@mui/icons-material/ColorLens";
22-
import ImageIcon from "@mui/icons-material/Image";
23-
import FormatSizeIcon from "@mui/icons-material/FormatSize";
24-
import FormatPaintIcon from "@mui/icons-material/FormatPaint";
25-
import { BsMarkdownFill } from "react-icons/bs";
16+
2617
// react awesome button
2718
import { AwesomeButton } from "react-awesome-button";
2819
import "react-awesome-button/dist/styles.css";
20+
import { menuItems } from "../../constants/menuItems";
2921

3022
const Header = () => {
3123
const navigate = useNavigate();
32-
const menuItems = [
33-
{
34-
text: "Shadow Generator",
35-
icon: (
36-
<AutoFixNormalIcon color="text.secondary" sx={{ fontSize: "16px" }} />
37-
),
38-
path: "/shadowGenerator",
39-
},
40-
{
41-
text: "gradient",
42-
icon: <GradientIcon color="text.secondary" sx={{ fontSize: "16px" }} />,
43-
path: "/gradient",
44-
},
45-
{
46-
text: "TextShadowGenerator",
47-
icon: (
48-
<FormatColorTextIcon color="text.secondary" sx={{ fontSize: "16px" }} />
49-
),
50-
path: "/TextShadowGenerator",
51-
},
52-
{
53-
text: "BorderRadius",
54-
icon: <VignetteIcon color="text.secondary" sx={{ fontSize: "16px" }} />,
55-
path: "/border-radius",
56-
},
57-
{
58-
text: "skew",
59-
icon: (
60-
<AspectRatioIcon color="text.secondary" sx={{ fontSize: "16px" }} />
61-
),
62-
path: "/skew",
63-
},
64-
{
65-
text: "textGenerator",
66-
icon: <ColorLensIcon color="text.secondary" sx={{ fontSize: "16px" }} />,
67-
path: "/color-picker",
68-
},
69-
{
70-
text: "textEditor",
71-
icon: <FormatSizeIcon color="text.secondary" sx={{ fontSize: "16px" }} />,
72-
path: "/text-editor",
73-
},
74-
{
75-
text: "colorGenerator",
76-
icon: (
77-
<FormatPaintIcon color="text.secondary" sx={{ fontSize: "16px" }} />
78-
),
79-
path: "/color-generator",
80-
},
81-
{
82-
text: "markdownGenerator",
83-
icon: (
84-
<BsMarkdownFill color="text.secondary" style={{ fontSize: "16px" }} />
85-
),
86-
path: "/markdown",
87-
},
88-
{
89-
text: "ImageFilter",
90-
icon: <ImageIcon color="text.secondary" sx={{ fontSize: "16px" }} />,
91-
path: "/image-filter",
92-
},
93-
];
24+
9425

9526
return (
9627
<Box display="flex">

‎src/constants/menuItems.js

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import GradientIcon from "@mui/icons-material/Gradient";
2+
import AutoFixNormalIcon from "@mui/icons-material/AutoFixNormal";
3+
import FormatColorTextIcon from "@mui/icons-material/FormatColorText";
4+
import VignetteIcon from "@mui/icons-material/Vignette";
5+
import AspectRatioIcon from "@mui/icons-material/AspectRatio";
6+
import ColorLensIcon from "@mui/icons-material/ColorLens";
7+
import ImageIcon from "@mui/icons-material/Image";
8+
import FormatSizeIcon from "@mui/icons-material/FormatSize";
9+
import FormatPaintIcon from "@mui/icons-material/FormatPaint";
10+
import { BsMarkdownFill } from "react-icons/bs";
11+
import BorderOuterIcon from "@mui/icons-material/BorderOuter";
12+
13+
export const menuItems = [
14+
{
15+
text: "Shadow Generator",
16+
icon: (
17+
<AutoFixNormalIcon color="text.secondary" sx={{ fontSize: "16px" }} />
18+
),
19+
path: "/shadowGenerator",
20+
},
21+
{
22+
text: "gradient",
23+
icon: <GradientIcon color="text.secondary" sx={{ fontSize: "16px" }} />,
24+
path: "/gradient",
25+
},
26+
{
27+
text: "TextShadowGenerator",
28+
icon: (
29+
<FormatColorTextIcon color="text.secondary" sx={{ fontSize: "16px" }} />
30+
),
31+
path: "/TextShadowGenerator",
32+
},
33+
{
34+
text: "BorderRadius",
35+
icon: <VignetteIcon color="text.secondary" sx={{ fontSize: "16px" }} />,
36+
path: "/border-radius",
37+
},
38+
{
39+
text: "skew",
40+
icon: <AspectRatioIcon color="text.secondary" sx={{ fontSize: "16px" }} />,
41+
path: "/skew",
42+
},
43+
{
44+
text: "borderGenerator",
45+
icon: <BorderOuterIcon color="text.secondary" sx={{ fontSize: "16px" }} />,
46+
path: "/borderGenerator",
47+
},
48+
{
49+
text: "textGenerator",
50+
icon: <ColorLensIcon color="text.secondary" sx={{ fontSize: "16px" }} />,
51+
path: "/color-picker",
52+
},
53+
{
54+
text: "textEditor",
55+
icon: <FormatSizeIcon color="text.secondary" sx={{ fontSize: "16px" }} />,
56+
path: "/text-editor",
57+
},
58+
{
59+
text: "colorGenerator",
60+
icon: <FormatPaintIcon color="text.secondary" sx={{ fontSize: "16px" }} />,
61+
path: "/color-generator",
62+
},
63+
{
64+
text: "markdownGenerator",
65+
icon: (
66+
<BsMarkdownFill color="text.secondary" style={{ fontSize: "16px" }} />
67+
),
68+
path: "/markdown",
69+
},
70+
{
71+
text: "ImageFilter",
72+
icon: <ImageIcon color="text.secondary" sx={{ fontSize: "16px" }} />,
73+
path: "/image-filter",
74+
},
75+
];

‎src/utils/theme.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { createTheme } from "@mui/material";
2+
3+
export const theme = createTheme({
4+
typography: {
5+
fontFamily: ["Quicksand"].join(","),
6+
fontSize: 14,
7+
fontWeightLight: 400,
8+
fontWeightMedium: 500,
9+
fontWeightRegular: 600,
10+
fontWeightBold: 700,
11+
},
12+
});

0 commit comments

Comments
 (0)