natxocc/sigpro-ui
1
1
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

Rebuild all components
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 4s
Details

Browse Source
This commit is contained in:
Natxo
2026-04-21 18:00:17 +02:00
parent d900659d88
commit 16afea2768
67 changed files with 1820 additions and 2132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
components/Chat.js
View File

@@ -2,41 +2,41 @@
import { Tag } from "sigpro";
export const Chat = (props, children) => {
const { class: className, ...rest } = props;
return Tag("div", {
...rest,
class: `chat ${className || ''}`.trim()
}, children);
children === undefined && (children = props, props = {});
return Tag("div", { ...props, class: `chat ${props.class ?? ''}` }, children);
};
export const ChatImage = (props, children) => {
const { class: className, ...rest } = props;
return Tag("div", {
...rest,
class: `chat-image ${className || ''}`.trim()
}, 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) => {
const { class: className, ...rest } = props;
return Tag("div", {
...rest,
class: `chat-header ${className || ''}`.trim()
}, children);
children === undefined && (children = props, props = {});
return Tag("div", { ...props, class: `chat-header ${props.class ?? ''}` }, children);
};
export const ChatFooter = (props, children) => {
const { class: className, ...rest } = props;
return Tag("div", {
...rest,
class: `chat-footer ${className || ''}`.trim()
}, children);
children === undefined && (children = props, props = {});
return Tag("div", { ...props, class: `chat-footer ${props.class ?? ''}` }, children);
};
export const ChatBubble = (props, children) => {
const { class: className, ...rest } = props;
return Tag("div", {
...rest,
class: `chat-bubble ${className || ''}`.trim()
}, 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)
]);
};