Tristan Yang
42 lines
914 B
TypeScript
42 lines
914 B
TypeScript
import { FC } from "react";
|
|
import styled from "styled-components";
|
|
import { NavLink, useLocation } from "react-router-dom";
|
|
import Avatar from "../../common/component/Avatar";
|
|
import { useAppSelector } from "../../app/store";
|
|
|
|
const StyledWrapper = styled.div`
|
|
padding: 10px 12px;
|
|
.avatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
img {
|
|
object-fit: cover;
|
|
border-radius: 50%;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
`;
|
|
|
|
interface Props {
|
|
uid: number;
|
|
}
|
|
|
|
const User: FC<Props> = ({ uid }) => {
|
|
const { pathname } = useLocation();
|
|
const user = useAppSelector((store) => store.users.byId[uid]);
|
|
if (!user) return null;
|
|
|
|
return (
|
|
<StyledWrapper>
|
|
<NavLink to={`/setting?nav=my_account&f=${pathname}`}>
|
|
<div className="avatar">
|
|
<Avatar src={user.avatar} name={user.name} />
|
|
</div>
|
|
</NavLink>
|
|
</StyledWrapper>
|
|
);
|
|
};
|
|
|
|
export default User;
|