vbv/client/src/components/ui/ItPersonRow.vue

39 lines
926 B
Vue

<script setup lang="ts">
import ItRow from "@/components/ui/ItRow.vue";
export interface Props {
avatarUrl: string;
name: string;
extraInfo?: string;
}
const props = withDefaults(defineProps<Props>(), {
extraInfo: "",
});
</script>
<template>
<ItRow>
<template #firstRow>
<slot name="leading"></slot>
<img class="mr-2 h-11 w-11 rounded-full" :src="props.avatarUrl" />
<div :class="props.extraInfo ? 'leading-5' : ''">
<p class="text-bold" :class="props.extraInfo ? '' : 'lg:leading-[45px]'">
{{ props.name }}
</p>
<p v-if="props.extraInfo" class="font-normal" data-cy="extra-info">
{{ props.extraInfo }}
</p>
</div>
</template>
<template #center>
<slot name="center"></slot>
</template>
<template #link>
<slot name="link"></slot>
</template>
</ItRow>
</template>
<style lang="scss" scoped></style>