@inspectr/ui 0.0.1 → 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@inspectr/ui",
|
|
3
3
|
"description": "React UI components for Inspectr",
|
|
4
4
|
"type": "module",
|
|
5
|
-
"version": "0.0.
|
|
5
|
+
"version": "0.0.2",
|
|
6
6
|
"author": "Tim Haselaars",
|
|
7
7
|
"homepage": "https://github.com/thim81/inspectr#readme",
|
|
8
8
|
"bugs": "https://github.com/thim81/inspectr-ui/issues",
|
|
@@ -14,10 +14,7 @@
|
|
|
14
14
|
"module": "src/index.js",
|
|
15
15
|
"types": "index.d.ts",
|
|
16
16
|
"files": [
|
|
17
|
-
"src
|
|
18
|
-
"src/styles",
|
|
19
|
-
"src/utils",
|
|
20
|
-
"src/index.js",
|
|
17
|
+
"src",
|
|
21
18
|
"index.d.ts"
|
|
22
19
|
],
|
|
23
20
|
"scripts": {
|
|
Binary file
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
// src/components/SettingsPanel.jsx
|
|
2
2
|
import React, { useState, useEffect } from "react";
|
|
3
|
+
import logo from "../assets/inspectr_logo_small.png";
|
|
3
4
|
|
|
4
5
|
const SettingsPanel = ({ sseEndpoint, setSseEndpoint, isConnected }) => {
|
|
5
6
|
const [isOpen, setIsOpen] = useState(false);
|
|
@@ -32,18 +33,31 @@ const SettingsPanel = ({ sseEndpoint, setSseEndpoint, isConnected }) => {
|
|
|
32
33
|
onClick={() => setIsOpen((prev) => !prev)} // Toggle on click
|
|
33
34
|
>
|
|
34
35
|
{/* Connection Status Indicator */}
|
|
35
|
-
<
|
|
36
|
-
className={`px-2 py-1 rounded-full text-xs font-semibold ${
|
|
37
|
-
isConnected ? "bg-green-500" : "bg-red-500"
|
|
38
|
-
} flex items-center`}
|
|
39
|
-
>
|
|
36
|
+
<div className="flex items-center gap-4">
|
|
40
37
|
<span
|
|
41
|
-
className={`
|
|
42
|
-
isConnected ? "bg-green-
|
|
38
|
+
className={`px-2 py-1 rounded-full text-xs font-semibold flex items-center ${
|
|
39
|
+
isConnected ? "bg-green-500" : "bg-red-500"
|
|
43
40
|
}`}
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
41
|
+
>
|
|
42
|
+
<span
|
|
43
|
+
className={`w-2 h-2 rounded-full mr-1 ${
|
|
44
|
+
isConnected ? "bg-green-800" : "bg-red-800"
|
|
45
|
+
}`}
|
|
46
|
+
></span>
|
|
47
|
+
{isConnected ? "Connected" : "Disconnected"}
|
|
48
|
+
</span>
|
|
49
|
+
</div>
|
|
50
|
+
|
|
51
|
+
{/* Inspectr Logo & Name */}
|
|
52
|
+
<a
|
|
53
|
+
href="https://github.com/thim81/inspectr"
|
|
54
|
+
target="_blank"
|
|
55
|
+
rel="noopener noreferrer"
|
|
56
|
+
className="flex items-center gap-2"
|
|
57
|
+
>
|
|
58
|
+
<img src={logo} alt="Inspectr Logo" className="h-6" />
|
|
59
|
+
<span className="text-gray-700 font-semibold text-sm">Inspectr</span>
|
|
60
|
+
</a>
|
|
47
61
|
</div>
|
|
48
62
|
|
|
49
63
|
{/* Configuration Panel */}
|