Testimonial 2

1import { cn } from "@/lib/utils"
2 
3export type Testimonial2Props = {
4  /** Full display name of the person giving the testimonial. */
5  authorName: string
6  /** Short tagline, title, or description of the person. */
7  authorTagline: string
8  /** Link to the person's profile, website, or social media page. */
9  url: string
10  /** The testimonial text content or recommendation message. */
11  quote: string
12  /** Additional CSS classes to apply to the testimonial container. */
13  className?: string
14}
15 
16export function Testimonial2({
17  className,
18  authorName,
19  authorTagline,
20  url,
21  quote,
22}: Testimonial2Props) {
23  return (
24    <figure className={cn("relative flex flex-col gap-6 pl-3", className)}>
25      <blockquote className="relative block w-full font-serif text-xl text-foreground md:w-lg md:text-2xl">
26        <span
27          className="absolute -left-3 text-muted-foreground select-none"
28          aria-hidden="true"
29        >
30          “
31        </span>
32        <p className="inline text-pretty">{quote}</p>
33        <span
34          className="absolute translate-x-0.5 text-muted-foreground select-none"
35          aria-hidden="true"
36        >
37          ”
38        </span>
39      </blockquote>
40 
41      <figcaption className="ml-auto flex w-full items-center gap-2 md:w-1/2">
42        <div className="hidden h-px grow translate-y-px bg-border md:block" />
43 
44        <div className="flex flex-col md:ml-auto md:text-right">
45          <span className="text-sm leading-none font-medium">
46            <a href={url} target="_blank" rel="noopener">
47              <span className="absolute inset-0" aria-hidden />
48              {authorName}
49            </a>
50            <span className="mt-1 block text-muted-foreground md:mt-0 md:inline">
51              <span className="hidden text-foreground md:inline">, </span>
52              {authorTagline}
53            </span>
54          </span>
55        </div>
56      </figcaption>
57    </figure>
58  )
59}