added ReactionQuote component

src/lib/components/reaction-quote.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+    // currently available reactions: pointing, joy
+    let {
+        reaction,
+        text,
+    }: {
+        reaction: string;
+        text: string;
+    } = $props();
+
+    function getReactionAlt(r: string): string {
+        switch (r) {
+            case "joy":
+                return ""
+            default:
+                return "placeholder reaction"
+        }
+    }
+</script>
+
+<div class="reaction-container blurred-background">
+    <div class="reaction-content-container">
+        <img src="/reactions/{reaction}.webp" alt={getReactionAlt(reaction)}>
+        <p>{text}</p>
+    </div>
+</div>
+
+<style>
+    .reaction-container {
+        max-width: 800px;
+        margin: 32px auto;
+        overflow: hidden;
+    }
+
+    .reaction-content-container {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin: 0 64px;
+        padding: 16px;
+        border-radius: var(--border-radius);
+        border-left: var(--border-style) var(--border-dash-size) var(--color-text);
+        border-right: var(--border-style) var(--border-dash-size) var(--color-text);
+        gap: 16px;
+    }
+
+    img {
+        width: 160px;
+    }
+
+    p {
+        margin: 0;
+    }
+
+    @media screen and (max-width: 600px) {
+        .reaction-content-container {
+            flex-direction: column;
+            gap: 8px;
+        }
+    }
+
+    @media screen and (max-width: 450px) {
+        .reaction-content-container {
+            margin: 0 32px;
+        }
+    }
+</style>