diff --git a/src/assets/styles/tailwind.css b/src/assets/styles/tailwind.css index bacd14e..38014f2 100644 --- a/src/assets/styles/tailwind.css +++ b/src/assets/styles/tailwind.css @@ -2,10 +2,6 @@ @tailwind components; @tailwind utilities; -.dd *:first-child { - margin-top: 0; -} - @layer utilities { .bg-page { background-color: var(--aw-color-bg-page); @@ -13,31 +9,32 @@ .bg-dark { background-color: var(--aw-color-bg-page-dark); } -} - -@layer components { - .text-page { - color: var(--aw-color-text-page); - } - - .text-muted { - color: var(--aw-color-text-muted); - } - .bg-light { background-color: var(--aw-color-bg-page); } - - .btn { - @apply inline-flex items-center justify-center rounded-full border-gray-400 border bg-transparent font-medium text-center text-base text-page leading-snug transition py-3.5 px-6 md:px-8 ease-in duration-200 focus:ring-blue-500 focus:ring-offset-blue-200 focus:ring-2 focus:ring-offset-2 hover:bg-gray-100 hover:border-gray-600 dark:text-slate-300 dark:border-slate-500 dark:hover:bg-slate-800 dark:hover:border-slate-800; + .text-page { + color: var(--aw-color-text-page); } + .text-muted { + color: var(--aw-color-text-muted); + } +} - .btn-ghost { - @apply border-none shadow-none text-muted hover:text-gray-900 dark:text-gray-400 dark:hover:text-white; +@layer components { + .btn { + @apply inline-flex items-center justify-center rounded-full border-gray-400 border bg-transparent font-medium text-center text-base text-page leading-snug transition py-3.5 px-6 md:px-8 ease-in duration-200 focus:ring-blue-500 focus:ring-offset-blue-200 focus:ring-2 focus:ring-offset-2 hover:bg-gray-100 hover:border-gray-600 dark:text-slate-300 dark:border-slate-500 dark:hover:bg-slate-800 dark:hover:border-slate-800 cursor-pointer; } .btn-primary { - @apply font-semibold bg-primary text-white border-primary hover:bg-secondary hover:border-secondary hover:text-white dark:text-white dark:bg-primary dark:border-primary dark:hover:border-secondary dark:hover:bg-secondary; + @apply btn font-semibold bg-primary text-white border-primary hover:bg-secondary hover:border-secondary hover:text-white dark:text-white dark:bg-primary dark:border-primary dark:hover:border-secondary dark:hover:bg-secondary; + } + + .btn-secondary { + @apply btn; + } + + .btn-tertiary { + @apply btn border-none shadow-none text-muted hover:text-gray-900 dark:text-gray-400 dark:hover:text-white; } } @@ -85,3 +82,9 @@ [data-aw-toggle-menu].expanded g > path:last-child { @apply rotate-45 translate-y-[-8px] translate-x-[14px]; } + +/* To deprecated */ + +.dd *:first-child { + margin-top: 0; +} diff --git a/src/components/blog/Pagination.astro b/src/components/blog/Pagination.astro index 058e363..1a3af78 100644 --- a/src/components/blog/Pagination.astro +++ b/src/components/blog/Pagination.astro @@ -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) && (
- -
- -

{prevText}

-
- - -
- {nextText} - -
- + + +
) diff --git a/src/components/blog/ToBlogLink.astro b/src/components/blog/ToBlogLink.astro index d37bd8b..e3e28ef 100644 --- a/src/components/blog/ToBlogLink.astro +++ b/src/components/blog/ToBlogLink.astro @@ -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; ---
- - {textDirection === "rtl" ? - - : - } Back to Blog +
diff --git a/src/components/ui/Button.astro b/src/components/ui/Button.astro new file mode 100644 index 0000000..9014de2 --- /dev/null +++ b/src/components/ui/Button.astro @@ -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', +}; +--- + + + + {icon && } + diff --git a/src/components/ui/CTA.astro b/src/components/ui/CTA.astro deleted file mode 100644 index 5a7d10a..0000000 --- a/src/components/ui/CTA.astro +++ /dev/null @@ -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; ---- - -
- { - targetBlank ? ( - - {text} - {icon && ( - - )} - - ) : ( - - {text} - {icon && ( - - )} - - ) - } -
diff --git a/src/components/ui/Form.astro b/src/components/ui/Form.astro index d278520..64f3f36 100644 --- a/src/components/ui/Form.astro +++ b/src/components/ui/Form.astro @@ -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 && (
- +
) } diff --git a/src/components/ui/ItemGrid.astro b/src/components/ui/ItemGrid.astro index 8a6f6a6..03f27e8 100644 --- a/src/components/ui/ItemGrid.astro +++ b/src/components/ui/ItemGrid.astro @@ -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 && (
- +
)} diff --git a/src/components/ui/ItemGrid2.astro b/src/components/ui/ItemGrid2.astro index 9511413..9d0bc42 100644 --- a/src/components/ui/ItemGrid2.astro +++ b/src/components/ui/ItemGrid2.astro @@ -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 && ( -
- +
+
)}
diff --git a/src/components/widgets/BlogLatestPosts.astro b/src/components/widgets/BlogLatestPosts.astro index 600a725..9b45383 100644 --- a/src/components/widgets/BlogLatestPosts.astro +++ b/src/components/widgets/BlogLatestPosts.astro @@ -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 && ( - - {linkText} » - + )} )} diff --git a/src/components/widgets/CallToAction.astro b/src/components/widgets/CallToAction.astro index d50b2c5..b9bae02 100644 --- a/src/components/widgets/CallToAction.astro +++ b/src/components/widgets/CallToAction.astro @@ -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 { ) : ( callToAction && - callToAction.text && - callToAction.href && ( + callToAction.text && (
- - {callToAction.icon && } - {callToAction.text} - +
) ) diff --git a/src/components/widgets/Content.astro b/src/components/widgets/Content.astro index 12e54a7..5b95182 100644 --- a/src/components/widgets/Content.astro +++ b/src/components/widgets/Content.astro @@ -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 && ( -
- +
+
) } diff --git a/src/components/widgets/Header.astro b/src/components/widgets/Header.astro index 0812c65..60a2e36 100644 --- a/src/components/widgets/Header.astro +++ b/src/components/widgets/Header.astro @@ -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; @@ -146,10 +145,8 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}` { actions?.length ? ( - {actions.map(({ text, href, class: className }) => ( - - - + {actions.map((btnProps) => ( +
- )} - - ) - } - { - callToAction2 && ( -
- {typeof callToAction2 === 'string' ? ( - - ) : ( -
- -
- )} -
- ) - } - + )) + ) : ( + + )} + + ) + } {content && } diff --git a/src/components/widgets/Hero2.astro b/src/components/widgets/Hero2.astro index dcafae2..5eb3202 100644 --- a/src/components/widgets/Hero2.astro +++ b/src/components/widgets/Hero2.astro @@ -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 { }
{subtitle &&

} -

- { - callToAction && ( -
- {typeof callToAction === 'string' ? ( - - ) : ( -
- + + { + actions && ( +
+ {Array.isArray(actions) ? ( + actions.map((action) => ( +
+
- )} -
- ) - } - { - callToAction2 && ( -
- {typeof callToAction2 === 'string' ? ( - - ) : ( -
- -
- )} -
- ) - } -
+ )) + ) : ( + + )} +
+ ) + }
{content && }
diff --git a/src/components/widgets/HeroText.astro b/src/components/widgets/HeroText.astro index 419ccdf..7087198 100644 --- a/src/components/widgets/HeroText.astro +++ b/src/components/widgets/HeroText.astro @@ -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' ? ( ) : ( - - {callToAction?.icon && ( - <> - - - )} - {callToAction?.text} - +