135 lines
3.6 KiB
TypeScript
135 lines
3.6 KiB
TypeScript
// src/renderer/components/CapeCard.tsx
|
||
import React from 'react';
|
||
import {
|
||
Card,
|
||
CardMedia,
|
||
CardContent,
|
||
Typography,
|
||
CardActions,
|
||
Button,
|
||
Tooltip,
|
||
Box,
|
||
Chip,
|
||
} from '@mui/material';
|
||
import CustomTooltip from './CustomTooltip';
|
||
// Тип для плаща с необязательными полями для обоих вариантов использования
|
||
export interface CapeCardProps {
|
||
cape: {
|
||
cape_id?: string;
|
||
id?: string;
|
||
cape_name?: string;
|
||
name?: string;
|
||
cape_description?: string;
|
||
description?: string;
|
||
image_url: string;
|
||
is_active?: boolean;
|
||
price?: number;
|
||
purchased_at?: string;
|
||
};
|
||
mode: 'profile' | 'shop';
|
||
onAction: (capeId: string) => void;
|
||
actionDisabled?: boolean;
|
||
}
|
||
|
||
export default function CapeCard({
|
||
cape,
|
||
mode,
|
||
onAction,
|
||
actionDisabled = false,
|
||
}: CapeCardProps) {
|
||
// Определяем текст и цвет кнопки в зависимости от режима
|
||
const getActionButton = () => {
|
||
if (mode === 'shop') {
|
||
return {
|
||
text: 'Купить',
|
||
color: 'primary',
|
||
};
|
||
} else {
|
||
// Профиль
|
||
return cape.is_active
|
||
? { text: 'Снять', color: 'error' }
|
||
: { text: 'Надеть', color: 'success' };
|
||
}
|
||
};
|
||
|
||
const actionButton = getActionButton();
|
||
|
||
// В функции компонента добавьте нормализацию данных
|
||
const capeId = cape.cape_id || cape.id || '';
|
||
const capeName = cape.cape_name || cape.name || '';
|
||
const capeDescription = cape.cape_description || cape.description || '';
|
||
|
||
return (
|
||
<CustomTooltip arrow title={capeDescription}>
|
||
<Card
|
||
sx={{
|
||
bgcolor: 'rgba(255, 255, 255, 0.05)',
|
||
width: 200,
|
||
overflow: 'hidden',
|
||
position: 'relative', // для позиционирования ценника
|
||
borderRadius: '1vw',
|
||
}}
|
||
>
|
||
{/* Ценник для магазина */}
|
||
{mode === 'shop' && cape.price !== undefined && (
|
||
<Chip
|
||
label={`${cape.price} коинов`}
|
||
sx={{
|
||
position: 'absolute',
|
||
top: 8,
|
||
right: 8,
|
||
zIndex: 2,
|
||
bgcolor: 'rgba(0, 0, 0, 0.7)',
|
||
color: 'white',
|
||
fontWeight: 'bold',
|
||
}}
|
||
/>
|
||
)}
|
||
|
||
<CardMedia
|
||
component="img"
|
||
image={cape.image_url}
|
||
alt={capeName}
|
||
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: '6vw',
|
||
minHeight: '5vw',
|
||
}}
|
||
>
|
||
<Typography sx={{ color: 'white' }}>{capeName}</Typography>
|
||
</CardContent>
|
||
|
||
<CardActions sx={{ display: 'flex', justifyContent: 'center' }}>
|
||
<Button
|
||
variant="contained"
|
||
color={actionButton.color as 'primary' | 'success' | 'error'}
|
||
onClick={() => onAction(capeId)}
|
||
disabled={actionDisabled}
|
||
sx={{
|
||
borderRadius: '2vw',
|
||
p: '0.5vw 2.5vw',
|
||
color: 'white',
|
||
backgroundColor: 'rgb(0, 134, 0)',
|
||
'&:hover': {
|
||
backgroundColor: 'rgba(0, 134, 0, 0.5)',
|
||
},
|
||
fontFamily: 'Benzin-Bold',
|
||
}}
|
||
>
|
||
{actionButton.text}
|
||
</Button>
|
||
</CardActions>
|
||
</Card>
|
||
</CustomTooltip>
|
||
);
|
||
}
|