mirror of
https://github.com/BlowaterNostr/blowater.git
synced 2024-10-18 15:43:20 +00:00
Global Error Message Prompt (#181)
This commit is contained in:
parent
bb14bcf755
commit
389cdfdfbe
20
UI/_main.tsx
20
UI/_main.tsx
@ -3,25 +3,9 @@ import { h, render } from "https://esm.sh/preact@10.17.1";
|
||||
import { setup } from "https://esm.sh/twind@0.16.16";
|
||||
import { NewIndexedDB } from "./dexie-db.ts";
|
||||
import { Start } from "./app.tsx";
|
||||
import { TWConfig } from "./tw.config.ts";
|
||||
|
||||
setup({
|
||||
theme: {
|
||||
fontFamily: {
|
||||
roboto: ["Roboto", "sans-serif"],
|
||||
},
|
||||
screens: {
|
||||
"mobile": { "max": "1023px" },
|
||||
"desktop": { "min": "1024px" },
|
||||
},
|
||||
},
|
||||
// https://twind.dev/handbook/extended-functionality.html
|
||||
// https://sass-lang.com/documentation/style-rules/parent-selector/
|
||||
variants: {
|
||||
"children": "& > *",
|
||||
"firstChild": "& > *:first-child",
|
||||
"lastChild": "& > *:last-child",
|
||||
},
|
||||
});
|
||||
setup(TWConfig);
|
||||
|
||||
const database = NewIndexedDB();
|
||||
if (database instanceof Error) {
|
||||
|
27
UI/components/toast.test.tsx
Normal file
27
UI/components/toast.test.tsx
Normal file
@ -0,0 +1,27 @@
|
||||
/** @jsx h */
|
||||
import { createRef, h, render } from "https://esm.sh/preact@10.17.1";
|
||||
import { Toast, ToastChannel } from "./toast.tsx";
|
||||
import { setup, tw } from "https://esm.sh/twind@0.16.16";
|
||||
import { TWConfig } from "../tw.config.ts";
|
||||
import { Channel } from "https://raw.githubusercontent.com/BlowaterNostr/csp/master/csp.ts";
|
||||
import { CenterClass, inputBorderClass } from "./tw.ts";
|
||||
|
||||
setup(TWConfig);
|
||||
|
||||
const toastChannel: ToastChannel = new Channel();
|
||||
const inputRef = createRef();
|
||||
render(
|
||||
<div class={tw`h-screen w-screen ${CenterClass}`}>
|
||||
<input class={tw`${inputBorderClass} px-4 py-2 mr-4`} ref={inputRef} type="text" />
|
||||
<button
|
||||
onClick={() => {
|
||||
toastChannel.put(inputRef.current.value);
|
||||
}}
|
||||
class={tw`bg-black text-white px-4 py-2 rounded`}
|
||||
>
|
||||
toast
|
||||
</button>
|
||||
<Toast inputChan={toastChannel} />
|
||||
</div>,
|
||||
document.body,
|
||||
);
|
41
UI/components/toast.tsx
Normal file
41
UI/components/toast.tsx
Normal file
@ -0,0 +1,41 @@
|
||||
/** @jsx h */
|
||||
import { Component } from "https://esm.sh/preact@10.17.1";
|
||||
import { h } from "https://esm.sh/preact@10.17.1";
|
||||
import { tw } from "https://esm.sh/twind@0.16.16";
|
||||
import { PrimaryBackgroundColor, PrimaryTextColor } from "../style/colors.ts";
|
||||
import { Channel } from "https://raw.githubusercontent.com/BlowaterNostr/csp/master/csp.ts";
|
||||
|
||||
export type ToastChannel = Channel<string>;
|
||||
|
||||
type Props = {
|
||||
inputChan: ToastChannel;
|
||||
};
|
||||
|
||||
type State = {
|
||||
content: string;
|
||||
};
|
||||
|
||||
export class Toast extends Component<Props, State> {
|
||||
state = { content: "" };
|
||||
|
||||
async componentDidMount() {
|
||||
for await (const message of this.props.inputChan) {
|
||||
this.setState({
|
||||
content: message,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return this.state.content
|
||||
? (
|
||||
<div
|
||||
key={`${this.state.content}${Date.now()}`}
|
||||
class={tw`animate-toast absolute left-full top-4 px-4 py-2 rounded shadow-2xl w-max max-w-xs bg-[${PrimaryBackgroundColor}] text-[${PrimaryTextColor}] text-xs break-all`}
|
||||
>
|
||||
{this.state.content}
|
||||
</div>
|
||||
)
|
||||
: undefined;
|
||||
}
|
||||
}
|
33
UI/tw.config.ts
Normal file
33
UI/tw.config.ts
Normal file
@ -0,0 +1,33 @@
|
||||
import { Configuration } from "https://esm.sh/twind@0.16.16";
|
||||
|
||||
export const TWConfig: Configuration = {
|
||||
theme: {
|
||||
fontFamily: {
|
||||
roboto: ["Roboto", "sans-serif"],
|
||||
},
|
||||
screens: {
|
||||
"mobile": { "max": "1023px" },
|
||||
"desktop": { "min": "1024px" },
|
||||
},
|
||||
extend: {
|
||||
keyframes: {
|
||||
toast: {
|
||||
"0%": { transform: "translateX(0)" },
|
||||
"16.66%": { transform: "translateX(calc(-100% - 1rem))" },
|
||||
"83.34%": { transform: "translateX(calc(-100% - 1rem))" },
|
||||
"100%": { transform: "translateX(0)" },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
"toast": "toast 3s cubic-bezier(0.68, -0.55, 0.25, 1.35)",
|
||||
},
|
||||
},
|
||||
},
|
||||
// https://twind.dev/handbook/extended-functionality.html
|
||||
// https://sass-lang.com/documentation/style-rules/parent-selector/
|
||||
variants: {
|
||||
"children": "& > *",
|
||||
"firstChild": "& > *:first-child",
|
||||
"lastChild": "& > *:last-child",
|
||||
},
|
||||
};
|
Loading…
Reference in New Issue
Block a user