src/components/AnswerCard.js - master2 - RuslanNoel/222

src/components/AnswerCard.js
70 строк2 KB
Руслан
first_commit
20 авг 2025, 00:55
20 авг 2025, 00:55bf6ac52
import { Card, CardContent, Typography, Box, Chip } from '@mui/material';
import { motion } from 'framer-motion';

function AnswerCard({ subject, examType, question, answer }) {
  return (
    <motion.div
      whileHover={{ scale: 1.02 }}
      transition={{ type: "spring", stiffness: 300 }}
    >
      <Card
        sx={{
          borderRadius: '24px',
          overflow: 'hidden',
          background: 'rgba(255, 255, 255, 0.9)',
          backdropFilter: 'blur(10px)',
          border: '1px solid rgba(255, 255, 255, 0.3)',
          boxShadow: '0 8px 32px rgba(31, 38, 135, 0.15)',
          '&:hover': {
            boxShadow: '0 8px 32px rgba(31, 38, 135, 0.25)',
          }
        }}
      >
        <CardContent sx={{ p: 3 }}>
          <Box sx={{ display: 'flex', gap: 1, mb: 2 }}>
            <Chip 
              label={subject}
              sx={{
                borderRadius: '12px',
                background: 'linear-gradient(45deg, #2196F3 30%, #21CBF3 90%)',
                color: 'white',
              }}
            />
            <Chip 
              label={examType}
              sx={{
                borderRadius: '12px',
                background: 'linear-gradient(45deg, #FF4B2B 30%, #FF416C 90%)',
                color: 'white',
              }}
            />
          </Box>
          <Typography 
            variant="h6" 
            gutterBottom
            sx={{
              fontWeight: 600,
              color: '#1a237e'
            }}
          >
            {question}
          </Typography>
          <Typography 
            variant="body1"
            sx={{
              color: '#424242',
              background: '#f5f5f5',
              p: 2,
              borderRadius: '16px',
              mt: 2
            }}
          >
            {answer}
          </Typography>
        </CardContent>
      </Card>
    </motion.div>
  );
}

export default AnswerCard;