RythonDev/src/components/global/Card.astro
2025-12-01 14:48:03 +08:00

75 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 shadow-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,
rgba(18, 18, 18, 1) 0%,
rgba(30, 30, 30, 1) 33%,
rgba(25, 25, 25, 1) 66%,
rgba(19, 19, 19, 1) 100%
);
--tw-shadow-color: var(--shadowColor);
padding: 0.5rem;
}
</style>