Event Registration Section

Copyimport {
  EventRegistrationSection,
  EventRegistrationSectionActions,
  EventRegistrationSectionFact,
  EventRegistrationSectionFacts,
  EventRegistrationSectionHeader,
  EventRegistrationSectionJoiningAs,
  EventRegistrationSectionPanel,
  EventRegistrationSectionStatus,
  EventRegistrationSectionStatusDescription,
  EventRegistrationSectionStatusTitle,
  EventRegistrationSectionTitle,
} from "@calcom/features/cal-events/components/event-page/sections/event-registration-section-parts";
import { StatusMark } from "@coss/ui/shared/status-mark";

Copy<EventRegistrationSection>
  <EventRegistrationSectionHeader>
    <EventRegistrationSectionTitle>Registration</EventRegistrationSectionTitle>
  </EventRegistrationSectionHeader>
  <EventRegistrationSectionPanel>
    <EventRegistrationSectionFacts>
      <EventRegistrationSectionFact icon={ClockIcon} title="8 spots remaining" subtitle="..." />
    </EventRegistrationSectionFacts>
    <EventRegistrationSectionActions>
      <Button size="lg">Register</Button>
      <EventRegistrationSectionJoiningAs label="Joining as" email="pro@example.com" />
    </EventRegistrationSectionActions>
  </EventRegistrationSectionPanel>
</EventRegistrationSection>

Copy<EventRegistrationSectionFact
  icon={UserPlusIcon}
  title="Approval required"
  subtitle="The host must approve your request before you're in"
/>

Copy// Public event page: `data` is the CalEventPublicDto that getCalEventPublicData builds on the server.
<EventRegistrationSectionFacts>
  <EventRegistrationSectionFactPrice
    price={data.price}
    currency={data.currency}
    priceIsFrom={data.priceIsFrom}
    hasFreeOption={data.hasFreeOption}
  />
</EventRegistrationSectionFacts>

Copy// Public event page: `data` is the CalEventPublicDto that getCalEventPublicData builds on the server.
<EventRegistrationSectionFacts>
  <EventRegistrationSectionFactSpotsRemaining spotsRemaining={data.capacity.spotsRemaining} />
</EventRegistrationSectionFacts>

Copy// Public event page: `data` is the CalEventPublicDto that getCalEventPublicData builds on the server.
<EventRegistrationSectionFacts>
  {data.requiresApproval ? <EventRegistrationSectionFactApprovalRequired /> : null}
</EventRegistrationSectionFacts>

Copy<EventRegistrationSectionStatus>
  <StatusMark status="success" className="mx-auto" />
  <EventRegistrationSectionStatusTitle>You're in!</EventRegistrationSectionStatusTitle>
  <EventRegistrationSectionStatusDescription>
    Your spot is confirmed. Check your email for event details and updates
  </EventRegistrationSectionStatusDescription>
</EventRegistrationSectionStatus>