添加游戏发布页面的客户端引导组件

2026-09-30 16:23:34 +08:00
parent 534baea589
commit fa56f45675
1 changed files with 35 additions and 0 deletions
@@ -0,0 +1,35 @@
+import type { HTMLAttributes } from 'react';
+
+import { ClientDownloadEntry } from '../creation-home/ClientDownloadEntry';
+
+type GamePublishClientGuideProps = HTMLAttributes<HTMLElement>;
+
+/** 悬浮引导卡片：把还没有游戏包的作者引到客户端。 */
+export function GamePublishClientGuide({
+  className,
+  ...props
+}: GamePublishClientGuideProps) {
+  return (
+    <section
+      className={`flex w-fit max-w-full flex-none flex-col items-center gap-3
+        rounded-2xl border px-[1.15rem] py-[0.9rem] text-center
+        [background:linear-gradient(135deg,color-mix(in_srgb,var(--platform-action-accent,#c7653d)_11%,var(--platform-panel-fill))_0%,color-mix(in_srgb,var(--platform-action-accent,#c7653d)_4%,var(--platform-panel-fill))_100%)]
+        border-[color-mix(in_srgb,var(--platform-action-accent,#c7653d)_26%,transparent)]
+        [box-shadow:0_0.55rem_1.1rem_color-mix(in_srgb,var(--platform-action-accent,#c7653d)_12%,transparent)]
+        ${className ?? ''}`}
+      {...props}
+    >
+      <strong className="text-[0.82rem] text-(--platform-text-strong)">
+        还没有游戏包？
+      </strong>
+      <ClientDownloadEntry
+        label="下载客户端制作游戏"
+        tone="accentSoft"
+        size="sm"
+        iconOnlyOnNarrowScreens={false}
+      />
+    </section>
+  );
+}
+
+export default GamePublishClientGuide;