zihluwang
e149401346
- Replace the techStack band with project-type capabilities - Delete the TechStack component and its section type - Give grid cards an optional status badge - Pad --big buttons, which Rspress ships with none - Revise the home, services and products copy
64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
import { Button } from "@rspress/core/theme-original"
|
|
import { arr, str, type CallToActionLink, type ContactCode } from "./types"
|
|
|
|
/**
|
|
* Closing call-to-action band: one or more buttons, optionally alongside a
|
|
* scannable contact code (a WeChat QR, for instance).
|
|
*
|
|
* `Button` renders its own `<a>` (routed through the theme's `Link`), so it
|
|
* must be given `href` directly rather than being wrapped in an anchor.
|
|
*/
|
|
export function CallToAction({
|
|
actions,
|
|
code,
|
|
}: {
|
|
actions?: CallToActionLink[]
|
|
code?: ContactCode
|
|
}) {
|
|
const links = (arr<CallToActionLink>(actions) ?? []).filter(
|
|
(action) => str(action?.text) && str(action?.link)
|
|
)
|
|
const codeSrc = str(code?.src)
|
|
const codeCaption = str(code?.caption)
|
|
|
|
if (links.length === 0 && !codeSrc) return null
|
|
|
|
return (
|
|
<div className="flex flex-col items-center gap-8">
|
|
{links.length > 0 && (
|
|
<div className="flex flex-wrap justify-center gap-4">
|
|
{links.map((action, index) => (
|
|
<Button
|
|
key={`${str(action.text)}-${index}`}
|
|
type="a"
|
|
theme={action.theme === "alt" ? "alt" : "brand"}
|
|
href={str(action.link) as string}>
|
|
{str(action.text)}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{codeSrc && (
|
|
<figure className="m-0 flex flex-col items-center gap-3">
|
|
{/* The white frame is not decoration. A QR code needs a quiet zone of
|
|
blank space around it to scan reliably, and the exported image has
|
|
almost none — the pattern runs close to its edges. */}
|
|
<div className="rounded-xl border border-(--rp-c-divider-light) bg-white p-4">
|
|
<img
|
|
src={codeSrc}
|
|
alt={codeCaption ?? ""}
|
|
width={160}
|
|
height={160}
|
|
className="block h-40 w-40"
|
|
/>
|
|
</div>
|
|
{codeCaption && (
|
|
<figcaption className="text-sm text-(--rp-c-text-2)">{codeCaption}</figcaption>
|
|
)}
|
|
</figure>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|