<script setup lang="ts">
import {User} from "@/Types/types";

defineProps<{
    user: User
}>()
import {Link} from "@inertiajs/vue3";
</script>

<template>
    <div class="avatar">
        <Link :href="route('profile.view', { user: user?.name })">
            {{ user?.name?.charAt(0).toUpperCase() ?? '?' }}
        </Link>
    </div>
</template>

<style scoped>
.avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.2);
    border: 1px solid rgba(99, 102, 241, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    color: #818cf8;
    flex-shrink: 0;
}
</style>
