36 lines
1.1 KiB
Vue
36 lines
1.1 KiB
Vue
<template>
|
|
<button
|
|
@click="showModal = true"
|
|
class="inline-flex flex-col items-center gap-1 px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 font-medium"
|
|
>
|
|
<svg class="w-5 h-5" 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>
|
|
<span class="text-xs">QR Code</span>
|
|
</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>
|