Skip to content

refactoring repeating code #40

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

refactoring repeating code #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3794e85
refactoring repeating code
salmandotweb Jul 5, 2023
fba660c
Delete yarn.lock
anuragts Jul 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
214 changes: 87 additions & 127 deletions src/pages/tools.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,141 +1,101 @@
import { NextPage } from "next";
import { useRouter } from "next/router";
import { DiJavascript1 ,DiOpensource} from "react-icons/di";
import { DiJavascript1, DiOpensource } from "react-icons/di";
import { SiMysql } from "react-icons/si";
import {VscFileCode,VscRegex} from 'react-icons/vsc'
import {AiOutlineFieldTime,AiFillCode,AiFillContainer} from 'react-icons/ai'
import { VscFileCode, VscRegex } from "react-icons/vsc";
import {
AiOutlineFieldTime,
AiFillCode,
AiFillContainer,
} from "react-icons/ai";

const ToolCards = [
{
title: "SQL Query Generator",
icon: <SiMysql />,
link: "/sql",
},
{
title: "Javascript Generator",
icon: <DiJavascript1 />,
link: "/js",
},
{
title: "Explainer",
icon: <VscFileCode />,
link: "/lang",
},
{
title: "Interview Question Generator",
icon: <DiOpensource />,
link: "/interview",
},
{
title: "Regex Generator",
icon: <VscRegex />,
link: "/regex",
},
{
title: "Time Converter",
icon: <AiOutlineFieldTime />,
link: "/time",
},
{
title: "Translate Code",
icon: <AiFillCode />,
link: "/translate",
},
{
title: "Space Complexity Calculator",
icon: <AiFillContainer />,
link: "/space",
},
];

const Tools:NextPage = () => {
const ToolCard = ({
title,
icon,
link,
}: {
title: string;
icon: JSX.Element;
link: string;
}) => {
const router = useRouter();
return (
<div className="px-5 w-11/12 md:w-1/4 h-2/3 md:h-1/2 border-2 border-third mx-3 md:mx-5 my-10">
<div className="text-center my-3 text-lg flex items-center justify-center flex-col">
<div className="text-5xl ">{icon}</div>
<br />
<span>{title}</span>
</div>
<div className="text-center my-3">
<button
className="bg-third text-base md:text-xl text-secondary rounded px-5 py-2 my-4 hover:bg-secondary hover:text-third border-2 border-third"
onClick={() => {
router.push(link);
}}>
Try Now
</button>
</div>
</div>
);
};

const Tools: NextPage = () => {
const router = useRouter();
return (
<>
<div className=" mx-auto items-center text-center mt-3 md:mt-5 text-3xl md:text-5xl w-full">tools🛠️</div>
<div className=" mx-auto items-center text-center mt-3 md:mt-5 text-3xl md:text-5xl w-full">
Tools 🛠️
</div>
<div className="flex text-base md:text-xl flex-wrap mx-auto justify-center">
{/* sql */}
<div className="px-5 w-11/12 md:w-1/4 h-2/3 md:h-1/2 border-2 border-third mx-3 md:mx-5 my-10">
<div className="text-center my-3 text-lg">
<SiMysql className="inline text-5xl mx-3 " /> <br />{" "}
<span className=""> query generator </span>
</div>
<div className="text-center my-3">
<button
className="bg-third text-base md:text-xl text-secondary rounded px-5 py-2 my-4 hover:bg-secondary hover:text-third border-2 border-third"
onClick={() => router.push("/sql")}
>
Try Now
</button>
</div>
</div>
{/* Javascript generator */}
<div className=" px-5 w-11/12 md:w-1/4 h-2/3 md:h-1/2 border-2 border-third mx-3 md:mx-5 my-10">
<div className="text-center my-3 mt-7 text-lg">
<DiJavascript1 className="inline text-3xl mx-3 " /> <br />{" "}
<span className=""> generator </span>
</div>
<div className="text-center my-3">
<button
className="bg-third text-base md:text-xl text-secondary rounded px-5 py-2 my-4 hover:bg-secondary hover:text-third border-2 border-third"
onClick={() => router.push("/js")}
>
Try Now
</button>
</div>
</div>
{/* Lang explainer */}
<div className=" px-5 w-11/12 md:w-1/4 h-2/3 md:h-1/2 border-2 border-third mx-3 md:mx-5 my-10">
<div className="text-center my-3 mt-7 text-lg">
<VscFileCode className="inline text-3xl mx-3 " /> <br />{" "}
<span className=""> explainer </span>
</div>
<div className="text-center my-3">
<button
className="bg-third text-base md:text-xl text-secondary rounded px-5 py-2 my-4 hover:bg-secondary hover:text-third border-2 border-third"
onClick={() => router.push("/lang")}
>
Try Now
</button>
</div>
</div>
{/* Interview question generator */}
<div className=" px-5 w-11/12 md:w-1/4 h-2/3 md:h-1/2 border-2 border-third mx-3 md:mx-5 my-10">
<div className="text-center my-3 mt-7 text-lg">
<DiOpensource className="inline text-3xl mx-3 " /> <br />{" "}
<span className=""> Interview question generator </span>
</div>
<div className="text-center my-3">
<button
className="bg-third text-base md:text-xl text-secondary rounded px-5 py-2 my-4 hover:bg-secondary hover:text-third border-2 border-third"
onClick={() => router.push("/interview")}
>
Try Now
</button>
</div>
</div>
{/* Regular Expression generator */}
<div className=" px-5 w-11/12 md:w-1/4 h-2/3 md:h-1/2 border-2 border-third mx-3 md:mx-5 my-10">
<div className="text-center my-3 mt-7 text-lg">
<VscRegex className="inline text-3xl mx-3 " /> <br />{" "}
<span className=""> generator </span>
</div>
<div className="text-center my-3">
<button
className="bg-third text-base md:text-xl text-secondary rounded px-5 py-2 my-4 hover:bg-secondary hover:text-third border-2 border-third"
onClick={() => router.push("/regex")}
>
Try Now
</button>
</div>
</div>
{/* Time complexity */}
<div className=" px-5 w-11/12 md:w-1/4 h-2/3 md:h-1/2 border-2 border-third mx-3 md:mx-5 my-10">
<div className="text-center my-3 mt-7 text-lg">
<AiOutlineFieldTime className="inline text-3xl mx-3 " /> <br />{" "}
<span className=""> complexity calculator </span>
</div>
<div className="text-center my-3">
<button
className="bg-third text-base md:text-xl text-secondary rounded px-5 py-2 my-4 hover:bg-secondary hover:text-third border-2 border-third"
onClick={() => router.push("/time")}
>
Try Now
</button>
</div>
</div>
{/* Lang converter */}
<div className=" px-5 w-11/12 md:w-1/4 h-2/3 md:h-1/2 border-2 border-third mx-3 md:mx-5 my-10">
<div className="text-center my-3 mt-7 text-lg">
<AiFillCode className="inline text-3xl mx-3 " /> <br />{" "}
<span className=""> converter </span>
</div>
<div className="text-center my-3">
<button
className="bg-third text-base md:text-xl text-secondary rounded px-5 py-2 my-4 hover:bg-secondary hover:text-third border-2 border-third"
onClick={() => router.push("/translate")}
>
Try Now
</button>
</div>
</div>
{/* Space complexity */}
<div className=" w-11/12 md:w-1/4 h-2/3 md:h-1/2 border-2 border-third mx-3 md:mx-5 my-10 px-5">
<div className="text-center my-3 mt-7 text-lg">
<AiFillContainer className="inline text-3xl mx-3 " /> <br />{" "}
<span className="">Space complexity calculator </span>
</div>
<div className="text-center my-3">
<button
className="bg-third text-base md:text-xl text-secondary rounded px-5 py-2 my-4 hover:bg-secondary hover:text-third border-2 border-third"
onClick={() => router.push("/space")}
>
Try Now
</button>
</div>
</div>
{ToolCards.map((tool) => (
<ToolCard title={tool.title} icon={tool.icon} link={tool.link} />
))}
</div>
</>
);
};

export default Tools

export default Tools;
Loading