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

simple chat-ui

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

export const InputContainer = styled.div`
  box-sizing: border-box;
  width: 100%;
  padding: 8px 16px;
  background-color: ${({ theme }) =>
    theme === "dark" ? neutralDay.gray90 : neutralDay.white};
  display: flex;
  align-items: start;
  justify-content: start;
`;
export const Input = styled.textarea`
  ${wBody2};
  min-height: 26px;
  max-height: 96px;
  color: ${({ theme }) =>
    theme === "dark" ? neutralDay.gray30 : neutralDay.gray100};
  flex-grow: 1;
  background-color: transparent;
  border: 1px solid
    ${({ theme }) => (theme === "dark" ? neutralDay.gray60 : neutralDay.gray30)};
  border-radius: 8px;
  padding: 12px 16px;
  resize: none; /* 사용자가 textarea의 크기를 조정할 수 없게 함 */
  overflow-y: auto; /* 스크롤바는 내용이 넘칠 때만 나타남 */
  box-sizing: content-box;
  height: ${(props) => props.lines * 24 + "px"};

  &::placeholder {
    ${wBody2};
    color: ${neutralDay.gray50};
  }
  &:focus {
    outline: 1px solid ${neutralDay.gray90};
  }
`;

export const Button = styled.div`
  background-color: ${scc.red100};
  border-radius: 100%;
  width: 36px;
  height: 36px;
  margin-top: 8px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 10px;
  opacity: ${(props) => (props.brighter ? 0.3 : 1)};

  &:hover {
    filter: brightness(90%); /* 호버 시 색상을 10% 어둡게 함 */
  }
`;