File size: 4,617 Bytes
1f7ead8 | 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 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | import React, { useState } from 'react';
import { X, FileText, BookOpen, PenTool, Layout, FileBarChart, Lightbulb, GraduationCap } from 'lucide-react';
const ReportSelectionModal = ({ isOpen, onClose, onSelect }) => {
if (!isOpen) return null;
const reportTypes = [
{
id: 'briefing_doc',
title: 'Briefing Doc',
description: 'Overview of your sources featuring key insights and quotes.',
icon: <FileText className="w-6 h-6 text-purple-400" />,
color: 'bg-purple-500/10 border-purple-500/20 hover:border-purple-500/40'
},
{
id: 'study_guide',
title: 'Study Guide',
description: 'Short-answer quiz, suggested essay questions and glossary.',
icon: <GraduationCap className="w-6 h-6 text-blue-400" />,
color: 'bg-blue-500/10 border-blue-500/20 hover:border-blue-500/40'
},
{
id: 'blog_post',
title: 'Blog Post',
description: 'Insightful takeaways distilled into a highly readable article.',
icon: <PenTool className="w-6 h-6 text-pink-400" />,
color: 'bg-pink-500/10 border-pink-500/20 hover:border-pink-500/40'
},
{
id: 'research_proposal',
title: 'Research Proposal',
description: 'A proposal for developing a solution based on the provided research.',
icon: <Layout className="w-6 h-6 text-green-400" />,
color: 'bg-green-500/10 border-green-500/20 hover:border-green-500/40'
},
{
id: 'technical_whitepaper',
title: 'Technical Whitepaper',
description: 'An in-depth technical analysis of methods, models, and results.',
icon: <FileBarChart className="w-6 h-6 text-amber-400" />,
color: 'bg-amber-500/10 border-amber-500/20 hover:border-amber-500/40'
},
{
id: 'explanatory_article',
title: 'Explanatory Article',
description: 'Explains complex concepts in a clear, educational way.',
icon: <Lightbulb className="w-6 h-6 text-cyan-400" />,
color: 'bg-cyan-500/10 border-cyan-500/20 hover:border-cyan-500/40'
},
{
id: 'custom',
title: 'Custom Report',
description: 'Craft reports your way by specifying structure and tone.',
icon: <BookOpen className="w-6 h-6 text-gray-400" />,
color: 'bg-gray-500/10 border-gray-500/20 hover:border-gray-500/40'
}
];
return (
<div className="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-4">
<div className="bg-[#1f1f1f] rounded-2xl w-full max-w-4xl max-h-[90vh] flex flex-col shadow-2xl border border-white/10 overflow-hidden">
<div className="p-6 border-b border-white/10 flex justify-between items-center">
<div>
<h2 className="text-2xl font-semibold text-white">Create Report</h2>
<p className="text-gray-400 text-sm">Select a format to generate a source-grounded document.</p>
</div>
<button onClick={onClose} className="p-2 hover:bg-white/10 rounded-full transition-colors text-gray-400 hover:text-white">
<X className="w-6 h-6" />
</button>
</div>
<div className="p-6 overflow-y-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{reportTypes.map((type) => (
<button
key={type.id}
onClick={() => onSelect(type.id)}
className={`flex flex-col text-left p-5 rounded-xl border transition-all duration-200 group ${type.color} hover:bg-opacity-20`}
>
<div className="mb-4 p-2 bg-black/20 rounded-lg w-fit group-hover:scale-110 transition-transform">
{type.icon}
</div>
<h3 className="text-lg font-medium text-white mb-2">{type.title}</h3>
<p className="text-sm text-gray-400 leading-relaxed">{type.description}</p>
</button>
))}
</div>
</div>
</div>
);
};
export default ReportSelectionModal;
|