1const SignalBar = (props: { signal: number }) => {
2 const { signal } = props
3 if (signal < 0 && signal > -35) {
4 return (
5 <div className="flex h-7 w-10 items-end justify-center self-center">
6 <div className=" inline-block w-1/5 border border-gray-600 h-[20%] bg-[#16a085] "></div>
7 <div className=" inline-block w-1/5 border border-gray-600 h-[40%] bg-[#16a085] "></div>
8 <div className=" inline-block w-1/5 border border-gray-600 h-[60%] bg-[#16a085] "></div>
9 <div className=" inline-block w-1/5 border border-gray-600 h-[80%] bg-[#16a085] "></div>
10 <div className=" inline-block w-1/5 border border-gray-600 h-[99%] bg-[#16a085] "></div>
11 </div>
12 )
13 } else if (signal < -35 && signal > -50) {
14 return (
15 <div className="flex h-7 w-10 items-end justify-center self-center">
16 <div className=" inline-block w-1/5 border border-gray-600 h-[20%] bg-[#16a085]"></div>
17 <div className=" inline-block w-1/5 border border-gray-600 h-[40%] bg-[#16a085]"></div>
18 <div className=" inline-block w-1/5 border border-gray-600 h-[60%] bg-[#16a085]"></div>
19 <div className=" inline-block w-1/5 border border-gray-600 h-[80%] bg-[#16a085]"></div>
20 <div className=" inline-block w-1/5 border border-gray-600 h-[99%]"></div>
21 </div>
22 )
23 } else if (signal < -50 && signal > -60) {
24 return (
25 <div className="flex h-7 w-10 items-end justify-center self-center">
26 <div className="inline-block w-1/5 border border-gray-600 h-[20%] bg-yellow-300/80"></div>
27 <div className="inline-block w-1/5 border border-gray-600 h-[40%] bg-yellow-300/80"></div>
28 <div className="inline-block w-1/5 border border-gray-600 h-[60%] bg-yellow-300/80"></div>
29 <div className="inline-block w-1/5 border border-gray-600 h-[80%]"></div>
30 <div className="inline-block w-1/5 border border-gray-600 h-[99%]"></div>
31 </div>
32 )
33 } else if (signal < -60 && signal > -75) {
34 return (
35 <div className="flex h-7 w-10 items-end justify-center self-center">
36 <div className="inline-block w-1/5 border border-gray-600 h-[20%] bg-[#e74c3c]"></div>
37 <div className="inline-block w-1/5 border border-gray-600 h-[40%] bg-[#e74c3c]"></div>
38 <div className="inline-block w-1/5 border border-gray-600 h-[60%]"></div>
39 <div className="inline-block w-1/5 border border-gray-600 h-[80%]"></div>
40 <div className="inline-block w-1/5 border border-gray-600 h-[99%]"></div>
41 </div>
42 )
43 } else {
44 return (
45 <div className="flex h-7 w-10 items-end justify-center self-center">
46 <div className="inline-block w-1/5 border border-gray-600 h-[20%] bg-[#e74c3c]"></div>
47 <div className="inline-block w-1/5 border border-gray-600 h-[40%]"></div>
48 <div className="inline-block w-1/5 border border-gray-600 h-[60%]"></div>
49 <div className="inline-block w-1/5 border border-gray-600 h-[80%]"></div>
50 <div className="inline-block w-1/5 border border-gray-600 h-[99%]"></div>
51 </div>
52 )
53 }
54}
55export default SignalBar