Add id,bg with types to Hero and Hero2. Fix #448

This commit is contained in:
prototypa
2024-06-22 20:45:34 -04:00
parent f680e386ef
commit e804000c0d
3 changed files with 25 additions and 27 deletions

View File

@@ -1,31 +1,30 @@
---
import Image from '~/components/common/Image.astro';
import Button from '~/components/ui/Button.astro';
import type { CallToAction } from '~/types';
import Background from '~/components/ui/Background.astro';
export interface Props {
id?: string;
title?: string;
subtitle?: string;
tagline?: string;
content?: string;
actions?: string | CallToAction[];
image?: string | unknown; // TODO: find HTMLElementProps
}
import type { Hero as Props } from '~/types';
const {
id,
title = await Astro.slots.render('title'),
subtitle = await Astro.slots.render('subtitle'),
tagline,
content = await Astro.slots.render('content'),
actions = await Astro.slots.render('actions'),
image = await Astro.slots.render('image'),
id,
bg = await Astro.slots.render('bg'),
} = Astro.props;
---
<section class="relative md:-mt-[76px] not-prose" {...id ? { id } : {}}>
<div class="absolute inset-0 pointer-events-none" aria-hidden="true"></div>
<div class="absolute inset-0 pointer-events-none" aria-hidden="true">
<slot name="bg">
{bg ? <Fragment set:html={bg} /> : null}
</slot>
</div>
<div class="relative max-w-7xl mx-auto px-4 sm:px-6">
<div class="pt-0 md:pt-[76px] pointer-events-none"></div>
<div class="py-12 md:py-20">

View File

@@ -1,29 +1,30 @@
---
import Image from '~/components/common/Image.astro';
import type { CallToAction } from '~/types';
import Button from '~/components/ui/Button.astro';
import Background from '~/components/ui/Background.astro';
export interface Props {
title?: string;
subtitle?: string;
tagline?: string;
content?: string;
actions?: string | CallToAction[];
image?: string | unknown; // TODO: find HTMLElementProps
}
import type { Hero as Props } from '~/types';
const {
title = await Astro.slots.render('title'),
subtitle = await Astro.slots.render('subtitle'),
tagline,
content = await Astro.slots.render('content'),
actions = await Astro.slots.render('actions'),
image = await Astro.slots.render('image'),
id,
bg = await Astro.slots.render('bg'),
} = Astro.props;
---
<section class="relative md:-mt-[76px] not-prose">
<div class="absolute inset-0 pointer-events-none" aria-hidden="true"></div>
<section class="relative md:-mt-[76px] not-prose" {...id ? { id } : {}}>
<div class="absolute inset-0 pointer-events-none" aria-hidden="true">
<slot name="bg">
{bg ? <Fragment set:html={bg} /> : null}
</slot>
</div>
<div class="relative max-w-7xl mx-auto px-4 sm:px-6">
<div class="pt-0 md:pt-[76px] pointer-events-none"></div>
<div class="py-12 md:py-20 lg:py-0 lg:flex lg:items-center lg:h-screen lg:gap-8">

6
src/types.d.ts vendored
View File

@@ -213,12 +213,10 @@ export interface Form {
}
// WIDGETS
export interface Hero extends Omit<Headline, 'classes'>, Widget {
export interface Hero extends Omit<Headline, 'classes'>, Omit<Widget, 'isDark' | 'classes'> {
content?: string;
actions?: string | CallToAction[];
image?: string | unknown;
callToAction1?: CallToAction;
callToAction2?: CallToAction;
isReversed?: boolean;
}
export interface Team extends Omit<Headline, 'classes'>, Widget {