33 lines
762 B
Vue
33 lines
762 B
Vue
<template>
|
|
<button
|
|
class="cursor-pointer rounded-lg border border-gray-100 px-4 py-2 text-left shadow focus:outline-none"
|
|
:class="
|
|
selected
|
|
? 'bg-gray-50 ring-2 ring-inset ring-gray-600'
|
|
: 'hover:border-gray-400'
|
|
"
|
|
>
|
|
<div class="flex items-center">
|
|
<img
|
|
v-if="image"
|
|
:src="image"
|
|
:alt="title"
|
|
class="mr-4 h-10 w-10"
|
|
:class="[fullCircleImage ? 'rounded-full' : 'rounded-lg']"
|
|
/>
|
|
<div class="my-1">
|
|
<h3 class="text-lg font-bold text-gray-900">
|
|
{{ title }}
|
|
</h3>
|
|
<slot name="secondary-content"></slot>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: 'SelectableCard',
|
|
props: ['selected', 'title', 'image', 'fullCircleImage']
|
|
};
|
|
</script>
|