test with mock data
This commit is contained in:
parent
5de76238c3
commit
84851cae4f
@ -13,12 +13,16 @@ const TableElement = ({ element, children }: TableElementProps) => {
|
|||||||
|
|
||||||
const renderTable = () => {
|
const renderTable = () => {
|
||||||
return (
|
return (
|
||||||
<table className="border-collapse">
|
<table className="border-collapse w-full border-spacing-14">
|
||||||
<tbody>
|
<tbody>
|
||||||
{Array.from({ length: rows }).map((_, i) => (
|
{Array.from({ length: rows }).map((_, i) => (
|
||||||
<tr className="border-y-2 border-gray-800" key={i}>
|
<tr className={`border-y-2 border-[#585864] ${i % 2 === 0 && 'bg-[#202021]'}`} key={i}>
|
||||||
{Array.from({ length: cols }).map((_, j) => (
|
{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 && 'text-[#bcbcbc]'} border-[#585864] py-1`}>
|
||||||
|
<div className='ml-4'>
|
||||||
|
{tableData[i][j]}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
))}
|
))}
|
||||||
</tr>
|
</tr>
|
||||||
))}
|
))}
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
import { type HistoryWidget as HistoryWidgetType } from 'src/types/widget';
|
import { type HistoryWidget as HistoryWidgetType } from 'src/types/widget';
|
||||||
|
import TableElement from '../Element/Simple/TableElement';
|
||||||
|
|
||||||
type HistoryWidgetProps = {
|
type HistoryWidgetProps = {
|
||||||
widget: HistoryWidgetType;
|
widget: HistoryWidgetType;
|
||||||
@ -13,17 +14,90 @@ const HistoryWidget = ({ widget }: HistoryWidgetProps) => {
|
|||||||
<div
|
<div
|
||||||
key={id}
|
key={id}
|
||||||
style={{ top: y, left: x, width: w, height: h }}
|
style={{ top: y, left: x, width: w, height: h }}
|
||||||
className={`absolute bg-[#2D2D30] text-white grid grid-cols-12 items-start justify-start p-4`}
|
className={`absolute text-white `}
|
||||||
>
|
>
|
||||||
<div className="col-span-1 flex flex-col h-full">
|
<div className="grid grid-cols-12 items-start justify-start p-4 gap-4">
|
||||||
<span className="bg-teal-300 flex flex-row py-1 mx-4 rounded-md items-center justify-center">
|
|
||||||
4
|
|
||||||
</span>
|
|
||||||
<div className="border-gray-200 h-full w-1/2 border-r-4 my-4 flex flex-row items-center justify-center rounded-sm" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-span-11 bg-gray-300">message content</div>
|
{/* TODO : extract out into HistoryMessageElement. Currently is mock data to test look */}
|
||||||
<div className="col-span-1 flex flex-col">test</div>
|
|
||||||
|
<div className="col-span-1 flex flex-col h-full">
|
||||||
|
<span className="bg-[#19debb] text-black text-xl font-bold flex flex-row py-1 mx-3 rounded-md items-center justify-center">
|
||||||
|
4
|
||||||
|
</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]">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>
|
||||||
|
|
||||||
|
<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>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user