aragrp/components/blog-pullquote.tsx

"use client";

import type { BlockquoteBlockPayload } from "@/lib/blog-blocks";

interface BlogPullquoteProps {
  payload: BlockquoteBlockPayload;
}

export function BlogPullquote({ payload }: BlogPullquoteProps) {
  const { content, citation } = payload;
  if (!content.trim()) return null;

  return (
    <figure className="my-10 not-prose">
      <blockquote className="relative rounded-xl border border-border bg-muted/40 px-6 py-5 text-center text-foreground shadow-sm">
        <div
          className=""
          dangerouslySetInnerHTML={{ __html: content }}
        />
        {citation ? (
          <footer className="mt-4">
            <cite className="text-sm text-muted-foreground not-italic">
              {citation}
            </cite>
          </footer>
        ) : null}
      </blockquote>
    </figure>
  );
}