From 8401a3fd45b7dcfccde17ebf35f6568ccd490f1a Mon Sep 17 00:00:00 2001
From: prototypa <prototypearea.dev@gmail.com>
Date: Sun, 8 Jan 2023 21:55:29 -0500
Subject: [PATCH] Migrate more widgets to props and slots

---
 src/assets/styles/base.css                |   4 +
 src/components/widgets/CallToAction.astro |   2 +-
 src/components/widgets/Stats.astro        |   6 +-
 src/components/widgets/Steps2.astro       | 134 +++++++++++-----------
 src/pages/index.astro                     |  26 ++++-
 5 files changed, 101 insertions(+), 71 deletions(-)

diff --git a/src/assets/styles/base.css b/src/assets/styles/base.css
index 8d44ad1..700fd9f 100644
--- a/src/assets/styles/base.css
+++ b/src/assets/styles/base.css
@@ -28,6 +28,10 @@
 	stroke-width: 1.2;
 }
 
+[astro-icon].icon-bold > * {
+	stroke-width: 2.4;
+}
+
 [data-aw-toggle-menu] path {
 	@apply transition;
 }
diff --git a/src/components/widgets/CallToAction.astro b/src/components/widgets/CallToAction.astro
index dbd0250..20740bc 100644
--- a/src/components/widgets/CallToAction.astro
+++ b/src/components/widgets/CallToAction.astro
@@ -41,7 +41,7 @@ const {
 						callToAction.text &&
 						callToAction.href && (
 							<div class="mt-6 max-w-xs mx-auto">
-								<a class="btn btn-primary mb-4 sm:mb-0 w-full sm:w-auto" href={callToAction.href} target="_blank" rel="noopener">
+								<a class="btn btn-primary w-full sm:w-auto" 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>
diff --git a/src/components/widgets/Stats.astro b/src/components/widgets/Stats.astro
index cf255c1..3464e79 100644
--- a/src/components/widgets/Stats.astro
+++ b/src/components/widgets/Stats.astro
@@ -19,7 +19,7 @@ const {
 } = Astro.props;
 ---
 
-<div class="px-4 py-8 md:py-16 sm:px-6 mx-auto md:px-24 lg:px-8 lg:py-20 max-w-6xl">
+<div class="px-4 py-4 md:py-16 sm:px-6 mx-auto md:px-24 lg:px-8 lg:py-20 max-w-6xl">
 	{
 		(title || subtitle || highlight) && (
 			<div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
@@ -43,8 +43,8 @@ const {
 	<div class="grid grid-cols-2 row-gap-8 md:grid-cols-4">
 		{
 			items.map(({ name, value }) => (
-				<div class="text-center md:border-r md:last:border-none dark:md:border-slate-500 mb-10 md:mb-0">
-					<div class="text-4xl font-bold lg:text-5xl xl:text-6xl text-primary-500 font-heading">{value}</div>
+				<div class="text-center md:border-r md:last:border-none dark:md:border-slate-500 mb-12 md:mb-0">
+					<div class="text-[2.6rem] font-bold lg:text-5xl xl:text-6xl text-primary-500 font-heading">{value}</div>
 					<p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">
 						{name}
 					</p>
diff --git a/src/components/widgets/Steps2.astro b/src/components/widgets/Steps2.astro
index 3c2ac48..b493a42 100644
--- a/src/components/widgets/Steps2.astro
+++ b/src/components/widgets/Steps2.astro
@@ -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>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index b8f61f4..04618b5 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -128,7 +128,7 @@ const meta = {
 		]}
 		image={{
 			src: import('~/assets/images/astronaut.jpg'),
-			alt: "Steps image"
+			alt: 'Steps image',
 		}}
 	/>
 
@@ -192,7 +192,29 @@ const meta = {
 
 	<!-- Steps2 Widget ***************** -->
 
-	<Steps2 />
+	<Steps2
+		title="Sed ac magna sit amet risus tristique interdum, at vel velit in hac habitasse platea dictumst."
+		subtitle="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."
+		callToAction={{
+			text: 'Get template',
+			href: 'https://github.com/onwidget/astrowind',
+			icon: 'tabler:download',
+		}}
+		items={
+			[{
+				title: "Responsive Elements",
+				description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.",
+			},
+			{
+				title: "Flexible Team",
+				description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.",
+			},
+			{
+				title: "Ecologic Software",
+				description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.",
+			}]
+		}
+	/>
 
 	<!-- HighlightedPosts Widget ******* -->