ProjectHentai/nonebot2
6
0
Fork 0
mirror of https://github.com/nonebot/nonebot2.git synced 2025-09-12 15:06:59 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

📝 write doc messenger component

Browse Source
This commit is contained in:
yanyongyu
2022-01-08 13:00:08 +08:00
parent d13ca9aee6
commit cd94672999
3 changed files with 125 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
website/src/components/Messenger/index.tsx
View File

@ -1,16 +1,58 @@
import clsx from "clsx";
import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import Logo from "@theme/Logo";
import styles from "./styles.module.css";
export type Message = {
position?: "left" | "right";
msg: string;
};
export default function Messenger() {
function MessageBox({
msg,
isRight,
}: {
msg: string;
isRight: boolean;
}): JSX.Element {
return (
<div className="block w-full max-w-full rounded shadow-md outline-none no-underline bg-light-nonepress-100 dark:bg-dark-nonepress-100">
<header className="flex items-center h-12 px-4 bg-blue-500 text-white">
<div
className={clsx(styles.message, {
[styles.messageRight]: isRight,
})}
>
{isRight ? (
<div className={clsx("bg-cyan-600 text-base", styles.messageAvatar)}>
<FontAwesomeIcon icon={["fas", "user"]} />
</div>
) : (
<div className={clsx("transparent", styles.messageAvatar)}>
<Logo imageClassName="h-full w-full" disabled />
</div>
)}
<div
className={clsx(styles.messageBox, { "order-first": isRight })}
dangerouslySetInnerHTML={{
__html: msg.replace(/\n/g, "<br/>").replace(/ /g, "&nbsp;"),
}}
></div>
</div>
);
}
export default function Messenger({
msgs = [],
}: {
msgs?: Message[];
}): JSX.Element {
const isRight = (msg: Message): boolean => msg.position === "right";
return (
<div className="block w-full max-w-full my-4 rounded shadow-md outline-none no-underline bg-light-nonepress-100 dark:bg-dark-nonepress-100">
<header className="flex items-center h-12 px-4 bg-blue-500 text-white rounded-t-[inherit]">
<div className="text-left text-base grow">
<FontAwesomeIcon icon={["fas", "chevron-left"]} />
</div>
@ -21,6 +63,43 @@ export default function Messenger() {
<FontAwesomeIcon icon={["fas", "user"]} />
</div>
</header>
<div className="p-3 min-h-[150px]">
{msgs.map((msg, i) => (
<MessageBox msg={msg.msg} isRight={isRight(msg)} key={i} />
))}
</div>
<div className="px-3">
<div className="flex flex-row items-center">
<div className="flex-1 p-1 max-w-full">
<input className="w-full rounded bg-light dark:bg-dark" />
</div>
<div className="flex-initial grow-0 w-fit">
<button className="h-7 px-3 rounded-full bg-blue-500 text-white">
<span>发送</span>
</button>
</div>
</div>
<div className="flex flex-row items-center text-center text-base text-gray-600">
<div className="p-1 shrink-0 grow-0 basis-1/6">
<FontAwesomeIcon icon={["fas", "microphone"]} />
</div>
<div className="p-1 shrink-0 grow-0 basis-1/6">
<FontAwesomeIcon icon={["fas", "image"]} />
</div>
<div className="p-1 shrink-0 grow-0 basis-1/6">
<FontAwesomeIcon icon={["fas", "camera"]} />
</div>
<div className="p-1 shrink-0 grow-0 basis-1/6">
<FontAwesomeIcon icon={["fas", "wallet"]} />
</div>
<div className="p-1 shrink-0 grow-0 basis-1/6">
<FontAwesomeIcon icon={["fas", "smile-wink"]} />
</div>
<div className="p-1 shrink-0 grow-0 basis-1/6">
<FontAwesomeIcon icon={["fas", "plus-circle"]} />
</div>
</div>
</div>
</div>
);
}