From e252506493a96bc0acb638cb98a8314d60a2bee8 Mon Sep 17 00:00:00 2001
From: 87xie <oscar87xie@gmail.com>
Date: Sun, 14 Jul 2024 16:21:49 +0800
Subject: [PATCH] fix: avoid `undefined` when passing class-name as prop (#270)

- avoid `undefined` when passing class-name as prop
- use built-in `class:list` directive
---
 src/components/Datetime.tsx     |  6 ++++--
 src/components/LinkButton.astro | 12 +++++++++---
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/Datetime.tsx b/src/components/Datetime.tsx
index 4e28419..372b3ed 100644
--- a/src/components/Datetime.tsx
+++ b/src/components/Datetime.tsx
@@ -14,10 +14,12 @@ export default function Datetime({
   pubDatetime,
   modDatetime,
   size = "sm",
-  className,
+  className = "",
 }: Props) {
   return (
-    <div className={`flex items-center space-x-2 opacity-80 ${className}`}>
+    <div
+      className={`flex items-center space-x-2 opacity-80 ${className}`.trim()}
+    >
       <svg
         xmlns="http://www.w3.org/2000/svg"
         className={`${
diff --git a/src/components/LinkButton.astro b/src/components/LinkButton.astro
index 4f38fd5..e339269 100644
--- a/src/components/LinkButton.astro
+++ b/src/components/LinkButton.astro
@@ -7,13 +7,19 @@ export interface Props {
   disabled?: boolean;
 }
 
-const { href, className, ariaLabel, title, disabled = false } = Astro.props;
+const {
+  href,
+  className = "",
+  ariaLabel,
+  title,
+  disabled = false,
+} = Astro.props;
 ---
 
 {
   disabled ? (
     <span
-      class={`group inline-block ${className}`}
+      class:list={["group inline-block", className]}
       aria-label={ariaLabel}
       title={title}
       aria-disabled={disabled}
@@ -23,7 +29,7 @@ const { href, className, ariaLabel, title, disabled = false } = Astro.props;
   ) : (
     <a
       {href}
-      class={`group inline-block hover:text-skin-accent ${className}`}
+      class:list={["group inline-block hover:text-skin-accent", className]}
       aria-label={ariaLabel}
       title={title}
     >