work on caste load
This commit is contained in:
Romulus21
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React + TS</title>
|
||||
<title>Framy</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
1
public/assets/adminer.svg
Normal file
1
public/assets/adminer.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 25.74 512.2 460.51"><path d="M409.8 77.7 397.2 63l-66.3 57.3 66.5 56.5 12.6-14.7-49.3-41.9zm55.9 77c-6.7 0-12.2 5.5-12.2 12.2s5.5 12.2 12.2 12.2 12.2-5.5 12.2-12.2c0-6.8-5.5-12.2-12.2-12.2m34.4-112c-7.1-7.3-16.1-11.2-24.4-13.6-7.4-2-15-3.1-22.7-3.3-6.1-.2-10.1.2-10.1.2l1.8 19.3s13.3-1 25.8 2.5c6.3 1.8 12 4.6 15.9 8.5 3.8 3.9 6.4 8.8 6.4 17.5 0 4.5-1.2 6.8-3.2 9-2.4 2.4-5.4 4.3-8.7 5.3-7.2 2.6-15 2.7-15 2.7h-9.7v50.1h19.4v-32.4c4.1-.4 5.8.1 11.9-2.1 5.6-2 11.6-5.1 16.5-10.5 5.4-6.1 8.3-13.9 8.2-22-.2-13.2-5-23.9-12.1-31.2" style="fill:#f4301c"/><path d="M24.6 466.2c13.6 6.3 32 11.3 54.6 14.8 45.2 7 99.9 7 145.1 0 22.6-3.5 41-8.4 54.6-14.7 6.8-3.2 12.4-6.7 16.9-11.1 4.4-4.4 7.8-10.2 7.8-16.8V148.9c0-10.1-7.1-17.6-15.7-23-8.5-5.4-19.7-9.7-33.1-13.3-26.9-7.2-63-11.5-103-11.5s-76.1 4.3-103 11.5c-13.5 3.6-24.6 7.9-33.1 13.3-8.6 5.3-15.7 12.8-15.7 23v289.4c0 6.6 3.3 12.4 7.8 16.8 4.4 4.4 10 7.9 16.8 11.1M26 142.1c5.8-3.7 15.5-7.7 27.8-11 24.5-6.6 59.5-10.9 98-10.9s73.4 4.3 97.9 10.9c12.3 3.3 22 7.3 27.8 11s6.7 6.3 6.7 6.7-.9 3-6.7 6.7c-5.9 3.7-15.5 7.7-27.8 11-24.5 6.6-59.4 10.9-98 10.9s-73.5-4.3-98-10.9c-12.3-3.3-21.9-7.3-27.8-11s-6.7-6.3-6.7-6.7c.2-.3 1-2.9 6.8-6.7m-6.7 31.3c8.1 4.6 17.5 8.6 29.4 11.8 26.9 7.2 63 11.5 103 11.5 39.9 0 76.1-4.3 103-11.5 11.9-3.2 21.3-7.3 29.4-11.8v72c0 .2 0 1.1-2.1 3.1q-5.1 4.5-11.4 7.2c-10.9 5.1-28 9.9-49.4 13.2-42.8 6.6-96.3 6.6-139.1 0-21.4-3.3-38.5-8.1-49.4-13.2q-6.3-2.7-11.4-7.2c-2-2-2.1-2.9-2.1-3.1v-72zm0 96.3c1.9 1.1 3.2 2.5 5.3 3.5 13.6 6.4 32 11.3 54.6 14.8 45.2 7 99.9 7 145.1 0 22.6-3.5 41-8.4 54.6-14.8 2.1-1 3.4-2.4 5.3-3.5v72.1c0 .2 0 1.1-2.1 3.1q-5.1 4.5-11.4 7.2c-10.9 5.1-28 9.9-49.4 13.2-42.8 6.6-96.3 6.6-139.1 0-21.4-3.3-38.5-8.1-49.4-13.2q-6.3-2.7-11.4-7.2c-2-2-2.1-2.9-2.1-3.1zm0 96.5c1.9 1.1 3.2 2.5 5.3 3.5 13.6 6.3 32 11.3 54.6 14.8 45.2 7 99.9 7 145.1 0 22.6-3.5 41-8.5 54.6-14.8 2.1-1 3.4-2.4 5.3-3.5v72.1c0 .2 0 1.1-2.1 3.1q-5.1 4.5-11.4 7.2c-10.9 5.1-28 9.9-49.4 13.2-42.8 6.6-96.3 6.6-139.1 0-21.4-3.3-38.5-8.1-49.4-13.2q-6.3-2.7-11.4-7.2c-2-2-2.1-2.9-2.1-3.1z" style="fill:#1e5781"/></svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
1
public/assets/duplicati.svg
Normal file
1
public/assets/duplicati.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="Layer_1" x="0" y="0" version="1.1" viewBox="0 0 512 512"><style>.st1{fill:#fff}</style><path d="M240 440c-27.2 0-48-20.8-48-48v-80c0-27.2 20.8-48 48-48h128c27.2 0 48 20.8 48 48v80c0 27.2-20.8 48-48 48z" style="fill:#65b1dd"/><path d="M368 280c17.6 0 32 14.4 32 32v80c0 17.6-14.4 32-32 32H240c-17.6 0-32-14.4-32-32v-80c0-17.6 14.4-32 32-32zm0-32H240c-35.2 0-64 28.8-64 64v80c0 35.2 28.8 64 64 64h128c35.2 0 64-28.8 64-64v-80c0-35.2-28.8-64-64-64" class="st1"/><path d="M64 472c-27.2 0-48-20.8-48-48V312c0-27.2 20.8-48 48-48h160c27.2 0 48 20.8 48 48v112c0 27.2-20.8 48-48 48z" style="fill:#336697"/><path d="M224 280c17.6 0 32 14.4 32 32v112c0 17.6-14.4 32-32 32H64c-17.6 0-32-14.4-32-32V312c0-17.6 14.4-32 32-32zm0-32H64c-35.2 0-64 28.8-64 64v112c0 35.2 28.8 64 64 64h160c35.2 0 64-28.8 64-64V312c0-35.2-28.8-64-64-64" class="st1"/><path d="M192 328c-27.2 0-48-20.8-48-48V88c0-27.2 20.8-48 48-48h256c27.2 0 48 20.8 48 48v192c0 27.2-20.8 48-48 48z" style="fill:#1d4775"/><path d="M448 56c17.6 0 32 14.4 32 32v192c0 17.6-14.4 32-32 32H192c-17.6 0-32-14.4-32-32V88c0-17.6 14.4-32 32-32zm0-32H192c-35.2 0-64 28.8-64 64v192c0 35.2 28.8 64 64 64h256c35.2 0 64-28.8 64-64V88c0-35.2-28.8-64-64-64" class="st1"/></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
83
src/App.tsx
83
src/App.tsx
@@ -1,23 +1,82 @@
|
||||
import type { FC } from "react";
|
||||
import { CastesLinks } from "./CastesLinks";
|
||||
|
||||
function App() {
|
||||
const links = [
|
||||
{ name: "Adminer", link: "http://adminer.loc" },
|
||||
{ name: "Duplicati", link: "http://localhost:8200" },
|
||||
{ name: "Adminer", link: "http://adminer.loc", icon: "assets/adminer.svg" },
|
||||
{
|
||||
name: "Duplicati",
|
||||
link: "http://localhost:8200",
|
||||
icon: "assets/duplicati.svg",
|
||||
},
|
||||
];
|
||||
|
||||
const proLinks = [
|
||||
{
|
||||
name: "GPAO",
|
||||
link: "http://gpao.loc",
|
||||
icon: "http://gpao.loc/favicon.ico",
|
||||
},
|
||||
{ name: "Mycastes", link: "http://mycastes.loc" },
|
||||
];
|
||||
|
||||
return (
|
||||
<main className="dark:bg-sky-950 dark:text-sky-50 h-screen flex flex-col">
|
||||
<main className="dark:bg-slate-950 dark:text-slate-50 h-screen flex flex-col gap-10">
|
||||
<h1 className="text-center text-5xl font-semibold">Frame Work</h1>
|
||||
<ul className="flex flex-wrap gap-2 text-3xl flex-1 items-center justify-center">
|
||||
{links.map((link) => (
|
||||
<li>
|
||||
<a href={link.link} target="_blank">
|
||||
{link.name}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<LinkGroup title="Perso" links={links} />
|
||||
<LinkGroup title="Pro Dev" links={proLinks} />
|
||||
<CastesLinks />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
interface LinkGroupProps {
|
||||
title: string;
|
||||
links: LinkInterface[];
|
||||
}
|
||||
|
||||
export const LinkGroup: FC<LinkGroupProps> = ({ title, links }) => {
|
||||
return (
|
||||
<div>
|
||||
<h2 className="text-3xl font-semibold text-center mb-5">{title}</h2>
|
||||
<ul className="flex flex-wrap gap-2 text-3xl flex-1 items-center justify-center">
|
||||
{links.map((link) => (
|
||||
<Link link={link} />
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
interface LinkInterface {
|
||||
name: string;
|
||||
link: string;
|
||||
icon?: string;
|
||||
}
|
||||
|
||||
interface LinkProps {
|
||||
link: LinkInterface;
|
||||
}
|
||||
|
||||
const Link: FC<LinkProps> = ({ link }) => {
|
||||
return (
|
||||
<li>
|
||||
<a
|
||||
href={link.link}
|
||||
target="_blank"
|
||||
className="block h-16 min-w-60 text-center bg-slate-800 px-5 py-3 rounded hover:bg-slate-700 transition hover:scale-105"
|
||||
>
|
||||
{link.icon ? (
|
||||
<div className="flex items-center">
|
||||
<img src={link.icon} alt={link.name} className="max-h-10" />
|
||||
<div className="flex-1">{link.name}</div>
|
||||
</div>
|
||||
) : (
|
||||
link.name
|
||||
)}
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
19
src/CastesLinks.tsx
Normal file
19
src/CastesLinks.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { LinkGroup } from "./App";
|
||||
|
||||
export const CastesLinks = () => {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const links = [{ name: "GPAO", link: "http://gpao.lan" }];
|
||||
|
||||
useEffect(() => {
|
||||
testConnection();
|
||||
}, []);
|
||||
|
||||
const testConnection = async () => {
|
||||
try {
|
||||
const res = await fetch("http://gpao.lan");
|
||||
console.log("link", res);
|
||||
} catch (error) {}
|
||||
};
|
||||
return <LinkGroup title="Castes" links={links} />;
|
||||
};
|
||||
Reference in New Issue
Block a user