110 lines
3.1 KiB
TypeScript
110 lines
3.1 KiB
TypeScript
import Link from "next/link";
|
|
import { ReactNode } from "react";
|
|
|
|
export function Button({
|
|
href,
|
|
children,
|
|
variant = "primary",
|
|
className,
|
|
type = "button"
|
|
}: {
|
|
href?: string;
|
|
children: ReactNode;
|
|
variant?: "primary" | "secondary" | "ghost";
|
|
className?: string;
|
|
type?: "button" | "submit" | "reset";
|
|
}) {
|
|
const styleClass =
|
|
variant === "primary"
|
|
? "bg-gradient-to-br from-primary to-primary-container text-white rounded-full hover:brightness-105 shadow-sm shadow-primary/30"
|
|
: variant === "secondary"
|
|
? "bg-surface-container-low text-on-surface border border-outline-variant/70 rounded-full hover:bg-surface-container-high"
|
|
: "text-on-surface-variant hover:text-on-surface hover:bg-surface-container-low";
|
|
|
|
if (href) {
|
|
return (
|
|
<Link
|
|
href={href}
|
|
className={`inline-flex items-center justify-center rounded-full px-4 py-2.5 text-sm font-semibold font-headline transition ${styleClass} ${
|
|
className ?? ""
|
|
} ${className?.includes("w-full") ? "" : "min-w-24"}`}
|
|
>
|
|
{children}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<button
|
|
type={type}
|
|
className={`inline-flex items-center justify-center rounded-full px-4 py-2.5 text-sm font-semibold font-headline transition ${styleClass} ${
|
|
className ?? ""
|
|
} ${className?.includes("w-full") ? "" : "min-w-24"}`}
|
|
>
|
|
{children}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
export function SectionCard({
|
|
title,
|
|
description,
|
|
children
|
|
}: {
|
|
title: string;
|
|
description?: string;
|
|
children: ReactNode;
|
|
}) {
|
|
return (
|
|
<section className="rounded-[1.25rem] border border-line bg-surface-container-lowest p-5 shadow-card">
|
|
<div className="mb-4">
|
|
<h3 className="text-base font-bold font-headline text-on-surface">{title}</h3>
|
|
{description ? <p className="mt-1 text-sm text-on-surface-variant">{description}</p> : null}
|
|
</div>
|
|
{children}
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export function Badge({
|
|
children,
|
|
tone = "default"
|
|
}: {
|
|
children: ReactNode;
|
|
tone?: "default" | "success" | "warning" | "danger";
|
|
}) {
|
|
const tones = {
|
|
default: "bg-surface-container-high text-on-surface-variant",
|
|
success: "bg-success/10 text-success",
|
|
warning: "bg-warning/10 text-warning",
|
|
danger: "bg-error/10 text-danger"
|
|
};
|
|
|
|
return (
|
|
<span className={`inline-flex rounded-full px-2.5 py-1 text-xs font-medium ${tones[tone]}`}>
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
export function PageHeader({
|
|
title,
|
|
description,
|
|
actions
|
|
}: {
|
|
title: string;
|
|
description: string;
|
|
actions?: ReactNode;
|
|
}) {
|
|
return (
|
|
<div className="flex flex-col gap-4 border-b border-line pb-6 md:flex-row md:items-end md:justify-between">
|
|
<div>
|
|
<p className="text-xs font-bold uppercase tracking-[0.16em] text-on-surface-variant">ZappCare</p>
|
|
<h1 className="mt-2 text-3xl font-extrabold font-headline text-on-surface">{title}</h1>
|
|
<p className="mt-2 max-w-2xl text-sm text-on-surface-variant">{description}</p>
|
|
</div>
|
|
{actions ? <div className="flex flex-wrap gap-3">{actions}</div> : null}
|
|
</div>
|
|
);
|
|
}
|