@zmzai/theme 0.9.4 → 0.9.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -31,6 +31,8 @@ export interface PageHeaderProps {
|
|
|
31
31
|
actions?: ReactNode;
|
|
32
32
|
/** hero = 落地页（44px 墨底徽章 + text-4xl）；page = 其余全部（内联图标 + text-2xl） */
|
|
33
33
|
variant?: "page" | "hero";
|
|
34
|
+
/** 居中构图，仅 hero 生效（/quill 首页这类居中 Hero） */
|
|
35
|
+
centered?: boolean;
|
|
34
36
|
/** 追加到根元素 */
|
|
35
37
|
className?: string;
|
|
36
38
|
/** 追加到 h1（详情页标题过长时用 truncate） */
|
|
@@ -44,14 +46,18 @@ export function PageHeader({
|
|
|
44
46
|
description,
|
|
45
47
|
actions,
|
|
46
48
|
variant = "page",
|
|
49
|
+
centered = false,
|
|
47
50
|
className = "",
|
|
48
51
|
titleClassName = "",
|
|
49
52
|
}: PageHeaderProps) {
|
|
50
53
|
if (variant === "hero") {
|
|
54
|
+
const align = centered ? "items-center text-center" : "";
|
|
51
55
|
return (
|
|
52
|
-
<header className={`flex flex-col ${className}`}>
|
|
56
|
+
<header className={`flex flex-col ${align} ${className}`}>
|
|
53
57
|
{icon ? (
|
|
54
|
-
<span
|
|
58
|
+
<span
|
|
59
|
+
className={`mb-4 grid size-11 shrink-0 place-items-center rounded-lg bg-accent text-accent-ink ${centered ? "mx-auto" : ""}`}
|
|
60
|
+
>
|
|
55
61
|
<Icon name={icon} size={22} strokeWidth={1.25} />
|
|
56
62
|
</span>
|
|
57
63
|
) : null}
|
|
@@ -64,9 +70,19 @@ export function PageHeader({
|
|
|
64
70
|
{title}
|
|
65
71
|
</h1>
|
|
66
72
|
{description ? (
|
|
67
|
-
<p
|
|
73
|
+
<p
|
|
74
|
+
className={`mt-4 max-w-2xl text-lg leading-8 text-ink-2 ${centered ? "mx-auto" : ""}`}
|
|
75
|
+
>
|
|
76
|
+
{description}
|
|
77
|
+
</p>
|
|
78
|
+
) : null}
|
|
79
|
+
{actions ? (
|
|
80
|
+
<div
|
|
81
|
+
className={`mt-7 flex flex-wrap items-center gap-4 ${centered ? "justify-center" : ""}`}
|
|
82
|
+
>
|
|
83
|
+
{actions}
|
|
84
|
+
</div>
|
|
68
85
|
) : null}
|
|
69
|
-
{actions ? <div className="mt-7 flex flex-wrap items-center gap-4">{actions}</div> : null}
|
|
70
86
|
</header>
|
|
71
87
|
);
|
|
72
88
|
}
|
package/src/tokens/theme.css
CHANGED