@teamsparta/chat-ui/src/lib/component/ProfileHeader.style.js

simple chat-ui

import styled from "@emotion/styled";
import { keyframes } from "@emotion/react";
import {
  additional,
  neutralDay,
  wCaption1,
  wTitle4,
} from "@teamsparta/design-system";

const blinker = keyframes`
  //0% { opacity: 1; }
  50% { opacity: 0; }
  //100% { opacity: 1; }

`;
export const ProfileHeaderContainer = styled.div`
  box-sizing: border-box;
  display: flex;
  padding: 16px;
  width: 100%;
  justify-content: start;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid
    ${({ theme }) =>
      theme === "dark" ? neutralDay.gray100 : neutralDay.gray20};
`;

export const ProfileImage = styled.img`
  width: 40px;
  height: 40px;
  border-radius: 100%;
`;

export const ProfileInfoContainer = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
`;

export const ProfileInfo = styled.div`
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
`;

export const Name = styled.div`
  ${wTitle4};
  color: ${({ theme }) =>
    theme === "dark" ? neutralDay.gray5 : neutralDay.gray95};
`;

export const Status = styled.div`
  width: 6px;
  height: 6px;
  border-radius: 100%;
  ${(props) =>
    props.online
      ? `background-color : ${additional.green100};`
      : `background-color : red;`}
  animation: ${blinker} 2.5s linear infinite;
`;
export const Description = styled.div`
  ${wCaption1};
  color: ${({ theme }) =>
    theme === "dark" ? neutralDay.gray60 : neutralDay.gray70};
`;