adilalloandCursor
c0ba3a3798
The form is built once to the settled field set, and a valid send is saved before anyone is emailed. Co-authored-by: Cursor <cursoragent@cursor.com>
57 lines
2.2 KiB
TypeScript
57 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
import Button from "../../buttons/Button";
|
|
import { useMessages } from "../../../contexts/MessagesContext";
|
|
import { WORKSHOP_SIGNUP_ANCHOR_ID } from "../../../../lib/workshopSignup";
|
|
|
|
const DOT_CLASS: Record<string, string> = {
|
|
teal: "bg-[var(--color-content-invert-brand-teal)]",
|
|
lime: "bg-[var(--color-surface-invert-brand-kiwi)]",
|
|
lavender: "bg-[var(--color-content-invert-brand-lavender)]",
|
|
red: "bg-[var(--color-content-invert-brand-red)]",
|
|
};
|
|
|
|
function WorkshopOverviewView({ className = "" }: { className?: string }) {
|
|
const copy = useMessages().pages.workshops.overview;
|
|
|
|
return (
|
|
<section
|
|
data-figma-node="24263-45235"
|
|
className={`bg-[var(--color-surface-default-primary)] px-[var(--space-400)] py-[var(--space-1800)] md:px-[var(--space-1200)] lg:px-[112px] lg:py-[120px] ${className}`}
|
|
>
|
|
<div className="mx-auto flex w-full max-w-[1216px] flex-col items-center gap-12">
|
|
<div className="flex max-w-[640px] flex-col items-center gap-2 text-center">
|
|
<h2 className="x-large-heading text-[var(--color-content-default-primary)]">
|
|
{copy.title}
|
|
</h2>
|
|
<p className="medium-paragraph text-[var(--color-content-default-tertiary)]">
|
|
{copy.body}
|
|
</p>
|
|
</div>
|
|
<ul className="grid w-full max-w-[800px] grid-cols-2 gap-4 md:gap-6">
|
|
{copy.rooms.map((room) => (
|
|
<li
|
|
key={room.id}
|
|
className="flex min-h-[100px] items-center gap-4 rounded-[12px] border border-[var(--color-border-default-secondary)] bg-[var(--color-surface-default-secondary)] p-6"
|
|
>
|
|
<span
|
|
className={`size-3 shrink-0 rounded-full ${DOT_CLASS[room.color] ?? ""}`}
|
|
aria-hidden
|
|
/>
|
|
<span className="text-[18px] font-medium leading-6 text-[var(--color-content-default-primary)]">
|
|
{room.label}
|
|
</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<Button href={`#${WORKSHOP_SIGNUP_ANCHOR_ID}`} size="small">
|
|
{copy.button}
|
|
</Button>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default memo(WorkshopOverviewView);
|