Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/lowmess/az-golf-gurus. www.azgolfgurus.com
astro datocms typescript
Something went wrong. Try again.
1.5 kB · 68 lines
Astro
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869---import type { HTMLTag, Polymorphic } from "astro/types";import { getInstructorsSection } from "#api/instructors";import CalendlyButton from "#components/CalendlyButton.astro";import Container from "#components/Container.astro";import Instructor from "#components/Instructor.astro";
type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }>;
const { as: Tag = "div", class: className, ...props } = Astro.props;
const section = await getInstructorsSection();---
<div class="root"> <Container as={Tag} class:list={[className, "container"]} {...props}> <h2>{section.title}</h2>
<hr />
<div class="instructors"> { section.instructors.map((instructor) => ( <Instructor instructor={instructor}> {section.newStudentCalendarButton && ( <CalendlyButton url={section.newStudentCalendarButton.url} variant="outline" > {section.newStudentCalendarButton.label || "Get started"} </CalendlyButton> )} </Instructor> )) } </div></Container ></div>
<style> .root { padding-block-start: 1px; }
h2 { font-size: var(--font-size-xxl); text-align: center; }
hr { max-width: 48rem; height: 16px; margin-block-end: var(--space-xl); margin-inline: auto; border: 0; background-color: var(--color-green); }
.instructors { display: flex; flex-direction: column; gap: var(--space-xl);
@media (min-width: 768px) { gap: calc(var(--space-xl) + var(--space-lg)); } }</style>