RythonDev/src/components/global/Card.astro
2026-09-03 18:43:17 +08:00

69 lines
1.1 KiB
Text

---
type Props = {
href?: string;
primaryColor?: string;
shadowColor?: string;
bgColor?: string;
scaleOnHover?: boolean;
pixelHeight?: string;
className?: string;
};
const {
href,
shadowColor = "rgb(12,12,12)",
bgColor = "var(--color-secondary)",
scaleOnHover = false,
pixelHeight = "70px",
className = "",
} = Astro.props;
---
<>
{
href && (
<a href={href}>
<div
class="card z-10"
class:list={[{ scale: scaleOnHover }, className]}
>
<div class="card-content">
<slot />
</div>
</div>
</a>
)
}
{
!href && (
<div
class="card z-10 mb-0 rounded-xl"
class:list={[{ scale: scaleOnHover }, className]}
>
<div class="card-content">
<slot />
</div>
</div>
)
}
</>
<style define:vars={{ bgColor, pixelHeight, shadowColor }}>
* {
box-sizing: border-box;
}
h1,
h2,
h3,
p {
margin: 0rem;
}
.card {
/* background: #1c1c1c; */
/* background: linear-gradient(135deg, rgb(38, 38, 38)#101010 20%, 100%); */
box-shadow: 0 8px 20px 2px var(--shadowColor);
padding: 0.5rem;
}
</style>