Replace component CTA with Button with new props
This commit is contained in:
prototypa
@ -1,6 +1,7 @@
|
||||
---
|
||||
import { Icon } from 'astro-icon/components';
|
||||
import { getPermalink } from '~/utils/permalinks';
|
||||
import Button from '~/components/ui/Button.astro';
|
||||
|
||||
export interface Props {
|
||||
prevUrl: string;
|
||||
@ -16,18 +17,19 @@ const { prevUrl, nextUrl, prevText = 'Newer posts', nextText = 'Older posts' } =
|
||||
(prevUrl || nextUrl) && (
|
||||
<div class="container flex">
|
||||
<div class="flex flex-row mx-auto container justify-between">
|
||||
<a href={getPermalink(prevUrl)} class={`btn btn-ghost md:px-3 px-3 mr-2 ${!prevUrl ? 'invisible' : ''}`}>
|
||||
<div class="flex flex-row align-middle">
|
||||
<Icon name="tabler:chevron-left" class="w-6 h-6" />
|
||||
<p class="ml-2">{prevText}</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href={getPermalink(nextUrl)} class={`btn btn-ghost md:px-3 px-3 ${!nextUrl ? 'invisible' : ''}`}>
|
||||
<div class="flex flex-row align-middle">
|
||||
<span class="mr-2">{nextText}</span>
|
||||
<Icon name="tabler:chevron-right" class="w-6 h-6" />
|
||||
</div>
|
||||
</a>
|
||||
<Button
|
||||
variant="tertiary"
|
||||
class={`md:px-3 px-3 mr-2 ${!prevUrl ? 'invisible' : ''}`}
|
||||
href={getPermalink(prevUrl)}
|
||||
>
|
||||
<Icon name="tabler:chevron-left" class="w-6 h-6" />
|
||||
<p class="ml-2">{prevText}</p>
|
||||
</Button>
|
||||
|
||||
<Button variant="tertiary" class={`md:px-3 px-3 ${!nextUrl ? 'invisible' : ''}`} href={getPermalink(nextUrl)}>
|
||||
<span class="mr-2">{nextText}</span>
|
||||
<Icon name="tabler:chevron-right" class="w-6 h-6" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -2,16 +2,19 @@
|
||||
import { Icon } from 'astro-icon/components';
|
||||
import { getBlogPermalink } from '~/utils/permalinks';
|
||||
import { I18N } from '~/utils/config';
|
||||
import Button from '~/components/ui/Button.astro';
|
||||
|
||||
const { textDirection } = I18N;
|
||||
---
|
||||
|
||||
<div class="mx-auto px-6 sm:px-6 max-w-3xl pt-8 md:pt-4 pb-12 md:pb-20">
|
||||
<a class="btn btn-ghost px-3 md:px-3" href={getBlogPermalink()}
|
||||
>
|
||||
{textDirection === "rtl" ?
|
||||
<Icon name="tabler:chevron-right" class="w-5 h-5 mr-1 -ml-1.5 rtl:-mr-1.5 rtl:ml-1" />
|
||||
:
|
||||
<Icon name="tabler:chevron-left" class="w-5 h-5 mr-1 -ml-1.5 rtl:-mr-1.5 rtl:ml-1" />} Back to Blog</a
|
||||
>
|
||||
<Button variant="tertiary" class="px-3 md:px-3" href={getBlogPermalink()}>
|
||||
{
|
||||
textDirection === 'rtl' ? (
|
||||
<Icon name="tabler:chevron-right" class="w-5 h-5 mr-1 -ml-1.5 rtl:-mr-1.5 rtl:ml-1" />
|
||||
) : (
|
||||
<Icon name="tabler:chevron-left" class="w-5 h-5 mr-1 -ml-1.5 rtl:-mr-1.5 rtl:ml-1" />
|
||||
)
|
||||
} Back to Blog
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
26
src/components/ui/Button.astro
Normal file
26
src/components/ui/Button.astro
Normal file
@ -0,0 +1,26 @@
|
||||
---
|
||||
import { Icon } from 'astro-icon/components';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
import type { CallToAction } from '~/types';
|
||||
|
||||
const {
|
||||
variant = 'secondary',
|
||||
target,
|
||||
text = Astro.slots.render("default"),
|
||||
icon = '',
|
||||
class: className = '',
|
||||
...rest
|
||||
} = Astro.props as CallToAction;
|
||||
|
||||
const variants = {
|
||||
primary: 'btn-primary' ,
|
||||
secondary: 'btn-secondary',
|
||||
tertiary: 'btn btn-tertiary',
|
||||
link: 'hover:text-primary',
|
||||
};
|
||||
---
|
||||
|
||||
<a class={twMerge(variants[variant] || '', className)} {...target ? { target: target, rel: 'noopener noreferrer' } : {}} {...rest}>
|
||||
<Fragment set:html={text} />
|
||||
{icon && <Icon name={icon} class="w-5 h-5 ml-1 -mr-1.5 rtl:mr-1 rtl:-ml-1.5 inline-block" />}
|
||||
</a>
|
||||
@ -1,38 +0,0 @@
|
||||
---
|
||||
import { Icon } from "astro-icon/components";
|
||||
import type { CallToAction } from "~/types";
|
||||
|
||||
const { callToAction } = Astro.props;
|
||||
|
||||
const {
|
||||
targetBlank,
|
||||
text = "",
|
||||
icon = "",
|
||||
href = "",
|
||||
} = callToAction as CallToAction;
|
||||
---
|
||||
|
||||
<div class="flex w-auto">
|
||||
{
|
||||
targetBlank ? (
|
||||
<a
|
||||
class="inline-flex items-center justify-center"
|
||||
href={href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{text}
|
||||
{icon && (
|
||||
<Icon name={icon} class="w-5 h-5 ml-1 -mr-1.5 rtl:mr-1 rtl:-ml-1.5" />
|
||||
)}
|
||||
</a>
|
||||
) : (
|
||||
<a class="inline-flex items-center justify-center" href={href}>
|
||||
{text}
|
||||
{icon && (
|
||||
<Icon name={icon} class="w-5 h-5 ml-1 -mr-1.5 rtl:mr-1 rtl:-ml-1.5" />
|
||||
)}
|
||||
</a>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
import type { Form } from '~/types';
|
||||
import Button from '~/components/ui/Button.astro';
|
||||
|
||||
const { inputs, textarea, disclaimer, button = 'Contact us', description = '' } = Astro.props as Form;
|
||||
---
|
||||
@ -69,9 +70,7 @@ const { inputs, textarea, disclaimer, button = 'Contact us', description = '' }
|
||||
{
|
||||
button && (
|
||||
<div class="mt-10 grid">
|
||||
<button type="submit" class="btn btn-primary cursor-pointer">
|
||||
{button}
|
||||
</button>
|
||||
<Button variant="primary" type="submit">{button}</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
import type { ItemGrid } from '~/types';
|
||||
import CTA from './CTA.astro';
|
||||
import Button from './Button.astro';
|
||||
import { Icon } from 'astro-icon/components';
|
||||
|
||||
const { items = [], columns, defaultIcon = '', classes = {} } = Astro.props as ItemGrid;
|
||||
@ -54,12 +54,12 @@ const {
|
||||
{callToAction && (
|
||||
<div
|
||||
class={twMerge(
|
||||
`${title || description ? 'mt-3' : ''} text-primary cursor-pointer`,
|
||||
`${title || description ? 'mt-3' : ''}`,
|
||||
actionClass,
|
||||
itemClasses?.actionClass
|
||||
)}
|
||||
>
|
||||
<CTA callToAction={callToAction} />
|
||||
<Button variant="link" {...callToAction} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
import { Icon } from "astro-icon/components";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import type { ItemGrid } from "~/types";
|
||||
import CTA from "./CTA.astro";
|
||||
import Button from "./Button.astro";
|
||||
|
||||
const {
|
||||
items = [],
|
||||
@ -82,8 +82,8 @@ const {
|
||||
/>
|
||||
)}
|
||||
{callToAction && (
|
||||
<div class="mt-2 text-primary cursor-pointer">
|
||||
<CTA callToAction={callToAction} />
|
||||
<div class="mt-2">
|
||||
<Button {...callToAction} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -7,6 +7,7 @@ import { getBlogPermalink } from "~/utils/permalinks";
|
||||
import { findLatestPosts } from "~/utils/blog";
|
||||
import WidgetWrapper from "~/components/ui/WidgetWrapper.astro";
|
||||
import type { Widget } from "~/types";
|
||||
import Button from "../ui/Button.astro";
|
||||
|
||||
export interface Props extends Widget {
|
||||
title?: string;
|
||||
@ -43,12 +44,7 @@ const posts = APP_BLOG.isEnabled ? await findLatestPosts({ count }) : [];
|
||||
set:html={title}
|
||||
/>
|
||||
{APP_BLOG.list.isEnabled && linkText && linkUrl && (
|
||||
<a
|
||||
class="text-muted dark:text-slate-400 hover:text-primary transition ease-in duration-200 block mb-6 lg:mb-0"
|
||||
href={linkUrl}
|
||||
>
|
||||
{linkText} »
|
||||
</a>
|
||||
<Button variant="link" href={linkUrl}> {linkText} »</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
---
|
||||
import { Icon } from 'astro-icon/components';
|
||||
import WidgetWrapper from '../ui/WidgetWrapper.astro';
|
||||
import type { CallToAction, Widget } from '~/types';
|
||||
import Headline from '../ui/Headline.astro';
|
||||
import Headline from '~/components/ui/Headline.astro';
|
||||
import Button from "~/components/ui/Button.astro"
|
||||
|
||||
interface Props extends Widget {
|
||||
title?: string;
|
||||
@ -43,13 +43,9 @@ const {
|
||||
<Fragment set:html={callToAction} />
|
||||
) : (
|
||||
callToAction &&
|
||||
callToAction.text &&
|
||||
callToAction.href && (
|
||||
callToAction.text && (
|
||||
<div class="mt-6 max-w-xs mx-auto">
|
||||
<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 rtl:-mr-1.5 rtl:ml-1" />}
|
||||
{callToAction.text}
|
||||
</a>
|
||||
<Button variant="primary" {...callToAction} class="w-full sm:w-auto" />
|
||||
</div>
|
||||
)
|
||||
)
|
||||
|
||||
@ -3,7 +3,7 @@ import type { Content } from '~/types';
|
||||
import Headline from '../ui/Headline.astro';
|
||||
import WidgetWrapper from '../ui/WidgetWrapper.astro';
|
||||
import Image from '~/components/common/Image.astro';
|
||||
import CTA from '../ui/CTA.astro';
|
||||
import Button from '~/components/ui/Button.astro';
|
||||
import ItemGrid from '../ui/ItemGrid.astro';
|
||||
|
||||
const {
|
||||
@ -48,8 +48,8 @@ const {
|
||||
|
||||
{
|
||||
callToAction && (
|
||||
<div class="mt-[-40px] mb-8 text-primary cursor-pointer">
|
||||
<CTA callToAction={callToAction} />
|
||||
<div class="mt-[-40px] mb-8 text-primary">
|
||||
<Button variant="link" {...callToAction} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -3,9 +3,11 @@ import { Icon } from "astro-icon/components";
|
||||
import Logo from "~/components/Logo.astro";
|
||||
import ToggleTheme from "~/components/common/ToggleTheme.astro";
|
||||
import ToggleMenu from "~/components/common/ToggleMenu.astro";
|
||||
import Button from "~/components/ui/Button.astro"
|
||||
|
||||
import { getHomePermalink } from "~/utils/permalinks";
|
||||
import { trimSlash, getAsset } from "~/utils/permalinks";
|
||||
import type { CallToAction } from "~/types";
|
||||
|
||||
interface Link {
|
||||
text?: string;
|
||||
@ -14,10 +16,7 @@ interface Link {
|
||||
icon?: string;
|
||||
}
|
||||
|
||||
interface ActionLink extends Link {
|
||||
class?: string;
|
||||
type?: string;
|
||||
}
|
||||
interface ActionLink extends CallToAction {}
|
||||
|
||||
interface MenuLink extends Link {
|
||||
links?: Array<MenuLink>;
|
||||
@ -146,10 +145,8 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`
|
||||
{
|
||||
actions?.length ? (
|
||||
<span class="ml-4 rtl:ml-0 rtl:mr-4">
|
||||
{actions.map(({ text, href, class: className }) => (
|
||||
<a class:list={["btn ml-2 py-2.5 px-5.5 md:px-6 font-semibold shadow-none text-sm", className]} href={href}>
|
||||
<Fragment set:html={text} />
|
||||
</a>
|
||||
{actions.map((btnProps) => (
|
||||
<Button {...btnProps} class="ml-2 py-2.5 px-5.5 md:px-6 font-semibold shadow-none text-sm w-auto"/>
|
||||
))}
|
||||
</span>
|
||||
) : (
|
||||
|
||||
@ -1,19 +1,30 @@
|
||||
---
|
||||
import Image from '~/components/common/Image.astro';
|
||||
import CTA from '../ui/CTA.astro';
|
||||
import Button from '~/components/ui/Button.astro';
|
||||
import type { CallToAction } from '~/types';
|
||||
|
||||
export interface Props {
|
||||
id?: string;
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
tagline?: string;
|
||||
content?: string;
|
||||
actions?: string | CallToAction[];
|
||||
image?: string | any; // TODO: find HTMLElementProps
|
||||
}
|
||||
|
||||
const {
|
||||
id,
|
||||
title = await Astro.slots.render('title'),
|
||||
subtitle = await Astro.slots.render('subtitle'),
|
||||
tagline,
|
||||
content = await Astro.slots.render('content'),
|
||||
callToAction = await Astro.slots.render('callToAction'),
|
||||
callToAction2 = await Astro.slots.render('callToAction2'),
|
||||
actions = await Astro.slots.render('actions'),
|
||||
image = await Astro.slots.render('image'),
|
||||
} = Astro.props;
|
||||
---
|
||||
|
||||
<section class="relative md:-mt-[76px] not-prose">
|
||||
<section class="relative md:-mt-[76px] not-prose" {...id ? { id } : {}}>
|
||||
<div class="absolute inset-0 pointer-events-none" aria-hidden="true"></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>
|
||||
@ -37,34 +48,21 @@ const {
|
||||
}
|
||||
<div class="max-w-3xl mx-auto">
|
||||
{subtitle && <p class="text-xl text-muted mb-6 dark:text-slate-300" set:html={subtitle} />}
|
||||
<div class="max-w-xs sm:max-w-md m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4">
|
||||
{
|
||||
callToAction && (
|
||||
<div class="flex w-full sm:w-auto">
|
||||
{typeof callToAction === 'string' ? (
|
||||
<Fragment set:html={callToAction} />
|
||||
) : (
|
||||
<div class="btn btn-primary sm:mb-0 w-full">
|
||||
<CTA callToAction={callToAction} />
|
||||
{
|
||||
actions && (
|
||||
<div class="max-w-xs sm:max-w-md m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4">
|
||||
{Array.isArray(actions) ? (
|
||||
actions.map((action) => (
|
||||
<div class="flex w-full sm:w-auto">
|
||||
<Button {...(action || {})} class="w-full sm:mb-0" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{
|
||||
callToAction2 && (
|
||||
<div class="flex w-full sm:w-auto">
|
||||
{typeof callToAction2 === 'string' ? (
|
||||
<Fragment set:html={callToAction2} />
|
||||
) : (
|
||||
<div class="btn w-full">
|
||||
<CTA callToAction={callToAction2} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<Fragment set:html={actions} />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
{content && <Fragment set:html={content} />}
|
||||
</div>
|
||||
|
||||
@ -1,15 +1,14 @@
|
||||
---
|
||||
import Image from '~/components/common/Image.astro';
|
||||
import type { CallToAction } from '~/types';
|
||||
import CTA from '../ui/CTA.astro';
|
||||
import Button from '~/components/ui/Button.astro';
|
||||
|
||||
export interface Props {
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
tagline?: string;
|
||||
content?: string;
|
||||
callToAction?: string | CallToAction;
|
||||
callToAction2?: string | CallToAction;
|
||||
actions?: string | CallToAction[];
|
||||
image?: string | any; // TODO: find HTMLElementProps
|
||||
}
|
||||
|
||||
@ -18,8 +17,7 @@ const {
|
||||
subtitle = await Astro.slots.render('subtitle'),
|
||||
tagline,
|
||||
content = await Astro.slots.render('content'),
|
||||
callToAction = await Astro.slots.render('callToAction'),
|
||||
callToAction2 = await Astro.slots.render('callToAction2'),
|
||||
actions = await Astro.slots.render('actions'),
|
||||
image = await Astro.slots.render('image'),
|
||||
} = Astro.props;
|
||||
---
|
||||
@ -48,36 +46,22 @@ const {
|
||||
}
|
||||
<div class="max-w-3xl mx-auto lg:max-w-none">
|
||||
{subtitle && <p class="text-xl text-muted mb-6 dark:text-slate-300" set:html={subtitle} />}
|
||||
<div
|
||||
class="max-w-xs sm:max-w-md m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4 lg:justify-start lg:m-0 lg:max-w-7xl"
|
||||
>
|
||||
{
|
||||
callToAction && (
|
||||
<div class="flex w-full sm:w-auto">
|
||||
{typeof callToAction === 'string' ? (
|
||||
<Fragment set:html={callToAction} />
|
||||
) : (
|
||||
<div class="btn btn-primary sm:mb-0 w-full">
|
||||
<CTA callToAction={callToAction} />
|
||||
|
||||
{
|
||||
actions && (
|
||||
<div class="max-w-xs sm:max-w-md m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4 lg:justify-start lg:m-0 lg:max-w-7xl">
|
||||
{Array.isArray(actions) ? (
|
||||
actions.map((action) => (
|
||||
<div class="flex w-full sm:w-auto">
|
||||
<Button {...(action || {})} class="w-full sm:mb-0" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{
|
||||
callToAction2 && (
|
||||
<div class="flex w-full sm:w-auto">
|
||||
{typeof callToAction2 === 'string' ? (
|
||||
<Fragment set:html={callToAction2} />
|
||||
) : (
|
||||
<div class="btn w-full">
|
||||
<CTA callToAction={callToAction2} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<Fragment set:html={actions} />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
{content && <Fragment set:html={content} />}
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
import { Icon } from 'astro-icon/components';
|
||||
import Button from '~/components/ui/Button.astro';
|
||||
|
||||
const {
|
||||
title = await Astro.slots.render('title'),
|
||||
@ -40,14 +40,7 @@ const {
|
||||
{typeof callToAction === 'string' ? (
|
||||
<Fragment set:html={callToAction} />
|
||||
) : (
|
||||
<a class="btn btn-primary sm:mb-0 w-full" href={callToAction?.href} target="_blank" rel="noopener">
|
||||
{callToAction?.icon && (
|
||||
<>
|
||||
<Icon name={callToAction.icon} class="w-5 h-5 mr-1 -ml-1.5 rtl:-mr-1.5 rtl:ml-1" />
|
||||
</>
|
||||
)}
|
||||
{callToAction?.text}
|
||||
</a>
|
||||
<Button variant="primary" {...callToAction} />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
@ -58,15 +51,7 @@ const {
|
||||
{typeof callToAction2 === 'string' ? (
|
||||
<Fragment set:html={callToAction2} />
|
||||
) : (
|
||||
<a class="btn w-full" href={callToAction2?.href}>
|
||||
{callToAction2?.icon && (
|
||||
<>
|
||||
<Icon name={callToAction2.icon} class="w-5 h-5 mr-1 -ml-1.5" />
|
||||
|
||||
</>
|
||||
)}
|
||||
{callToAction2.text}
|
||||
</a>
|
||||
<Button {...callToAction2} />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
import { Icon } from 'astro-icon/components';
|
||||
import CTA from '~/components/ui/CTA.astro';
|
||||
import Button from '~/components/ui/Button.astro';
|
||||
import Headline from '~/components/ui/Headline.astro';
|
||||
import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
|
||||
import type { Pricing } from '~/types';
|
||||
@ -64,11 +64,11 @@ const {
|
||||
)}
|
||||
</div>
|
||||
{callToAction && (
|
||||
<div class={`flex justify-center btn ${hasRibbon ? 'btn-primary' : ''}`}>
|
||||
<div class={`flex justify-center`}>
|
||||
{typeof callToAction === 'string' ? (
|
||||
<Fragment set:html={callToAction} />
|
||||
) : (
|
||||
callToAction && callToAction.text && callToAction.href && <CTA callToAction={callToAction} />
|
||||
callToAction && callToAction.text && callToAction.href && <Button {...hasRibbon ? { variant:'primary' } : {}} {...callToAction}/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
---
|
||||
import { Icon } from 'astro-icon/components';
|
||||
import Headline from '../ui/Headline.astro';
|
||||
import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
|
||||
import Headline from '~/components/ui/Headline.astro';
|
||||
import Button from '~/components/ui/Button.astro';
|
||||
import type { Steps } from '~/types';
|
||||
import WidgetWrapper from '../ui/WidgetWrapper.astro';
|
||||
|
||||
const {
|
||||
title = await Astro.slots.render('title'),
|
||||
@ -42,10 +43,7 @@ const {
|
||||
callToAction &&
|
||||
callToAction.text &&
|
||||
callToAction.href && (
|
||||
<a class="btn btn-primary mb-12" href={callToAction.href} target="_blank" rel="noopener">
|
||||
{callToAction.icon && <Icon name={callToAction.icon} class="w-5 h-5 mr-1 -ml-1.5 rtl:-mr-1.5 rtl:ml-1" />}
|
||||
{callToAction.text}
|
||||
</a>
|
||||
<Button variant="primary" {...callToAction} class="mb-12 w-auto"/>
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
import Headline from '~/components/ui/Headline.astro';
|
||||
import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
|
||||
import CTA from '~/components/ui/CTA.astro';
|
||||
import Button from '~/components/ui/Button.astro';
|
||||
import Image from '~/components/common/Image.astro';
|
||||
import type { Testimonials } from '~/types';
|
||||
|
||||
@ -68,8 +68,8 @@ const {
|
||||
</div>
|
||||
{
|
||||
callToAction && (
|
||||
<div class="btn flex justify-center mx-auto w-fit mt-8 md:mt-12 font-medium">
|
||||
<CTA callToAction={callToAction} />
|
||||
<div class="flex justify-center mx-auto w-fit mt-8 md:mt-12 font-medium">
|
||||
<Button {...callToAction} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user