49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
import { AmenityIcon } from "@/components/icons/AmenityIcon";
|
|
import type { AmenityWithIcon } from "@/lib/data/amenities";
|
|
|
|
type Props = {
|
|
item: AmenityWithIcon;
|
|
variant?: "card" | "inline";
|
|
/** Use on tinted bands (e.g. “All rooms include”) so cards stay readable */
|
|
cardTone?: "elevated" | "embedded";
|
|
};
|
|
|
|
export function AmenityItem({
|
|
item,
|
|
variant = "card",
|
|
cardTone = "elevated",
|
|
}: Props) {
|
|
if (variant === "inline") {
|
|
return (
|
|
<li className="flex items-start gap-2.5 text-xs text-[var(--color-muted)]">
|
|
<span
|
|
className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-[var(--color-primary)]/[0.08] text-[var(--color-primary)]"
|
|
aria-hidden
|
|
>
|
|
<AmenityIcon id={item.icon} className="h-3.5 w-3.5" />
|
|
</span>
|
|
<span className="min-w-0 pt-0.5 leading-snug">{item.label}</span>
|
|
</li>
|
|
);
|
|
}
|
|
|
|
const cardBg =
|
|
cardTone === "embedded"
|
|
? "bg-[var(--color-bg)]"
|
|
: "bg-[var(--color-surface)]";
|
|
|
|
return (
|
|
<li
|
|
className={`flex items-start gap-3 rounded-xl border border-[var(--color-border)] px-4 py-3.5 text-sm text-[var(--color-text)] ${cardBg}`}
|
|
>
|
|
<span
|
|
className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[var(--color-primary)]/[0.1] text-[var(--color-primary)] ring-1 ring-[var(--color-primary)]/15"
|
|
aria-hidden
|
|
>
|
|
<AmenityIcon id={item.icon} className="h-5 w-5" />
|
|
</span>
|
|
<span className="min-w-0 pt-1 leading-snug">{item.label}</span>
|
|
</li>
|
|
);
|
|
}
|