70 lines
2.7 KiB
Vue
70 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import LoadingSpinner from "@/components/ui/LoadingSpinner.vue";
|
|
import { computed } from "vue";
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
imageUrl?: string;
|
|
loading?: boolean;
|
|
imageSize?: number;
|
|
}>(),
|
|
{
|
|
imageUrl: "",
|
|
loading: false,
|
|
imageSize: 172,
|
|
}
|
|
);
|
|
|
|
const imageStyle = computed(() => {
|
|
return {
|
|
width: `${props.imageSize}px`,
|
|
height: `${props.imageSize}px`,
|
|
};
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="relative">
|
|
<img
|
|
v-if="props?.imageUrl"
|
|
class="aspect-square rounded-full object-cover"
|
|
:style="imageStyle"
|
|
:class="{ 'opacity-30': props.loading }"
|
|
:src="props.imageUrl"
|
|
alt="avatar"
|
|
/>
|
|
<svg
|
|
v-else
|
|
:class="{ 'opacity-30': props.loading }"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
:width="imageSize"
|
|
:height="imageSize"
|
|
viewBox="0 0 172 172"
|
|
fill="none"
|
|
>
|
|
<mask
|
|
id="mask0"
|
|
style="mask-type: alpha"
|
|
maskUnits="userSpaceOnUse"
|
|
x="0"
|
|
y="0"
|
|
width="172"
|
|
height="172"
|
|
>
|
|
<circle cx="86" cy="86" r="86" fill="#E0E5EC" />
|
|
</mask>
|
|
<g mask="url(#mask0)">
|
|
<circle cx="86" cy="86" r="86" fill="#E0E5EC" />
|
|
<path
|
|
fill="#B1C1CA"
|
|
d="M101.584 105.423a1.793 1.793 0 0 0-1.57.572 1.834 1.834 0 0 0-.465 1.604c1.019 5.347 4.45 12.685 14.982 17.254 1.248.539 3.176.959 5.621 1.486 9.151 1.977 24.454 5.288 28.214 19.294a1.843 1.843 0 0 0 1.545 1.351 1.84 1.84 0 0 0 1.367-.366 1.846 1.846 0 0 0 .659-1.944c-4.347-16.177-21.685-19.928-31.002-21.941-2.157-.469-4.022-.871-4.934-1.269-6.33-2.743-10.418-6.815-12.19-12.117 17.585 1.305 25.547-5.69 25.898-6.008a1.843 1.843 0 0 0-.325-2.968c-10.148-5.79-10.148-25.795-10.148-33.33 0-21.067-14.21-37.768-32.428-38.03-.173-.006-.347-.01-.52-.011-18.483.103-33.524 16.823-33.524 37.275 0 7.534 0 27.543-10.149 33.329a1.856 1.856 0 0 0-.767 2.35c.121.276.309.519.546.707.51.394 11.773 9.001 25.632 6.387-1.853 5.081-5.886 8.99-12.031 11.657-.89.387-2.663.811-4.716 1.298-9.38 2.227-26.844 6.376-31.216 22.668a1.84 1.84 0 0 0 .185 1.4 1.85 1.85 0 0 0 3.386-.445c3.8-14.176 19.266-17.845 28.502-20.043 2.315-.549 4.143-.984 5.332-1.497 10.532-4.569 13.96-11.907 14.983-17.254a1.83 1.83 0 0 0-.588-1.723 1.833 1.833 0 0 0-1.78-.383c-9.996 3.142-19.232-1.18-23.269-3.577 9.642-8.061 9.642-26.614 9.642-34.874 0-18.427 13.391-33.495 29.987-33.595l.391.022c16.367.233 28.709 14.994 28.709 34.34 0 8.264 0 26.857 9.683 34.918-3.335 1.903-10.939 4.982-23.642 3.463Z"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
<LoadingSpinner
|
|
v-if="props.loading"
|
|
class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
|
|
/>
|
|
</div>
|
|
</template>
|