From c117eae7c5af977d0299d34169e4a403f77e2afa Mon Sep 17 00:00:00 2001
From: Xe Iaso <me@christine.website>
Date: Thu, 2 Feb 2023 08:05:34 -0500
Subject: add stream VOD page

Signed-off-by: Xe Iaso <me@christine.website>
---
 src/frontend/components/ConvSnippet.tsx | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 src/frontend/components/ConvSnippet.tsx

(limited to 'src/frontend/components')

diff --git a/src/frontend/components/ConvSnippet.tsx b/src/frontend/components/ConvSnippet.tsx
new file mode 100644
index 0000000..02b2121
--- /dev/null
+++ b/src/frontend/components/ConvSnippet.tsx
@@ -0,0 +1,27 @@
+export interface ConvSnippetProps {
+    name: string;
+    mood: string;
+    children: HTMLElement[];
+}
+
+const ConvSnippet = ({name, mood, children}: ConvSnippetProps) => {
+    const nameLower = name.toLowerCase();
+    name = name.replace(" ", "_");
+
+    return (
+        <div className="conversation">
+            <div className="conversation-standalone">
+                <picture>
+                    <source type="image/avif" srcset={`https://cdn.xeiaso.net/file/christine-static/stickers/${nameLower}/${mood}.avif`} />
+                    <source type="image/webp" srcset={`https://cdn.xeiaso.net/file/christine-static/stickers/${nameLower}/${mood}.webp`} />
+                    <img style="max-height:4.5rem" alt={`${name} is ${mood}`} loading="lazy" src={`https://cdn.xeiaso.net/file/christine-static/stickers/${nameLower}/${mood}.png`} />
+                </picture>
+            </div>
+            <div className="conversation-chat">
+                &lt;<a href={`/characters#${nameLower}`}><b>{name}</b></a>&gt; {children}
+            </div>
+        </div>
+    );
+};
+
+export default ConvSnippet;
-- 
cgit v1.2.3