fix: suppress product card hydration mismatch

Author: luojiyin1987

components/Activity/ProductCard.tsx

@@ -10,68 +10,82 @@ import styles from '../../styles/Hackathon.module.less';
 export type ProductCardProps = Product & Omit<CardProps, 'id' | 'title'>;
 
 export const ProductCard: FC<ProductCardProps> = observer(
-  ({ className = '', id, createdAt, name, sourceLink, link = sourceLink, summary, ...props }) => (
-    <Card className={`${styles.projectCard} ${className}`} {...props}>
-      <Card.Body className="d-flex flex-column">
-        <Card.Title
-          as="a"
-          className="text-dark fw-bold"
-          title={name as string}
-          target="_blank"
-          href={link as string}
-        >
-          {(name || link) as string}
-        </Card.Title>
-        <p className="text-dark opacity-75 mb-3">{summary as string}</p>
-        <div className="flex-fill mb-3">
-          <FilePreview className="w-100" path={link as string} />
-        </div>
+  ({ className = '', id, createdAt, name, sourceLink, link = sourceLink, summary, ...props }) => {
+    const createdAtValue = Number(createdAt);
+    const createdAtISO = Number.isFinite(createdAtValue)
+      ? new Date(createdAtValue).toJSON()
+      : undefined;
+    const createdAtText = Number.isFinite(createdAtValue) ? formatDate(createdAtValue) : '';
 
-        {sourceLink && (
-          <div className="d-flex flex-wrap gap-2 mb-3">
-            <Button
-              variant="dark"
-              size="sm"
-              href={sourceLink as string}
-              target="_blank"
-              rel="noreferrer"
-            >
-              GitHub
-            </Button>
-            <Button
-              variant="primary"
-              size="sm"
-              href={`https://github.dev/${(sourceLink as string).replace('https://github.com/', '')}`}
-              target="_blank"
-              rel="noreferrer"
-            >
-              GitHub.dev
-            </Button>
-            <Button
-              variant="dark"
-              size="sm"
-              href={`https://codespaces.new/${(sourceLink as string).replace('https://github.com/', '')}`}
-              target="_blank"
-              rel="noreferrer"
-            >
-              Codespaces
-            </Button>
-            <Button
-              variant="warning"
-              size="sm"
-              href={`https://gitpod.io/#${sourceLink as string}`}
-              target="_blank"
-              rel="noreferrer"
-            >
-              GitPod
-            </Button>
+    return (
+      <Card className={`${styles.projectCard} ${className}`} {...props}>
+        <Card.Body className="d-flex flex-column">
+          <Card.Title
+            as="a"
+            className="text-dark fw-bold"
+            title={name as string}
+            target="_blank"
+            href={link as string}
+          >
+            {(name || link) as string}
+          </Card.Title>
+          <p className="text-dark opacity-75 mb-3">{summary as string}</p>
+          <div className="flex-fill mb-3">
+            <FilePreview className="w-100" path={link as string} />
           </div>
-        )}
 
-        <time className="text-dark opacity-75 small" dateTime={new Date(createdAt as number).toJSON()}>
-          📅 {formatDate(createdAt as number)}
-        </time>
-      </Card.Body>
-    </Card>
-  ),
+          {sourceLink && (
+            <div className="d-flex flex-wrap gap-2 mb-3">
+              <Button
+                variant="dark"
+                size="sm"
+                href={sourceLink as string}
+                target="_blank"
+                rel="noreferrer"
+              >
+                GitHub
+              </Button>
+              <Button
+                variant="primary"
+                size="sm"
+                href={`https://github.dev/${(sourceLink as string).replace('https://github.com/', '')}`}
+                target="_blank"
+                rel="noreferrer"
+              >
+                GitHub.dev
+              </Button>
+              <Button
+                variant="dark"
+                size="sm"
+                href={`https://codespaces.new/${(sourceLink as string).replace('https://github.com/', '')}`}
+                target="_blank"
+                rel="noreferrer"
+              >
+                Codespaces
+              </Button>
+              <Button
+                variant="warning"
+                size="sm"
+                href={`https://gitpod.io/#${sourceLink as string}`}
+                target="_blank"
+                rel="noreferrer"
+              >
+                GitPod
+              </Button>
+            </div>
+          )}
+
+          {createdAtISO && (
+            <time
+              suppressHydrationWarning
+              className="text-dark opacity-75 small"
+              dateTime={createdAtISO}
+            >
+              📅 {createdAtText}
+            </time>
+          )}
+        </Card.Body>
+      </Card>
+    );
+  },
 );