add: shop capes and refactor cape card

src/renderer/pages/Profile.tsx

@@ -20,13 +20,10 @@ import {
   MenuItem,
   Alert,
   CircularProgress,
-  Card,
-  CardContent,
-  CardMedia,
-  Tooltip,
-  CardActions,
 } from '@mui/material';
 
+import CapeCard from '../components/CapeCard';
+
 export default function Profile() {
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [walkingSpeed, setWalkingSpeed] = useState<number>(0.5);
@@ -317,63 +314,24 @@ export default function Profile() {
               }}
             >
               <Typography>Ваши плащи</Typography>
-              <Box sx={{ display: 'flex', flexDirection: 'row', gap: 2 }}>
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'row',
+                  gap: 2,
+                  flexWrap: 'wrap',
+                }}
+              >
                 {capes.map((cape) => (
-                  <Tooltip arrow title={cape.cape_description}>
-                    <Card
-                      key={cape.cape_id}
-                      sx={{
-                        bgcolor: 'rgba(255, 255, 255, 0.05)',
-                        width: 200, // фиксированная ширина карточки
-                        overflow: 'hidden',
-                      }}
-                    >
-                      <CardMedia
-                        component="img"
-                        image={cape.image_url}
-                        alt={cape.cape_name}
-                        sx={{
-                          display: 'block',
-                          width: '100%',
-                          transform:
-                            'scale(2.9) translateX(66px) translateY(32px)',
-                          imageRendering: 'pixelated',
-                        }}
-                      />
-                      <CardContent
-                        sx={{ bgcolor: 'rgba(255, 255, 255, 0.05)', pt: '9vh' }}
-                      >
-                        <Typography sx={{ color: 'white' }}>
-                          {cape.cape_name}
-                        </Typography>
-                      </CardContent>
-                      {cape.is_active ? (
-                        <CardActions
-                          sx={{ display: 'flex', justifyContent: 'center' }}
-                        >
-                          <Button
-                            variant="contained"
-                            sx={{ bgcolor: 'red' }}
-                            onClick={() => handleDeactivateCape(cape.cape_id)}
-                          >
-                            Снять
-                          </Button>
-                        </CardActions>
-                      ) : (
-                        <CardActions
-                          sx={{ display: 'flex', justifyContent: 'center' }}
-                        >
-                          <Button
-                            variant="contained"
-                            sx={{ bgcolor: 'green' }}
-                            onClick={() => handleActivateCape(cape.cape_id)}
-                          >
-                            Надеть
-                          </Button>
-                        </CardActions>
-                      )}
-                    </Card>
-                  </Tooltip>
+                  <CapeCard
+                    key={cape.cape_id}
+                    cape={cape}
+                    mode="profile"
+                    onAction={
+                      cape.is_active ? handleDeactivateCape : handleActivateCape
+                    }
+                    actionDisabled={loading}
+                  />
                 ))}
               </Box>
             </Box>