mirror of
https://github.com/storytold/artcraft.git
synced 2026-11-11 16:31:04 +00:00
Brandon Thomas
0004726a36
This is a fresh start for the `artcraft` repo. The old monorepo, which included our web API gateway, job services, SRE tools, various frontends, and more has moved to `artcraft-services` You can find the full git history here: https://github.com/storytold/artcraft-services This change was motivated by the fact that the entire git history was hundreds of gigabytes in size, which is unwieldy for anyone not in the core team that doesn't care about support services outside of the core artcraft app. We wanted to keep this repo in its well-known place since we already have users and activity here. Please update your remotes to either `artcraft-services` or make a fresh clone of this repo. History can be found at the artcraft-services repo.
65 lines
1.9 KiB
TypeScript
65 lines
1.9 KiB
TypeScript
import { ArrowUpIcon, CoinsIcon, LoaderCircleIcon } from "lucide-react";
|
|
import { DynamicIcon } from "@storyteller/icons";
|
|
import { ButtonHTMLAttributes } from "react";
|
|
import { twMerge } from "tailwind-merge";
|
|
import { Tooltip } from "@storyteller/ui-tooltip";
|
|
|
|
interface GenerateIconButtonProps extends Omit<
|
|
ButtonHTMLAttributes<HTMLButtonElement>,
|
|
"children"
|
|
> {
|
|
credits?: number | null;
|
|
loading?: boolean;
|
|
}
|
|
|
|
/**
|
|
* Compact generate control: credit cost as plain text next to a circular
|
|
* arrow-up button. Desktop promptboxes use this; the mobile form keeps the
|
|
* labeled `GenerateButton` pill.
|
|
*/
|
|
export const GenerateIconButton = ({
|
|
credits,
|
|
loading,
|
|
className,
|
|
disabled,
|
|
...rest
|
|
}: GenerateIconButtonProps) => {
|
|
const isDisabled = disabled || loading;
|
|
|
|
return (
|
|
<div className={twMerge("flex shrink-0 items-center gap-2.5", className)}>
|
|
{credits != null && (
|
|
<Tooltip
|
|
content={`${credits} credit${credits !== 1 ? "s" : ""} cost`}
|
|
position="top"
|
|
className="z-50"
|
|
>
|
|
<span
|
|
className={twMerge(
|
|
"flex items-center gap-1.5 ms-1.5 text-[13px] font-semibold tabular-nums text-base-fg/80 transition-opacity",
|
|
isDisabled && "opacity-50",
|
|
)}
|
|
>
|
|
<CoinsIcon className="text-xs" />
|
|
{credits}
|
|
</span>
|
|
</Tooltip>
|
|
)}
|
|
|
|
<button
|
|
type="button"
|
|
className="flex h-9 w-9 items-center justify-center rounded-full bg-primary text-white shadow-sm transition-all duration-150 hover:bg-primary-400 active:scale-95 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
|
|
disabled={isDisabled}
|
|
{...rest}
|
|
>
|
|
<DynamicIcon
|
|
icon={loading ? LoaderCircleIcon : ArrowUpIcon}
|
|
className={loading ? "animate-spin" : undefined}
|
|
/>
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default GenerateIconButton;
|