mikeconrad/blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Migrate more widgets to props and slots

Browse Source
This commit is contained in:
prototypa
2023-01-08 21:55:29 -05:00
parent 5db96e66eb
commit 8401a3fd45
5 changed files with 101 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
src/components/widgets/Steps2.astro
View File

@ -1,5 +1,33 @@
---
import { Icon } from 'astro-icon';
interface Item {
title: string;
description: string;
icon?: string;
}
interface CallToAction {
text: string;
href: string;
icon?: string;
}
export interface Props {
title?: string;
subtitle?: string;
highlight?: string;
callToAction?: string | CallToAction;
items: Array<Item>;
}
const {
title = await Astro.slots.render('title'),
subtitle = await Astro.slots.render('subtitle'),
highlight,
callToAction = await Astro.slots.render('callToAction'),
items = [],
} = Astro.props;
---
<section>
@ -9,78 +37,54 @@ import { Icon } from 'astro-icon';
<div class="flex flex-wrap md:-mx-8">
<div class="w-full lg:w-1/2 px-0 sm:px-8 mb-12">
<div>
<h2 class="mb-4 text-3xl lg:text-4xl font-bold font-heading">
Sed ac magna sit amet risus tristique interdum, at vel velit in hac habitasse platea dictumst.
</h2>
<p class="mb-8 text-xl text-gray-600 dark:text-slate-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
risus tempus nulla, sed porttitor est nibh at nulla. Praesent placerat enim ut ex tincidunt vehicula.
Fusce sit amet dui tellus.
</p>
{
highlight && (
<p
class="text-base text-primary-600 dark:text-primary-200 font-semibold tracking-wide uppercase"
set:html={highlight}
/>
)
}
{title && <h2 class="mb-4 text-3xl lg:text-4xl font-bold font-heading" set:html={title} />}
{subtitle && <p class="mb-8 text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />}
<div class="w-full">
<a
class="btn btn-primary mb-4 sm:mb-0"
href="https://github.com/onwidget/astrowind"
target="_blank"
rel="noopener"
>
<Icon name="tabler:download" class="w-5 h-5 mr-1 -ml-1.5" /> Get template
</a>
{
typeof callToAction === 'string' ? (
<Fragment set:html={callToAction} />
) : (
callToAction &&
callToAction.text &&
callToAction.href && (
<a class="btn btn-primary mb-4 sm:mb-0" href={callToAction.href} target="_blank" rel="noopener">
{callToAction.icon && <Icon name={callToAction.icon} class="w-5 h-5 mr-1 -ml-1.5" />}
{callToAction.text}
</a>
)
)
}
</div>
</div>
</div>
<div class="w-full lg:w-1/2 px-0 sm:px-8">
<ul class="space-y-10">
<li class="flex md:-mx-4">
<div class="pr-4 sm:pl-4">
<span
class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold rounded-full bg-primary-50 text-primary-600"
>
1</span
>
</div>
<div class="pl-4">
<h3 class="mb-4 text-xl font-semibold font-heading">Responsive Elements</h3>
<p class="text-gray-500 dark:text-gray-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis
lobortis, mi risus tempus nulla.
</p>
</div>
</li>
<li class="flex md:-mx-4">
<div class="pr-4 sm:pl-4">
<span
class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold rounded-full bg-primary-50 text-primary-600"
>
2</span
>
</div>
<div class="pl-4">
<h3 class="mb-4 text-xl font-semibold font-heading">Flexible Team</h3>
<p class="text-gray-500 dark:text-gray-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis
lobortis, mi risus tempus nulla.
</p>
</div>
</li>
<li class="flex md:-mx-4">
<div class="pr-4 sm:pl-4">
<span
class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold rounded-full bg-primary-50 text-primary-600"
>
3</span
>
</div>
<div class="pl-4">
<h3 class="mb-4 text-xl font-semibold font-heading">Ecologic Software</h3>
<p class="text-gray-500 dark:text-gray-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis
lobortis, mi risus tempus nulla.
</p>
</div>
</li>
{
items && items.length
? items.map(({ title: title2, description, icon }, index) => (
<li class="flex md:-mx-4">
<div class="pr-4 sm:pl-4">
<span class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold rounded-full bg-primary-50 text-primary-600">
{icon ? <Icon name={icon} class="w-6 h-6 icon-bold" /> : index + 1}
</span>
</div>
<div class="pl-4">
<h3 class="mb-4 text-xl font-semibold font-heading" set:html={title2} />
<p class="text-gray-500 dark:text-gray-400" set:html={description} />
</div>
</li>
))
: ''
}
</ul>
</div>
</div>