merge ui-convo to ui
This commit is contained in:
commit
cab783ff2f
@ -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>
|
||||
))}
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
@ -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: [],
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user