ADDED: my two storybook items

front/public/tailwind.css

@@ -726,6 +726,10 @@ video {
   border-width: 2px;
 }
 
+.border-4 {
+  border-width: 4px;
+}
+
 .border-b {
   border-bottom-width: 1px;
 }
@@ -912,8 +916,7 @@ video {
 }
 
 .underline {
-  -webkit-text-decoration-line: underline;
-          text-decoration-line: underline;
+  text-decoration-line: underline;
 }
 
 .shadow-lg {
@@ -934,9 +937,9 @@ video {
 }
 
 .transition {
-  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }

front/src/stories/QueueRow2.jsx

@@ -0,0 +1,39 @@
+// ./src/stories/QueueRow2.jsx
+
+import React from "react";
+
+const QueueRowbis = ({arn = undefined, itemCount = undefined, qName = undefined, url = undefined, index = undefined, ...props}) => {
+    if (arn === undefined || arn == null) {
+        arn = '';
+    }
+    if (qName === undefined || qName === null) {
+        qName = '';
+    }
+    if (url !== undefined && url != null && url !== '') {
+        qName = <a href={url}>{qName}</a>;
+    }
+    if (itemCount === undefined || itemCount === null || itemCount === '') {
+        itemCount = '-';
+    }
+    console.table([{arn, itemCount, qName, url}]);
+
+    return (
+        <>
+            <tr className="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100 cursor-pointer">
+                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{index}</td>
+                <td className="text-sm text-gray-900 font-light px-6 py-4">{qName}</td>
+                <td className="text-sm text-gray-900 font-light px-6 py-4">
+                    {arn}
+                </td>
+                <td className="text-sm text-gray-900 font-light px-6 py-4">
+                    {itemCount}
+                </td>
+            </tr>
+            <React.StrictMode />
+        </>
+    )
+}
+
+export {
+    QueueRowbis,
+}

front/src/stories/QueueRow2.stories.jsx

@@ -0,0 +1,46 @@
+import React from "react";
+
+import {QueueRowbis} from "./QueueRow2";
+
+
+export default {
+    component: QueueRowbis,
+    title: "Example/QueueRowbis",
+    argTypes: {
+        backgroundColor: {control: 'color'},
+    },
+}
+
+const Template = (args) => <QueueRowbis {...args} />;
+
+export const Empty = Template.bind({});
+Empty.args = {
+    arn: '',
+    itemCount: '',
+    qName: '',
+    url: '',
+};
+
+export const UnqueriedNoURL = Template.bind({});
+UnqueriedNoURL.args = {
+    arn: 'arn:sqs:eu-west-3:1234567890:main-queue',
+    itemCount: '',
+    qName: 'main-queue',
+    url: '',
+};
+
+export const Unqueried = Template.bind({});
+Unqueried.args = {
+    arn: 'arn:sqs:eu-west-3:1234567890:main-queue',
+    itemCount: '',
+    qName: 'main-queue',
+    url: 'https://sqs.eu-west-3.amazonaws.com/1234567890/main-queue',
+};
+
+export const Queried = Template.bind({});
+Queried.args = {
+    arn: 'arn:sqs:eu-west-3:1234567890:main-queue',
+    itemCount: 25,
+    qName: 'main-queue',
+    url: 'https://sqs.eu-west-3.amazonaws.com/1234567890/main-queue',
+};

front/src/stories/TableRows.jsx

@@ -0,0 +1,24 @@
+// ./src/stories/TableRows.js
+
+import React from 'react';
+import {QueueRowbis} from "./QueueRow2";
+
+const TableRows = ({rows = []}) => {
+    return (
+        <div>
+            {rows.map((row, index) => {
+                return <QueueRowbis key={index}
+                                    index={index+1}
+                                 arn={row.props.arn}
+                                 itemCount={row.props.itemCount}
+                                 qName={row.props.qName}
+                                 url={row.props.url}/>
+            })}
+            <React.StrictMode/>
+        </div>
+    );
+}
+
+export {
+    TableRows,
+}

front/src/stories/TableRows.stories.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import {QueueRowbis} from './QueueRow2';
+import {TableRows} from "./TableRows";
+import {Empty, Queried, Unqueried, UnqueriedNoURL} from './QueueRow2.stories';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'Example/TableRows',
+    component: TableRows,
+    // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+    argTypes: {
+        backgroundColor: {control: 'color'},
+    },
+};
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <TableRows {...args} />;
+
+var allRows = {
+    Empty,
+    Unqueried,
+    UnqueriedNoURL,
+    Queried,
+};
+
+var rows = Object.keys(allRows).map((rowKey, index) => {
+    const rowArgs = allRows[rowKey].args
+    return <QueueRowbis key={index} arn={rowArgs.arn} itemCount={rowArgs.itemCount} qName={rowArgs.qName}
+                     url={rowArgs.url}>{index}</QueueRowbis>
+});
+
+export const AllRowsKinds = Template.bind({});
+AllRowsKinds.args = {rows};