cpularp-manager-frontend/src/components/UserInfo.vue

32 lines
1.1 KiB
Vue

<script lang="ts" setup>
import { user_store } from '@/ts/user_info'
</script>
<template>
<div class="bg-primary ring-2 ring-primary/80">
<div class="flex flex-row w-full h-full p-4 space-x-4 rounded-sm">
<div class="md:min-w-fit md:min-h-fit md:max-w-fit md:max-h-fit max-w-32 max-h-32">
<img
class="fixed z-1 max-w-[96px] max-h-[96px] md:max-w-[128px] md:max-h-[128px]"
:src="user_store.Avatar_Decoration"
/>
<img
class="max-w-[96px] max-h-[96px] mask-clip-border rounded-full md:max-w-[128px] md:max-h-[128px] drop-shadow-accent drop-shadow-md border-8 border-accent"
:src="user_store.Avatar"
/>
</div>
<div class="w-full m-auto drop-shadow-md drop-shadow-accent text-accent">
<p class="text-xl md:text-3xl">
{{ user_store.Global_Name }}
</p>
<a
class="ml-2 text-white text-md md:text-xl hover:text-gray-300"
:href="user_store.Id"
target="_blank"
>
@{{ user_store.Username }}
</a>
</div>
</div>
</div>
</template>