Refactor widgets (#270)

* build: remove @vercel/analytics dependency and related imports

* build(deps): update next and react dependencies to latest versions

* build: add Tailwind CSS support and update styles

* fix: adjust audio element display styles and clean up summary component structure

app/layout.jsx

@@ -1,5 +1,4 @@
 import Script from 'next/script';
-import { Analytics } from '@vercel/analytics/react';
 import Main from '../components/layout/main';
 import pjson from '../package.json';
 /* ensure all pages have Bootstrap CSS */
@@ -15,7 +14,6 @@ export default async function LocaleLayout({ children }) {
                 <Main>
                     <main>{children}</main>
                 </Main>
-                <Analytics />
             </body>
         </html>
     );

components/carousel/carousel-item-commentary.jsx

@@ -30,14 +30,14 @@ const CarouselCommentary = ({ comments, model }) => {
                                 <Button variant="secondary" title='Click to see the full comment.' onClick={handleShow} size='sm' style={{ marginLeft: '105px', marginRight:'5px', marginTop: '-16px' }}>
                                     <ChatDotsFill style={{ marginBottom: '5px' }} />
                                 </Button>
-                                <audio controls src={comments.audio} style={{ maxHeight: '24px', overflow: 'hidden', width: '180px' }} />
+                                <audio controls src={comments.audio} style={{ display: 'inline', maxHeight: '24px', overflow: 'hidden', width: '180px' }} />
                             </span>
                             <span className="d-lg-none">
                                 Commentary
                                 <Button variant="secondary" title='Click to see the full comment.' onClick={handleShow} size='sm' style={{ marginLeft: '5px', marginRight: '5px', marginTop: '-16px' }}>
                                     <ChatDotsFill style={{ marginBottom: '5px' }} />
                                 </Button>
-                                <audio controls src={comments.audio} style={{ maxHeight: '24px', overflow: 'hidden', width: '100px' }} />
+                                <audio controls src={comments.audio} style={{ display: 'inline', maxHeight: '24px', overflow: 'hidden', width: '100px' }}/>
                             </span>
                         </div>
                         <div className="card-body " style={cardBodyStyle}>

components/carousel/carousel-item-summary.jsx

@@ -46,23 +46,24 @@ export default CarouselSummary;
 /** Shows five emojis with variable font-size based on their ratio. */
 async function SummaryCategories({ summary }) {
 
-    const total = Object.keys(summary).reduce((a, b) => a + summary[b], 0);
+    const maxCount = Math.max((summary).map(category => category.count).reduce((a, b) => a + b, 0));
 
     return (
-        <div style={{ marginLeft: '-5px' }}>
-            {
-                Object.keys(summary).filter(key => key !== 'total').map((key, index) => {
-
-                    const value = summary[key] || 0;
-                    if (!value) {
-                        return null;
-                    }
-                    const ratio = value / total;
-                    const fontSize = Math.max(1, ratio * 7).toFixed(2) + 'em';
-
-                    return <span key={index} style={{ fontSize, marginLeft: '-5px' }} title={value}>{key}</span >;
-                })
-            }
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+            <div className="space-y-0">
+                {summary.map((category, index) => {
+                    return <div key={index} className="flex items-center w-32 sm:w-64">
+                        <span className="w-6 mr-2">{category.emoji}</span>
+                        <div className="flex-grow bg-gray-200 rounded-full h-4 overflow-hidden">
+                            <div className={`h-full ${category.color}`}
+                                style={{ width: `${(category.count / maxCount) * 100}%` }}
+                            ></div>
+                        </div>
+                        <span className="ml-2 text-sm text-gray-600 w-10">{category.count}</span>
+                    </div>;
+                }
+                )}
+            </div>
         </div>
     );
 }

components/landing/article-table.jsx

@@ -42,14 +42,19 @@ const ArticleTable = async () => {
         getCategoriesSummaryKvGuardian(),
         getCommentsKvGuardian(),
     ]);
+    const summaryWithCounts = Object.keys(summary).map(cat => ({
+        color: getBgColorByEmoji(cat),
+        count: summary[cat],
+        emoji: cat,
+    }));
     // eslint-disable-next-line no-console
     console.log('Loaded %d cached articles', articles.length);
     // eslint-disable-next-line no-console
     console.log('Loaded %d cached categories', Object.keys(summary).length);
 
     return (
         <div className='container px-4 py-0 my-3'>
-            <FrontPageCarousel articles={articles} summary={summary} comments={comments} />
+            <FrontPageCarousel articles={articles} summary={summaryWithCounts} comments={comments} />
             <h2 className="pb-2 border-bottom">{header}</h2>
             <table className="table">
                 <TableHeader />
@@ -153,3 +158,21 @@ async function FrontPageCarouselSkeleton() {
         </Carousel>
     );
 }
+
+// Example
+function getBgColorByEmoji(emoji) {
+    switch (emoji) {
+        case '😭':
+            return 'bg-red-500';
+        case '😔':
+            return 'bg-orange-500';
+        case '😐':
+            return 'bg-yellow-500';
+        case '🙂':
+            return 'bg-lime-500';
+        case '😀':
+            return 'bg-green-500';
+        default:
+            return 'bg-gray-500';
+    }
+}