Skip to content
Extraits de code Groupes Projets
message.svelte 1,02 ko
Newer Older
  • Learn to ignore specific revisions
  • Brieuc Dubois's avatar
    Brieuc Dubois a validé
    <script lang="ts">
    	import type Message from '$lib/types/message';
    
    	import { displayTime } from '$lib/utils/date';
    
    Brieuc Dubois's avatar
    Brieuc Dubois a validé
    	import { Check, Icon } from 'svelte-hero-icons';
    
    Brieuc Dubois's avatar
    Brieuc Dubois a validé
    	import { user } from '$lib/types/user';
    
    Brieuc Dubois's avatar
    Brieuc Dubois a validé
    	import Gravatar from 'svelte-gravatar';
    
    Brieuc Dubois's avatar
    Brieuc Dubois a validé
    
    	export let message: Message;
    
    
    	let timer: number;
    	$: displayedTime = displayTime(message.created_at);
    	$: {
    		clearInterval(timer);
    		timer = setInterval(() => {
    			displayedTime = displayTime(message.created_at);
    		}, 1000);
    	}
    
    
    Brieuc Dubois's avatar
    Brieuc Dubois a validé
    	const isSender = message.user.id == $user?.id;
    
    Brieuc Dubois's avatar
    Brieuc Dubois a validé
    </script>
    
    
    <div class="chat" class:chat-start={!isSender} class:chat-end={isSender}>
    
    Brieuc Dubois's avatar
    Brieuc Dubois a validé
    	<div class="rounded-full mx-2 chat-image size-12" title={message.user.nickname}>
    		<Gravatar
    			email={message.user.email}
    			size={64}
    			title={message.user.nickname}
    			class="rounded-full"
    		/>
    
    	<div class="chat-bubble whitespace-pre-wrap" class:chat-bubble-primary={!isSender}>
    
    		{message.content}
    	</div>
    	<div class="chat-footer opacity-50">
    
    		<Icon src={Check} class="w-4 inline" />
    
    		{displayedTime}
    
    Brieuc Dubois's avatar
    Brieuc Dubois a validé
    	</div>
    </div>