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 name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#000000">
<title>Twitch Chatter Helper</title>
<style>
body:has(dialog[open]) {
overflow: hidden;
}
</style>
<title>Twitch Chat Helper</title>
</head>
<body>
<body class="[&:has(dialog[open])]:overflow-hidden">
<noscript>You need to enable JavaScript to run this app.</noscript>
<script src="/src/index.tsx" type="module"></script>
</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": {
"@picocss/pico": "^2.0.6",
"@tailwindcss/vite": "^4.0.9",
"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 (
<dialog ref={props.setRef}>
<article style={{ display: "grid", gap: "1rem" }}>
<div style={{ display: "flex" }}>
<article class="flex flex-col">
<div class="flex">
<button
class="secondary"
type="button"
@@ -46,7 +46,7 @@ const ExportDialog: Component<{
type="button"
onClick={copyClipboard}
disabled={clipboardStatus() !== "Initial"}
style={{ "margin-left": "auto" }}
class="ml-auto!"
>
<Show
when={clipboardStatus() === "Written"}
@@ -56,11 +56,7 @@ const ExportDialog: Component<{
</Show>
</button>
</div>
<pre
style={{ "max-height": "80vh", overflow: "auto", padding: "1rem" }}
>
{props.getJson()}
</pre>
<pre class="max-h-10/12 overflow-auto p-2">{props.getJson()}</pre>
</article>
</dialog>
);
@@ -112,8 +108,8 @@ const ChatttersView: Component<{
return (
<>
<ExportDialog ref={dialogRef} setRef={setDialogRef} getJson={getJson} />
<div style={{ display: "grid", gap: "1rem" }}>
<div style={{ display: "flex", gap: "1rem" }}>
<div class="flex flex-col gap-2">
<div class="flex gap-2">
<button type="button" onClick={() => setSelected([])}>
Select None
</button>
@@ -133,10 +129,9 @@ const ChatttersView: Component<{
</button>
<button
class="contrast"
class="contrast ml-auto!"
type="button"
onClick={() => dialogRef()?.showModal()}
style={{ "margin-left": "auto" }}
>
Export to JSON
</button>
@@ -144,7 +139,7 @@ const ChatttersView: Component<{
<div>
<span>Select first</span>&nbsp;
<input
style={{ width: "unset" }}
class="w-[unset]!"
placeholder="Select first..."
inputmode="numeric"
pattern="[0-9]*"
@@ -190,7 +185,7 @@ const ChatttersView: Component<{
</article>
<article>
<h2>Scrubs</h2>
<div style={{ display: "flex", "flex-wrap": "wrap", gap: "1rem" }}>
<div class="flex flex-wrap gap-2">
<For
each={scrubs.filter((scrub) =>
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 { render } from "solid-js/web";
import { App } from "./App.tsx";
import "./index.css";
const root = document.createElement("div");
document.body.appendChild(root);

3
vite.config.ts
View File

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