@inspectr/ui 0.0.1

package/src/components/SettingsPanel.jsx

@@ -0,0 +1,93 @@
+// src/components/SettingsPanel.jsx
+import React, { useState, useEffect } from "react";
+
+const SettingsPanel = ({ sseEndpoint, setSseEndpoint, isConnected }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [inputValue, setInputValue] = useState(sseEndpoint);
+
+    // Load stored value on mount
+    useEffect(() => {
+        if (typeof window !== "undefined") {
+            const storedEndpoint = localStorage.getItem("sseEndpoint");
+            if (!sseEndpoint && storedEndpoint) {
+                setInputValue(storedEndpoint);
+                setSseEndpoint(storedEndpoint);
+            }
+        }
+    }, [sseEndpoint, setSseEndpoint]);
+
+    const handleSave = () => {
+        if (typeof window !== "undefined") {
+            localStorage.setItem("sseEndpoint", inputValue);
+        }
+        setSseEndpoint(inputValue);
+        setIsOpen(false);
+    };
+
+    return (
+        <div className="fixed bottom-0 left-0 w-full">
+            {/* Bottom Panel */}
+            <div
+                className="flex items-center justify-between bg-gray-200 px-4 py-2 w-full cursor-pointer select-none"
+                onClick={() => setIsOpen((prev) => !prev)} // Toggle on click
+            >
+                {/* Connection Status Indicator */}
+                <span
+                    className={`px-2 py-1 rounded-full text-xs font-semibold ${
+                        isConnected ? "bg-green-500" : "bg-red-500"
+                    } flex items-center`}
+                >
+                    <span
+                        className={`w-2 h-2 rounded-full mr-1 ${
+                            isConnected ? "bg-green-800" : "bg-red-800"
+                        }`}
+                    ></span>
+                    {isConnected ? "Connected" : "Disconnected"}
+                </span>
+            </div>
+
+            {/* Configuration Panel */}
+            <div
+                className={`bg-gray-100 border-t border-gray-300 transition-all duration-300 overflow-hidden ${
+                    isOpen ? "max-h-40 opacity-100 py-4" : "max-h-0 opacity-0 py-0"
+                }`}
+            >
+                <div className="px-6">
+                    {/* Title */}
+
+                    {/* Two-column Layout */}
+                    <div className="grid grid-cols-2 gap-4 items-center">
+                        {/* Left Column (Empty for now) */}
+                        <div><h2 className="text-lg font-semibold text-gray-800 mb-4">Configuration</h2></div>
+
+                        {/* Right Column (Label + Input in the same row) */}
+                        <div className="flex items-center gap-2">
+                            <label className="text-gray-700 font-semibold whitespace-nowrap">
+                                SSE Endpoint:
+                            </label>
+                            <input
+                                type="text"
+                                value={inputValue}
+                                onChange={(e) => setInputValue(e.target.value)}
+                                className="border p-2 rounded flex-1 bg-white"
+                                placeholder="Enter SSE Endpoint..."
+                            />
+                        </div>
+                    </div>
+
+                    {/* Apply Button */}
+                    <div className="flex justify-end mt-4">
+                        <button
+                            onClick={handleSave}
+                            className="bg-green-600 text-white px-4 py-2 rounded-md"
+                        >
+                            Apply
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default SettingsPanel;

package/src/components/index.js

@@ -0,0 +1,10 @@
+// src/components/index.js
+
+export { default as InspectrApp } from './InspectrApp.jsx';
+export { default as RequestContent } from './RequestContent.jsx';
+export { default as RequestDetail } from './RequestDetail.jsx';
+export { default as RequestDetailsPanel } from './RequestDetailsPanel.jsx';
+export { default as RequestList } from './RequestList.jsx';
+export { default as RequestListItem } from './RequestListItem.jsx';
+export { default as ResponseContent } from './ResponseContent.jsx';
+export { default as SettingsPanel } from './SettingsPanel.jsx';

package/src/index.js

@@ -0,0 +1,2 @@
+export * from './components/index.js';
+export * from './utils/getStatusClass.js';

package/src/styles/global.css

@@ -0,0 +1,5 @@
+@import "tailwindcss";
+
+@theme {
+    --font-sans: InterVariable, sans-serif;
+}

package/src/utils/getStatusClass.js

@@ -0,0 +1,9 @@
+// src/utils/getStatusClass.js
+
+export const getStatusClass = (status) => {
+    if (status >= 200 && status < 300) return 'bg-green-200 text-green-800';
+    if (status >= 300 && status < 400) return 'bg-blue-200 text-blue-800';
+    if (status >= 400 && status < 500) return 'bg-orange-600 text-orange-200';
+    if (status >= 500) return 'bg-red-800 text-red-100';
+    return 'bg-gray-200 text-gray-800';
+}