Skip to content
Extraits de code Groupes Projets
+page.svelte 2,1 ko
Newer Older
  • Learn to ignore specific revisions
  • Brieuc Dubois's avatar
    Brieuc Dubois a validé
    <script lang="ts">
    	import { t } from '$lib/services/i18n';
    	import type { PageData } from './$types.js';
    	import WeeklySurvey from './WeeklySurvey.svelte';
    	import Chatbox from './Chatbox.svelte';
    
    	let { data }: { data: PageData } = $props();
    	let user = data.user!;
    	let { session, jwt } = data;
    	let { onlineUsers } = session;
    </script>
    
    
    Dave's avatar
    Dave a validé
    <div class="h-full flex flex-col lg:flex-row pt-2 lg:pt-0 bg-gray-50 relative">
    	<input type="checkbox" id="toggleParticipants" class="hidden peer" />
    
    	<label
    		for="toggleParticipants"
    		class="absolute top-4 right-4 bg-yellow-500 text-white px-2 py-1 rounded-md shadow-md
    		hover:bg-yellow-600 transition focus:outline-none text-sm lg:hidden"
    	>
    		{$t('utils.words.toggle')}
    	</label>
    
    
    Brieuc Dubois's avatar
    Brieuc Dubois a validé
    	<div
    
    Dave's avatar
    Dave a validé
    		class="group w-full max-w-md bg-white border rounded-lg shadow-md p-6 mx-4 my-2 h-fit text-base
    		lg:text-lg transition-all duration-300 ease-in-out hidden lg:block peer-checked:block"
    
    Brieuc Dubois's avatar
    Brieuc Dubois a validé
    	>
    
    Dave's avatar
    Dave a validé
    		<h2 class="text-xl truncate font-semibold text-gray-700 text-center mb-4">
    			{$t('utils.words.participants')}
    		</h2>
    
    		<div class="space-y-4">
    
    Brieuc Dubois's avatar
    Brieuc Dubois a validé
    			{#each session.users as sessionUser (sessionUser.id)}
    
    Dave's avatar
    Dave a validé
    				<div class="flex items-center gap-4 p-3 rounded-lg hover:bg-gray-100 transition">
    					<div
    						class="w-10 h-10 rounded-full overflow-hidden shadow-md"
    						title={sessionUser.nickname}
    					>
    
    Brieuc Dubois's avatar
    Brieuc Dubois a validé
    						<img
    							src={`https://gravatar.com/avatar/${sessionUser.emailHash}?d=identicon`}
    							alt={sessionUser.nickname}
    
    Dave's avatar
    Dave a validé
    							class="rounded-full border-2 {sessionUser.id == user?.id ||
    
    Brieuc Dubois's avatar
    Brieuc Dubois a validé
    							$onlineUsers.has(sessionUser.id)
    								? 'border-green-500'
    								: 'border-red-500'}"
    						/>
    					</div>
    
    Dave's avatar
    Dave a validé
    					<span class="truncate w-48 lg:w-64 font-medium text-gray-800">
    						{sessionUser.nickname}
    					</span>
    
    Brieuc Dubois's avatar
    Brieuc Dubois a validé
    				</div>
    			{/each}
    		</div>
    
    Dave's avatar
    Dave a validé
    
    		<h2 class="text-lg truncate font-semibold text-gray-700 text-center border-t pt-4 mt-4">
    			{$t('utils.words.topics')}
    		</h2>
    		<p class="text-center truncate text-sm text-neutral-500 italic">
    			{$t('session.noTopic')}
    		</p>
    
    Brieuc Dubois's avatar
    Brieuc Dubois a validé
    	</div>
    
    Brieuc Dubois's avatar
    Brieuc Dubois a validé
    	<div class="flex flex-row flex-grow col-span-5">
    		<Chatbox {session} {jwt} {user} />
    	</div>
    </div>
    
    <WeeklySurvey {user} />