43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
|
import { Html } from "@react-three/drei";
|
||
|
|
import image from "../../../../assets/image/temp/image.png";
|
||
|
|
const StateWorking = () => {
|
||
|
|
const datas = [
|
||
|
|
{ key: "Oil Tank:", value: "24/341" },
|
||
|
|
{ key: "Oil Refin:", value: 36.023 },
|
||
|
|
{ key: "Transmission:", value: 36.023 },
|
||
|
|
{ key: "Fuel:", value: 36732 },
|
||
|
|
{ key: "Power:", value: 1300 },
|
||
|
|
{ key: "Time:", value: 13 - 9 - 2023 },
|
||
|
|
];
|
||
|
|
return (
|
||
|
|
<Html position={[0, 0, 0]} transform occlude>
|
||
|
|
<div className="stateWorking-wrapper card">
|
||
|
|
<div className="header-wrapper">
|
||
|
|
<div className="header">
|
||
|
|
<span>State</span>
|
||
|
|
<span>
|
||
|
|
Working <span>.</span>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div className="img">
|
||
|
|
<img src={image} alt="" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{/* Data */}
|
||
|
|
<div className="data-wrapper">
|
||
|
|
{datas.map((data, index) => (
|
||
|
|
<div className="data-table" key={index}>
|
||
|
|
<div className="data">{data.key}</div>
|
||
|
|
<div className="key">{data.value}</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Html>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default StateWorking;
|
||
|
|
|
||
|
|
|