diff --git a/src/components/Element/Simple/TableElement.tsx b/src/components/Element/Simple/TableElement.tsx
index 16e99ab..2c2c491 100644
--- a/src/components/Element/Simple/TableElement.tsx
+++ b/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 (
-
+
{Array.from({ length: rows }).map((_, i) => (
-
+
{Array.from({ length: cols }).map((_, j) => (
- {tableData[i][j]} |
+ 0 ? 'border-l-2' : 'border-x-0'} ${j === 0 && leftLabelColor} ${borderColor} py-1`}
+ style={{ width: `${100 / cols}%` }}
+ >
+ {tableData[i][j]}
+ |
))}
))}
diff --git a/src/components/Widget/HistoryWidget.tsx b/src/components/Widget/HistoryWidget.tsx
index 02458ad..d78b244 100644
--- a/src/components/Widget/HistoryWidget.tsx
+++ b/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 (
- History Widget
+
+ {/* TODO : extract out into HistoryMessageElement. Currently is mock data to test look */}
+
+
+
+
+
+
+
+
ACA-7
+ Request to attack
+
+
Approval for kinetic attack
+
+
+
+
',
+ modality: 'visual',
+ h: 3,
+ w: 4,
+
+ type: 'table',
+ rows: 4,
+ cols: 2,
+ tableData: [
+ ['location', '34N, 118W'],
+ ['priority', 'high'],
+ ['threat-level', 'high'],
+ ['col.damage', '45%'],
+ ],
+ }}
+ />
+
+
+
+
+ {/* to be removed */}
+
+
+
+
+
+
+
Update
+ Threat Level High
+
+
+
+
+
+
',
+ modality: 'visual',
+ h: 3,
+ w: 4,
+
+ type: 'table',
+ rows: 2,
+ cols: 2,
+ tableData: [
+ ['priority', 'high'],
+ ['threat-level', 'high'],
+ ],
+ }}
+ />
+
+
+
+
);
};
diff --git a/tailwind.config.js b/tailwind.config.js
index 3a1cd95..834dfde 100644
--- a/tailwind.config.js
+++ b/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: [],
};