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

simple chat-ui

import styled from "@emotion/styled";
import { neutralDay, scc, wBody4, wCaption2 } from "@teamsparta/design-system";

export const ChatArea = styled.div`
  box-sizing: border-box;
  background-color: ${({ theme }) => (theme === "dark" ? neutralDay.gray100 : neutralDay.gray0)};
  padding : 24px 16px;
  width : 100%;
  overflow: scroll;
  flex-grow: 1;
  // 스크롤바 숨기기
  &::-webkit-scrollbar {
    display: none; // Webkit 브라우저용(예: Chrome, Safari)
  }

  -ms-overflow-style: none; // IE, Edge 브라우저용
  scrollbar-width: none; // Firefox 브라우저용
]
`;
export const DateTextContainer = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
`;
export const DateText = styled.div`
  padding: 24px 0;
  display: flex;
  align-items: center;
  ${wCaption2};
  color: ${neutralDay.gray60};
`;
export const DateTextLine = styled.div`
  content: "";
  flex-grow: 1; // 부모의 남은 공간을 채우도록 설정
  height: 1px;
  background-color: ${({ theme }) =>
    theme === "dark" ? neutralDay.gray90 : neutralDay.gray20};
  margin: 0 12px; // 텍스트와의 간격을 위해
`;
export const PeerChatBubbleContainer = styled.div`
  display: flex;
  justify-content: start;
  align-items: start;
  margin-bottom: 24px;
  width: fit-content;
`;
export const ColumnContainer = styled.div`
  display: flex;
  flex-direction: column;
  width: fit-content;
  height: 100%;
`;
export const FlexContainer = styled.div`
  display: flex;
  align-items: end;
`;
export const UserChatBubbleContainer = styled.div`
  display: flex;
  justify-content: end;
  align-items: end;
  margin-bottom: 24px;
`;
export const CustomChatBubbleContainer = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
`;
export const ProfileImage = styled.img`
  width: 28px;
  height: 28px;
  border-radius: 100%;
  margin-right: 8px;
`;

export const WhiteChatBubble = styled.div`
  padding: 12px 16px;
  background-color: ${({ theme }) =>
    theme === "dark" ? neutralDay.gray95 : neutralDay.white};
  border-radius: 8px;
  border: 1px solid
    ${({ theme }) => (theme === "dark" ? neutralDay.gray90 : neutralDay.gray20)};
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  ${wBody4};

  white-space: pre-wrap;
  word-break: break-word;
  color: ${({ theme }) =>
    theme === "dark" ? neutralDay.gray5 : neutralDay.gray100};
  box-shadow: ${({ theme }) =>
    theme !== "dark" && `0 0 8px 0 ${neutralDay.gray10}`};
`;
export const RedChatBubble = styled.div`
  padding: 12px 16px;
  background: ${({ theme }) =>
    theme === "dark"
      ? `${neutralDay.gray5}`
      : `linear-gradient(#fff6f8 0%, #fff1f4 100%)`};
  border-radius: 8px;
  border: 1px solid ${({ theme }) => theme !== "dark" && `${scc.red25}`};
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  justify-content: center;

  ${wBody4};
  white-space: pre-wrap;
  word-break: break-word;

  box-shadow: ${({ theme }) =>
    theme !== "dark" && `0 0 8px 0 ${neutralDay.gray10}`};
`;
export const TimeStamp = styled.div`
  margin: 0 8px;
  font-size: 12px;
  ${wCaption2};
  color: ${neutralDay.gray50};
`;

export const InnerButton = styled.div``;