mirror of
https://github.com/seanmorley15/AdventureLog.git
synced 2025-07-20 13:29:37 +02:00
47 lines
1.3 KiB
Svelte
47 lines
1.3 KiB
Svelte
|
<script lang="ts">
|
||
|
|
import { goto } from '$app/navigation';
|
||
|
|
import { continentCodeToString, getFlag } from '$lib';
|
||
|
|
import type { User } from '$lib/types';
|
||
|
|
import { createEventDispatcher } from 'svelte';
|
||
|
|
const dispatch = createEventDispatcher();
|
||
|
|
|
||
|
|
import Calendar from '~icons/mdi/calendar';
|
||
|
|
|
||
|
|
export let user: User;
|
||
|
|
|
||
|
|
async function nav() {
|
||
|
|
goto(`/user/${user.uuid}`);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-neutral text-neutral-content shadow-xl"
|
||
|
|
>
|
||
|
|
<div class="card-body">
|
||
|
|
<div>
|
||
|
|
{#if user.profile_pic}
|
||
|
|
<div class="avatar">
|
||
|
|
<div class="w-24 rounded-full">
|
||
|
|
<img src={user.profile_pic} alt={user.username} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{/if}
|
||
|
|
<h2 class="card-title overflow-ellipsis">{user.first_name} {user.last_name}</h2>
|
||
|
|
</div>
|
||
|
|
<p class="text-sm text-neutral-content">{user.username}</p>
|
||
|
|
{#if user.is_staff}
|
||
|
|
<div class="badge badge-primary">Admin</div>
|
||
|
|
{/if}
|
||
|
|
<!-- member since -->
|
||
|
|
<div class="flex items-center space-x-2">
|
||
|
|
<Calendar class="w-4 h-4 mr-1" />
|
||
|
|
<p class="text-sm text-neutral-content">
|
||
|
|
{user.date_joined ? 'Joined ' + new Date(user.date_joined).toLocaleDateString() : ''}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="card-actions justify-end">
|
||
|
|
<button class="btn btn-primary" on:click={nav}>View</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|