function CommentBoxWithButton({ index }) { const [comments, setComments] = React.useState([]); const [inputValue, setInputValue] = React.useState(""); const [sortOption, setSortOption] = React.useState("time"); const handleSendComment = ()=>{ if (inputValue.trim()) { const newComment = { text: inputValue, dateTime: new Date(), username: "Username", profilePic: "/path/to/profilepic.jpg", votes: 0, hasUpvoted: false, hasDownvoted: false }; setComments([ ...comments, newComment ]); setInputValue(""); } }; const incrementVote = (index)=>{ const updatedComments = [ ...comments ]; if (!updatedComments[index].hasUpvoted) { updatedComments[index].votes += 1; updatedComments[index].hasUpvoted = true; updatedComments[index].hasDownvoted = false; } setComments(updatedComments); }; const decrementVote = (index)=>{ const updatedComments = [ ...comments ]; if (!updatedComments[index].hasDownvoted) { if (updatedComments[index].votes > 0) { updatedComments[index].votes -= 1; } updatedComments[index].hasDownvoted = true; updatedComments[index].hasUpvoted = false; } setComments(updatedComments); }; const sortedComments = React.useMemo(()=>{ const sorted = [ ...comments ]; if (sortOption === "votes") { sorted.sort((a, b)=>b.votes - a.votes); } else if (sortOption === "relevance") { sorted.sort((a, b)=>a.text.length - b.text.length); } else { sorted.sort((a, b)=>new Date(b.dateTime) - new Date(a.dateTime)); } return sorted; }, [ comments, sortOption ]); return /*#__PURE__*/ React.createElement("div", { className: "h-screen flex flex-col", __source: { fileName: "", lineNumber: 57, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-grow", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "bg-black p-4 w-full", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-orange-500 font-bold", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, "comments"), /*#__PURE__*/ React.createElement("textarea", { className: "bg-white text-black w-full p-2 mt-2", name: `comment-${index}`, rows: "3", value: inputValue, onChange: (e)=>setInputValue(e.target.value), placeholder: "Type your comment here...", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-gray-500 text-white mt-2 px-4 py-2", onClick: handleSendComment, __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, "Send"), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("select", { className: "bg-gray-800 text-white p-2 rounded mb-4", value: sortOption, onChange: (e)=>setSortOption(e.target.value), __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "time", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, "Time"), /*#__PURE__*/ React.createElement("option", { value: "votes", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, "Votes"), /*#__PURE__*/ React.createElement("option", { value: "relevance", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, "Relevance")), sortedComments.map((comment, idx)=>/*#__PURE__*/ React.createElement("div", { key: idx, className: "bg-gray-800 text-white p-2 mt-2 rounded", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: comment.profilePic, alt: "User's profile picture", className: "w-[40px] h-[40px] rounded-full mr-2", __source: { fileName: "", lineNumber: 85, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 90, columnNumber: 17 }, __self: this }, comment.username)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this }, comment.text), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this }, comment.dateTime.toLocaleString()), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mt-2", __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-up cursor-pointer mr-2", onClick: ()=>incrementVote(idx), __source: { fileName: "", lineNumber: 95, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 96, columnNumber: 17 }, __self: this }, comment.votes), /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-down cursor-pointer ml-2", onClick: ()=>decrementVote(idx), __source: { fileName: "", lineNumber: 97, columnNumber: 17 }, __self: this }))))))); } function CommentBoxWithButtonStory() { return /*#__PURE__*/ React.createElement("div", { className: "font-roboto min-h-screen flex justify-center items-end", __source: { fileName: "", lineNumber: 109, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CommentBoxWithButton, { index: 0, __source: { fileName: "", lineNumber: 110, columnNumber: 7 }, __self: this })); } function MainComponent({ animeList }) { const [votes, setVotes] = React.useState(animeList.map(()=>({ up: 0, down: 0 }))); const [commentVisible, setCommentVisible] = React.useState(animeList.map(()=>false)); const handleVote = (index, type)=>{ const newVotes = [ ...votes ]; if (type === 'up') { newVotes[index].up += newVotes[index].up > 0 ? -1 : 1; newVotes[index].down = 0; } else { newVotes[index].down += newVotes[index].down > 0 ? -1 : 1; newVotes[index].up = 0; } setVotes(newVotes); }; const toggleComment = (index)=>{ const newVisibility = [ ...commentVisible ]; newVisibility[index] = !newVisibility[index]; setCommentVisible(newVisibility); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#FFA500] relative flex items-center justify-center min-h-screen p-4", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, Array.from({ length: 6 }).fill('').map((_, i)=>{ const positions = [ { top: '25%', left: '20%' }, { top: '40%', left: '30%' }, { top: '55%', left: '40%' }, { top: '70%', left: '50%' }, { top: '85%', left: '60%' }, { top: '100%', left: '70%' } ]; return /*#__PURE__*/ React.createElement("div", { key: i, className: "absolute rounded-full bg-white opacity-50 mix-blend-overlay", style: { width: '200px', height: '200px', ...positions[i] }, __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }); }), /*#__PURE__*/ React.createElement("div", { className: "relative bg-white bg-opacity-30 p-6 rounded-lg shadow-xl w-full max-w-4xl", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full divide-y divide-gray-200 text-[#ffffff] font-roboto text-lg", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("th", { scope: "col", className: "px-6 py-3 text-left font-medium text-[#ffffff]", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, "Rank"), /*#__PURE__*/ React.createElement("th", { scope: "col", className: "px-6 py-3 text-left font-medium text-[#ffffff]", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, "Anime"), /*#__PURE__*/ React.createElement("th", { scope: "col", className: "px-6 py-3 text-left font-medium text-[#ffffff]", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, "Episodes"), /*#__PURE__*/ React.createElement("th", { scope: "col", className: "px-6 py-3 text-left font-medium text-[#ffffff]", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, "Vote"), /*#__PURE__*/ React.createElement("th", { scope: "col", className: "px-6 py-3 text-left font-medium text-[#ffffff]", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, "Comment"))), /*#__PURE__*/ React.createElement("tbody", { className: "divide-y divide-gray-200", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, animeList.map((anime, index)=>/*#__PURE__*/ React.createElement("tr", { key: anime.rank, __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap", __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, anime.rank), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap", __source: { fileName: "", lineNumber: 61, columnNumber: 17 }, __self: this }, anime.name), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap", __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }, anime.episodes), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap flex items-center", __source: { fileName: "", lineNumber: 63, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `mr-2 ${votes[index].up > 0 ? 'text-red-500' : 'text-[#ffffff]'}`, onClick: ()=>handleVote(index, 'up'), __source: { fileName: "", lineNumber: 64, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-up", __source: { fileName: "", lineNumber: 68, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "mr-2", __source: { fileName: "", lineNumber: 70, columnNumber: 19 }, __self: this }, votes[index].up), /*#__PURE__*/ React.createElement("button", { className: `mr-4 ${votes[index].down > 0 ? 'text-blue-500' : 'text-[#ffffff]'}`, onClick: ()=>handleVote(index, 'down'), __source: { fileName: "", lineNumber: 71, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-down", __source: { fileName: "", lineNumber: 75, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 77, columnNumber: 19 }, __self: this }, votes[index].down)), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap", __source: { fileName: "", lineNumber: 79, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>toggleComment(index), __source: { fileName: "", lineNumber: 80, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/speech-bubble.png", alt: "speech bubble icon", className: "w-[20px] h-[20px]", __source: { fileName: "", lineNumber: 81, columnNumber: 21 }, __self: this })), commentVisible[index] && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-opacity-50 bg-black flex items-center justify-center z-50", __source: { fileName: "", lineNumber: 84, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement(CommentBoxWithButton, { index: index, __source: { fileName: "", lineNumber: 85, columnNumber: 23 }, __self: this }))))))))); } function StoryComponent() { const animeList = [ { rank: 1, name: "Attack on Titan", episodes: 75 }, { rank: 2, name: "One Piece", episodes: 1000 }, { rank: 3, name: "My Hero Academia", episodes: 88 }, { rank: 4, name: "Sword Art Online", episodes: 96 }, { rank: 5, name: "Fullmetal Alchemist: Brotherhood", episodes: 64 }, { rank: 6, name: "Naruto Shippuden", episodes: 500 }, { rank: 7, name: "Demon Slayer", episodes: 26 }, { rank: 8, name: "Death Note", episodes: 37 }, { rank: 9, name: "Fairy Tail", episodes: 328 }, { rank: 10, name: "Bleach", episodes: 366 } ]; return /*#__PURE__*/ React.createElement(MainComponent, { animeList: animeList, __source: { fileName: "", lineNumber: 113, columnNumber: 5 }, __self: this }); }

Rank	Anime	Episodes
1	Attack on Titan	75
2	One Piece	1000
3	My Hero Academia	88
4	Sword Art Online	96
5	Fullmetal Alchemist: Brotherhood	64
6	Naruto Shippuden	500
7	Demon Slayer	26
8	Death Note	37
9	Fairy Tail	328
10	Bleach	366