76 lines
2.0 KiB
Vue
76 lines
2.0 KiB
Vue
<template>
|
|
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4" @click.self="$emit('close')">
|
|
<div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="text-lg font-semibold text-gray-900">Scan to View Sermon</h3>
|
|
<button
|
|
@click="$emit('close')"
|
|
class="text-gray-400 hover:text-gray-600"
|
|
>
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-center">
|
|
<div class="text-center mb-4">
|
|
<h4 class="text-lg font-semibold text-gray-900 mb-1">{{ sermon.title }}</h4>
|
|
<p class="text-sm text-gray-600">{{ formatDate(sermon.date) }}</p>
|
|
</div>
|
|
<div class="bg-white p-4 rounded-lg border-2 border-gray-200">
|
|
<canvas ref="qrCanvas"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import QRCode from 'qrcode'
|
|
|
|
interface Sermon {
|
|
id?: number
|
|
slug: string
|
|
title: string
|
|
date: string
|
|
bible_references: string
|
|
personal_appliance: string
|
|
pastors_challenge: string
|
|
}
|
|
|
|
const props = defineProps<{
|
|
sermon: Sermon
|
|
}>()
|
|
|
|
defineEmits<{
|
|
close: []
|
|
}>()
|
|
|
|
const qrCanvas = ref<HTMLCanvasElement | null>(null)
|
|
const config = useRuntimeConfig()
|
|
|
|
function formatDate(dateString: string) {
|
|
const date = new Date(dateString)
|
|
return date.toLocaleDateString('en-US', {
|
|
year: 'numeric',
|
|
month: '2-digit',
|
|
day: '2-digit'
|
|
})
|
|
}
|
|
|
|
onMounted(async () => {
|
|
if (qrCanvas.value) {
|
|
const url = `${config.public.siteUrl}/${props.sermon.slug}`
|
|
await QRCode.toCanvas(qrCanvas.value, url, {
|
|
width: 256,
|
|
margin: 2,
|
|
color: {
|
|
dark: '#000000',
|
|
light: '#FFFFFF'
|
|
}
|
|
})
|
|
}
|
|
})
|
|
</script>
|