mirror of https://github.com/knative/docs.git
65 lines
2.3 KiB
JavaScript
65 lines
2.3 KiB
JavaScript
import Emoji from "./Emoji";
|
|
|
|
const CommentDisplay = ({ comment }) => {
|
|
// Assume receiving a comment object
|
|
let emoji;
|
|
if (comment.emotion === "positive") {
|
|
emoji = "😃";
|
|
} else if (comment.emotion === "neutral") {
|
|
emoji = "😐";
|
|
} else {
|
|
emoji = "😡";
|
|
}
|
|
return (
|
|
<div className="flex my-4 p-4 justify-center align-middle items-center">
|
|
<div className="comment-display w-full w-7/12 flex flex-row rounded-lg p-4 bg-gray-800 text-white dark:bg-white dark:text-black">
|
|
<div className="flex items-center justify-center md:w-1/12">
|
|
<img
|
|
src={comment.avatar}
|
|
alt="Avatar"
|
|
className="rounded-full w-8 h-8"
|
|
/>
|
|
</div>
|
|
<div className="md:w-3/12 flex items-center content-center text-gray-200 dark:text-black">
|
|
{comment.time}
|
|
</div>
|
|
<div className="md:w-9/12 ">
|
|
<span className="h-full flex items-center content-center">
|
|
{comment.text}
|
|
</span>
|
|
</div>
|
|
<div className="md:w-1/12 text-4xl flex">
|
|
<Emoji symbol={emoji} label={comment.emotion} size="text-2xl" />
|
|
</div>
|
|
<div className="md:w-1/12 text-l flex ">
|
|
<button
|
|
type="button"
|
|
className="text-white-700 border border-white-700 hover:bg-white-700 hover:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-full text-sm p-2.5 text-center inline-flex items-center dark:border-blue-800 dark:text-blue-800 dark:hover:text-white dark:focus:ring-blue-800 dark:hover:bg-white"
|
|
disabled={true}
|
|
>
|
|
<svg
|
|
className="w-6 h-6 text-white-800 dark:text-black"
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke="currentColor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M5 7h14m-9 3v8m4-8v8M10 3h4a1 1 0 0 1 1 1v3H9V4a1 1 0 0 1 1-1ZM6 7h12v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7Z"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CommentDisplay;
|