From 7e83be5a7586d2758e41cd77ab7ed407b1a5e22b Mon Sep 17 00:00:00 2001 From: prototypa Date: Sun, 8 Jan 2023 19:39:57 -0500 Subject: [PATCH] Migrate widgets to use by props and slots --- src/components/widgets/CallToAction.astro | 61 +++++--- src/components/widgets/FAQs.astro | 2 +- src/components/widgets/Features.astro | 37 +++-- src/components/widgets/Features2.astro | 97 ++++++------ src/components/widgets/Hero.astro | 16 +- src/components/widgets/Stats.astro | 66 +++++--- src/components/widgets/Steps.astro | 135 +++++++---------- .../widgets/{Features3.astro => Steps2.astro} | 2 +- src/pages/index.astro | 142 +++++++++++++++++- 9 files changed, 360 insertions(+), 198 deletions(-) rename src/components/widgets/{Features3.astro => Steps2.astro} (99%) diff --git a/src/components/widgets/CallToAction.astro b/src/components/widgets/CallToAction.astro index fc7d45e..ff62d32 100644 --- a/src/components/widgets/CallToAction.astro +++ b/src/components/widgets/CallToAction.astro @@ -1,29 +1,54 @@ --- import { Icon } from 'astro-icon'; + +interface CallToAction { + text: string; + href: string; + icon?: string; +} + +export interface Props { + title?: string; + description?: string; + callToAction?: string | CallToAction; +} + +const { + title = await Astro.slots.render('title'), + subtitle = await Astro.slots.render('subtitle'), + callToAction = await Astro.slots.render('callToAction'), +} = Astro.props; ---
-

- Astro +
Tailwind CSS -

-

- Be very surprised by these huge fake numbers you are seeing on this page. Don't - waste more time! :P -

- -
- - Get template - -
+ { + title && ( +

+ ) + } + {subtitle &&

} + { + typeof callToAction === 'string' ? ( + + ) : ( + callToAction && + callToAction.text && + callToAction.href && ( +

+ + {callToAction.icon && } + {callToAction.text} + +
+ ) + ) + }

diff --git a/src/components/widgets/FAQs.astro b/src/components/widgets/FAQs.astro index 159ff74..128a222 100644 --- a/src/components/widgets/FAQs.astro +++ b/src/components/widgets/FAQs.astro @@ -21,7 +21,7 @@ const {
-
+
{ title && (

-
- {highlight &&

} - { - title && ( -

- ) - } + { + (title || subtitle || highlight) && ( +
+ {highlight && ( +

+ )} + {title && ( +

+ )} - { - subtitle && ( -

- ) - } -

+ {subtitle && ( +

+ )} +

+ ) + }
{ items.map((subitems) => ( diff --git a/src/components/widgets/Features2.astro b/src/components/widgets/Features2.astro index f93ae74..10d6b6a 100644 --- a/src/components/widgets/Features2.astro +++ b/src/components/widgets/Features2.astro @@ -1,69 +1,64 @@ --- import { Icon } from 'astro-icon'; -const items = [ - { - title: 'Headers', - description: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.', - icon: 'flat-color-icons:home', - }, - { - title: 'Footers', - description: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.', - icon: 'flat-color-icons:faq', - }, - { - title: 'Features', - description: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.', - icon: 'flat-color-icons:video-projector', - }, - { - title: 'Call-to-Action', - description: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.', - icon: 'flat-color-icons:video-projector', - }, - { - title: 'Pricing', - description: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.', - icon: 'flat-color-icons:calculator', - }, - { - title: 'Testimonial', - description: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.', - icon: 'flat-color-icons:voice-presentation', - }, -]; +interface Item { + title: string; + description: string; + icon?: string; +} + +export interface Props { + title?: string; + subtitle?: string; + highlight?: string; + items: Array; +} + +const { + title = await Astro.slots.render('title'), + subtitle = await Astro.slots.render('subtitle'), + highlight, + items = [], + responsiveGrid = { xs: 1, sm: 1, md: 2, lg: 4 } +} = Astro.props; ---
-
-

Components

-

- Most used widgets -

-

- Provides frequently used components for building websites using Tailwind CSS -

-
-
+ { + (title || subtitle || highlight) && ( +
+ {highlight && ( +

+ )} + {title && ( +

+ )} + + {subtitle && ( +

+ )} +

+ ) + } +
{ items.map(({ title, description, icon }) => ( -
+
- +
{title}
-

{description}

+

)) } diff --git a/src/components/widgets/Hero.astro b/src/components/widgets/Hero.astro index 3547395..6b447e0 100644 --- a/src/components/widgets/Hero.astro +++ b/src/components/widgets/Hero.astro @@ -11,7 +11,7 @@ interface CallToAction { export interface Props { title?: string; subtitle?: string; - callToAction1?: string | CallToAction; + callToAction?: string | CallToAction; callToAction2?: string | CallToAction; image?: string | any; // TODO: find HTMLElementProps } @@ -19,7 +19,7 @@ export interface Props { const { title = await Astro.slots.render('title'), subtitle = await Astro.slots.render('subtitle'), - callToAction1 = await Astro.slots.render('callToAction1'), + callToAction = await Astro.slots.render('callToAction'), callToAction2 = await Astro.slots.render('callToAction2'), image = await Astro.slots.render('image'), } = Astro.props; @@ -41,14 +41,14 @@ const { {subtitle &&

}

{ - callToAction1 && ( + callToAction && (
- {typeof callToAction1 === 'string' ? ( - + {typeof callToAction === 'string' ? ( + ) : ( - - {callToAction1?.icon && <>{' '}} - {callToAction1?.text} + + {callToAction?.icon && <>{' '}} + {callToAction?.text} )}
diff --git a/src/components/widgets/Stats.astro b/src/components/widgets/Stats.astro index 9d13308..cf255c1 100644 --- a/src/components/widgets/Stats.astro +++ b/src/components/widgets/Stats.astro @@ -1,25 +1,55 @@ --- +interface Item { + name: string; + value: string; +} + +export interface Props { + title?: string; + subtitle?: string; + highlight?: string; + items?: Array; +} + +const { + title = await Astro.slots.render('title'), + subtitle = await Astro.slots.render('subtitle'), + highlight, + items = [], +} = Astro.props; ---
+ { + (title || subtitle || highlight) && ( +
+ {highlight && ( +

+ {highlight} +

+ )} + {title && ( +

+ )} + {subtitle && ( +

+ )} +

+ ) + }
-
-
132K
-

- Downloads -

-
-
-
24.8K
-

Stars

-
-
-
10.3K
-

Forks

-
-
-
48.4K
-

Users

-
+ { + items.map(({ name, value }) => ( +
+
{value}
+

+ {name} +

+
+ )) + }
diff --git a/src/components/widgets/Steps.astro b/src/components/widgets/Steps.astro index f96c28a..da84556 100644 --- a/src/components/widgets/Steps.astro +++ b/src/components/widgets/Steps.astro @@ -1,91 +1,72 @@ --- import { Icon } from 'astro-icon'; import { Picture } from '@astrojs/image/components'; + +interface Item { + title: string; + description?: string; + icon?: string; +} + +export interface Props { + title?: string; + items: Array; + image?: string | any; // TODO: find HTMLElementProps +} + +const { + title = await Astro.slots.render('title'), + items = [], + image = await Astro.slots.render('image'), +} = Astro.props; ---
-

- Sed ac magna sit amet risus tristique interdum. hac. -

-
-
-
-
- + {title &&

} + { + items && + items.length && + items.map(({ title, description, icon }, index) => ( +
+
+
+ {index !== items.length - 1 ? ( +
+ {icon && } +
+ ) : ( +
+ +
+ )} +
+
+
+
+ {title &&

} + {description &&

} +

-
-
-

-
-

Step 1

-

- 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. -

-
-
-
-
-
-
- -
-
-
-
-
-

Step 2

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi - risus tempus nulla, sed porttitor est nibh at nulla. -

-
-
-
-
-
-
- -
-
-
-
-
-

Step 3

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi - risus tempus nulla, sed porttitor est nibh at nulla. -

-
-
-
-
-
-
- -
-
-
-
-

Ready!

-

-
-
+ )) + }
- + { + image && + (typeof image === 'string' ? ( + + ) : ( + + )) + }
diff --git a/src/components/widgets/Features3.astro b/src/components/widgets/Steps2.astro similarity index 99% rename from src/components/widgets/Features3.astro rename to src/components/widgets/Steps2.astro index c03a921..a49bda9 100644 --- a/src/components/widgets/Features3.astro +++ b/src/components/widgets/Steps2.astro @@ -32,7 +32,7 @@ import { Icon } from 'astro-icon';
-
    +
    • + Your website with Astro + Tailwind CSS + + + + + - + - + - + + + + + + + + + + + - + - + + + + + + + Astro +
      Tailwind CSS +       + + + Be very surprised by these huge fake numbers you are seeing on this page. Don't + waste more time! :P + +