Files
community-rule/app/(app)/create/components/MembershipInvitePreviewCard.tsx
T

44 lines
1.4 KiB
TypeScript

"use client";
import type { MembershipInvitePreview } from "../../../../lib/create/membershipInvitePreview";
export function MembershipInvitePreviewCard({
preview,
fromYourRuleLabel,
whoBelongsLabel,
joiningLabel,
}: {
preview: MembershipInvitePreview;
fromYourRuleLabel: string;
whoBelongsLabel: string;
joiningLabel: string;
}) {
return (
<div className="flex w-full min-w-0 flex-col gap-[var(--space-300)]">
<p className="text-small-label text-[var(--color-content-default-tertiary)]">
{fromYourRuleLabel}
</p>
<div className="flex w-full min-w-0 flex-col gap-[var(--space-200)] rounded-[var(--radius-400)] bg-[var(--color-surface-invert-brand-teal)] p-[var(--space-500)] text-[var(--color-content-invert-primary)]">
<p className="text-small-label text-[var(--color-content-invert-secondary)]">
{preview.categoryName}
</p>
<p className="font-bricolage text-x-small-heading">
{preview.title}
</p>
{preview.eligibility ? (
<p className="text-small-paragraph">
<span className="font-bold">{whoBelongsLabel}</span>
{` ${preview.eligibility}`}
</p>
) : null}
{preview.joiningProcess ? (
<p className="text-small-paragraph">
<span className="font-bold">{joiningLabel}</span>
{` ${preview.joiningProcess}`}
</p>
) : null}
</div>
</div>
);
}