import React, { useState } from ‘react’;
import { Battery } from ‘lucide-react’;
// مكون لرسم خوذة عامل المنجم
const MinerHelmet = () => (
);
// مكون لعرض أيقونة البطارية مع مستوى الشحن
const BatteryIcon = ({ level, onClick }) => {
// تحديد عدد الأجزاء المملوءة في البطارية (بحد أقصى 5)
const filledSegments = Math.min(Math.max(level, 0), 5);
return (
{/* أيقونة البطارية الأساسية */}
{/* أجزاء البطارية الداخلية */}
{[…Array(5)].map((_, i) => (
))}
);
};
// مكون لعرض قسم البطارية مع التسمية
const BatterySection = ({ label }) => {
const [level, setLevel] = useState(0);
// زيادة مستوى البطارية عند النقر
const handleClick = () => {
setLevel((prevLevel) => (prevLevel + 1) % 6);
};
return (
);
};
// المكون الرئيسي لعرض شبكة البطاريات
const BatteryGrid = () => {
const labels = [‘واي فاي 1’, ‘موديل 2’, ‘موديل 3’, ‘موديل 1’, ‘قاعدة 2’, ‘قاعدة 1’, ‘فاي 3’, ‘واي 2′];
// تعريف نمط الخلفية
const backgroundImageStyle = {
backgroundImage: `
linear-gradient(to right, rgba(255,255,255,0.8), rgba(255,255,255,0.8)),
url(“data:image/svg+xml,%3Csvg xmlns=’http://www.w3.org/2000/svg’ width=’100%25′ height=’100%25′ viewBox=’0 0 800 600’%3E%3Cg fill-opacity=’0.2’%3E%3Cpolygon fill=’%23B19CD9′ points=’700 450 750 500 700 550 650 500’/%3E%3Cpolygon fill=’%239370DB’ points=’600 350 700 450 800 350 700 250’/%3E%3Cpolygon fill=’%23E6E6FA’ points=’500 450 600 550 700 450 600 350’/%3E%3Cpolygon fill=’%23B19CD9′ points=’300 250 400 350 500 250 400 150’/%3E%3Cpolygon fill=’%239370DB’ points=’100 450 200 550 300 450 200 350’/%3E%3Cpolygon fill=’%23E6E6FA’ points=’100 250 200 350 300 250 200 150’/%3E%3Cpolygon fill=’%23B19CD9′ points=’0 350 100 450 200 350 100 250’/%3E%3C/g%3E%3C/svg%3E”)
`,
backgroundRepeat: ‘no-repeat’,
backgroundPosition: ‘center’,
backgroundSize: ‘cover’,
};
return (
{/* شبكة البطاريات */}
{labels.map((label, index) => (
))}
{/* أيقونة المُكث في أسفل اليسار */}
);
};
export default BatteryGrid;
