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.
2.2 kB · 128 lines
Astro
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129---import type { HTMLTag, Polymorphic } from "astro/types";import type { Instructor } from "#api/instructors";import CalendlyButton from "#components/CalendlyButton.astro";
type Props<Tag extends HTMLTag> = Polymorphic<{ instructor: Instructor;
as: Tag; HeadingLevel?: HTMLTag;}>;
const { instructor, as: Tag = "div", class: className, HeadingLevel = "h3", ...props} = Astro.props;
const firstName = instructor.name.split(" ").shift();---
<Tag class:list={[className, "container"]} {...props}> { instructor.image && ( <div class="image"> <img src={instructor.image.url} width={instructor.image.width} height={instructor.image.height} alt={`${instructor.name}'s headshot}`} /> </div> ) }
<div class="content"> <HeadingLevel>{instructor.name}</HeadingLevel>
{instructor.bio && <p>{instructor.bio} </p>}
<div class="actions"> <slot />
{ instructor.calendarButton && ( <CalendlyButton url={instructor.calendarButton.url}> {instructor.calendarButton.label || `Book with ${firstName}`} </CalendlyButton> ) } </div> </div></Tag>
<style> .container { display: flex; flex-direction: column; align-items: center; gap: var(--space-lg);
@media (min-width: 768px) { flex-direction: row; gap: var(--space-xl);
&:nth-child(even) { flex-direction: row-reverse; } } }
.image { flex-shrink: 0; max-width: 196px; }
img { border-radius: 100%; aspect-ratio: 1; object-fit: cover; }
.content { display: contents; text-align: center;
@media (min-width: 768px) { display: flex; flex-direction: column; gap: var(--space-md); text-align: start;
.container:nth-child(even) & { text-align: end; } } }
h3 { margin: 0; font-size: var(--font-size-xl); font-weight: 500; }
p { max-width: 65ch; margin: 0; text-wrap: pretty; }
.actions { display: flex; flex-direction: column; align-items: center; gap: var(--space-md);
@media (min-width: 768px) { flex-direction: row; align-self: start;
.container:nth-child(even) & { align-self: end; } } }</style>