%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div class="relative p-6 mb-1 bg-gray grid grid-cols-1 sm:grid-cols-4 md:grid-cols-6 gap-6">
<div class="relative flex justify-center sm:block sm:col-span-1">
<div class="relative w-48 sm:w-full">
<NuxtLink class="block absolute z-20 top-0 left-0 w-full h-full"
:to="'/therapist/clients/'+client.id"></NuxtLink>
<div class="absolute top-0 left-0 w-full h-full border-4 border-opacity-50 border-yellow"></div>
<img :src="client.photo_url"
:alt="client.full_name" />
</div>
</div>
<div class="sm:col-span-3 md:col-span-5 grid grid-cols-1 sm:grid-cols-3 py-2">
<div class="sm:col-span-2 flex flex-col items-center sm:items-start justify-center">
<h2 class="text-xl font-bold mb-2">{{ client.full_name }}</h2>
<small v-if="client.next_booking"
class="uppercase text-sm text-black text-opacity-80">
<span v-if="client.next_booking.date == 'Tomorrow at'">Next: {{ client.next_booking.date +' '+client.next_booking.time }}</span>
<span v-else>Next: {{ client.next_booking.date }}</span>
</small>
</div>
<div class="flex justify-center sm:justify-start items-center">
<span v-if="client.is_new"
class="absolute top-0 right-0 bg-black text-white text-sm leading-3 px-3 py-2">New</span>
<a v-if="client.email"
class="w-10 h-8 mr-10 bg-no-repeat bg-center bg-contain icon-envelope"
:href="'mailto:'+client.email"
target="_blank"></a>
<a v-if="client.phone"
class="w-8 h-8 bg-no-repeat bg-center bg-contain icon-phone"
:href="'tel:'+client.phone"></a>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
client: Object
}
}
</script>
Zerion Mini Shell 1.0