2024-02-13 05:51:18 +04:00
|
|
|
---
|
2024-02-18 07:39:17 +04:00
|
|
|
// Destructure the properties from Astro.props
|
2024-02-13 05:51:18 +04:00
|
|
|
const { title } = Astro.props;
|
|
|
|
|
2024-02-18 07:39:17 +04:00
|
|
|
// Define TypeScript interface for the properties
|
2024-02-13 05:51:18 +04:00
|
|
|
interface Props {
|
|
|
|
title: string;
|
|
|
|
}
|
2024-02-18 07:39:17 +04:00
|
|
|
// Define CSS classes for styling the button
|
|
|
|
const baseClasses =
|
|
|
|
"inline-flex w-full items-center justify-center gap-x-2 rounded-lg px-4 py-3 text-sm font-bold text-neutral-700 focus-visible:ring outline-none transition duration-300";
|
2024-02-15 00:17:43 +04:00
|
|
|
const borderClasses = "border border-transparent";
|
|
|
|
const bgColorClasses = "bg-yellow-400 dark:focus:outline-none";
|
|
|
|
const hoverClasses = "hover:bg-yellow-500";
|
|
|
|
const fontSizeClasses = "2xl:text-base";
|
|
|
|
const disabledClasses = "disabled:pointer-events-none disabled:opacity-50";
|
|
|
|
const ringClasses = "ring-zinc-500 dark:ring-zinc-200";
|
|
|
|
---
|
2024-02-18 07:39:17 +04:00
|
|
|
|
|
|
|
<!-- Styled submit button with dynamic title -->
|
2024-02-13 05:51:18 +04:00
|
|
|
<button
|
2024-02-18 07:39:17 +04:00
|
|
|
type="submit"
|
|
|
|
class={`${baseClasses} ${borderClasses} ${bgColorClasses} ${hoverClasses} ${fontSizeClasses} ${disabledClasses} ${ringClasses}`}
|
|
|
|
>{title}</button
|
|
|
|
>
|