generated from avior/template-web-astro
40 lines
1.2 KiB
Plaintext
40 lines
1.2 KiB
Plaintext
---
|
|
import { objectOmit } from '@dzeio/object-util'
|
|
import type ButtonProps from './Props'
|
|
|
|
export interface Props extends ButtonProps {}
|
|
|
|
const classes = [
|
|
"button",
|
|
{outline: Astro.props.outline},
|
|
{ghost: Astro.props.ghost},
|
|
Astro.props.class
|
|
]
|
|
|
|
---
|
|
{'href' in Astro.props && (
|
|
<a class:list={classes} {...objectOmit(Astro.props, 'type') as any}>
|
|
<slot />
|
|
</a>
|
|
) || (
|
|
<button class:list={classes} {...objectOmit(Astro.props, 'type') as any}>
|
|
<slot />
|
|
</button>
|
|
)}
|
|
|
|
<style>
|
|
.button:not(.outline) {
|
|
@apply px-4 py-2 rounded-xl bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white shadow-md transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2;
|
|
}
|
|
.button.outline {
|
|
@apply px-4 py-2 rounded-xl border border-blue-600 text-blue-600 hover:bg-blue-50 active:bg-blue-100 shadow-sm transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2;
|
|
}
|
|
.button.ghost {
|
|
@apply px-4 py-2 rounded-xl text-gray-700 hover:bg-gray-100 active:bg-gray-200 transition duration-150;
|
|
background-color: transparent;
|
|
border: none;
|
|
font-weight: 500;
|
|
font-family: system-ui, sans-serif;
|
|
}
|
|
</style>
|