Spaces:
Running
Running
File size: 2,836 Bytes
afd56bc | 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 | import React from 'react';
import { motion } from 'framer-motion';
import { AlertTriangle, CheckCircle, Info } from 'lucide-react';
interface CriticFeedbackProps {
isApproved: boolean;
feedback: string;
severity: 'low' | 'medium' | 'high';
onApplyFixes?: () => void;
}
const CriticFeedbackPanel: React.FC<CriticFeedbackProps> = ({ isApproved, feedback, severity, onApplyFixes }) => {
const getColors = () => {
if (isApproved) return { border: 'var(--accent-green)', bg: 'rgba(16, 185, 129, 0.1)', header: 'var(--accent-green)', icon: <CheckCircle size={20}/> };
if (severity === 'high') return { border: '#EF4444', bg: 'rgba(239, 68, 68, 0.1)', header: '#FCA5A5', icon: <AlertTriangle size={20}/> };
if (severity === 'medium') return { border: '#F59E0B', bg: 'rgba(245, 158, 11, 0.1)', header: '#FCD34D', icon: <AlertTriangle size={20}/> };
return { border: 'var(--accent-blue)', bg: 'rgba(59, 130, 246, 0.1)', header: '#93C5FD', icon: <Info size={20}/> };
};
const colors = getColors();
return (
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
className="glass-card"
style={{
borderLeft: `4px solid ${colors.border}`,
padding: '1.2rem',
display: 'flex',
flexDirection: 'column',
gap: '0.8rem'
}}
>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', color: colors.header, fontWeight: 'bold' }}>
{colors.icon}
<span>Zgodność i Ocena (AI Critic)</span>
</div>
<div style={{ fontSize: '0.9rem', color: 'var(--text-secondary)', lineHeight: 1.5, background: 'rgba(0,0,0,0.2)', padding: '1rem', borderRadius: '8px' }}>
{feedback}
</div>
{!isApproved && (
<div style={{ fontSize: '0.8rem', color: 'var(--text-muted)', display: 'flex', flexDirection: 'column', gap: '0.8rem' }}>
<span>Wprowadź poprawki do tekstu powyżej i poproś o ponowną ewaluację.</span>
{onApplyFixes && (
<button
onClick={onApplyFixes}
className="btn hover-lift"
style={{ alignSelf: 'flex-start', background: 'rgba(59, 130, 246, 0.15)', color: 'var(--accent-blue)', border: '1px solid rgba(59, 130, 246, 0.3)', padding: '0.4rem 0.8rem', fontSize: '0.8rem' }}
>
Zastosuj sugerowane poprawki
</button>
)}
</div>
)}
</motion.div>
);
};
export default CriticFeedbackPanel;
|