angel/campus-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace component CTA with Button with new props

Browse Source
This commit is contained in:
prototypa
2023-09-02 18:02:45 -04:00
parent c1fb20e916
commit 770dee10bd
32 changed files with 234 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/widgets/BlogLatestPosts.astro
View File

@@ -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>
)}

12
src/components/widgets/CallToAction.astro
View File

@@ -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>
)
)

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

@@ -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>
)
}

13
src/components/widgets/Header.astro
View File

@@ -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>
) : (

60
src/components/widgets/Hero.astro
View File

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

52
src/components/widgets/Hero2.astro
View File

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

21
src/components/widgets/HeroText.astro
View File

@@ -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" />
&nbsp;
</>
)}
{callToAction2.text}
</a>
<Button {...callToAction2} />
)}
</div>
)

6
src/components/widgets/Pricing.astro
View File

@@ -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>
)}

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

@@ -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"/>
)
)
}

6
src/components/widgets/Testimonials.astro
View File

@@ -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>
)
}