add stream VOD page

Signed-off-by: Xe Iaso <me@christine.website>

1 files changed, 27 insertions, 0 deletions

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;