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

Include a callToAction on Content widget

Browse Source
This commit is contained in:
widgeter
2023-08-24 22:01:40 +02:00
parent 2840bfffb3
commit a9a4298eec
3 changed files with 29 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/widgets/Content.astro
View File

@ -4,12 +4,14 @@ import type { Content } from '~/types';
import Headline from '../ui/Headline.astro'; import Headline from '../ui/Headline.astro';
import WidgetWrapper from '../ui/WidgetWrapper.astro'; import WidgetWrapper from '../ui/WidgetWrapper.astro';
import Image from '~/components/common/Image.astro'; import Image from '~/components/common/Image.astro';
import CTA from '../ui/CTA.astro';
const { const {
title = await Astro.slots.render('title'), title = await Astro.slots.render('title'),
subtitle = await Astro.slots.render('subtitle'), subtitle = await Astro.slots.render('subtitle'),
tagline, tagline,
content = await Astro.slots.render('content'), content = await Astro.slots.render('content'),
callToAction,
items = [], items = [],
image = await Astro.slots.render('image'), image = await Astro.slots.render('image'),
isReversed = false, isReversed = false,
@ -43,6 +45,14 @@ const {
<div class="md:basis-1/2 self-center"> <div class="md:basis-1/2 self-center">
{content && <div class="mb-12 text-lg dark:text-slate-400" set:html={content} />} {content && <div class="mb-12 text-lg dark:text-slate-400" set:html={content} />}
{
callToAction && (
<div class="mt-[-40px] mb-8 text-primary cursor-pointer">
<CTA callToAction={callToAction} />
</div>
)
}
{ {
items && ( items && (
<div class="space-y-8"> <div class="space-y-8">

18
src/pages/homes/personal.astro
View File

@ -201,6 +201,12 @@ const metadata = {
src: 'https://images.unsplash.com/photo-1658248165252-71e116af1b34?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=928&q=80', src: 'https://images.unsplash.com/photo-1658248165252-71e116af1b34?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=928&q=80',
alt: 'Tech Design Image', alt: 'Tech Design Image',
}} }}
callToAction={{
targetBlank: true,
text: 'Go to the project',
icon: 'tabler:chevron-right',
href: '#',
}}
> >
<Fragment slot="content"> <Fragment slot="content">
<h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2"> <h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">
@ -233,6 +239,12 @@ const metadata = {
src: 'https://images.unsplash.com/photo-1619983081563-430f63602796?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80', src: 'https://images.unsplash.com/photo-1619983081563-430f63602796?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80',
alt: 'Art and Music Poster Image', alt: 'Art and Music Poster Image',
}} }}
callToAction={{
targetBlank: true,
text: 'Go to the project',
icon: 'tabler:chevron-right',
href: '#',
}}
> >
<Fragment slot="content"> <Fragment slot="content">
<h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2"> <h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">
@ -264,6 +276,12 @@ const metadata = {
src: 'https://plus.unsplash.com/premium_photo-1683288295841-782fa47e4770?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80', src: 'https://plus.unsplash.com/premium_photo-1683288295841-782fa47e4770?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80',
alt: 'Fashion e-commerce Image', alt: 'Fashion e-commerce Image',
}} }}
callToAction={{
targetBlank: true,
text: 'Go to the project',
icon: 'tabler:chevron-right',
href: '#',
}}
> >
<Fragment slot="content"> <Fragment slot="content">
<h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2"> <h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">

1
src/types.d.ts vendored
View File

@ -273,6 +273,7 @@ export interface Content extends Headline, Widget {
columns?: number; columns?: number;
isReversed?: boolean; isReversed?: boolean;
isAfterContent?: boolean; isAfterContent?: boolean;
callToAction?: CallToAction;
} }
export interface Contact extends Headline, Form, Widget {} export interface Contact extends Headline, Form, Widget {}