refactor(partners): extract PartnerCard component

Author: eric15342335

src/app/about-us/partners/page.tsx

@@ -1,9 +1,8 @@
 import { Metadata } from "next";
-import Image from "next/image";
 import { buildPageMetadata } from "@/lib/config";
 import { partners } from "@/lib/partners";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { PageHeader } from "@/components/primitives/page-header";
+import { PartnerCard } from "@/components/primitives/partner-card";
 
 const description =
   "We are collaborating with the following partners to share the message of peace and humanity.";
@@ -19,33 +18,10 @@ export default function Partners() {
       />
       <div className="mt-6 flex flex-col items-center gap-4 w-full">
         {partners.map((partner) => (
-          <a
+          <PartnerCard
             key={partner.name}
-            href={partner.href}
-            target="_blank"
-            rel="noopener"
-          >
-            <Card className="h-full">
-              <CardHeader className="text-center">
-                {partner.logo && (
-                  <div className="relative w-16 h-16 mx-auto">
-                    <Image
-                      src={partner.logo}
-                      alt={`${partner.name} logo`}
-                      fill
-                      className="object-contain"
-                      unoptimized
-                    />
-                  </div>
-                )}
-                <CardTitle>{partner.name}</CardTitle>
-                <CardDescription>{partner.description}</CardDescription>
-              </CardHeader>
-              <CardContent>
-                <p className="text-sm text-muted-foreground">{partner.href}</p>
-              </CardContent>
-            </Card>
-          </a>
+            partner={partner}
+          />
         ))}
       </div>
     </section>

src/components/primitives/partner-card.tsx

@@ -0,0 +1,40 @@
+import Image from "next/image";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import type { Partner } from "@/lib/partners";
+import { cn } from "@/lib/utils";
+
+type PartnerCardProps = {
+  partner: Partner;
+  className?: string;
+};
+
+export function PartnerCard({ partner, className }: PartnerCardProps) {
+  return (
+    <a
+      href={partner.href}
+      target="_blank"
+      rel="noopener"
+    >
+      <Card className={cn("h-full", className)}>
+        <CardHeader className="text-center">
+          {partner.logo && (
+            <div className="relative w-16 h-16 mx-auto">
+              <Image
+                src={partner.logo}
+                alt={`${partner.name} logo`}
+                fill
+                className="object-contain"
+                unoptimized
+              />
+            </div>
+          )}
+          <CardTitle>{partner.name}</CardTitle>
+          <CardDescription>{partner.description}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground">{partner.href}</p>
+        </CardContent>
+      </Card>
+    </a>
+  );
+}