migrate to nextjs

src/components/MediumCard.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import Link from 'next/link';
+
+interface Post {
+  title: string;
+  description: string;
+  date: string;
+  slug: string;
+  tags?: string[];
+}
+
+interface MediumCardProps {
+  post: Post;
+}
+
+export const MediumCard: React.FC<MediumCardProps> = ({ post }) => {
+  const { title, description, date, slug, tags = [] } = post;
+
+  const formattedDate = new Date(date).toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  });
+
+  const wordCount = description.split(/\s+/).length;
+  const readingTime = Math.max(1, Math.ceil(wordCount / 200));
+  const markerSeed = Math.abs(title.split('').reduce((acc, c) => acc + c.charCodeAt(0), 0)) % 7;
+
+  return (
+    <Link href={`/blog/${slug}`} className="post-link block group">
+      <article className="post-card bg-white border border-slate-200/80 rounded-lg px-4 py-3 transition-all duration-200 group-hover:border-slate-300 group-hover:shadow-sm">
+        <div className="flex items-start justify-between gap-4">
+          <h3 className="m-0 text-sm font-semibold leading-snug tracking-tight">
+            <span 
+              className="relative inline-block text-slate-900 marker-title" 
+              style={{ '--marker-seed': markerSeed } as React.CSSProperties}
+            >
+              {title}
+            </span>
+          </h3>
+          <time className="text-[11px] text-slate-500 tabular-nums whitespace-nowrap leading-none pt-0.5">
+            {formattedDate}
+          </time>
+        </div>
+
+        <p className="post-excerpt mt-2 mb-0 text-[13px] leading-relaxed text-slate-600 line-clamp-3">
+          {description}
+        </p>
+
+        <div className="mt-3 flex items-center justify-between gap-3">
+          <span className="text-[11px] text-slate-500 tabular-nums leading-none">{readingTime} min</span>
+
+          {tags.length > 0 && (
+            <div className="flex flex-wrap items-center justify-end gap-1">
+              {tags.slice(0, 3).map((tag: string) => (
+                <span key={tag} className="inline-flex items-center rounded-full bg-slate-100/80 border border-slate-200/60 px-2 py-0.5 text-[11px] text-slate-700 leading-none">
+                  {tag}
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+      </article>
+    </Link>
+  );
+};