Feed / Article Card

import { ArrowRight } from "lucide-react";

/**
 * Pattern B — "Feed/Article Card".
 * Seen on: BlogCard, ReferencesCard, SeoGuidelinesCard.
 * Shape: rounded-[20px], shadow-xl, category pill, footer meta bar
 * bg-gray-30 rounded-xl, round arrow button bg-primary-70.
 */
export function CardFeedArticleDemo() {
  return (
    <article className="flex w-full max-w-md flex-col gap-6 overflow-hidden rounded-[20px] bg-white p-6 shadow-xl">
      <div className="bg-gray-30 relative h-56 overflow-hidden rounded-xl">
        <span className="bg-primary-70 absolute top-3 left-3 rounded-full px-3 py-1 text-xs font-semibold text-white">
          SEO
        </span>
      </div>

      <div className="flex flex-col gap-2">
        <h3 className="text-foreground text-lg font-semibold">
          How internal linking affects crawl budget
        </h3>
        <p className="text-muted text-sm">
          A practical breakdown of how search engines allocate crawl budget
          across large sites.
        </p>
      </div>

      <div className="bg-gray-30 flex items-center justify-between rounded-xl px-4 py-3.5">
        <div className="flex items-center gap-2">
          <div className="bg-gray-70 h-8 w-8 rounded-full" />
          <span className="text-foreground text-sm">Jordan Lee</span>
        </div>
        <button
          type="button"
          aria-label="Read article"
          className="bg-primary-70 flex h-10 w-10 items-center justify-center rounded-full text-white"
        >
          <ArrowRight size={18} />
        </button>
      </div>
    </article>
  );
}