47 lines
2.1 KiB
Svelte
47 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
let { data } = $props();
|
|
</script>
|
|
|
|
<h1 class="mt-2 mb-4 text-center text-2xl font-bold">User Profile</h1>
|
|
|
|
<div class="mb-4 rounded border border-gray-300 bg-white p-6">
|
|
<div class="flex flex-col gap-2">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="h-12 w-12 rounded-full bg-gray-200 flex items-center justify-center text-xl font-bold text-gray-600">
|
|
{data.user?.user_metadata.display_name?.[0] ?? "U"}
|
|
</div>
|
|
<div>
|
|
<span class="text-lg font-semibold text-gray-800">{data.profile?.display_name}</span>
|
|
<div class="text-sm text-gray-500">{data.user?.email}</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<div>
|
|
<span class="font-medium text-gray-700">Section:</span>
|
|
<span class="text-gray-900">{data.profile?.section.name ?? "N/A"}</span>
|
|
</div>
|
|
<div>
|
|
<span class="font-medium text-gray-700">Position:</span>
|
|
<span class="text-gray-900">{data.profile?.section_position ?? "N/A"}</span>
|
|
</div>
|
|
</div>
|
|
<h2 class="text-lg mb-2 mt-4">User guide</h2>
|
|
<p class="text-gray-700 text-sm leading-relaxed">
|
|
To scan a QR code, head over to Scanner in the top right corner. Click on Start scanning and allow camera permissions.
|
|
If you close and open your browser and your camera is stuck, simply refresh the page or click Stop scanning and then Start scanning again.
|
|
When you scan a QR code, a request is sent to the server to get the user's personal information and to mark their tickets as scanned.
|
|
</p>
|
|
<h2 class="text-lg mb-2 mt-4">Administrator guide</h2>
|
|
<p class="text-gray-700 text-sm leading-relaxed">
|
|
You can view events
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<a
|
|
href="/auth/signout"
|
|
class="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 bg-red-500 hover:bg-red-600 text-white font-semibold py-3 px-8 rounded-full shadow-none border border-gray-300 transition"
|
|
>
|
|
Sign out
|
|
</a>
|