lume/src/_components/ChatBubble.jsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

export default function ChatBubble({
    reply = false,
    bg = "blue-dark",
    fg = "slate-50",
    children,
}) {
    return (
        <div className={`mx-auto 3xl:max-w-2xl ${reply ? "" : "space-y-4"}`}>
            <div className={`flex ${reply ? "justify-start" : "justify-end"}`}>
                <div className={`flex w-11/12 ${reply ? "" : "flex-row-reverse"}`}>
                    <div
                        className={`relative max-w-xl rounded-xl ${reply ? "rounded-tl-none" : "rounded-tr-none"
                            } bg-${bg} px-4 py-2`}
                    >
                        <span className={`font-medium text-${fg} font-['Inter']`}>{children}</span>
                    </div>
                </div>
            </div>
        </div>
    );
}