merge ui-convo to ui

src/components/Element/Simple/TableElement.tsx

@@ -6,19 +6,40 @@ type TableElementProps = {
   // children for nested elements that Tom mentioned.
   children?: ReactNode;
   // and more props to perhaps control position of the children
+
+  borderColor?: string;
+  evenAlternatingColor?: string;
+  oddAlternatingColor?: string;
+  leftLabelColor?: string;
 };
 
-const TableElement = ({ element, children }: TableElementProps) => {
+const TableElement = ({
+  element,
+  children,
+  borderColor = 'border-[#585864]',
+  evenAlternatingColor = 'bg-[#202021]',
+  oddAlternatingColor = 'bg-[rgba(0,0,0,0)]',
+  leftLabelColor = 'text-[#bcbcbc]',
+}: TableElementProps) => {
   const { rows, cols, tableData } = element;
 
   const renderTable = () => {
     return (
-      <table className="border-collapse">
+      <table className="border-collapse w-full">
         <tbody>
           {Array.from({ length: rows }).map((_, i) => (
-            <tr className="border-y-2 border-gray-800" key={i}>
+            <tr
+              className={`border-y-2 ${borderColor} ${i % 2 === 0 ? evenAlternatingColor : oddAlternatingColor}`}
+              key={i}
+            >
               {Array.from({ length: cols }).map((_, j) => (
-                <td key={j}>{tableData[i][j]}</td>
+                <td
+                  key={j}
+                  className={`${j > 0 ? 'border-l-2' : 'border-x-0'} ${j === 0 && leftLabelColor} ${borderColor} py-1`}
+                  style={{ width: `${100 / cols}%` }}
+                >
+                  <div className="ml-6">{tableData[i][j]}</div>
+                </td>
               ))}
             </tr>
           ))}

src/components/Widget/HistoryWidget.tsx

@@ -1,4 +1,5 @@
 import { type HistoryWidget as HistoryWidgetType } from 'src/types/widget';
+import TableElement from '../Element/Simple/TableElement';
 
 type HistoryWidgetProps = {
   widget: HistoryWidgetType;
@@ -7,13 +8,96 @@ type HistoryWidgetProps = {
 const HistoryWidget = ({ widget }: HistoryWidgetProps) => {
   const { id, x, y, w, h, elements } = widget;
 
+  console.log('elements: ', elements);
+
   return (
     <div
       key={id}
       style={{ top: y, left: x, width: w, height: h }}
-      className={`absolute bg-[#2D2D30] text-white flex items-center justify-center`}
+      className={`absolute text-white `}
     >
-      History Widget
+      <div className="grid grid-cols-12 items-start justify-start p-4 gap-4">
+        {/* TODO : extract out into HistoryMessageElement. Currently is mock data to test look */}
+
+        <div className="col-span-1 flex flex-col h-full">
+          <span className="bg-turquoise text-black text-xl font-bold flex flex-row py-1 mx-2 rounded-md items-center justify-center">
+            4
+          </span>
+          <div className="border-convo-bar h-full w-1/2 border-r-4 mt-4 flex flex-row items-center justify-center rounded-sm" />
+        </div>
+
+        <div className="col-span-11 bg-convo-bg h-fit p-4 rounded-lg drop-shadow-[0_4px_4px_rgba(0,0,0,0.5)]">
+          <div className="grid grid-cols-6">
+            <div className="col-span-2 flex flex-col gap-5">
+              <div className="font-semibold text-xl">
+                <div className="text-muted-gray">ACA-7</div>
+                Request to attack
+              </div>
+              <div className="font-normal">Approval for kinetic attack</div>
+            </div>
+
+            <div className="col-span-4 w-full">
+              <TableElement
+                element={{
+                  id: 'convoID_<el.index>',
+                  modality: 'visual',
+                  h: 3,
+                  w: 4,
+
+                  type: 'table',
+                  rows: 4,
+                  cols: 2,
+                  tableData: [
+                    ['location', '34N, 118W'],
+                    ['priority', 'high'],
+                    ['threat-level', 'high'],
+                    ['col.damage', '45%'],
+                  ],
+                }}
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* to be removed */}
+        <div className="col-span-1 flex flex-col h-full">
+          <span className="bg-[#2d2d30] text-white text-xl font-bold flex flex-row py-1 mx-3 rounded-md items-center justify-center">
+            3
+          </span>
+          <div className="border-[#656566] h-full w-1/2 border-r-4 mt-4 flex flex-row items-center justify-center rounded-sm" />
+        </div>
+
+        <div className="col-span-11 bg-[#252526] h-fit p-4 rounded-lg drop-shadow-[0_4px_4px_rgba(0,0,0,0.5)]">
+          <div className="grid grid-cols-6">
+            <div className="col-span-2 flex flex-col gap-5">
+              <div className="font-semibold text-xl">
+                <div className="text-[#97979d]">Update</div>
+                Threat Level High
+              </div>
+              <div className="font-normal"></div>
+            </div>
+
+            <div className="col-span-4 w-full">
+              <TableElement
+                element={{
+                  id: 'convoID_<el.index>',
+                  modality: 'visual',
+                  h: 3,
+                  w: 4,
+
+                  type: 'table',
+                  rows: 2,
+                  cols: 2,
+                  tableData: [
+                    ['priority', 'high'],
+                    ['threat-level', 'high'],
+                  ],
+                }}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   );
 };

tailwind.config.js

@@ -12,6 +12,15 @@ const config = {
     fontFamily: {
       sans: ['Roboto Condensed', 'system-ui', 'sans-serif'],
     },
+    colors: {
+      ...require('tailwindcss/colors'),
+      turquoise: "#19debb",
+      "muted-gray": "#97979d",
+      convo: {
+        bar: "#656566",
+        bg: "#252526",
+      },
+    },
   },
   plugins: [],
 };