mirror of
https://github.com/BlowaterNostr/blowater.git
synced 2024-10-18 15:43:20 +00:00
38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
/** @jsx h */
|
|
import { h } from "https://esm.sh/preact@10.11.3";
|
|
import { tw } from "https://esm.sh/twind@0.16.16";
|
|
import { DividerBackgroundColor, PrimaryTextColor, SuccessColor } from "../style/colors.ts";
|
|
import { CopyIcon } from "../icons2/copy-icon.tsx";
|
|
import { CenterClass, NoOutlineClass } from "./tw.ts";
|
|
import { CheckIcon } from "../icons2/check-icon.tsx";
|
|
|
|
export function OnFocusTransitionButton(props: {
|
|
class?: string | h.JSX.SignalLike<string | undefined> | undefined;
|
|
onFocus?: h.JSX.FocusEventHandler<HTMLButtonElement>;
|
|
}) {
|
|
return (
|
|
<button
|
|
class={[
|
|
tw`w-6 h-6 rounded-lg hover:bg-[${DividerBackgroundColor}] ${CenterClass} ${NoOutlineClass} group`,
|
|
props.class,
|
|
].join(" ")}
|
|
onFocus={props.onFocus}
|
|
>
|
|
<CheckIcon
|
|
class={tw`w-4 h-4 hidden group-focus:block`}
|
|
style={{
|
|
fill: "none",
|
|
stroke: SuccessColor,
|
|
}}
|
|
/>
|
|
<CopyIcon
|
|
class={tw`w-4 h-4 group-focus:hidden`}
|
|
style={{
|
|
fill: "none",
|
|
stroke: PrimaryTextColor,
|
|
}}
|
|
/>
|
|
</button>
|
|
);
|
|
}
|