Refactor reaction types and enhance ArticleCard component

kingRayhan · kingRayhan · commit a45a0a70cf20 · 2025-06-12T12:31:07.000+06:00
- Updated REACTION_TYPE in domain-models.ts to include comments for each reaction type.
- Simplified the ReactionStatus component by removing hardcoded reactions and utilizing dynamic rendering for reactions in ArticleCard.
- Improved the styling of reaction buttons in ArticleCard for better user experience.
- Added SVG files for new reaction types: CRY, FIRE, HAHA, LOVE, UNICORN, WOW.
diff --git a/public/reactions/CRY.svg b/public/reactions/CRY.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><defs><style>.cls-1{fill:#ffce52;}.cls-2{fill:#ffe369;}.cls-3{fill:#ffb32b;}.cls-4{fill:#f6fafd;}.cls-5{fill:#ae2d4c;}.cls-6{fill:#3bc5f6;}.cls-7{fill:#ededed;}.cls-8{fill:#8a293d;}.cls-9{fill:#048ec6;}.cls-10{fill:#273941;}</style></defs><title>22-cry</title><g id="_22-cry" data-name="22-cry"><circle class="cls-1" cx="24" cy="24" r="23"/><path class="cls-2" d="M24,4c12.15,0,22,8.507,22,19h.975a23,23,0,0,0-45.95,0H2C2,12.507,11.85,4,24,4Z"/><path class="cls-3" d="M46,23c0,10.493-9.85,19-22,19S2,33.493,2,23H1.025c-.014.332-.025.665-.025,1a23,23,0,0,0,46,0c0-.335-.011-.668-.025-1Z"/><ellipse class="cls-4" cx="34" cy="5" rx="0.825" ry="1.148" transform="translate(6.43 25.516) rotate(-45.02)"/><ellipse class="cls-4" cx="26.746" cy="3.5" rx="0.413" ry="0.574" transform="translate(5.364 19.945) rotate(-45.02)"/><ellipse class="cls-4" cx="30" cy="4" rx="1.65" ry="2.297" transform="translate(5.965 22.393) rotate(-45.02)"/><path class="cls-4" d="M29,24v1c0,1.11-2.24,2-5,2s-5-.89-5-2V24Z"/><path class="cls-5" d="M29,25v8c0,1.11,0,2-1,2a22.685,22.685,0,0,0-4-1,22.685,22.685,0,0,0-4,1c-1,0-1-.89-1-2V25c0,1.11,2.24,2,5,2S29,26.11,29,25Z"/><path class="cls-6" d="M15,14.18V45.17a22.953,22.953,0,0,1-6-3.75V16l-.08-.18A19.838,19.838,0,0,1,15,14.18Z"/><path class="cls-6" d="M39.08,15.82,39,16V41.42a22.953,22.953,0,0,1-6,3.75V14.18A19.838,19.838,0,0,1,39.08,15.82Z"/><rect class="cls-7" x="19" y="24" width="10" height="1"/><path class="cls-8" d="M24,27c-2.76,0-5-.89-5-2v1c0,1.11,2.24,2,5,2s5-.89,5-2V25C29,26.11,26.76,27,24,27Z"/><path class="cls-8" d="M28,34a22.685,22.685,0,0,0-4-1,22.685,22.685,0,0,0-4,1c-1,0-1-.89-1-2v1c0,1.11,0,2,1,2a22.685,22.685,0,0,1,4-1,22.685,22.685,0,0,1,4,1c1,0,1-.89,1-2V32C29,33.11,29,34,28,34Z"/><path class="cls-9" d="M9,36.893V41.42a22.948,22.948,0,0,0,3,2.19v.013c.441.27.894.523,1.354.763l.081.042c.511.265,1.032.514,1.565.742V40.336a23.024,23.024,0,0,1-3-1.415A21.932,21.932,0,0,1,9,36.893Z"/><path class="cls-9" d="M36,38.921a23.024,23.024,0,0,1-3,1.415V45.17c.533-.228,1.055-.477,1.566-.743l.08-.041c.46-.24.913-.493,1.354-.763V43.61a22.948,22.948,0,0,0,3-2.19V36.893A21.932,21.932,0,0,1,36,38.921Z"/><path class="cls-10" d="M43,19H41c0-1.8-5.076-4-11-4V13C36.252,13,43,15.294,43,19Z"/><path class="cls-10" d="M7,19H5c0-3.706,6.748-6,13-6v2C12.076,15,7,17.2,7,19Z"/></g></svg>
diff --git a/public/reactions/FIRE.svg b/public/reactions/FIRE.svg
@@ -0,0 +1,14 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M21.31 9.161a9.893 9.893 0 0 1 .607 3.423c0 4.982-3.673 9.105-8.459 9.81a9.888 9.888 0 0 0 5.51-2.757 6.963 6.963 0 0 0-.905-4.136c.087 1.798-1.494 2.504-2.344 2.163-.91-.364-.965-.923-1.061-1.9-.034-.34-.072-.733-.154-1.186-.316-1.75-1.532-2.965-3.33-3.5 1.313 3.694-.727 5.055-1.797 5.299-1.092.248-2.189 0-2.314-2.338a6.98 6.98 0 0 0-2.03 5.598 9.89 9.89 0 0 0 5.524 2.76c-4.793-.699-8.474-4.826-8.474-9.813A9.88 9.88 0 0 1 4.44 6.168c-.849 3.087.072 5.024 1.728 4.86C7.65 10.883 8.282 9.57 7.674 7.99c-.583-1.515-.528-3.858 1.36-5.25-.582 2.625.998 4.243 2.723 4.108 1.556-.121 3.038-2.114 1.361-5.323 4.036 2.115 4.181 4.658 4.043 6.88-.02.315-.098.712-.183 1.144-.27 1.368-.61 3.083.637 3.619 1.75.752 3.427-.863 3.695-4.007Z" fill="url(#a)"/>
+    <path d="M18.063 15.499c.087 1.799-1.494 2.504-2.344 2.164-1.229-.492-.9-1.337-1.215-3.087-.316-1.75-1.532-2.965-3.33-3.5 1.313 3.694-.727 5.056-1.797 5.3-1.092.248-2.189-.001-2.314-2.338a6.979 6.979 0 0 0-2.03 5.597A9.88 9.88 0 0 0 12 22.5a9.88 9.88 0 0 0 6.968-2.865 6.963 6.963 0 0 0-.905-4.136Z" fill="url(#b)"/>
+    <defs>
+        <linearGradient id="a" x1="12" y1="1.525" x2="12" y2="22.501" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#FFA271"/>
+            <stop offset="1" stop-color="#F36C24"/>
+        </linearGradient>
+        <linearGradient id="b" x1="12" y1="15.761" x2="12" y2="22.5" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#FFCC49"/>
+            <stop offset="1" stop-color="#FFB649"/>
+        </linearGradient>
+    </defs>
+</svg>
diff --git a/public/reactions/HAHA.svg b/public/reactions/HAHA.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><defs><style>.cls-1{fill:#ffce52;}.cls-2{fill:#273941;}.cls-3{fill:#ae2d4c;}.cls-4{fill:#f6fafd;}.cls-5{fill:#ffe369;}.cls-6{fill:#ffb32b;}.cls-7{fill:#141e21;}.cls-8{fill:#8a293d;}.cls-9{fill:#ededed;}</style></defs><title>05-haha</title><g id="_05-haha" data-name="05-haha"><circle class="cls-1" cx="24" cy="24" r="23"/><path class="cls-2" d="M7.37,29H40.63a12.861,12.861,0,0,1-4.64,6.93C35.87,33.77,30.01,33,24,33c-6.69,0-11.89.77-11.99,2.93A12.861,12.861,0,0,1,7.37,29Z"/><path class="cls-3" d="M35.99,35.93c-.19.15-.39.3-.59.45a19.76,19.76,0,0,1-22.8,0c-.2-.15-.4-.3-.59-.45C12.11,33.77,17.31,33,24,33,30.01,33,35.87,33.77,35.99,35.93Z"/><path class="cls-4" d="M41,26a12.085,12.085,0,0,1-.37,3H7.37A12.085,12.085,0,0,1,7,26c0-1.11,7.6-2,17-2S41,24.89,41,26Z"/><path class="cls-2" d="M37.553,19.9C35.764,19,33.717,19,30,19a1,1,0,0,1-1-1c0-2.265,3.568-5,8-5v2a7.807,7.807,0,0,0-5.419,2c3.058.018,4.963.151,6.866,1.1Z"/><path class="cls-2" d="M10.447,19.9l-.894-1.79c1.9-.951,3.808-1.084,6.866-1.1A7.807,7.807,0,0,0,11,15V13c4.432,0,8,2.735,8,5a1,1,0,0,1-1,1C14.283,19,12.236,19,10.447,19.9Z"/><path class="cls-5" d="M24,4c12.15,0,22,8.507,22,19h.975a23,23,0,0,0-45.95,0H2C2,12.507,11.85,4,24,4Z"/><path class="cls-6" d="M46,23c0,10.493-9.85,19-22,19S2,33.493,2,23H1.025c-.014.332-.025.665-.025,1a23,23,0,0,0,46,0c0-.335-.011-.668-.025-1Z"/><ellipse class="cls-4" cx="37" cy="9" rx="0.825" ry="1.148" transform="translate(4.48 28.81) rotate(-45.02)"/><ellipse class="cls-4" cx="30.746" cy="4.5" rx="0.413" ry="0.574" transform="translate(5.829 23.067) rotate(-45.02)"/><ellipse class="cls-4" cx="34" cy="7" rx="1.65" ry="2.297" transform="translate(5.015 26.102) rotate(-45.02)"/><path class="cls-7" d="M12.933,34.6c-.109-.075-.226-.141-.333-.219-.2-.15-.4-.3-.59-.45A13.4,13.4,0,0,1,8.07,29h-.7a12.861,12.861,0,0,0,4.64,6.93A1.72,1.72,0,0,1,12.933,34.6Z"/><path class="cls-7" d="M35.99,33.93c-.19.15-.39.3-.59.45-.123.089-.257.166-.383.252a1.718,1.718,0,0,1,.973,1.3A12.861,12.861,0,0,0,40.63,29h-.7A13.4,13.4,0,0,1,35.99,33.93Z"/><path class="cls-8" d="M35.017,34.632A20.117,20.117,0,0,1,24,38a20.105,20.105,0,0,1-11.067-3.4,1.72,1.72,0,0,0-.923,1.331c.19.15.39.3.59.45a19.76,19.76,0,0,0,22.8,0c.2-.15.4-.3.59-.45A1.718,1.718,0,0,0,35.017,34.632Z"/><path class="cls-9" d="M40.865,27.758A12.375,12.375,0,0,0,41,26c0-1.11-7.6-2-17-2S7,24.89,7,26a12.387,12.387,0,0,0,.135,1.758C8.148,26.764,15.3,26,24,26S39.852,26.764,40.865,27.758Z"/></g></svg>
diff --git a/public/reactions/LOVE.svg b/public/reactions/LOVE.svg
@@ -0,0 +1,12 @@
+<svg fill="none" height="24" viewBox="0 0 32 32" width="24" xmlns="http://www.w3.org/2000/svg">
+    <linearGradient id="a" gradientUnits="userSpaceOnUse" x1="15.908" x2="15.908" y1="3.199" y2="28.854">
+        <stop offset="0" stop-color="#fd556a"/>
+        <stop offset="1" stop-color="#aa172a"/>
+    </linearGradient>
+    <linearGradient id="b" gradientUnits="userSpaceOnUse" x1="16.443" x2="16.443" y1="4.828" y2="26.958">
+        <stop offset="0" stop-color="#ffdc5d"/>
+        <stop offset="1" stop-color="#ffcc14"/>
+    </linearGradient>
+    <path d="M30.216 11.094a7.894 7.894 0 0 0-7.894-7.895 7.88 7.88 0 0 0-6.414 3.303A7.88 7.88 0 0 0 9.494 3.2 7.894 7.894 0 0 0 1.6 11.094c0 .617.078 1.216.213 1.792 1.096 6.81 8.668 13.996 14.095 15.968 5.426-1.972 13-9.157 14.094-15.967a7.796 7.796 0 0 0 .214-1.793z" fill="url(#a)"/>
+    <path d="m28.986 20.743-3.06-1.132-1.132-3.06a.8.8 0 0 0-1.501 0L22.16 19.61l-3.06 1.133a.8.8 0 0 0 0 1.5l3.06 1.133 1.133 3.06a.8.8 0 0 0 1.5 0l1.133-3.06 3.06-1.133a.8.8 0 0 0 0-1.5zm-18.4-12.8-1.892-.7-.7-1.892a.8.8 0 0 0-1.501 0l-.701 1.892-1.891.7a.8.8 0 0 0 0 1.5l1.892.7.7 1.892a.8.8 0 0 0 1.5 0l.7-1.892 1.893-.7a.8.8 0 0 0 0-1.5z" fill="url(#b)"/>
+</svg>
diff --git a/public/reactions/UNICORN.svg b/public/reactions/UNICORN.svg
@@ -0,0 +1,60 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M13.178 11.2a1.125 1.125 0 1 1 0-2.25 1.125 1.125 0 0 1 0 2.25Z" fill="url(#a)"/>
+    <path d="M17.518 17.126c-.07.384.106.737.391.788.286.052.574-.216.644-.6.07-.385-.106-.738-.391-.79-.286-.052-.574.217-.644.602Z" fill="url(#b)"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="m18.394 14.92-.214-.461c-1.296.094-2.863.67-3.127 1.992-.112.557-.469 1.028-.924 1.413.028.06.053.117.078.174.113.256.218.492.5.788 1.334 1.4 3.325.74 4.093-.619.62-1.098.196-2.003-.406-3.288Zm-.485 2.996c-.285-.052-.46-.405-.39-.789.069-.385.357-.653.643-.602.285.052.46.405.391.79-.07.383-.358.652-.644.6Z" fill="url(#c)"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="m14.475 6.186.002.001c-.298.265-.288.796.038 1.213.322.412.825.556 1.155.345l-.005.01.027-.023a.112.112 0 0 1 .01-.006.081.081 0 0 0 .014-.008.022.022 0 0 0 .006-.007.027.027 0 0 1 .005-.007l.316-.256.006-.003c.178.195.335.395.46.598h.002c.648 1.22.82 2.491.98 3.66.12.893.234 1.727.545 2.433a37.68 37.68 0 0 0 .144.322c-1.296.094-2.863.67-3.127 1.991-.112.558-.469 1.029-.924 1.414-.17-.364-.433-.795-1.25-1.49-1.588-.317-2.563-1.045-2.563-2.552 0 0-.464-.223-1.065 3.505-.156.965-.098 1.93-.036 2.934l.017.294c.063 1.057-.796 1.895-1.855 1.895H3.521a1.969 1.969 0 0 1-1.969-1.969v-7.45 3.902c.464-1.023 1-2.468 1.464-3.714.371-.998.694-1.868.894-2.29 1.643-3.476 4.557-6.5 9.001-5.482a7.492 7.492 0 0 1 1.565.739Zm-1.297 5.012a1.125 1.125 0 1 1 0-2.25 1.125 1.125 0 0 1 0 2.25Z" fill="url(#d)"/>
+    <path d="m16.686 4.673.034-.064.031-.057c.422-.782-.161-.511-.532-.255-.178.124-.855.382-1.522.621.24.148.49.35.75.57.35-.237.775-.516 1.239-.815Z" fill="url(#e)"/>
+    <path d="M13.878 3.958c.292-.127.524-.227.63-.374.678-.928.487.27.415.617a3.887 3.887 0 0 1-.225.717 5.45 5.45 0 0 1-.597 1.05 7.02 7.02 0 0 0-1.19-.522 8.125 8.125 0 0 0-.804-.143c.534-.81 1.249-1.12 1.771-1.345Z" fill="url(#f)"/>
+    <path d="M16.049 7.444c.178.195.335.396.46.599 0 0 1.298.328 1.971-.786.067-.11-.043-.236-.17-.222-.458.052-.9-.097-1.322-.344-.5.406-.852.687-.94.753Z" fill="url(#g)"/>
+    <path d="M15.447 5.487c-.469.316-.805.554-.93.66-.003.003-.006.004-.01.006l-.009.005-.005.007c-.002.003-.003.006-.006.008l-.009.008-.002.003a8.712 8.712 0 0 0-.375-.217 5.44 5.44 0 0 0 .596-1.049c.24.147.49.349.75.57Z" fill="url(#h)"/>
+    <path d="M13.263 4.25a3.192 3.192 0 0 0-1.156 1.053c-3.995-.5-6.655 2.363-8.197 5.625-.2.422-.523 1.292-.894 2.29-.463 1.245-1 2.69-1.463 3.714V9.779c0-1.26.24-2.596 1.032-3.577a5.7 5.7 0 0 1 .96-.933c.117-.09.282.035.244.178-.213.786-.317 1.869-.195 2.64.087-2.288 1.86-3.839 2.552-4.196 1.208-.623 2.4-.58 3.715-.471.113.01.184.142.146.25-.06.171-.11.413-.081.673.28-.51.935-.828 1.36-.741.77.156 1.45.38 1.977.648Z" fill="url(#i)"/>
+    <path d="M13.646 5.738c.152-.238.27-.483.37-.693.118-.247.214-.446.316-.532.202-.168-.068-.17-.068-.17-.44.265-.972.662-1.278 1.129.21.07.432.16.66.266Z" fill="url(#j)"/>
+    <path d="M14.475 6.187h.002c-.298.266-.288.796.038 1.213.322.412.825.556 1.155.346l-.005.01.027-.023a.115.115 0 0 1 .01-.006.081.081 0 0 0 .014-.008.022.022 0 0 0 .006-.007.027.027 0 0 1 .005-.007l.316-.256.006-.004c.11-.084.654-.517 1.38-1.113a2.647 2.647 0 0 1-.634-.613 2.576 2.576 0 0 1-.428-.838l.528-.342c.014.173.1.473.368.831.24.323.479.494.642.57.35-.29.728-.605 1.11-.929a2.775 2.775 0 0 1-.518-.531 2.71 2.71 0 0 1-.385-.707c.17-.106.34-.21.511-.314.044.174.144.408.342.672.18.243.357.397.503.492.36-.309.717-.62 1.05-.92a2.92 2.92 0 0 1-.694-.942l-.005-.014c.176-.101.347-.199.512-.291l.01.027.014.037a2.386 2.386 0 0 0 .566.764l.017.014a.21.21 0 0 1 .015.011c.952-.877 1.619-1.586 1.472-1.733-.417-.416-7.235 4.002-7.909 4.573l-.008.005-.01.006-.005.007-.006.007-.009.008-.003.005Z" fill="url(#k)"/>
+    <path d="m19.824 2.761-.005-.014c.176-.102.347-.2.512-.292.01.022.013.04.024.064a2.357 2.357 0 0 0 .566.765l.033.025-.435.394a2.92 2.92 0 0 1-.695-.942ZM18.497 4.48a2.71 2.71 0 0 1-.385-.707l.511-.314c.044.174.144.408.342.672.18.244.358.398.504.493l-.454.388a2.775 2.775 0 0 1-.518-.532Zm-1.702 1.24a2.576 2.576 0 0 1-.428-.838l.528-.342c.014.172.1.472.368.831.24.323.48.494.642.57l-.475.392a2.646 2.646 0 0 1-.635-.613Z" fill="#EF5E3E"/>
+    <defs>
+        <linearGradient id="a" x1="13.178" y1="8.949" x2="13.178" y2="11.199" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#3A6481"/>
+            <stop offset="1" stop-color="#1E445E"/>
+        </linearGradient>
+        <linearGradient id="b" x1="18.036" y1="16.518" x2="18.036" y2="17.921" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#061722"/>
+            <stop offset="1" stop-color="#051622"/>
+        </linearGradient>
+        <linearGradient id="c" x1="16.617" y1="14.459" x2="16.617" y2="19.605" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#4F46E5"/>
+            <stop offset="1" stop-color="#60379A"/>
+        </linearGradient>
+        <linearGradient id="d" x1="10.329" y1="4.035" x2="10.329" y2="22.449" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#E3F3FF"/>
+            <stop offset="1" stop-color="#749CC4"/>
+        </linearGradient>
+        <linearGradient id="e" x1="10.329" y1="4.035" x2="10.329" y2="22.449" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#E3F3FF"/>
+            <stop offset="1" stop-color="#749CC4"/>
+        </linearGradient>
+        <linearGradient id="f" x1="13.322" y1="3.238" x2="13.322" y2="7.148" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#DBEBF7"/>
+            <stop offset="1" stop-color="#9AB5C8"/>
+        </linearGradient>
+        <linearGradient id="g" x1="10.09" y1="3.355" x2="10.09" y2="16.931" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#4F46E5"/>
+            <stop offset="1" stop-color="#60379A"/>
+        </linearGradient>
+        <linearGradient id="h" x1="10.09" y1="3.355" x2="10.09" y2="16.931" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#4F46E5"/>
+            <stop offset="1" stop-color="#60379A"/>
+        </linearGradient>
+        <linearGradient id="i" x1="10.09" y1="3.355" x2="10.09" y2="16.932" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#4F46E5"/>
+            <stop offset="1" stop-color="#60379A"/>
+        </linearGradient>
+        <linearGradient id="j" x1="13.581" y1="4.344" x2="13.581" y2="6.288" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#3A6481"/>
+            <stop offset="1" stop-color="#1E445E"/>
+        </linearGradient>
+        <linearGradient id="k" x1="18.353" y1="1.549" x2="18.353" y2="7.842" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#FFA271"/>
+            <stop offset="1" stop-color="#F36C24"/>
+        </linearGradient>
+    </defs>
+</svg>
diff --git a/public/reactions/WOW.svg b/public/reactions/WOW.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><defs><style>.cls-1{fill:#ffce52;}.cls-2{fill:#273941;}.cls-3{fill:#141e21;}.cls-4{fill:#f6fafd;}.cls-5{fill:#ffe369;}.cls-6{fill:#ffb32b;}.cls-7{fill:#ae2d4c;}.cls-8{fill:#8a293d;}</style></defs><title>11-wow</title><g id="_11-wow" data-name="11-wow"><circle class="cls-1" cx="24" cy="24" r="23"/><ellipse class="cls-2" cx="33" cy="18" rx="3" ry="4"/><ellipse class="cls-2" cx="15" cy="18" rx="3" ry="4"/><ellipse class="cls-3" cx="33" cy="18" rx="2" ry="3"/><ellipse class="cls-3" cx="15" cy="18" rx="2" ry="3"/><circle class="cls-4" cx="34" cy="17" r="1"/><circle class="cls-4" cx="16" cy="17" r="1"/><path class="cls-2" d="M37,10H35a2,2,0,0,0-4,0H29a4,4,0,0,1,8,0Z"/><path class="cls-2" d="M19,10H17a2,2,0,0,0-4,0H11a4,4,0,0,1,8,0Z"/><path class="cls-5" d="M24,4c12.15,0,22,8.507,22,19h.975a23,23,0,0,0-45.95,0H2C2,12.507,11.85,4,24,4Z"/><path class="cls-6" d="M46,23c0,10.493-9.85,19-22,19S2,33.493,2,23H1.025c-.014.332-.025.665-.025,1a23,23,0,0,0,46,0c0-.335-.011-.668-.025-1Z"/><ellipse class="cls-4" cx="34" cy="5" rx="0.825" ry="1.148" transform="translate(6.43 25.516) rotate(-45.02)"/><ellipse class="cls-4" cx="26.746" cy="3.5" rx="0.413" ry="0.574" transform="translate(5.364 19.945) rotate(-45.02)"/><ellipse class="cls-4" cx="30" cy="4" rx="1.65" ry="2.297" transform="translate(5.965 22.393) rotate(-45.02)"/><ellipse class="cls-2" cx="24" cy="34" rx="6" ry="9"/><path class="cls-7" d="M24,43c2.542,0,4.71-2.375,5.584-5.723a7.985,7.985,0,0,0-11.168,0C19.29,40.625,21.458,43,24,43Z"/><path class="cls-6" d="M24,43c-3.088,0-5.629-3.5-5.961-8-.024.329-.039.662-.039,1,0,4.971,2.686,9,6,9s6-4.029,6-9c0-.338-.015-.671-.039-1C29.629,39.5,27.088,43,24,43Z"/><path class="cls-3" d="M24,27c3.088,0,5.629,3.5,5.961,8,.024-.329.039-.662.039-1,0-4.971-2.686-9-6-9s-6,4.029-6,9c0,.338.015.671.039,1C18.371,30.5,20.912,27,24,27Z"/><path class="cls-8" d="M24,41c-2.132,0-3.989-1.682-5.052-4.2-.184.15-.362.307-.532.473C19.29,40.625,21.458,43,24,43s4.71-2.375,5.584-5.723c-.17-.166-.348-.323-.532-.473C27.989,39.318,26.132,41,24,41Z"/></g></svg>
diff --git a/src/backend/models/domain-models.ts b/src/backend/models/domain-models.ts
@@ -123,12 +123,12 @@ export interface Bookmark {
 }
 
 export type REACTION_TYPE =
-  | "LOVE"
-  | "UNICORN"
-  | "WOW"
-  | "FIRE"
-  | "CRY"
-  | "HAHA";
+  | "LOVE" // ✅
+  | "UNICORN" // ✅
+  | "WOW" // ✅
+  | "FIRE" // ✅
+  | "CRY" // ✅
+  | "HAHA"; // ✅
 
 export interface Reaction {
   resource_id: string;
diff --git a/src/components/ArticleCard.tsx b/src/components/ArticleCard.tsx
diff --git a/src/components/render-props/ReactionStatus.tsx b/src/components/render-props/ReactionStatus.tsx
