47 lines
1.1 KiB
Vue
47 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
logo: string;
|
|
href?: string;
|
|
company: string;
|
|
role: string;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const titleRef = ref();
|
|
const altContent = computed(() => titleRef.value?.$el.textContent);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex gap-5">
|
|
<NuxtLink :to="props.href" target="_blank" class="block">
|
|
<NuxtImg
|
|
placeholder
|
|
:src="props.logo"
|
|
:alt="altContent"
|
|
class="block rounded min-w-[50px]"
|
|
format="webp"
|
|
height="50"
|
|
width="50"
|
|
fit="outside"
|
|
/>
|
|
</NuxtLink>
|
|
<div class="flex flex-col justify-center">
|
|
<NuxtLink
|
|
:href="props.href"
|
|
target="_blank"
|
|
class="md:text-xl text-lg font-semibold hover:underline hover:underline-offset-4"
|
|
ref="titleRef"
|
|
>
|
|
{{ props.company }}
|
|
</NuxtLink>
|
|
<div class="mb-2 text-xs text-gray-500 uppercase font-bold">
|
|
{{ props.role }}
|
|
</div>
|
|
<div class="text-sm text-gray-500">
|
|
<slot> Lorem ipsum, dolor sit amet consectetur adipisicing elit. </slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|