feat(@captn/joy): add run and save buttons

packages/joy/src/run-button/index.tsx

@@ -0,0 +1,48 @@
+import PlayIcon from "@mui/icons-material/PlayArrow";
+import StopIcon from "@mui/icons-material/Stop";
+import Button from "@mui/joy/Button";
+import CircularProgress from "@mui/joy/CircularProgress";
+
+export interface RunButtonProperties {
+	disabled?: boolean;
+	isLoading?: boolean;
+	isRunning?: boolean;
+	labels?: { start?: string; stop?: string };
+	onStop(): void;
+	onStart(): void;
+}
+
+export function RunButton({
+	disabled,
+	isLoading,
+	isRunning,
+	onStart,
+	onStop,
+	labels: { start = "Start", stop = "Stop" } = {},
+}: RunButtonProperties) {
+	return isRunning ? (
+		<Button
+			disabled={disabled}
+			color="danger"
+			variant="soft"
+			startDecorator={isLoading ? <CircularProgress /> : <StopIcon />}
+			onClick={() => {
+				onStop();
+			}}
+		>
+			{stop}
+		</Button>
+	) : (
+		<Button
+			disabled={disabled}
+			color="success"
+			variant="soft"
+			startDecorator={isLoading ? <CircularProgress /> : <PlayIcon />}
+			onClick={() => {
+				onStart();
+			}}
+		>
+			{start}
+		</Button>
+	);
+}

packages/joy/src/save-button/index.tsx

@@ -0,0 +1,29 @@
+import { useSaveImage } from "@captn/react/use-save-image";
+import CheckIcon from "@mui/icons-material/Check";
+import SaveIcon from "@mui/icons-material/Save";
+import Button from "@mui/joy/Button";
+
+export function SaveButton({
+	image,
+	prompt,
+	appId,
+	labels: { save: saveLabel = "Save", saved: savedLabel = "Saved" } = {},
+}: {
+	image: string;
+	prompt: string;
+	appId: string;
+	labels?: { save?: string; saved?: string };
+}) {
+	const { saved, save } = useSaveImage({ image, prompt, appId });
+
+	return (
+		<Button
+			color={saved ? "success" : "neutral"}
+			variant="soft"
+			startDecorator={saved ? <CheckIcon /> : <SaveIcon />}
+			onClick={save}
+		>
+			{saved ? savedLabel : saveLabel}
+		</Button>
+	);
+}