1import { Paper, Typography, Box } from '@mui/material';
2import { CheckCircle, Error } from '@mui/icons-material';
3import type { VerificationResult } from '../utils/verification';
5interface ResultsPanelProps {
6 result: VerificationResult | null;
7 isVerifying: boolean;
8}
10const ResultsPanel: React.FC<ResultsPanelProps> = ({ result, isVerifying }) => {
11 if (isVerifying) {
12 return (
13 <Box
14 sx={{
15 height: '100%',
16 display: 'flex',
17 alignItems: 'center',
18 justifyContent: 'center',
19 }}
20 >
21 <Typography color="text.secondary">Verifying...</Typography>
22 </Box>
23 );
24 }
26 if (!result) {
27 return (
28 <Box
29 sx={{
30 height: '100%',
31 display: 'flex',
32 alignItems: 'center',
33 justifyContent: 'center',
34 }}
35 >
36 <Typography color="text.secondary">
37 Enter proof content to see verification results
38 </Typography>
39 </Box>
40 );
41 }
43 return (
44 <Box sx={{ height: '100%', overflow: 'auto', p: 2 }}>
45 <Paper
46 elevation={0}
47 sx={{
48 p: 3,
49 backgroundColor: result.success ? '#e8f5e9' : '#ffebee',
50 border: `2px solid ${result.success ? '#4caf50' : '#f44336'}`,
51 }}
52 >
53 <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
54 {result.success ? (
55 <CheckCircle sx={{ color: '#4caf50', mr: 1, fontSize: 32 }} />
56 ) : (
57 <Error sx={{ color: '#f44336', mr: 1, fontSize: 32 }} />
58 )}
59 <Typography
60 variant="h6"
61 sx={{ color: result.success ? '#2e7d32' : '#c62828' }}
62 >
63 {result.message}
64 </Typography>
65 </Box>
66 {result.error && (
67 <Box
68 sx={{
69 mt: 2,
70 p: 2,
71 backgroundColor: 'rgba(0, 0, 0, 0.05)',
72 borderRadius: 1,
73 }}
74 >
75 <Typography
76 component="pre"
77 sx={{
78 fontFamily: 'monospace',
79 fontSize: '13px',
80 whiteSpace: 'pre-wrap',
81 wordBreak: 'break-word',
82 margin: 0,
83 color: '#c62828',
84 }}
85 >
86 {result.error}
87 </Typography>
88 </Box>
89 )}
90 </Paper>
91 </Box>
92 );
93};
95export default ResultsPanel;