2025-03-25 06:17:41 +00:00
|
|
|
import { Html } from "@react-three/drei";
|
2025-03-28 13:43:20 +00:00
|
|
|
// import image from "../../../../assets/image/temp/image.png";
|
|
|
|
|
interface StateWorkingProps {
|
|
|
|
|
position: [number, number, number];
|
|
|
|
|
}
|
|
|
|
|
const StateWorking: React.FC<StateWorkingProps> = ({ position }) => {
|
2025-03-25 06:17:41 +00:00
|
|
|
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 (
|
2025-03-28 13:43:20 +00:00
|
|
|
<Html position={[position[0], position[1], position[2]]}
|
|
|
|
|
scale={[0.5, 0.5, 0.5]}
|
|
|
|
|
transform
|
|
|
|
|
sprite>
|
2025-03-25 06:17:41 +00:00
|
|
|
<div className="stateWorking-wrapper card">
|
|
|
|
|
<div className="header-wrapper">
|
|
|
|
|
<div className="header">
|
|
|
|
|
<span>State</span>
|
|
|
|
|
<span>
|
|
|
|
|
Working <span>.</span>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="img">
|
2025-03-28 13:43:20 +00:00
|
|
|
{/* <img src={image} alt="" /> */}
|
2025-03-25 06:17:41 +00:00
|
|
|
</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;
|
|
|
|
|
|
|
|
|
|
|
