blob: 78dc4359bf350514f64b75cdfe771581184cce95 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
"use client"
import { useState } from "react"
import { Loader2 } from "lucide-react"
import { extractGoogleDocId, getGoogleEmbedUrl } from "@/lib/url-helpers"
interface GoogleDocViewerProps {
url: string | null | undefined
customId: string | null | undefined
type: "google_doc" | "google_sheet" | "google_slide"
}
export function GoogleDocViewer({ url, customId, type }: GoogleDocViewerProps) {
const [loading, setLoading] = useState(true)
const [error, setError] = useState<string | null>(null)
const docId = customId ?? (url ? extractGoogleDocId(url) : null)
if (!docId) {
return (
<div className="flex items-center justify-center h-full text-gray-400">
Unable to load document - no document ID found
</div>
)
}
const embedUrl = getGoogleEmbedUrl(docId, type)
const typeLabels = {
google_doc: "Google Doc",
google_sheet: "Google Sheet",
google_slide: "Google Slides",
}
return (
<div className="flex flex-col h-full w-full overflow-hidden">
{loading && (
<div className="absolute inset-0 flex items-center justify-center bg-[#14161A] z-10">
<div className="flex items-center gap-2 text-gray-400">
<Loader2 className="w-5 h-5 animate-spin" />
<span>Loading {typeLabels[type]}...</span>
</div>
</div>
)}
{error && (
<div className="flex items-center justify-center h-full text-red-400">
{error}
</div>
)}
<iframe
src={embedUrl}
className="flex-1 w-full h-full border-0 rounded-[14px]"
onLoad={() => setLoading(false)}
onError={() => {
setLoading(false)
setError("Failed to load document")
}}
allow="autoplay"
title={typeLabels[type]}
/>
</div>
)
}
|