diff --git a/index.html b/index.html index e4b78ea..8421b5f 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,13 @@ - - - - - Vite + React + TS - - -
- - + + + + + Framy + + +
+ + diff --git a/public/assets/adminer.svg b/public/assets/adminer.svg new file mode 100644 index 0000000..1ac2993 --- /dev/null +++ b/public/assets/adminer.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/duplicati.svg b/public/assets/duplicati.svg new file mode 100644 index 0000000..21d7aae --- /dev/null +++ b/public/assets/duplicati.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 26b782f..ef96012 100644 --- a/src/App.tsx +++ b/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 ( -
+

Frame Work

- + + +
); } export default App; + +interface LinkGroupProps { + title: string; + links: LinkInterface[]; +} + +export const LinkGroup: FC = ({ title, links }) => { + return ( +
+

{title}

+
    + {links.map((link) => ( + + ))} +
+
+ ); +}; + +interface LinkInterface { + name: string; + link: string; + icon?: string; +} + +interface LinkProps { + link: LinkInterface; +} + +const Link: FC = ({ link }) => { + return ( +
  • + + {link.icon ? ( +
    + {link.name} +
    {link.name}
    +
    + ) : ( + link.name + )} +     +
    • + ); +}; diff --git a/src/CastesLinks.tsx b/src/CastesLinks.tsx new file mode 100644 index 0000000..2e1ca0e --- /dev/null +++ b/src/CastesLinks.tsx @@ -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 ; +};