feat: add reward code
This commit is contained in:
208
src/components/ExportSidebar.tsx
Normal file
208
src/components/ExportSidebar.tsx
Normal file
@@ -0,0 +1,208 @@
|
||||
import { useState } from 'react';
|
||||
import { X, Check, Copy, Download, Code2, Image as ImageIcon, FileText, ChevronRight } from 'lucide-react';
|
||||
import { RecognitionResult } from '../types';
|
||||
|
||||
interface ExportSidebarProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
result: RecognitionResult | null;
|
||||
}
|
||||
|
||||
type ExportCategory = 'Code' | 'Image' | 'File';
|
||||
|
||||
interface ExportOption {
|
||||
id: string;
|
||||
label: string;
|
||||
category: ExportCategory;
|
||||
getContent: (result: RecognitionResult) => string | null;
|
||||
isDownload?: boolean; // If true, triggers file download instead of copy
|
||||
extension?: string;
|
||||
}
|
||||
|
||||
export default function ExportSidebar({ isOpen, onClose, result }: ExportSidebarProps) {
|
||||
const [copiedId, setCopiedId] = useState<string | null>(null);
|
||||
|
||||
if (!result) return null;
|
||||
|
||||
const exportOptions: ExportOption[] = [
|
||||
// Code Category
|
||||
{
|
||||
id: 'markdown',
|
||||
label: 'Markdown',
|
||||
category: 'Code',
|
||||
getContent: (r) => r.markdown_content
|
||||
},
|
||||
{
|
||||
id: 'latex',
|
||||
label: 'Latex',
|
||||
category: 'Code',
|
||||
getContent: (r) => r.latex_content
|
||||
},
|
||||
{
|
||||
id: 'mathml',
|
||||
label: 'MathML',
|
||||
category: 'Code',
|
||||
getContent: (r) => r.mathml_content
|
||||
},
|
||||
{
|
||||
id: 'mathml_word',
|
||||
label: 'Word MathML',
|
||||
category: 'Code',
|
||||
getContent: (r) => r.mathml_word_content
|
||||
},
|
||||
// Image Category
|
||||
{
|
||||
id: 'rendered_image',
|
||||
label: 'Rendered Image',
|
||||
category: 'Image',
|
||||
getContent: (r) => r.rendered_image_path,
|
||||
// User requested "Copy button" for Image.
|
||||
// Special handling might be needed for actual image data copy,
|
||||
// but standard clipboard writeText is for text.
|
||||
// If we want to copy image data, we need to fetch it.
|
||||
// For now, I'll stick to the pattern, but if it's a URL, copying the URL is the fallback.
|
||||
// However, usually "Copy Image" implies the binary.
|
||||
// Let's treat it as a special case in handleAction.
|
||||
},
|
||||
// File Category
|
||||
{
|
||||
id: 'docx',
|
||||
label: 'DOCX',
|
||||
category: 'File',
|
||||
getContent: (r) => r.markdown_content, // Placeholder content for file conversion
|
||||
isDownload: true,
|
||||
extension: 'docx'
|
||||
},
|
||||
{
|
||||
id: 'pdf',
|
||||
label: 'PDF',
|
||||
category: 'File',
|
||||
getContent: (r) => r.markdown_content, // Placeholder
|
||||
isDownload: true,
|
||||
extension: 'pdf'
|
||||
}
|
||||
];
|
||||
|
||||
const handleAction = async (option: ExportOption) => {
|
||||
const content = option.getContent(result);
|
||||
if (!content) return;
|
||||
|
||||
try {
|
||||
if (option.category === 'Image' && !option.isDownload) {
|
||||
// Handle Image Copy
|
||||
if (content.startsWith('http') || content.startsWith('blob:')) {
|
||||
try {
|
||||
const response = await fetch(content);
|
||||
const blob = await response.blob();
|
||||
await navigator.clipboard.write([
|
||||
new ClipboardItem({
|
||||
[blob.type]: blob
|
||||
})
|
||||
]);
|
||||
} catch (err) {
|
||||
console.error('Failed to copy image:', err);
|
||||
// Fallback to copying URL
|
||||
await navigator.clipboard.writeText(content);
|
||||
}
|
||||
} else {
|
||||
await navigator.clipboard.writeText(content);
|
||||
}
|
||||
} else if (option.isDownload) {
|
||||
// Simulate download
|
||||
const blob = new Blob([content], { type: 'text/plain' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `export.${option.extension}`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
} else {
|
||||
// Standard Text Copy
|
||||
await navigator.clipboard.writeText(content);
|
||||
}
|
||||
|
||||
setCopiedId(option.id);
|
||||
setTimeout(() => {
|
||||
setCopiedId(null);
|
||||
onClose(); // Auto close after action
|
||||
}, 1000); // Small delay to show "Copied" state before closing
|
||||
|
||||
} catch (err) {
|
||||
console.error('Action failed:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const categories: { id: ExportCategory; icon: any; label: string }[] = [
|
||||
{ id: 'Code', icon: Code2, label: 'Code' },
|
||||
{ id: 'Image', icon: ImageIcon, label: 'Image' },
|
||||
{ id: 'File', icon: FileText, label: 'File' },
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Backdrop */}
|
||||
{isOpen && (
|
||||
<div
|
||||
className="absolute inset-0 bg-black/20 backdrop-blur-[1px] z-40 transition-opacity"
|
||||
onClick={onClose}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Sidebar Panel */}
|
||||
<div
|
||||
className={`
|
||||
absolute top-0 right-0 bottom-0 w-80 bg-white shadow-2xl z-50 transform transition-transform duration-300 ease-in-out border-l border-gray-100 flex flex-col
|
||||
${isOpen ? 'translate-x-0' : 'translate-x-full'}
|
||||
`}
|
||||
>
|
||||
<div className="flex items-center justify-between px-6 py-5 border-b border-gray-100 shrink-0">
|
||||
<h2 className="text-lg font-bold text-gray-900">Export</h2>
|
||||
<button onClick={onClose} className="p-2 hover:bg-gray-100 rounded-full transition-colors">
|
||||
<X size={20} className="text-gray-500" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-6 space-y-8">
|
||||
{categories.map((category) => (
|
||||
<div key={category.id} className="space-y-3">
|
||||
<div className="flex items-center gap-2 text-gray-400 px-1">
|
||||
<category.icon size={16} />
|
||||
<span className="text-xs font-semibold uppercase tracking-wider">{category.label}</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{exportOptions
|
||||
.filter(opt => opt.category === category.id)
|
||||
.map(option => (
|
||||
<button
|
||||
key={option.id}
|
||||
onClick={() => handleAction(option)}
|
||||
className="w-full flex items-center justify-between p-3 bg-gray-50 hover:bg-blue-50 hover:text-blue-600 border border-transparent hover:border-blue-200 rounded-lg group transition-all text-left"
|
||||
>
|
||||
<span className="text-sm font-medium text-gray-700 group-hover:text-blue-700">
|
||||
{option.label}
|
||||
</span>
|
||||
|
||||
<div className="text-gray-400 group-hover:text-blue-600">
|
||||
{copiedId === option.id ? (
|
||||
<Check size={16} className="text-green-500" />
|
||||
) : option.isDownload ? (
|
||||
<Download size={16} />
|
||||
) : (
|
||||
<Copy size={16} className="opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user