This commit refactors multiple component files for better understandability and maintainability. Detailed comments are added for enhanced readability. The data source is defined using Astro.js to simplify the process of acquiring data for the components. Unnecessary files like 'preline.js' from the vendor scripts directory are deleted as part of clean-up.
25 lines
969 B
Text
25 lines
969 B
Text
---
|
|
// Destructure the properties from Astro.props
|
|
const { title } = Astro.props;
|
|
|
|
// Define TypeScript interface for the properties
|
|
interface Props {
|
|
title: string;
|
|
}
|
|
// 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";
|
|
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";
|
|
---
|
|
|
|
<!-- Styled submit button with dynamic title -->
|
|
<button
|
|
type="submit"
|
|
class={`${baseClasses} ${borderClasses} ${bgColorClasses} ${hoverClasses} ${fontSizeClasses} ${disabledClasses} ${ringClasses}`}
|
|
>{title}</button
|
|
>
|