natxocc
910c6ab3c7
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 4s
42 lines
1.5 KiB
JavaScript
42 lines
1.5 KiB
JavaScript
// components/Chat.js
|
|
import { h } from "sigpro";
|
|
|
|
export const Chat = (props, children) => {
|
|
children === undefined && (children = props, props = {});
|
|
return h("div", { ...props, class: `chat ${props.class ?? ''}` }, children);
|
|
};
|
|
|
|
export const ChatImage = (props, children) => {
|
|
children === undefined && (children = props, props = {});
|
|
return h("div", { ...props, class: `chat-image avatar ${props.class ?? ''}` },
|
|
h("div", { class: "w-10 rounded-full" },
|
|
typeof children === "string" ? h("img", { src: children, alt: "avatar" }) : children
|
|
)
|
|
);
|
|
};
|
|
|
|
export const ChatHeader = (props, children) => {
|
|
children === undefined && (children = props, props = {});
|
|
return h("div", { ...props, class: `chat-header ${props.class ?? ''}` }, children);
|
|
};
|
|
|
|
export const ChatFooter = (props, children) => {
|
|
children === undefined && (children = props, props = {});
|
|
return h("div", { ...props, class: `chat-footer ${props.class ?? ''}` }, children);
|
|
};
|
|
|
|
export const ChatBubble = (props, children) => {
|
|
children === undefined && (children = props, props = {});
|
|
return h("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)
|
|
]);
|
|
}; |