117 lines
2.3 KiB
TypeScript
117 lines
2.3 KiB
TypeScript
import styled from '@emotion/styled'
|
||
import { css, keyframes } from '@emotion/react'
|
||
|
||
// Правильное определение анимации с помощью keyframes
|
||
const fadeIn = keyframes`
|
||
from {
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
}
|
||
`
|
||
|
||
const pulse = keyframes`
|
||
0% {
|
||
box-shadow: 0 0 0 0 rgba(72, 187, 120, 0.4);
|
||
}
|
||
70% {
|
||
box-shadow: 0 0 0 10px rgba(72, 187, 120, 0);
|
||
}
|
||
100% {
|
||
box-shadow: 0 0 0 0 rgba(72, 187, 120, 0);
|
||
}
|
||
`
|
||
|
||
export const Avatar = styled.img`
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 12px;
|
||
object-fit: cover;
|
||
transition: transform 0.3s ease;
|
||
`
|
||
|
||
export const NameOverlay = styled.div`
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
padding: 8px;
|
||
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
|
||
color: white;
|
||
border-bottom-left-radius: 12px;
|
||
border-bottom-right-radius: 12px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
text-align: center;
|
||
opacity: 0.9;
|
||
transition: opacity 0.3s ease;
|
||
|
||
.chakra-ui-dark & {
|
||
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
|
||
}
|
||
`
|
||
|
||
// Стили без интерполяций компонентов
|
||
export const Wrapper = styled.div<{ warn?: boolean; width?: string | number; position?: string }>`
|
||
list-style: none;
|
||
position: relative;
|
||
border-radius: 12px;
|
||
width: 100%;
|
||
aspect-ratio: 1;
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
animation: ${fadeIn} 0.5s ease;
|
||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
|
||
&:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
&:hover img {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
&:hover > div:last-of-type:not(button) {
|
||
opacity: 1;
|
||
}
|
||
|
||
&.recent {
|
||
animation: ${pulse} 1.5s infinite;
|
||
border: 2px solid var(--chakra-colors-green-400);
|
||
}
|
||
|
||
.chakra-ui-dark & {
|
||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||
|
||
&.recent {
|
||
border: 2px solid var(--chakra-colors-green-300);
|
||
}
|
||
}
|
||
|
||
${({ width }) =>
|
||
width
|
||
? css`
|
||
width: ${width};
|
||
`
|
||
: ''}
|
||
|
||
${({ position }) =>
|
||
position
|
||
? css`
|
||
position: ${position};
|
||
`
|
||
: ''}
|
||
|
||
${(props) =>
|
||
props.warn
|
||
? css`
|
||
opacity: 0.7;
|
||
filter: grayscale(0.8);
|
||
`
|
||
: ''}
|
||
`
|
||
|