82 lines
1.9 KiB
JavaScript
82 lines
1.9 KiB
JavaScript
import React from 'react';
|
|
import { URLs } from "../../__data__/urls";
|
|
|
|
import styled from "styled-components";
|
|
|
|
const Card = (props) => {
|
|
const interlocutorId = props.id
|
|
|
|
const hexToRgb = (hex) => {
|
|
hex = hex.replace(/^#/, '');
|
|
|
|
let r = parseInt(hex.slice(0, 2), 16);
|
|
let g = parseInt(hex.slice(2, 4), 16);
|
|
let b = parseInt(hex.slice(4, 6), 16);
|
|
|
|
return `${r}, ${g}, ${b}`;
|
|
}
|
|
|
|
const handleClick = (event, id) => {
|
|
localStorage.setItem('interlocutorId', id);
|
|
};
|
|
|
|
const StyledCard = styled.div`
|
|
box-shadow: 0 10px 40px rgba(176, 175, 189, 0.85);
|
|
|
|
padding: 2vw;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
border-radius: 2vw;
|
|
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
|
|
background-color: ${props => props.color
|
|
? `rgba(${hexToRgb(props.color)}, 0.63)`
|
|
: 'rgba(255, 255, 255, 0.63)'};
|
|
|
|
transition: box-shadow 0.3s ease-in;
|
|
|
|
div, h2 {
|
|
transition: color 0.3s ease-in;
|
|
}
|
|
|
|
h2 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
&:hover {
|
|
box-shadow: 0 10px 40px rgb(${hexToRgb(props.color)});
|
|
cursor: pointer;
|
|
|
|
div, h2 {
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 800px) {
|
|
flex-direction: column;
|
|
|
|
border-radius: 2vh;
|
|
padding: 5vw;
|
|
}
|
|
`
|
|
|
|
return (
|
|
<a
|
|
href={URLs.chat.url}
|
|
className="ChatCard"
|
|
onClick={(event) => handleClick(event, interlocutorId)}
|
|
>
|
|
<StyledCard color={props.color}>
|
|
<h2>{props.name}</h2>
|
|
<div className="lastMessageStyle">{props.lastMessage}</div>
|
|
</StyledCard>
|
|
</a>
|
|
);
|
|
};
|
|
|
|
export default Card;
|