init with react+axum+spacetimedb

src/components/rpg-creation-asset-studio/RpgCreationRoleAssetStudioFooter.tsx

@@ -0,0 +1,53 @@
+export function RpgCreationRoleAssetStudioFooter(props: {
+  isSavingToRole: boolean;
+  saveStatus: string | null;
+  syncBusy: boolean;
+  workingRoleGeneratedVisualAssetId?: string;
+  workingRoleImageSrc?: string;
+  onSaveToRole: () => void;
+}) {
+  const {
+    isSavingToRole,
+    saveStatus,
+    syncBusy,
+    workingRoleGeneratedVisualAssetId,
+    workingRoleImageSrc,
+    onSaveToRole,
+  } = props;
+
+  return (
+    <div className="platform-role-studio__footer sticky bottom-0 z-10 -mx-4 px-4 pb-[calc(env(safe-area-inset-bottom,0px)+0.35rem)] pt-3 sm:mx-0 sm:rounded-3xl sm:border sm:border-[var(--platform-subpanel-border)] sm:px-4">
+      <div className="space-y-3">
+        {saveStatus ? (
+          <div className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-zinc-300">
+            {saveStatus}
+          </div>
+        ) : null}
+        <div className="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
+          <button
+            type="button"
+            onClick={onSaveToRole}
+            disabled={
+              isSavingToRole ||
+              syncBusy ||
+              !workingRoleImageSrc ||
+              !workingRoleGeneratedVisualAssetId
+            }
+            className={`rounded-full border border-emerald-400/30 bg-emerald-500/10 px-5 py-2 text-sm font-semibold text-emerald-100 transition-colors hover:bg-emerald-500/20 ${
+              isSavingToRole ||
+              syncBusy ||
+              !workingRoleImageSrc ||
+              !workingRoleGeneratedVisualAssetId
+                ? 'cursor-not-allowed opacity-45'
+                : ''
+            }`}
+          >
+            {isSavingToRole || syncBusy ? '保存中...' : '保存到当前角色'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default RpgCreationRoleAssetStudioFooter;