react frontend
This commit is contained in:
parent
4810545595
commit
293e5988ad
|
|
@ -0,0 +1,24 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
{
|
||||
"name": "front",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router": "^6.8.0",
|
||||
"react-router-dom": "^6.8.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.27",
|
||||
"@types/react-dom": "^18.0.10",
|
||||
"@vitejs/plugin-react-swc": "^3.0.0",
|
||||
"autoprefixer": "^10.4.13",
|
||||
"postcss": "^8.4.21",
|
||||
"tailwindcss": "^3.2.4",
|
||||
"vite": "^4.1.0"
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,6 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1,20 @@
|
|||
import { Link, Outlet } from "react-router-dom";
|
||||
import Header from "./Header";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<Outlet />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function Intro() {
|
||||
return (
|
||||
<div className="m-4">
|
||||
<h1>hello</h1>
|
||||
<p>this is a bot for twitch.tv</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
import { useLoaderData } from "react-router-dom";
|
||||
|
||||
export async function loader({ params }) {
|
||||
const data = await fetch(
|
||||
`http://localhost:3000/api/v1/commands/${params.commandName}`
|
||||
)
|
||||
.then((res) => res.json())
|
||||
.catch((err) => console.log(err));
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
export function Command() {
|
||||
const data = useLoaderData();
|
||||
|
||||
return (
|
||||
<div className="p-4 m-4 rounded shadow">
|
||||
<h1 className="text-4xl tracking-tighter text-center border-b pb-2 mb-2">
|
||||
{data.name}
|
||||
</h1>
|
||||
<div className="p-4 space-y-1">
|
||||
<p className="font-semibold">{data.desc}</p>
|
||||
<p>Only for privlidged: {data.restricted.toString()}</p>
|
||||
<p>Needs mod: {data.mod.toString()}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
import { NavLink, Outlet, useLoaderData } from "react-router-dom";
|
||||
|
||||
export async function loader() {
|
||||
let cmds = [];
|
||||
const data = await fetch(`http://localhost:3000/api/v1/commands`)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
for (let key in data) {
|
||||
cmds.push(data[key]);
|
||||
}
|
||||
});
|
||||
|
||||
return cmds;
|
||||
}
|
||||
|
||||
export default function Commands() {
|
||||
const data = useLoaderData();
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl p-6 mx-auto">
|
||||
<ul className="flex flex-wrap items-center justify-center">
|
||||
{data.map((cmd, index) => (
|
||||
<li key={index}>
|
||||
<NavLink
|
||||
className={({ isActive }) =>
|
||||
isActive
|
||||
? "block bg-gray-100 m-2 py-2 px-4 rounded-xl shadow border hover:bg-gray-100"
|
||||
: "block m-2 py-2 px-4 rounded-xl shadow border hover:bg-gray-100"
|
||||
}
|
||||
to={`${cmd.name}`}
|
||||
>
|
||||
<span>{cmd.name}</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Outlet />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import { Link } from "react-router-dom";
|
||||
|
||||
export default function Header() {
|
||||
return (
|
||||
<header className="border-b flex items-center p-4 shadow">
|
||||
<h1 className="flex-grow text-gray-700 tracking-tighter text-2xl">
|
||||
twitch bot
|
||||
</h1>
|
||||
<nav className="space-x-4">
|
||||
{["commands", "/"].map((item) => (
|
||||
<Link
|
||||
className="text-sky-400 hover:underline hover:text-sky-600"
|
||||
to={`${item}`}
|
||||
>
|
||||
{item}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import { createBrowserRouter, RouterProvider } from "react-router-dom";
|
||||
import App, { Intro } from "./App";
|
||||
import { Command, loader as commandLoader } from "./Command";
|
||||
import Commands, { loader as commandsLoader } from "./Commands";
|
||||
import "./index.css";
|
||||
|
||||
const router = createBrowserRouter([
|
||||
{
|
||||
path: "/",
|
||||
element: <App />,
|
||||
children: [
|
||||
{
|
||||
path: "/",
|
||||
element: <Intro />,
|
||||
},
|
||||
{
|
||||
path: "commands",
|
||||
element: <Commands />,
|
||||
loader: commandsLoader,
|
||||
children: [
|
||||
{
|
||||
path: ":commandName",
|
||||
loader: commandLoader,
|
||||
element: <Command />,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root")).render(
|
||||
<React.StrictMode>
|
||||
<RouterProvider router={router} />
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react-swc'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
11
web/index.js
11
web/index.js
|
|
@ -2,11 +2,22 @@ const express = require("express");
|
|||
const app = express();
|
||||
const port = 3000;
|
||||
const { client } = require("../clients/twitch.js");
|
||||
const path = __dirname + "/front/dist/";
|
||||
|
||||
app.use(express.static(path));
|
||||
|
||||
app.get("/api/v1/commands", (req, res) => {
|
||||
res.json(client.commands);
|
||||
});
|
||||
|
||||
app.get("/api/v1/commands/:name", (req, res) => {
|
||||
res.json(client.commands[req.params.name]);
|
||||
});
|
||||
|
||||
app.get("/", (req, res) => {
|
||||
res.sendFile(path + "index.html");
|
||||
});
|
||||
|
||||
app.listen(port, () => {
|
||||
console.log(`Example app listening on port ${port}`);
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue