"use client"

import * as React from "react"
import { cn } from "@/lib/utils"

interface QuoteBlockProps extends React.HTMLAttributes<HTMLDivElement> {
  /**
   * Quote text to display
   */
  quote: string
  /**
   * Author name
   */
  author: string
  /**
   * Author role or title
   */
  role?: string
  /**
   * Optional avatar image URL
   */
  avatarUrl?: string
}

const QuoteBlock = React.forwardRef<HTMLDivElement, QuoteBlockProps>(
  ({ className, quote, author, role, avatarUrl, ...props }, ref) => {
    const initials = author
      .split(" ")
      .map((part) => part.charAt(0))
      .join("")
      .slice(0, 2)
      .toUpperCase()

    return (
      <figure
        ref={ref}
        className={cn(
          "rounded-2xl border border-border bg-card p-6",
          className
        )}
        {...props}
      >
        <blockquote className="text-lg font-medium leading-relaxed text-foreground">
          “{quote}”
        </blockquote>
        <figcaption className="mt-6 flex items-center gap-3">
          <div className="flex h-11 w-11 items-center justify-center overflow-hidden rounded-full border border-border bg-muted">
            {avatarUrl ? (
              <img
                src={avatarUrl}
                alt={author}
                className="h-full w-full object-cover"
              />
            ) : (
              <span className="text-sm font-semibold text-primary">{initials}</span>
            )}
          </div>
          <div className="min-w-0">
            <p className="text-sm font-semibold text-foreground">{author}</p>
            {role && <p className="text-xs text-muted-foreground">{role}</p>}
          </div>
        </figcaption>
      </figure>
    )
  }
)

QuoteBlock.displayName = "QuoteBlock"

export { QuoteBlock }
Quote Block

Dependencies

Files

Installation
