@teamsparta/chat-ui
Version:
simple chat-ui
212 lines (201 loc) • 7.04 kB
JSX
import React, { useState } from "react";
import styled from "@emotion/styled";
const FlexDiv = styled.div`
display: flex;
width: 100%;
padding: 0 46px 0 0;
justify-content: flex-end;
box-sizing: border-box;
margin-top: 12px;
gap: 8px;
`;
const SpanButton = styled.span`
cursor: pointer;
`;
const thumbUp = () => (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="2"
y="6.66565"
width="1.33333"
height="6"
stroke="#C7D2D8"
strokeWidth="1.5"
strokeLinejoin="round"
/>
<path
d="M6 6.96547C6 6.34164 6.21871 5.73755 6.61808 5.25831L9.1972 2.16336C9.28346 2.05985 9.41124 2 9.54598 2V2C9.79673 2 10 2.20327 10 2.45402V4.66667C10 5.40305 10.597 6 11.3333 6H13.3333C13.7015 6 14 6.29848 14 6.66667V8.91304C14 9.1866 13.9159 9.45354 13.759 9.67765L12.0648 12.098C11.8153 12.4544 11.4075 12.6667 10.9725 12.6667H6.66667C6.29848 12.6667 6 12.3682 6 12V6.96547Z"
stroke="#C7D2D8"
strokeWidth="1.5"
strokeLinejoin="round"
/>
</svg>
);
const thumbUpRed = (theme) => {
if (theme === "dark") {
return (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="ActionThumbup">
<g id="Union">
<path
d="M8.62103 1.68322C8.84979 1.40872 9.18866 1.25 9.54598 1.25C10.2109 1.25 10.75 1.78906 10.75 2.45402V4.66667C10.75 4.98883 11.0112 5.25 11.3333 5.25H13.3333C14.1157 5.25 14.75 5.88426 14.75 6.66667V8.91304C14.75 9.34048 14.6185 9.75758 14.3734 10.1078L12.6792 12.528C12.2893 13.085 11.6523 13.4167 10.9725 13.4167H6.66667C5.88426 13.4167 5.25 12.7824 5.25 12V6.96547C5.25 6.16618 5.53022 5.3922 6.04191 4.77817L8.62103 1.68322Z"
fill="#FF6C7A"
/>
<path
d="M1.25 6.66565C1.25 6.25144 1.58579 5.91565 2 5.91565H3.33333C3.74755 5.91565 4.08333 6.25144 4.08333 6.66565V12.6656C4.08333 13.0799 3.74755 13.4156 3.33333 13.4156H2C1.58579 13.4156 1.25 13.0799 1.25 12.6656V6.66565Z"
fill="#FF6C7A"
/>
</g>
</g>
</svg>
);
} else {
return (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.62103 1.68322C8.84979 1.40872 9.18866 1.25 9.54598 1.25C10.2109 1.25 10.75 1.78906 10.75 2.45402V4.66667C10.75 4.98883 11.0112 5.25 11.3333 5.25H13.3333C14.1157 5.25 14.75 5.88426 14.75 6.66667V8.91304C14.75 9.34048 14.6185 9.75758 14.3734 10.1078L12.6792 12.528C12.2893 13.085 11.6523 13.4167 10.9725 13.4167H6.66667C5.88426 13.4167 5.25 12.7824 5.25 12V6.96547C5.25 6.16618 5.53022 5.3922 6.04191 4.77817L8.62103 1.68322Z"
fill="#E8344E"
/>
<path
d="M1.25 6.66565C1.25 6.25144 1.58579 5.91565 2 5.91565H3.33333C3.74755 5.91565 4.08333 6.25144 4.08333 6.66565V12.6656C4.08333 13.0799 3.74755 13.4156 3.33333 13.4156H2C1.58579 13.4156 1.25 13.0799 1.25 12.6656V6.66565Z"
fill="#E8344E"
/>
</svg>
);
}
};
const thumbDown = () => (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="14"
y="9.33337"
width="1.33333"
height="6"
transform="rotate(-180 14 9.33337)"
stroke="#C7D2D8"
strokeWidth="1.33336"
strokeLinejoin="round"
/>
<path
d="M10 9.03451C10 9.65836 9.78129 10.2625 9.38191 10.7417L6.8028 13.8366C6.71654 13.9402 6.58876 14 6.45402 14V14C6.20327 14 6 13.7967 6 13.546L6 11.3334C6 10.597 5.40303 10 4.66664 10L2.66668 10C2.29848 10 2 9.70152 2 9.33332L2 7.08697C2 6.8134 2.08415 6.54645 2.24103 6.32234L3.93522 3.90206C4.18473 3.54562 4.59246 3.33333 5.02756 3.33333L9.33332 3.33333C9.70152 3.33333 10 3.63182 10 4.00001L10 9.03451Z"
stroke="#C7D2D8"
strokeWidth="1.33336"
strokeLinejoin="round"
/>
</svg>
);
const thumbDownBlack = (theme) => {
if (theme === "dark") {
return (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="ActionThumbup">
<rect
id="Rectangle 6344"
x="14"
y="9.3335"
width="1.33333"
height="6"
transform="rotate(-180 14 9.3335)"
stroke="#D7E0E6"
strokeWidth="1.33336"
strokeLinejoin="round"
/>
<path
id="Rectangle 6345"
d="M10 9.03451C10 9.65836 9.78129 10.2625 9.38191 10.7417L6.8028 13.8366C6.71654 13.9402 6.58876 14 6.45402 14C6.20327 14 6 13.7967 6 13.546L6 11.3334C6 10.597 5.40303 10 4.66664 10L2.66668 10C2.29848 10 2 9.70152 2 9.33332L2 7.08697C2 6.8134 2.08415 6.54645 2.24103 6.32234L3.93522 3.90206C4.18473 3.54562 4.59246 3.33333 5.02756 3.33333L9.33332 3.33333C9.70152 3.33333 10 3.63182 10 4.00001L10 9.03451Z"
fill="#D7E0E6"
stroke="#D7E0E6"
strokeWidth="1.33336"
strokeLinejoin="round"
/>
</g>
</svg>
);
} else {
return (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="14"
y="9.33337"
width="1.33333"
height="6"
transform="rotate(-180 14 9.33337)"
stroke="#3A3E41"
strokeWidth="1.33336"
strokeLinejoin="round"
/>
<path
d="M10 9.03451C10 9.65836 9.78129 10.2625 9.38191 10.7417L6.8028 13.8366C6.71654 13.9402 6.58876 14 6.45402 14C6.20327 14 6 13.7967 6 13.546L6 11.3334C6 10.597 5.40303 10 4.66664 10L2.66668 10C2.29848 10 2 9.70152 2 9.33332L2 7.08697C2 6.8134 2.08415 6.54645 2.24103 6.32234L3.93522 3.90206C4.18473 3.54562 4.59246 3.33333 5.02756 3.33333L9.33332 3.33333C9.70152 3.33333 10 3.63182 10 4.00001L10 9.03451Z"
fill="#3A3E41"
stroke="#3A3E41"
strokeWidth="1.33336"
strokeLinejoin="round"
/>
</svg>
);
}
};
const MessageFeedback = ({ theme, handleThumbUp, handleThumbDown }) => {
// TODO: feedback 서버로 보내서 저장하기
const [feedback, setFeedback] = useState(null);
const clickThumbButton = (selected) => {
setFeedback(selected);
};
return (
<FlexDiv>
<SpanButton
onClick={() => {
clickThumbButton("good");
handleThumbUp();
}}
>
{feedback === "good" ? thumbUpRed(theme) : thumbUp()}
</SpanButton>
<SpanButton
onClick={() => {
clickThumbButton("bad");
handleThumbDown();
}}
>
{feedback === "bad" ? thumbDownBlack(theme) : thumbDown()}
</SpanButton>
</FlexDiv>
);
};
export default MessageFeedback;