AstralHalo/src/components/widgets/Button.astro
2025-01-23 13:34:59 +08:00

43 lines
960 B
Plaintext

---
import { AstroParameterConflictError } from '@/types/Errors';
import type { HTMLAttributes, HTMLTag } from 'astro/types';
interface Props extends HTMLAttributes<'button'> {
href?: string;
}
const { href, onclick, class: className, ...rest } = Astro.props;
if (href && onclick) throw new AstroParameterConflictError('href', 'onclick');
const Tag = (href ? 'a' : Fragment) as HTMLTag;
---
<Tag {...{ href }}>
<button {...{ onclick, ...rest }} class:list={[className]}>
<slot />
</button>
</Tag>
<style lang="scss">
button {
display: flex;
align-items: center;
padding: 0.5rem;
margin: 0.5rem;
text-align: center;
transition-duration: 300ms;
border-radius: 9999px;
width: fit-content;
height: fit-content;
justify-content: center;
&:hover {
@apply bg-[var(--theme-color-light)] dark:bg-[var(--theme-color-dark)];
}
&:active {
@apply scale-95 brightness-75;
}
}
</style>