refactor: replace secHeading with variant prop in Card

This commit is contained in:
satnaing
2025-03-15 16:37:25 +07:00
committed by Sat Naing
parent ad9c26f260
commit 67b9536cce
2 changed files with 6 additions and 10 deletions
+4 -4
View File
@@ -4,12 +4,12 @@ import type { CollectionEntry } from "astro:content";
import Datetime from "./Datetime.astro"; import Datetime from "./Datetime.astro";
export interface Props { export interface Props {
variant?: "h2" | "h3";
href?: string; href?: string;
frontmatter: CollectionEntry<"blog">["data"]; frontmatter: CollectionEntry<"blog">["data"];
secHeading?: boolean;
} }
const { href, frontmatter, secHeading = true } = Astro.props; const { href, frontmatter, variant = "h2" } = Astro.props;
const { title, pubDatetime, modDatetime, description } = frontmatter; const { title, pubDatetime, modDatetime, description } = frontmatter;
@@ -25,13 +25,13 @@ const headerProps = {
class="inline-block text-lg font-medium text-accent decoration-dashed underline-offset-4 focus-visible:no-underline focus-visible:underline-offset-0" class="inline-block text-lg font-medium text-accent decoration-dashed underline-offset-4 focus-visible:no-underline focus-visible:underline-offset-0"
> >
{ {
secHeading ? ( variant === "h2" ? (
<h2 {...headerProps}>{title}</h2> <h2 {...headerProps}>{title}</h2>
) : ( ) : (
<h3 {...headerProps}>{title}</h3> <h3 {...headerProps}>{title}</h3>
) )
} }
</a> </a>
<Datetime pubDatetime={pubDatetime} modDatetime={modDatetime} /> <Datetime {pubDatetime} {modDatetime} />
<p>{description}</p> <p>{description}</p>
</li> </li>
+2 -6
View File
@@ -77,11 +77,7 @@ const recentPosts = sortedPosts.filter(({ data }) => !data.featured);
<h2 class="text-2xl font-semibold tracking-wide">Featured</h2> <h2 class="text-2xl font-semibold tracking-wide">Featured</h2>
<ul> <ul>
{featuredPosts.map(({ data, id }) => ( {featuredPosts.map(({ data, id }) => (
<Card <Card href={`/posts/${id}/`} frontmatter={data} variant="h3" />
href={`/posts/${id}/`}
frontmatter={data}
secHeading={false}
/>
))} ))}
</ul> </ul>
</section> </section>
@@ -101,7 +97,7 @@ const recentPosts = sortedPosts.filter(({ data }) => !data.featured);
<Card <Card
href={`/posts/${id}/`} href={`/posts/${id}/`}
frontmatter={data} frontmatter={data}
secHeading={false} variant="h3"
/> />
) )
)} )}