worble/twitch-chatter-helper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add tailwind

Browse Source
This commit is contained in:
worble
2025-03-02 21:45:04 +00:00
parent 1b61f200e2
commit 006c052d75
7 changed files with 1537 additions and 1045 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
index.html
View File

@@ -4,14 +4,9 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#000000"> <meta name="theme-color" content="#000000">
<title>Twitch Chatter Helper</title> <title>Twitch Chat Helper</title>
<style>
body:has(dialog[open]) {
overflow: hidden;
}
</style>
</head> </head>
<body> <body class="[&:has(dialog[open])]:overflow-hidden">
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<script src="/src/index.tsx" type="module"></script> <script src="/src/index.tsx" type="module"></script>
</body> </body>

2540
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@@ -18,7 +18,9 @@
}, },
"dependencies": { "dependencies": {
"@picocss/pico": "^2.0.6", "@picocss/pico": "^2.0.6",
"@tailwindcss/vite": "^4.0.9",
"es-toolkit": "^1.32.0", "es-toolkit": "^1.32.0",
"solid-js": "^1.9.5" "solid-js": "^1.9.5",
"tailwindcss": "^4.0.9"
} }
} }

23
src/components/Chatters.tsx
View File

@@ -33,8 +33,8 @@ const ExportDialog: Component<{
return ( return (
<dialog ref={props.setRef}> <dialog ref={props.setRef}>
<article style={{ display: "grid", gap: "1rem" }}> <article class="flex flex-col">
<div style={{ display: "flex" }}> <div class="flex">
<button <button
class="secondary" class="secondary"
type="button" type="button"
@@ -46,7 +46,7 @@ const ExportDialog: Component<{
type="button" type="button"
onClick={copyClipboard} onClick={copyClipboard}
disabled={clipboardStatus() !== "Initial"} disabled={clipboardStatus() !== "Initial"}
style={{ "margin-left": "auto" }} class="ml-auto!"
> >
<Show <Show
when={clipboardStatus() === "Written"} when={clipboardStatus() === "Written"}
@@ -56,11 +56,7 @@ const ExportDialog: Component<{
</Show> </Show>
</button> </button>
</div> </div>
<pre <pre class="max-h-10/12 overflow-auto p-2">{props.getJson()}</pre>
style={{ "max-height": "80vh", overflow: "auto", padding: "1rem" }}
>
{props.getJson()}
</pre>
</article> </article>
</dialog> </dialog>
); );
@@ -112,8 +108,8 @@ const ChatttersView: Component<{
return ( return (
<> <>
<ExportDialog ref={dialogRef} setRef={setDialogRef} getJson={getJson} /> <ExportDialog ref={dialogRef} setRef={setDialogRef} getJson={getJson} />
<div style={{ display: "grid", gap: "1rem" }}> <div class="flex flex-col gap-2">
<div style={{ display: "flex", gap: "1rem" }}> <div class="flex gap-2">
<button type="button" onClick={() => setSelected([])}> <button type="button" onClick={() => setSelected([])}>
Select None Select None
</button> </button>
@@ -133,10 +129,9 @@ const ChatttersView: Component<{
</button> </button>
<button <button
class="contrast" class="contrast ml-auto!"
type="button" type="button"
onClick={() => dialogRef()?.showModal()} onClick={() => dialogRef()?.showModal()}
style={{ "margin-left": "auto" }}
> >
Export to JSON Export to JSON
</button> </button>
@@ -144,7 +139,7 @@ const ChatttersView: Component<{
<div> <div>
<span>Select first</span>&nbsp; <span>Select first</span>&nbsp;
<input <input
style={{ width: "unset" }} class="w-[unset]!"
placeholder="Select first..." placeholder="Select first..."
inputmode="numeric" inputmode="numeric"
pattern="[0-9]*" pattern="[0-9]*"
@@ -190,7 +185,7 @@ const ChatttersView: Component<{
</article> </article>
<article> <article>
<h2>Scrubs</h2> <h2>Scrubs</h2>
<div style={{ display: "flex", "flex-wrap": "wrap", gap: "1rem" }}> <div class="flex flex-wrap gap-2">
<For <For
each={scrubs.filter((scrub) => each={scrubs.filter((scrub) =>
search() search()

1
src/index.css Normal file
View File

@@ -0,0 +1 @@
@import "tailwindcss";

2
src/index.tsx
View File

@@ -1,7 +1,7 @@
/* @refresh reload */
import "@picocss/pico"; import "@picocss/pico";
import { render } from "solid-js/web"; import { render } from "solid-js/web";
import { App } from "./App.tsx"; import { App } from "./App.tsx";
import "./index.css";
const root = document.createElement("div"); const root = document.createElement("div");
document.body.appendChild(root); document.body.appendChild(root);

3
vite.config.ts
View File

@@ -1,9 +1,10 @@
import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "vite"; import { defineConfig } from "vite";
import solidPlugin from "vite-plugin-solid"; import solidPlugin from "vite-plugin-solid";
import tsconfigPaths from "vite-tsconfig-paths"; import tsconfigPaths from "vite-tsconfig-paths";
export default defineConfig({ export default defineConfig({
plugins: [tsconfigPaths(), solidPlugin()], plugins: [tsconfigPaths(), tailwindcss(), solidPlugin()],
server: { server: {
port: 3000, port: 3000,
}, },