8-bit Dialogue

1import { cn } from "@/lib/utils";
2 
3import {
4  Alert,
5  AlertDescription,
6  AlertTitle,
7} from "@/components/ui/8bit/alert";
8import {
9  Avatar,
10  AvatarFallback,
11  AvatarImage,
12} from "@/components/ui/8bit/avatar";
13 
14export interface DialogueProps extends React.ComponentProps<"div"> {
15  avatarSrc?: string;
16  avatarFallback?: string;
17  title?: string;
18  description?: string;
19  player?: boolean;
20}
21 
22export default function Dialogue({
23  className,
24  avatarSrc,
25  avatarFallback,
26  title,
27  description,
28  player = true,
29  ...props
30}: DialogueProps) {
31  return (
32    <div className={cn("flex gap-4 items-center", className)} {...props}>
33      {player && (
34        <Avatar variant="retro" className="size-16">
35          <AvatarImage src={avatarSrc} alt={avatarFallback} />
36          <AvatarFallback>{avatarFallback}</AvatarFallback>
37        </Avatar>
38      )}
39      <Alert className={cn("mx-0", !player && "text-right")}>
40        <AlertTitle>{title}</AlertTitle>
41        <AlertDescription>{description}</AlertDescription>
42      </Alert>
43 
44      {!player && (
45        <Avatar variant="retro" className="size-16">
46          <AvatarImage src={avatarSrc} alt={avatarFallback} />
47          <AvatarFallback>{avatarFallback}</AvatarFallback>
48        </Avatar>
49      )}
50    </div>
51  );
52}