73 lines
1.6 KiB
Svelte
73 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
// currently available reactions: pointing, joy, quote, warn
|
|
let {
|
|
reaction,
|
|
text,
|
|
}: {
|
|
reaction: string;
|
|
text: string;
|
|
} = $props();
|
|
|
|
function getReactionAlt(r: string): string {
|
|
switch (r) {
|
|
case "joy":
|
|
return "";
|
|
case "quote":
|
|
return "";
|
|
case "pointing":
|
|
return "";
|
|
case "warn":
|
|
return "";
|
|
default:
|
|
return "reaction image missing";
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="reaction-container blurred-background">
|
|
<div class="reaction-content-container">
|
|
<img src="/reactions/{reaction}.webp" alt={getReactionAlt(reaction)}>
|
|
<p>{@html 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> |