%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div class="relative p-6 pr-8 mb-1 bg-gray grid grid-cols-1 sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-6 gap-6">
<div class="col-span-1">
<div class="relative max-w-xs mx-auto md:max-w-full">
<div class="absolute top-0 left-0 w-full h-full border-15 border-yellow border-opacity-80"></div>
<img :src="payment.customer.photo_url"
:alt="payment.customer.first_name" />
</div>
</div>
<div class="text-center sm:text-left sm:col-span-2 md:col-span-4 lg:col-span-5 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 py-2">
<div class="lg:col-span-2 flex flex-col sm:items-start justify-center">
<small class="uppercase text-sm text-black text-opacity-80">{{ payment.created_at }}</small>
<h2 class="text-xl font-bold mb-2">{{ payment.customer.first_name +' '+ payment.customer.last_name }}</h2>
</div>
<div class="flex flex-col md:items-end justify-center">
<span class="block mb-2 text-sm">{{ payment.is_complete == false ? 'Payment pending' : 'Payment recieved' }}</span>
<span class="block font-bold text-2xl">{{ payment.amount.formatted }}</span>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
payment: Object
}
}
</script>
Zerion Mini Shell 1.0