homeio

1"use client";
2
3import { cn } from "@/lib/utils";
4
5export function EthernetIcon({ className }: { className?: string }) {
6  return (
7    <svg
8      viewBox="0 0 20 20"
9      fill="none"
10      aria-hidden="true"
11      className={cn("size-4", className)}
12    >
13      {/* Horizontal bus */}
14      <path d="M3 10h14" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
15      {/* Center drop */}
16      <path d="M10 10v4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
17      {/* Left drop */}
18      <path d="M5.5 10v3" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
19      {/* Right drop */}
20      <path d="M14.5 10v3" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
21      {/* Top stem */}
22      <path d="M10 6v4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
23      {/* Top connector */}
24      <rect x="7.5" y="4" width="5" height="2.5" rx="1" stroke="currentColor" strokeWidth="1.5" />
25    </svg>
26  );
27}
28
29function getSignalLevel(quality: number | null) {
30  if (quality === null) return 3;
31  if (quality >= 70) return 3;
32  if (quality >= 40) return 2;
33  return 1;
34}
35
36export function WifiSignalIcon({
37  quality,
38  className,
39}: {
40  quality: number | null;
41  className?: string;
42}) {
43  const level = getSignalLevel(quality);
44
45  return (
46    <svg
47      viewBox="0 0 20 20"
48      fill="none"
49      aria-hidden="true"
50      className={cn("size-4", className)}
51    >
52      <path
53        d="M3.5 8.25c4.1-3.95 8.9-3.95 13 0"
54        stroke="currentColor"
55        strokeWidth="1.8"
56        strokeLinecap="round"
57        strokeLinejoin="round"
58        opacity={level >= 3 ? 1 : 0.22}
59      />
60      <path
61        d="M6.2 11c2.45-2.3 5.15-2.3 7.6 0"
62        stroke="currentColor"
63        strokeWidth="1.8"
64        strokeLinecap="round"
65        strokeLinejoin="round"
66        opacity={level >= 2 ? 1 : 0.22}
67      />
68      <path
69        d="M8.85 13.8c0.75-0.7 1.55-0.7 2.3 0"
70        stroke="currentColor"
71        strokeWidth="1.8"
72        strokeLinecap="round"
73        strokeLinejoin="round"
74        opacity={level >= 1 ? 1 : 0.22}
75      />
76      {/* <circle cx="10" cy="16.45" r="1.25" fill="currentColor" /> */}
77    </svg>
78  );
79}
80
81export function WifiStatusIcon({
82  connected,
83  quality,
84  className,
85}: {
86  connected: boolean;
87  quality: number | null;
88  className?: string;
89}) {
90  if (connected) {
91    return <WifiSignalIcon quality={quality} className={className} />;
92  }
93
94  return (
95    <svg
96      viewBox="0 0 20 20"
97      fill="none"
98      aria-hidden="true"
99      className={cn("size-4", className)}
100    >
101      <path
102        d="M3.5 8.25c4.1-3.95 8.9-3.95 13 0"
103        stroke="currentColor"
104        strokeWidth="1.8"
105        strokeLinecap="round"
106        strokeLinejoin="round"
107        opacity="0.28"
108      />
109      <path
110        d="M6.2 11c2.45-2.3 5.15-2.3 7.6 0"
111        stroke="currentColor"
112        strokeWidth="1.8"
113        strokeLinecap="round"
114        strokeLinejoin="round"
115        opacity="0.28"
116      />
117      <path
118        d="M8.85 13.8c0.75-0.7 1.55-0.7 2.3 0"
119        stroke="currentColor"
120        strokeWidth="1.8"
121        strokeLinecap="round"
122        strokeLinejoin="round"
123        opacity="0.28"
124      />
125      <circle cx="10" cy="16.45" r="1.25" fill="currentColor" opacity="0.28" />
126      <path
127        d="M4.25 4.5 15.75 16"
128        stroke="currentColor"
129        strokeWidth="1.9"
130        strokeLinecap="round"
131      />
132    </svg>
133  );
134}
135