31 lines
1.1 KiB
Plaintext
31 lines
1.1 KiB
Plaintext
---
|
|
import Icon from '@components/ui/icons/Icon.astro';
|
|
// Destructure the properties from Astro.props
|
|
const { title, id, noArrow } = Astro.props;
|
|
// Define TypeScript interface for the properties
|
|
interface Props {
|
|
title?: string;
|
|
id?: string;
|
|
noArrow?: boolean;
|
|
}
|
|
// Define CSS classes for styling the button
|
|
const baseClasses =
|
|
'group inline-flex items-center justify-center gap-x-2 rounded-lg px-4 py-3 text-sm font-bold text-neutral-50 ring-zinc-500 transition duration-300 focus-visible:ring-3 outline-hidden';
|
|
const borderClasses = 'border border-transparent';
|
|
const bgColorClasses =
|
|
'bg-orange-400 hover:bg-orange-500 active:bg-orange-500 dark:focus:outline-hidden';
|
|
const disableClasses = 'disabled:pointer-events-none disabled:opacity-50';
|
|
const fontSizeClasses = '2xl:text-base';
|
|
const ringClasses = 'dark:ring-zinc-200';
|
|
---
|
|
|
|
{/* Button with dynamic title, id, and optional arrow */}
|
|
<button
|
|
class={`${baseClasses} ${borderClasses} ${bgColorClasses} ${disableClasses} ${fontSizeClasses} ${ringClasses}`}
|
|
id={id}
|
|
>
|
|
{title}
|
|
{/* Display the arrow based on the 'noArrow' property */}
|
|
{noArrow ? null : <Icon name="arrowRight" />}
|
|
</button>
|