2021-03-22 15:35:13 -04:00
|
|
|
import React from "react";
|
|
|
|
|
2021-04-02 16:14:50 -04:00
|
|
|
export interface Link {
|
|
|
|
name: string;
|
2021-03-22 15:35:13 -04:00
|
|
|
url: string;
|
|
|
|
}
|
|
|
|
interface LinkProps {
|
|
|
|
links: Link[];
|
|
|
|
}
|
|
|
|
|
2021-04-02 16:14:50 -04:00
|
|
|
export const Links: React.FC<LinkProps> = ({ links }) => {
|
2021-03-28 15:22:16 -04:00
|
|
|
const postData = (url = ""): void => {
|
|
|
|
fetch(url, {
|
|
|
|
method: "POST",
|
|
|
|
})
|
|
|
|
.then((response) => response.json())
|
|
|
|
.then((data) => {
|
|
|
|
console.log("Success:", data);
|
|
|
|
})
|
|
|
|
.catch((error) => {
|
|
|
|
console.error("Error:", error);
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2021-04-03 21:01:00 -04:00
|
|
|
const handleClick = (name: string, url: string) =>
|
|
|
|
fetch("/api/clicks", {
|
|
|
|
method: "POST",
|
|
|
|
headers: {
|
|
|
|
"Content-Type": "application/json",
|
|
|
|
},
|
|
|
|
body: JSON.stringify({ name, url }),
|
|
|
|
});
|
2021-03-28 15:22:16 -04:00
|
|
|
|
2021-03-22 15:35:13 -04:00
|
|
|
return (
|
2021-03-28 15:22:16 -04:00
|
|
|
<div className="text-s flex flex-col items-center w-full absolute top-6 font-karla">
|
2021-03-22 15:35:13 -04:00
|
|
|
<img className="mb-3" src="csc_logo.png" alt="CSC Logo" width="100px" />
|
|
|
|
<h1 className="font-bold">@uwcsclub</h1>
|
|
|
|
<ul className="flex flex-col my-6 w-full">
|
2021-04-02 16:14:50 -04:00
|
|
|
{links.map(({ name, url }, i) => (
|
2021-04-01 18:26:56 -04:00
|
|
|
<li key={i} className="w-full contents">
|
2021-03-22 15:35:13 -04:00
|
|
|
<a
|
|
|
|
className="btn bg-gray-450 p-3 text-white font-bold text-center self-center my-1.5
|
|
|
|
hover:bg-white hover:text-black border-2 border-gray-800 transition duration-200 ease-in-out
|
|
|
|
w-11/12 sm:w-4/12"
|
|
|
|
href={url}
|
|
|
|
target="_blank"
|
|
|
|
rel="noreferrer"
|
2021-04-03 21:01:00 -04:00
|
|
|
onClick={() => handleClick(name, url)}
|
2021-03-22 15:35:13 -04:00
|
|
|
>
|
2021-04-02 16:14:50 -04:00
|
|
|
{name}
|
2021-03-22 15:35:13 -04:00
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
))}
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|