14 blog post schedule

src/components/author/AuthorCard.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import Link from "next/link";
+import Image from "next/image";
+import type { AuthorProfile } from "@/lib/types";
+
+export function AuthorCard({ author }: { author: AuthorProfile }) {
+    return (
+        <aside className="rounded-xl border border-gray-200 bg-white p-6 my-8 flex gap-6 items-start shadow-sm">
+            {author.image ? (
+                <div className="relative w-16 h-16 flex-shrink-0">
+                    <Image
+                        src={author.image}
+                        alt={author.name}
+                        fill
+                        className="rounded-full object-cover border-2 border-white shadow-md"
+                    />
+                </div>
+            ) : (
+                <div className="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold text-xl flex-shrink-0">
+                    {author.name.charAt(0)}
+                </div>
+            )}
+
+            <div className="min-w-0">
+                <div className="font-bold text-lg text-gray-900">
+                    <Link href={`/authors/${author.slug}`} className="hover:text-blue-600 transition-colors">
+                        {author.name}
+                    </Link>
+                </div>
+                <div className="text-sm font-medium text-blue-600 mb-2">{author.role}</div>
+                <p className="text-sm text-gray-600 leading-relaxed mb-3">{author.bio}</p>
+
+                {!!author.sameAs?.length && (
+                    <div className="flex flex-wrap gap-3">
+                        {author.sameAs.map((url) => {
+                            let label = "Website";
+                            if (url.includes('linkedin')) label = "LinkedIn";
+                            if (url.includes('github')) label = "GitHub";
+                            if (url.includes('twitter') || url.includes('x.com')) label = "Twitter";
+
+                            return (
+                                <a key={url} href={url} target="_blank" rel="noreferrer" className="text-xs font-semibold text-gray-500 hover:text-gray-900 uppercase tracking-wide">
+                                    {label}
+                                </a>
+                            );
+                        })}
+                    </div>
+                )}
+            </div>
+        </aside>
+    );
+}