36 lines
1.1 KiB
Vue
36 lines
1.1 KiB
Vue
<template>
|
|
<button
|
|
@click="showModal = true"
|
|
class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
|
>
|
|
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z" />
|
|
</svg>
|
|
QR Code
|
|
</button>
|
|
|
|
<QRCodeModal
|
|
v-if="showModal"
|
|
:sermon="sermon"
|
|
@close="showModal = false"
|
|
/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface Sermon {
|
|
id?: number
|
|
slug: string
|
|
title: string
|
|
date: string
|
|
bible_references: string
|
|
personal_appliance: string
|
|
pastors_challenge: string
|
|
}
|
|
|
|
defineProps<{
|
|
sermon: Sermon
|
|
}>()
|
|
|
|
const showModal = ref(false)
|
|
</script>
|