%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div class="bg-gray">
<div :style="'background-image: url('+post.thumbnail_url+')'"
class="relative h-48 bg-cover bg-center bg-no-repeat">
<div class="waves absolute z-10 top-0 left-0 w-full h-full bg-bottom bg-no-repeat"></div>
<NuxtLink
class="block z-20 absolute top-0 left-0 w-full h-full"
:to="'/blog/'+post.slug"></NuxtLink>
</div>
<div class="p-6 flex flex-col justify-between">
<div class="h-40 overflow-hidden mb-3">
<div class="grid grid-cols-4 mb-3">
<div class="col-span-3">
<span class="text-black text-opacity-75 text-sm">{{ post.created_at }}</span>
</div>
<div class="col-span-1 flex items-center justify-end">
<button class="flex items-center justify-center focus:outline-none hover:outline-none"
@click="likePost"
type="button">
<svg v-if="post.likes"
class="w-5 h-5 text-pink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
</svg>
<svg v-else
class="w-5 h-5 text-pink" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg>
<span class="ml-1 text-xs text-black text-opacity-50"
v-if="post.likes">{{ post.likes }}</span>
</button>
</div>
</div>
<h2 class="text-2xl font-bold">
<NuxtLink :to="'/blog/'+post.slug">{{ post.title }}</NuxtLink>
</h2>
</div>
<div v-if="post.author"
class="relative flex items-center">
<div class="relative mr-3">
<NuxtLink v-if="post.therapist"
class="absolute z-20 top-0 left-0 w-full h-full block"
:to="'/therapists/'+post.therapist.slug" />
<div :class="post.therapist ? 'border-'+post.therapist.colour : 'border-gray'"
class="absolute top-0 left-0 w-full h-full border-4 border-opacity-75"></div>
<img class="w-16 h-16"
:src="post.author.photo_url">
</div>
<div class="flex flex-col justify-center">
<span class="uppercase text-sm">By {{ post.author.full_name }}</span>
<NuxtLink v-if="post.therapist"
:class="'hover:text-'+post.therapist.colour"
class="flex items-center uppercase text-sm transition"
:to="'/therapists/'+post.therapist.slug">
<span>View Profile</span>
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</NuxtLink>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
post: {
type: Object,
required: true
}
},
computed: {
isLoggedIn() {
return this.$auth.loggedIn;
}
},
methods: {
async likePost() {
if(this.isLoggedIn == false) {
this.$toast.error('You must be logged in to like this post').goAway(1000);
return false;
}
await this.$axios.post('/posts/like/'+this.post.id).then((response) => {
console.log(response);
}).catch((error) => {
this.$toast.error(error).goAway(1000);
})
}
}
}
</script>
<style lang="postcss" scoped>
.waves {
background-image: url('~assets/images/blog-waves.svg');
background-size: 100% auto;
}
</style>
Zerion Mini Shell 1.0