Skip to content

Commit d26c629

Browse files
SH20RAJSH20RAJ
authored
feat: Add Encoding tool to Tools component
1 parent 8f001d8 commit d26c629

File tree

1 file changed

+123
-77
lines changed

1 file changed

+123
-77
lines changed

‎src/app/Tools.js

Lines changed: 123 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,130 @@
11
import { Button } from "@/components/ui/button";
2-
import { Card, CardContent, CardDescription, CardFooter, CardTitle } from "@/components/ui/card";
3-
2+
import {
3+
Card,
4+
CardContent,
5+
CardDescription,
6+
CardFooter,
7+
CardTitle,
8+
} from "@/components/ui/card";
49

510
export default function Tools() {
6-
let tools = [
7-
{
8-
name: "Markdown to HTML",
9-
description: "Convert markdown to HTML",
10-
url: "https://sopkit.github.io/markdown-to-html/",
11-
image: "",
12-
},
13-
{
14-
name: "HTML to Markdown",
15-
description: "Convert HTML to markdown",
16-
url: "https://sopkit.github.io/markdown-to-html/",
17-
image: "",
18-
},
19-
{
20-
name: "HTML to JSX",
21-
description: "Convert HTML to JSX",
22-
url: "https://sopkit.github.io/html-to-jsx-converter/",
23-
image: "",
24-
},
25-
{
26-
name: "Toss a Coin",
27-
description: "Toss a coin",
28-
url: "https://sopkit.github.io/toss-a-coin/",
29-
image: "",
30-
},
31-
{
32-
name: "Play Piano",
33-
description: "Play Piano on Web",
34-
url: "https://sopkit.github.io/playable-piano/",
35-
image: "",
36-
},
37-
{
38-
name: "Daily Todo App",
39-
description: "Daily Todo App",
40-
url: "https://sopkit.github.io/daily-todo-app/",
41-
url2:"https://daily-todo-app.pages.dev/",
42-
image: "",
43-
},{
44-
name: "Audio Recorder",
45-
description: "An Audio Recorder with Pause and Download Functionality Using JavaScript",
46-
url: "https://sopkit.github.io/audio-recorder/",
47-
},
48-
{
49-
50-
name: "Live Markdown Editor",
51-
description: "Live Markdown Editor",
52-
url: "https://sopkit.github.io/markdown-editor/",
53-
image: "",
54-
},
55-
{
56-
//https://sopkit.github.io/file-converter/
57-
name: "File Converter",
58-
description: "The ultimate online tool for unlimited and free multimedia conversion. Transform images, audio, and videos effortlessly, without restrictions.",
59-
url: "https://sopkit.github.io/file-converter/",
60-
image: "",
61-
}
11+
let tools = [
12+
{
13+
name: "Markdown to HTML",
14+
description: "Convert markdown to HTML",
15+
url: "https://sopkit.github.io/markdown-to-html/",
16+
image: "",
17+
},
18+
{
19+
name: "Encoding",
20+
description: "Encoding and Decoding Tool",
21+
url: "https://sopkit.github.io/Encoding/",
22+
image: "",
23+
},
24+
{
25+
name: "Web Tools",
26+
description: "Web Tools",
27+
url: "https://sopkit.github.io/tools/",
28+
image: "",
29+
},
30+
{
31+
name: "HTML to Markdown",
32+
description: "Convert HTML to markdown",
33+
url: "https://sopkit.github.io/markdown-to-html/",
34+
image: "",
35+
},
36+
{
37+
name: "HTML to JSX",
38+
description: "Convert HTML to JSX",
39+
url: "https://sopkit.github.io/html-to-jsx-converter/",
40+
image: "",
41+
},
42+
{
43+
name: "Toss a Coin",
44+
description: "Toss a coin",
45+
url: "https://sopkit.github.io/toss-a-coin/",
46+
image: "",
47+
},
48+
{
49+
name: "Play Piano",
50+
description: "Play Piano on Web",
51+
url: "https://sopkit.github.io/playable-piano/",
52+
image: "",
53+
},
54+
{
55+
name: "Daily Todo App",
56+
description: "Daily Todo App",
57+
url: "https://sopkit.github.io/daily-todo-app/",
58+
url2: "https://daily-todo-app.pages.dev/",
59+
image: "",
60+
},
61+
{
62+
name: "Audio Recorder",
63+
description:
64+
"An Audio Recorder with Pause and Download Functionality Using JavaScript",
65+
url: "https://sopkit.github.io/audio-recorder/",
66+
},
67+
{
68+
name: "Live Markdown Editor",
69+
description: "Live Markdown Editor",
70+
url: "https://sopkit.github.io/markdown-editor/",
71+
image: "",
72+
},
73+
{
74+
//https://sopkit.github.io/file-converter/
75+
name: "File Converter",
76+
description:
77+
"The ultimate online tool for unlimited and free multimedia conversion. Transform images, audio, and videos effortlessly, without restrictions.",
78+
url: "https://sopkit.github.io/file-converter/",
79+
image: "",
80+
},
81+
];
82+
83+
const otherTools = [
84+
{
85+
//https://sopkit.github.io/css-custom-scrollbar-maker/
86+
name: "CSS Custom Scrollbar Maker",
87+
description:
88+
"Create custom scrollbars using CSS. Generate your own scrollbar style with this online tool.",
89+
url: "https://sopkit.github.io/css-custom-scrollbar-maker/",
90+
image: "",
91+
}
6292
];
6393

64-
return (
94+
return <>
95+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-10">
96+
{tools.map((tool, i) => (
97+
<Card key={i} className="shadow-lg pt-4">
98+
<CardContent>
99+
<CardTitle>{tool.name}</CardTitle>
100+
<CardDescription>{tool.description}</CardDescription>
101+
</CardContent>
102+
<CardFooter>
103+
<Button target="_blank">
104+
<a href={tool.url}>Visit</a>
105+
</Button>
106+
</CardFooter>
107+
</Card>
108+
))}
109+
</div>
110+
<div className=" mt-10">
111+
<h1 className=" text-2xl ">Other Tools</h1>
112+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-10">
113+
{otherTools.map((tool, i) => (
114+
<Card key={i} className="shadow-lg pt-4">
115+
<CardContent>
116+
<CardTitle>{tool.name}</CardTitle>
117+
<CardDescription>{tool.description}</CardDescription>
118+
</CardContent>
119+
<CardFooter>
120+
<Button target="_blank">
121+
<a href={tool.url}>Visit</a>
122+
</Button>
123+
</CardFooter>
124+
</Card>
125+
))}
126+
</div>
127+
</div>
65128

66-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-10">
67-
{tools.map((tool, i) => (
68-
<Card key={i} className="shadow-lg pt-4">
69-
<CardContent>
70-
<CardTitle>{tool.name}</CardTitle>
71-
<CardDescription>{tool.description}</CardDescription>
72-
</CardContent>
73-
<CardFooter>
74-
<Button target="_blank">
75-
<a href={tool.url} >
76-
Visit
77-
</a>
78-
</Button>
79-
</CardFooter>
80-
</Card>
81-
))}
82-
</div>
83-
);
129+
</>
84130
}

0 commit comments

Comments
 (0)