jalil/achat-maison-albi-fr
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add PrimaryCTA and SecondaryCTA components

Browse source 
This commit adds two new Astro components: PrimaryCTA and SecondaryCTA. These components represent the primary and secondary Call To Action (CTA) buttons, respectively. Both components accept title and url as props, and present clickable buttons styled according to their classification.
This commit is contained in:
Emil Gulamov 2024-02-11 22:45:46 +04:00
parent b04b440c9f
commit 7c2c33331e
2 changed files with 41 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/components/ui/buttons/PrimaryCTA.astro Normal file
View file

@ -0,0 +1,26 @@
---
const { title, url } = Astro.props;
interface Props {
title?: string;
url?: string;
}
---
<a
class="group inline-flex items-center justify-center gap-x-2 rounded-lg border border-transparent bg-[#fa5a15] px-4 py-3 text-sm font-semibold text-neutral-50 outline-none ring-zinc-500 transition duration-300 hover:bg-[#e14d0b] focus-visible:ring active:bg-[#e14d0b] disabled:pointer-events-none disabled:opacity-50 dark:ring-zinc-200 dark:focus:outline-none dark:focus:ring-1"
href={url}
>
{title}
<svg
class="h-4 w-4 flex-shrink-0 transition duration-300 group-hover:translate-x-1"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg
>
</a>

15
src/components/ui/buttons/SecondaryCTA.astro Normal file
View file

@ -0,0 +1,15 @@
---
const { title, url } = Astro.props;
interface Props {
title?: string;
url?: string;
}
---
<a
class="inline-flex items-center justify-center gap-x-2 rounded-lg border border-neutral-200 bg-neutral-300 px-4 py-3 text-center text-sm font-medium text-neutral-500 shadow-sm outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-400/50 hover:text-neutral-600 focus-visible:ring active:text-neutral-700 disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-700 dark:bg-zinc-700 dark:text-neutral-300 dark:ring-zinc-200 dark:hover:bg-zinc-600 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
href={url}
>
{title}
</a>