48 lines
1.0 KiB
Vue
48 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps({
|
|
ownMessage: Boolean,
|
|
timestamp: String,
|
|
message: String,
|
|
gif: Boolean,
|
|
link: Boolean,
|
|
url: String,
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="message" :class="{'sent' : props.ownMessage, 'received' : !props.ownMessage}">
|
|
<p v-if="!props.gif && !props.link" style="margin-bottom: 0;">{{props.message}}</p>
|
|
<img v-if="props.gif" :src="props.url" alt="GIF" style="width: 100%;border-radius: 10px;" />
|
|
<a v-if="props.link" :href="props.url" target="_blank">{{props.url}}</a>
|
|
|
|
<div style="text-align: right;">
|
|
<small style="margin-top: 0;">{{props.timestamp}}</small>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.message {
|
|
border-radius: 10px;
|
|
width: 15rem;
|
|
padding: 7px;
|
|
margin:3px;
|
|
box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.message p {
|
|
max-width: 100%;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.sent {
|
|
background: #729EA1;
|
|
margin-left: auto;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.received {
|
|
background: white;
|
|
}
|
|
</style>
|