minusculas

components/chat.js

@@ -0,0 +1,42 @@
+// components/Chat.js
+import { Tag } from "sigpro";
+
+export const Chat = (props, children) => {
+    children === undefined && (children = props, props = {});
+    return Tag("div", { ...props, class: `chat ${props.class ?? ''}` }, children);
+};
+
+export const ChatImage = (props, children) => {
+    children === undefined && (children = props, props = {});
+    return Tag("div", { ...props, class: `chat-image avatar ${props.class ?? ''}` },
+        Tag("div", { class: "w-10 rounded-full" },
+            typeof children === "string" ? Tag("img", { src: children, alt: "avatar" }) : children
+        )
+    );
+};
+
+export const ChatHeader = (props, children) => {
+    children === undefined && (children = props, props = {});
+    return Tag("div", { ...props, class: `chat-header ${props.class ?? ''}` }, children);
+};
+
+export const ChatFooter = (props, children) => {
+    children === undefined && (children = props, props = {});
+    return Tag("div", { ...props, class: `chat-footer ${props.class ?? ''}` }, children);
+};
+
+export const ChatBubble = (props, children) => {
+    children === undefined && (children = props, props = {});
+    return Tag("div", { ...props, class: `chat-bubble ${props.class ?? ''}` }, children);
+};
+
+export const ChatMessage = (props) => {
+  const { position = "start", avatar, header, message, footer, bubbleClass, ...rest } = props;
+  
+  return Chat({ ...rest, class: `chat-${position} ${props.class ?? ''}` }, [
+    avatar && ChatImage(avatar),
+    header && ChatHeader(header),
+    ChatBubble({ class: bubbleClass }, message),
+    footer && ChatFooter(footer)
+  ]);
+};