Blockquote

1
import type { ComponentProps, SVGProps } from "react";
2

3
import {
4
  ProfileCard,
5
  ProfileCardAvatar,
6
  ProfileCardBody,
7
  ProfileCardDetails,
8
  ProfileCardName,
9
} from "@/components/ui/pxl/profile-card";
10
import { cn } from "@/lib/utils";
11

12
function BlockquoteAuthor(props: ComponentProps<typeof ProfileCard>) {
13
  return <ProfileCard {...props} />;
14
}
15

16
function BlockquoteAuthorAvatar(
17
  props: ComponentProps<typeof ProfileCardAvatar>,
18
) {
19
  return <ProfileCardAvatar {...props} />;
20
}
21

22
function BlockquoteAuthorDetails(
23
  props: ComponentProps<typeof ProfileCardDetails>,
24
) {
25
  return <ProfileCardDetails {...props} />;
26
}
27

28
function BlockquoteAuthorName({ className, ...props }: ComponentProps<typeof ProfileCardName>) {
29
  return <ProfileCardName className={cn("font-serif", className)} {...props} />;
30
}
31

32
function BlockquoteAuthorBody({ className, ...props }: ComponentProps<typeof ProfileCardBody>) {
33
  return <ProfileCardBody className={cn("font-serif", className)} {...props} />;
34
}
35

36
function BlockquoteIcon({
37
  className,
38
  position = "start",
39
  ...props
40
}: SVGProps<SVGSVGElement> & {
41
  position?: "start" | "end";
42
}) {
43
  return (
44
    <svg
45
      xmlns="http://www.w3.org/2000/svg"
46
      fill="currentColor"
47
      viewBox="0 0 24 24"
48
      className={cn(
49
        "size-4 text-muted-foreground",
50
        position === "start" ? "self-start" : "self-end",
51
        className,
52
      )}
53
      {...props}
54
    >
55
      <path d="M10 2H2v1H1v8h1v1h5v4H6v1H4v1H3v3h1v1h2v-1h2v-1h1v-1h1v-2h1V3h-1zm-1 9H8v-1H3V4h6zm13-8V2h-8v1h-1v8h1v1h5v4h-1v1h-2v1h-1v3h1v1h2v-1h2v-1h1v-1h1v-2h1V3zm-7 7V4h6v7h-1v-1z" />
56
    </svg>
57
  );
58
}
59

60
function BlockquoteParagraph({ className, ...props }: ComponentProps<"p">) {
61
  return (
62
    <p
63
      data-slot="blockquote-paragraph"
64
      className={cn(
65
        "font-serif text-2xl tracking-tight text-pretty text-muted-foreground lg:text-3xl lg:tracking-tight",
66
        className,
67
      )}
68
      {...props}
69
    />
70
  );
71
}
72

73
function Blockquote({
74
  children,
75
  className,
76
  showIcons,
77
  ...props
78
}: ComponentProps<"div"> & {
79
  showIcons?: boolean;
80
}) {
81
  return (
82
    <div
83
      data-slot="blockquote"
84
      className={cn("group/blog-blockquote my-5 max-w-3xl lg:my-9", className)}
85
      {...props}
86
    >
87
      <blockquote className="flex flex-col gap-1.5 border-l-[3px] pl-5 lg:pl-9">
88
        {children}
89
      </blockquote>
90
    </div>
91
  );
92
}
93

94
export {
95
  Blockquote,
96
  BlockquoteAuthor,
97
  BlockquoteAuthorAvatar,
98
  BlockquoteAuthorBody,
99
  BlockquoteAuthorDetails,
100
  BlockquoteAuthorName,
101
  BlockquoteIcon,
102
  BlockquoteParagraph,
103
};