34 lines
1.5 KiB
Vue
34 lines
1.5 KiB
Vue
<template>
|
|
<view-component :name="name" :code="code">
|
|
<div class="px-3 py-6" slot="component">
|
|
<div class="max-w-xs mx-auto overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800">
|
|
<img class="object-cover w-full h-56" src="https://images.unsplash.com/photo-1542156822-6924d1a71ace?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="avatar">
|
|
|
|
<div class="py-5 text-center">
|
|
<a href="#" class="block text-2xl font-bold text-gray-800 dark:text-white">John Doe</a>
|
|
<span class="text-sm text-gray-700 dark:text-gray-200">Software Engineer</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</view-component>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
name: 'User',
|
|
code: `
|
|
<div class="max-w-xs mx-auto overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800">
|
|
<img class="object-cover w-full h-56" src="https://images.unsplash.com/photo-1542156822-6924d1a71ace?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="avatar">
|
|
|
|
<div class="py-5 text-center">
|
|
<a href="#" class="block text-2xl font-bold text-gray-800 dark:text-white">John Doe</a>
|
|
<span class="text-sm text-gray-700 dark:text-gray-200">Software Engineer</span>
|
|
</div>
|
|
</div>`
|
|
}
|
|
}
|
|
}
|
|
</script>
|