52 lines
1.3 KiB
Vue
52 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
logo: string;
|
|
href?: string;
|
|
company: string;
|
|
role: string;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const [visibility, toggle] = useToggle(false);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex gap-5">
|
|
<NuxtLink :to="props.href" target="_blank" class="block">
|
|
<NuxtImg
|
|
placeholder
|
|
:src="props.logo"
|
|
:alt="props.company"
|
|
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"
|
|
>
|
|
{{ props.company }}
|
|
</NuxtLink>
|
|
<div>
|
|
<button
|
|
class="mb-2 text-xs text-gray-400 uppercase font-semibold flex items-center justify-start gap-1"
|
|
@click="() => toggle()"
|
|
>
|
|
{{ props.role }}
|
|
<UIcon name="i-heroicons-chevron-down" v-if="!visibility" as="div" />
|
|
<UIcon name="i-heroicons-chevron-up" v-if="visibility" as="div" />
|
|
</button>
|
|
</div>
|
|
<div v-if="visibility" class="text-sm text-gray-500">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|