Files
MyBlog-Next/src/components/Tag.astro
T
2022-09-11 14:06:58 +06:30

38 lines
846 B
Plaintext

---
import slugify from "src/utils/slugify";
export interface Props {
name: string;
size?: "sm" | "lg";
}
const { name, size = "sm" } = Astro.props;
const slug = slugify(name);
---
<li class="inline-block my-1">
<a
href={`/tags/${slug}`}
class={`${size === "sm" ? "py-1 px-2 text-sm" : "p-2 text-lg"}`}
>
<svg
xmlns="http://www.w3.org/2000/svg"
class={`${size === "sm" ? " scale-75" : "scale-125"}`}
><path
d="M20 4H8.515a2 2 0 0 0-1.627.838l-4.701 6.581a.997.997 0 0 0 0 1.162l4.701 6.581A2 2 0 0 0 8.515 20H20c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm0 14H8.515l-4.286-6 4.286-6H20v12z"
></path>
</svg>
<span>{name}</span>
</a>
</li>
<style>
a {
@apply bg-skin-card hover:bg-skin-card-muted rounded;
}
a svg {
@apply w-6 h-6 text-skin-base scale-75;
}
</style>