60 lines
1.3 KiB
TypeScript
60 lines
1.3 KiB
TypeScript
|
import React from "react";
|
||
|
|
|
||
|
|
type FileData = {
|
||
|
|
url: string;
|
||
|
|
format: string; // extension with dot, e.g. ".pdf"
|
||
|
|
fileName?: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
interface FilePreviewProps {
|
||
|
|
file: FileData;
|
||
|
|
}
|
||
|
|
|
||
|
|
const FileTextPreview: React.FC<FilePreviewProps> = ({ file }) => {
|
||
|
|
const format = file.format.toLowerCase();
|
||
|
|
|
||
|
|
if ([".jpg", ".jpeg", ".png", ".webp"].includes(format)) {
|
||
|
|
return (
|
||
|
|
<img
|
||
|
|
className="object-fill h-full w-full rounded-md"
|
||
|
|
src={file.url}
|
||
|
|
alt={file.fileName || "File"}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (format === ".pdf") {
|
||
|
|
return (
|
||
|
|
<iframe
|
||
|
|
className="w-full h-96 rounded-md"
|
||
|
|
src={`https://drive.google.com/viewerng/viewer?embedded=true&url=${encodeURIComponent(file.url)}`}
|
||
|
|
title={file.fileName || "PDF File"}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
if ([".doc", ".docx", ".ppt", ".pptx", ".xls", ".xlsx"].includes(format)) {
|
||
|
|
return (
|
||
|
|
<iframe
|
||
|
|
className="w-full h-96 rounded-md"
|
||
|
|
src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(file.url)}`}
|
||
|
|
title={file.fileName || "Document"}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Fallback → unknown format
|
||
|
|
return (
|
||
|
|
<a
|
||
|
|
href={file.url}
|
||
|
|
target="_blank"
|
||
|
|
rel="noopener noreferrer"
|
||
|
|
className="block text-blue-500 underline"
|
||
|
|
>
|
||
|
|
View {file.fileName || "File"}
|
||
|
|
</a>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default FileTextPreview;
|