restyle Shop components
This commit is contained in:
@ -18,21 +18,14 @@ export type ShopItemType = 'case' | 'cape';
|
||||
|
||||
export interface ShopItemProps {
|
||||
type: ShopItemType;
|
||||
|
||||
id: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
imageUrl?: string;
|
||||
price?: number;
|
||||
|
||||
// только для кейсов
|
||||
itemsCount?: number;
|
||||
isOpening?: boolean;
|
||||
|
||||
// для препросмотра плаща
|
||||
playerSkinUrl?: string;
|
||||
|
||||
// для обоих
|
||||
disabled?: boolean;
|
||||
onClick: () => void;
|
||||
}
|
||||
@ -49,8 +42,6 @@ export default function ShopItem({
|
||||
playerSkinUrl,
|
||||
onClick,
|
||||
}: ShopItemProps) {
|
||||
const badgeLabel = type === 'case' ? 'Кейс' : 'Плащ';
|
||||
|
||||
const buttonText =
|
||||
type === 'case' ? (isOpening ? 'Открываем...' : 'Открыть кейс') : 'Купить';
|
||||
|
||||
@ -61,55 +52,46 @@ export default function ShopItem({
|
||||
sx={{
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
maxWidth: 280,
|
||||
height: 420, // ✅ ФИКСИРОВАННАЯ ВЫСОТА
|
||||
maxWidth: 300,
|
||||
height: 440,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
|
||||
bgcolor: 'rgba(5, 5, 15, 0.96)',
|
||||
borderRadius: '20px',
|
||||
border: '1px solid rgba(255, 255, 255, 0.08)',
|
||||
boxShadow: '0 18px 45px rgba(0, 0, 0, 0.8)',
|
||||
background: 'rgba(20,20,20,0.9)',
|
||||
borderRadius: '2.5vw',
|
||||
border: '1px solid rgba(255,255,255,0.08)',
|
||||
boxShadow: '0 10px 40px rgba(0,0,0,0.8)',
|
||||
overflow: 'hidden',
|
||||
transition:
|
||||
'transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease',
|
||||
|
||||
transition: 'transform 0.35s ease, box-shadow 0.35s ease',
|
||||
|
||||
'&:hover': {
|
||||
transform: 'translateY(-6px)',
|
||||
boxShadow: '0 26px 60px rgba(0, 0, 0, 0.95)',
|
||||
borderColor: 'rgba(255, 255, 255, 0.18)',
|
||||
transform: 'scale(1.05)',
|
||||
boxShadow: '0 20px 60px rgba(242,113,33,0.45)',
|
||||
},
|
||||
}}
|
||||
>
|
||||
{/* верхний “свет” */}
|
||||
{/* Градиентный свет сверху */}
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
pointerEvents: 'none',
|
||||
background:
|
||||
'radial-gradient(circle at top, rgba(255,255,255,0.13), transparent 55%)',
|
||||
'radial-gradient(circle at top, rgba(242,113,33,0.25), transparent 60%)',
|
||||
}}
|
||||
/>
|
||||
|
||||
{imageUrl && (
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
p: type === 'case' ? '0.9vw' : 0,
|
||||
pb: 0,
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<Box sx={{ position: 'relative', p: 1.5, pb: 0 }}>
|
||||
{type === 'case' ? (
|
||||
/* как было для кейсов */
|
||||
<Box
|
||||
sx={{
|
||||
borderRadius: '16px',
|
||||
borderRadius: '1.8vw',
|
||||
overflow: 'hidden',
|
||||
border: '1px solid rgba(255, 255, 255, 0.12)',
|
||||
border: '1px solid rgba(255,255,255,0.12)',
|
||||
background:
|
||||
'linear-gradient(135deg, rgba(40,40,80,0.9), rgba(15,15,35,0.9))',
|
||||
'linear-gradient(135deg, rgba(40,40,40,0.9), rgba(15,15,15,0.9))',
|
||||
}}
|
||||
>
|
||||
<CardMedia
|
||||
@ -118,166 +100,128 @@ export default function ShopItem({
|
||||
alt={name}
|
||||
sx={{
|
||||
width: '100%',
|
||||
height: '11vw',
|
||||
minHeight: '140px',
|
||||
height: 160,
|
||||
objectFit: 'cover',
|
||||
filter: 'saturate(1.1)',
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
) : (
|
||||
// ✅ здесь используем CapePreview
|
||||
<CapePreview imageUrl={imageUrl} alt={name} />
|
||||
)}
|
||||
|
||||
{/* кнопка предпросмотра плаща */}
|
||||
{/* Кнопка предпросмотра плаща */}
|
||||
{type === 'cape' && (
|
||||
<Box
|
||||
<IconButton
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setPreviewOpen(true);
|
||||
}}
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: type === 'case' ? '1.2vw' : 8,
|
||||
right: type === 'case' ? '1.6vw' : 8,
|
||||
px: 1.2,
|
||||
py: 0.4,
|
||||
borderRadius: '999px',
|
||||
fontSize: '0.7rem',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 0.6,
|
||||
bgcolor: 'rgba(0, 0, 0, 0.6)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.4)',
|
||||
top: 10,
|
||||
right: 10,
|
||||
color: 'white',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
gap: 1,
|
||||
background:
|
||||
'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)',
|
||||
'&:hover': {
|
||||
transform: 'scale(1.1)',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setPreviewOpen(true);
|
||||
}}
|
||||
sx={{
|
||||
p: 0.3,
|
||||
color: 'white',
|
||||
bgcolor: 'rgba(0,0,0,0.4)',
|
||||
'&:hover': {
|
||||
bgcolor: 'rgba(0,0,0,0.7)',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<VisibilityIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
<VisibilityIcon fontSize="small" />
|
||||
</IconButton>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<CardContent
|
||||
sx={{
|
||||
position: 'relative',
|
||||
zIndex: 1,
|
||||
pt: imageUrl ? '0.9vw' : '1.4vw',
|
||||
pb: '1.3vw',
|
||||
|
||||
flexGrow: 1, // ✅ растягивает середину
|
||||
flexGrow: 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between', // ✅ кнопка уезжает вниз
|
||||
justifyContent: 'space-between',
|
||||
pt: 2,
|
||||
pb: 2,
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h6"
|
||||
color="white"
|
||||
sx={{
|
||||
fontFamily: 'Benzin-Bold',
|
||||
fontSize: '1.05rem',
|
||||
mb: 0.8,
|
||||
}}
|
||||
>
|
||||
{name}
|
||||
</Typography>
|
||||
|
||||
{description && (
|
||||
<Box>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="white"
|
||||
sx={{
|
||||
opacity: 0.75,
|
||||
fontSize: '0.85rem',
|
||||
mb: 1.5,
|
||||
|
||||
minHeight: 40,
|
||||
maxHeight: 40, // ✅ фикс высоты
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
}}
|
||||
>
|
||||
{description}
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
{typeof price === 'number' && (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
fontFamily: 'Benzin-Bold',
|
||||
fontSize: '1.05rem',
|
||||
mb: 1,
|
||||
backgroundImage:
|
||||
'linear-gradient(136deg, rgb(242,113,33), rgb(233,64,87), rgb(138,35,135))',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="white"
|
||||
sx={{ opacity: 0.8, fontSize: '0.85rem' }}
|
||||
>
|
||||
Цена
|
||||
</Typography>
|
||||
<CoinsDisplay
|
||||
value={price}
|
||||
size="small"
|
||||
autoUpdate={false}
|
||||
showTooltip={true}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{type === 'case' && typeof itemsCount === 'number' && (
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="white"
|
||||
sx={{ opacity: 0.6, fontSize: '0.8rem', mb: 1.4 }}
|
||||
>
|
||||
Предметов в кейсе: {itemsCount}
|
||||
{name}
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
{description && (
|
||||
<Typography
|
||||
sx={{
|
||||
color: 'rgba(255,255,255,0.75)',
|
||||
fontSize: '0.85rem',
|
||||
minHeight: 42,
|
||||
maxHeight: 42,
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
{description}
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
{typeof price === 'number' && (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
mt: 1.2,
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{ color: 'rgba(255,255,255,0.7)', fontSize: '0.8rem' }}
|
||||
>
|
||||
Цена
|
||||
</Typography>
|
||||
<CoinsDisplay value={price} size="small" />
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{type === 'case' && typeof itemsCount === 'number' && (
|
||||
<Typography
|
||||
sx={{
|
||||
color: 'rgba(255,255,255,0.6)',
|
||||
fontSize: '0.75rem',
|
||||
mt: 1,
|
||||
}}
|
||||
>
|
||||
Предметов в кейсе: {itemsCount}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Кнопка как в Registration */}
|
||||
<Button
|
||||
variant="contained"
|
||||
fullWidth
|
||||
sx={{
|
||||
mt: 0.5,
|
||||
borderRadius: '999px',
|
||||
py: '0.45vw',
|
||||
color: 'white',
|
||||
background:
|
||||
type === 'case'
|
||||
? 'linear-gradient(135deg, rgb(255, 77, 77), rgb(255, 120, 100))'
|
||||
: 'linear-gradient(135deg, rgb(0, 160, 90), rgb(0, 200, 140))',
|
||||
'&:hover': {
|
||||
background:
|
||||
type === 'case'
|
||||
? 'linear-gradient(135deg, rgba(255, 77, 77, 0.85), rgba(255, 120, 100, 0.9))'
|
||||
: 'linear-gradient(135deg, rgba(0, 160, 90, 0.85), rgba(0, 200, 140, 0.9))',
|
||||
},
|
||||
fontFamily: 'Benzin-Bold',
|
||||
fontSize: '0.9rem',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 0.8,
|
||||
}}
|
||||
disabled={disabled}
|
||||
onClick={onClick}
|
||||
sx={{
|
||||
mt: 2,
|
||||
transition: 'transform 0.3s ease',
|
||||
background:
|
||||
'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)',
|
||||
fontFamily: 'Benzin-Bold',
|
||||
borderRadius: '2.5vw',
|
||||
fontSize: '0.85rem',
|
||||
'&:hover': {
|
||||
transform: 'scale(1.1)',
|
||||
},
|
||||
}}
|
||||
>
|
||||
{buttonText}
|
||||
</Button>
|
||||
|
||||
Reference in New Issue
Block a user