Skip to content

Commit 4b159a3

Browse files
NexusOnePlusNexusOnePlus
committed
ft: added delete and short descrip, new bg home
1 parent f5e6f56 commit 4b159a3

File tree

8 files changed

+240
-118
lines changed

8 files changed

+240
-118
lines changed

‎src/App.tsx‎

Lines changed: 48 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,77 @@
1+
import { array } from "../../../AppData/Local/deno/npm/registry.npmjs.org/@types/prop-types/15.7.13/index.d.ts";
12
import "./App.css";
23
import { Link } from "react-router-dom";
34
// @deno-types="@types/react"
45
// import { useState } from 'react'
6+
7+
type Buble = {
8+
left: string;
9+
top: string;
10+
size: string;
11+
opacity: number;
12+
color: string;
13+
};
14+
15+
const randomBubles = (): Buble => {
16+
const value = (min: number, max: number) => Math.floor(Math.random() * (max - min) + min);
17+
return {
18+
left: `${value(0,100)}%`,
19+
top: `${value(0,100)}%`,
20+
size: `${value(2,10)}rem`,
21+
opacity: 0.7,
22+
color: `hsl(${value(200,255)}, 100%, 70%)`
23+
}
24+
25+
}
26+
27+
28+
29+
530
function App() {
31+
const bubles = Array.from({ length: 10 }, randomBubles);
32+
633
return (
734
<div className="bg-black dark">
8-
<div className="flex p-9 bg-fixed gap-11 flex-col place-items-center bg-gradient-to-t from-blue-950 to-black text-white
9-
h-full lg:min-h-screen min-w-full overflow-hidden">
10-
<div className="grid place-items-center py-6">
35+
<div className="flex p-9 bg-fixed gap-11 flex-col place-items-center bg-gradient-to-t from-slate-950 to-neutral-950 text-white h-full lg:min-h-screen min-w-full overflow-hidden relative">
36+
{bubles.map((buble: Buble, ind) => (
37+
<div
38+
key={ind}
39+
className="absolute rounded-full"
40+
style={{
41+
left: buble.left,
42+
top: buble.top,
43+
width: buble.size,
44+
height: buble.size,
45+
opacity: buble.opacity,
46+
backgroundColor: 'transparent',
47+
boxShadow: `0 0 10px ${buble.color}, 0 0 20px ${buble.color}`,
48+
}}
49+
/>
50+
))}
51+
<div className="grid place-items-center py-6 z-10">
1152
<img src="/icon.svg" height={"200px"} width={"200px"} />
1253
</div>
1354
<div>
1455
<h1 className="text-[50px] font-extrabold lg:text-[80px]">
1556
CodeWars
1657
</h1>
17-
<p className="font-normal text-white/70 text-center m-4">
58+
<p className="font-normal text-white/70 text-center m-4">
1859
Ejercicios resueltos v:::::
1960
</p>
2061
</div>
2162
<div className="grid place-items-center grid-flow-row lg:grid-flow-col h-full gap-3 lg:gap-7 px-32 text-center">
2263
<Link to="/hackerank">
23-
<div className="bg-green-500/20 border-4 border-green-400 h-[100px] w-[250px] lg:h-[150px] p-5 content-center rounded-2xl text-[20px] lg:text-[30px] font-bold">
64+
<div className="bg-green-500/20 border-4 border-green-400 h-[100px] w-[250px] lg:h-[150px] p-5 content-center rounded-2xl text-[20px] lg:text-[30px] font-bold">
2465
Hackerank
2566
</div>
2667
</Link>
2768
<Link to="/codeforces">
28-
<div className="bg-red-500/20 border-4 border-red-400 h-[100px] w-[250px] lg:h-[150px] p-5 content-center rounded-2xl text-[20px] lg:text-[30px] font-bold">
69+
<div className="bg-red-500/20 border-4 border-red-400 h-[100px] w-[250px] lg:h-[150px] p-5 content-center rounded-2xl text-[20px] lg:text-[30px] font-bold">
2970
CodeForces
3071
</div>
3172
</Link>
3273
<Link to="/omegaup">
33-
<div className="bg-blue-500/20 border-4 border-blue-400 h-[100px] w-[250px] lg:h-[150px] p-5 content-center rounded-2xl text-[20px] lg:text-[30px] font-bold">
74+
<div className="bg-blue-500/20 border-4 border-blue-400 h-[100px] w-[250px] lg:h-[150px] p-5 content-center rounded-2xl text-[20px] lg:text-[30px] font-bold">
3475
Omega Up
3576
</div>
3677
</Link>

‎src/codeforces/code.tsx‎

Lines changed: 38 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
22
import { useParams } from "react-router-dom";
33
import SyntaxHighlighter from "react-syntax-highlighter";
44
import { nightOwl } from "react-syntax-highlighter/dist/esm/styles/hljs";
5+
import { Link } from 'react-router-dom'
56

67
const Coder = () => {
78
const { id } = useParams();
@@ -14,7 +15,23 @@ const Coder = () => {
1415

1516
// console.log(hacks);
1617
}, []);
17-
18+
const eliminar = () => {
19+
// console.log(dato);
20+
fetch(`https://nexus-api-note-co-78.deno.dev/codes/codeforces/${id}`, {
21+
method: "DELETE",
22+
})
23+
.then((res) => {
24+
if (!res.ok) {
25+
console.log("Problem found");
26+
return;
27+
}
28+
return res.json();
29+
})
30+
.then((data) => console.log(data))
31+
.catch((error) => {
32+
console.log(error);
33+
});
34+
};
1835
return (
1936
<div className=" bg-gradient-to-t from-teal-950 to-black min-h-screen gap-8 text-white py-10">
2037
<div>
@@ -28,15 +45,26 @@ const Coder = () => {
2845
{hacks.description}
2946
</h1>
3047
</div>
31-
<div className="grid place-content-center m-2">
32-
<button
33-
onClick={() => {
34-
navigator.clipboard.writeText(hacks.solution)
35-
}}
36-
className=" border-2 border-white py-2 hover:bg-white hover:text-black px-3 rounded-2xl w-full text-[15px]">
37-
Copy
38-
</button>
39-
</div>
48+
<div className="flex place-content-center m-2 gap-2">
49+
<button
50+
onClick={() => {
51+
navigator.clipboard.writeText(hacks.solution);
52+
}}
53+
className=" border-2 w-fit border-white py-2 hover:bg-white hover:text-black px-3 rounded-2xl text-[15px]"
54+
>
55+
Copy
56+
</button>
57+
<Link
58+
to={`/codeforces/`}
59+
onClick={() => {
60+
eliminar();
61+
}}
62+
>
63+
<div className="border-2 border-white py-2 hover:bg-white hover:text-black px-3 rounded-2xl w-fit text-[15px]">
64+
Eliminar
65+
</div>
66+
</Link>
67+
</div>
4068
<div className="grid place-items-center grid-flow-row lg:grid-flow-col lg:px-20 h-full gap-3 lg:gap-7 text-center mt-5">
4169
<div className="bg-green-900/20 border-4 border-emerald-300 h-full w-[calc(100%-80px)] overflow-auto lg:w-full content-center rounded-2xl text-[20px] lg:text-[30px] font-bold">
4270
<div className="text-left text-[15px] border rounded-2xl ">

‎src/codeforces/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const Hk = () => {
3434
className="bg-red-900/20 border-4 border-red-300 h-[100px] w-[250px] lg:h-[150px] p-5 content-center rounded-2xl text-[20px] lg:text-[30px] font-bold"
3535
>
3636
<h1 className="text-[20px]">{hack.name}</h1>
37-
<p className="text-[15px] text-gray-400 overflow-scroll">{hack.description} </p>
37+
<p className="text-[15px] text-gray-400 overflow-hidden h-1/2 "> | {hack.description} </p>
3838
</div>
3939
</Link>
4040
);

‎src/hackerank/code.tsx‎

Lines changed: 73 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -2,55 +2,83 @@ import { useEffect, useState } from "react";
22
import { useParams } from "react-router-dom";
33
import SyntaxHighlighter from "react-syntax-highlighter";
44
import { nightOwl } from "react-syntax-highlighter/dist/esm/styles/hljs";
5+
import { Link } from "react-router-dom";
56

67
const Hack = () => {
7-
const { id } = useParams();
8-
const [hacks, setHacks] = useState({});
8+
const { id } = useParams();
9+
const [hacks, setHacks] = useState({});
910

10-
useEffect(() => {
11-
fetch(`https://nexus-api-note-co-78.deno.dev/codes/hackerank/${id}`)
12-
.then(async (res) => await res.json())
13-
.then(([json]) => setHacks(json));
11+
useEffect(() => {
12+
fetch(`https://nexus-api-note-co-78.deno.dev/codes/hackerank/${id}`)
13+
.then(async (res) => await res.json())
14+
.then(([json]) => setHacks(json));
1415

15-
// console.log(hacks);
16-
}, []);
17-
18-
return (
19-
<div className=" bg-gradient-to-t from-teal-950 to-black min-h-screen gap-8 text-white py-10">
20-
<div>
21-
<h1 className="text-[50px] font-extrabold lg:text-[50px] text-center">
22-
{hacks.name}
23-
</h1>
24-
<p className="font-normal text-white/70 text-center m-4">
25-
{hacks.original}
26-
</p>
27-
<h1 className="text-[15px] font-normal lg:text-[15px] text-center">
28-
{hacks.description}
29-
</h1>
30-
</div>
31-
<div className="grid place-content-center m-2">
32-
<button
33-
onClick={() => {
34-
navigator.clipboard.writeText(hacks.solution)
35-
}}
36-
className=" border-2 border-white py-2 hover:bg-white hover:text-black px-3 rounded-2xl w-full text-[15px]">
37-
Copy
38-
</button>
39-
</div>
40-
<div className="grid place-items-center grid-flow-row lg:grid-flow-col lg:px-20 h-full gap-3 lg:gap-7 text-center mt-5">
41-
<div className="bg-green-900/20 border-4 border-emerald-300 h-full w-[calc(100%-80px)] overflow-auto lg:w-full content-center rounded-2xl text-[20px] lg:text-[30px] font-bold">
42-
<div className="text-left text-[15px] border rounded-2xl ">
43-
<SyntaxHighlighter
44-
language="cpp"
45-
style={nightOwl}
46-
showLineNumbers
47-
>
48-
{hacks.solution}
49-
</SyntaxHighlighter>
50-
</div>
51-
</div>
52-
</div>
16+
// console.log(hacks);
17+
}, []);
18+
const eliminar = () => {
19+
// console.log(dato);
20+
fetch(`https://nexus-api-note-co-78.deno.dev/codes/hackerank/${id}`, {
21+
method: "DELETE",
22+
})
23+
.then((res) => {
24+
if (!res.ok) {
25+
console.log("Problem found");
26+
return;
27+
}
28+
return res.json();
29+
})
30+
.then((data) => console.log(data))
31+
.catch((error) => {
32+
console.log(error);
33+
});
34+
};
35+
return (
36+
<div className=" bg-gradient-to-t from-teal-950 to-black min-h-screen gap-8 text-white py-10">
37+
<div>
38+
<h1 className="text-[50px] font-extrabold lg:text-[50px] text-center">
39+
{hacks.name}
40+
</h1>
41+
<p className="font-normal text-white/70 text-center m-4">
42+
{hacks.original}
43+
</p>
44+
<h1 className="text-[15px] font-normal lg:text-[15px] text-center">
45+
{hacks.description}
46+
</h1>
47+
</div>
48+
<div className="flex place-content-center m-2 gap-2">
49+
<button
50+
onClick={() => {
51+
navigator.clipboard.writeText(hacks.solution);
52+
}}
53+
className=" border-2 w-fit border-white py-2 hover:bg-white hover:text-black px-3 rounded-2xl text-[15px]"
54+
>
55+
Copy
56+
</button>
57+
<Link
58+
to={`/hackerank/`}
59+
onClick={() => {
60+
eliminar();
61+
}}
62+
>
63+
<div className="border-2 border-white py-2 hover:bg-white hover:text-black px-3 rounded-2xl w-fit text-[15px]">
64+
Eliminar
65+
</div>
66+
</Link>
67+
</div>
68+
<div className="grid place-items-center grid-flow-row lg:grid-flow-col lg:px-20 h-full gap-3 lg:gap-7 text-center mt-5">
69+
<div className="bg-green-900/20 border-4 border-emerald-300 h-full w-[calc(100%-80px)] overflow-auto lg:w-full content-center rounded-2xl text-[20px] lg:text-[30px] font-bold">
70+
<div className="text-left text-[15px] border rounded-2xl ">
71+
<SyntaxHighlighter
72+
language="cpp"
73+
style={nightOwl}
74+
showLineNumbers
75+
>
76+
{hacks.solution}
77+
</SyntaxHighlighter>
78+
</div>
5379
</div>
54-
);
80+
</div>
81+
</div>
82+
);
5583
};
5684
export default Hack;

‎src/hackerank/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const Hk = () => {
3434
className="bg-green-900/20 border-4 border-emerald-300 h-[100px] w-[250px] lg:h-[150px] p-5 content-center rounded-2xl text-[20px] lg:text-[30px] font-bold"
3535
>
3636
<h1 className="text-[20px]">{hack.name}</h1>
37-
<p className="text-[15px] text-gray-400 overflow-scroll">{hack.description} </p>
37+
<p className="text-[15px] text-gray-400 overflow-hidden h-1/2 "> | {hack.description} </p>
3838
</div>
3939
</Link>
4040
);

0 commit comments

Comments
 (0)