The code and data behind xeiaso.net
lume: promote Chat components
Signed-off-by: Xe Iaso <me@xeiaso.net>
+44
+4
lume/_config.ts
+4
lume/_config.ts
···
17
17
import tailwindOptions from "./tailwind.config.js";
18
18
19
19
import BlockQuote from "./src/_components/BlockQuote.jsx";
20
+
import ChatFrame from "./src/_components/ChatFrame.jsx";
21
+
import ChatBubble from "./src/_components/ChatBubble.jsx";
20
22
import Figure from "./src/_components/Figure.tsx";
21
23
import XeblogConv from "./src/_components/XeblogConv.tsx";
22
24
import XeblogHero from "./src/_components/XeblogHero.tsx";
···
69
71
site.use(mdx({
70
72
components: {
71
73
"BlockQuote": BlockQuote,
74
+
"ChatFrame": ChatFrame,
75
+
"ChatBubble": ChatBubble,
72
76
"Figure": Figure,
73
77
"Image": Figure,
74
78
"XeblogConv": XeblogConv,
+21
lume/src/_components/ChatBubble.jsx
+21
lume/src/_components/ChatBubble.jsx
···
1
+
export default function ChatBubble({
2
+
reply = false,
3
+
bg = "blue-dark",
4
+
fg = "slate-50",
5
+
children,
6
+
}) {
7
+
return (
8
+
<div className={`mx-auto 3xl:max-w-2xl ${reply ? "" : "space-y-4"}`}>
9
+
<div className={`flex ${reply ? "justify-start" : "justify-end"}`}>
10
+
<div className={`flex w-11/12 ${reply ? "" : "flex-row-reverse"}`}>
11
+
<div
12
+
className={`relative max-w-xl rounded-xl ${reply ? "rounded-tl-none" : "rounded-tr-none"
13
+
} bg-${bg} px-4 py-2`}
14
+
>
15
+
<span className={`font-medium text-${fg} font-['Inter']`}>{children}</span>
16
+
</div>
17
+
</div>
18
+
</div>
19
+
</div>
20
+
);
21
+
}
+7
lume/src/_components/ChatFrame.jsx
+7
lume/src/_components/ChatFrame.jsx
+12
lume/src/_components/LoadingSpinner.jsx
+12
lume/src/_components/LoadingSpinner.jsx
···
1
+
export default function LoadingSpinner() {
2
+
return (
3
+
<div
4
+
class="inline-block mt-2 h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"
5
+
role="status"
6
+
>
7
+
<span class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">
8
+
Loading...
9
+
</span>
10
+
</div>
11
+
);
12
+
}