ocdp v1

frontend/src/features/configuration/registries/components/RegistryList.tsx

@@ -0,0 +1,111 @@
+/**
+ * Registry Configuration List
+ * Display all registry configurations
+ */
+import React from "react";
+import { Edit2, Trash2, Database, ExternalLink } from "lucide-react";
+import type { AppRegistry } from "@/core/types";
+import { EmptyStateSimple } from "@/shared/components";
+import { LoadingText, EmptyText } from "@/shared/constants";
+
+interface RegistryListProps {
+  registries: AppRegistry[];
+  loading: boolean;
+  onEdit: (registry: AppRegistry) => void;
+  onDelete: (registry: AppRegistry) => void;
+}
+
+export const RegistryList: React.FC<RegistryListProps> = ({
+  registries,
+  loading,
+  onEdit,
+  onDelete,
+}) => {
+  if (loading) {
+    return (
+      <div className="text-center py-12 text-gray-400">
+        {LoadingText.LOADING_REGISTRIES}
+      </div>
+    );
+  }
+
+  if (registries.length === 0) {
+    return (
+      <EmptyStateSimple
+        title={EmptyText.NO_REGISTRIES}
+        description={EmptyText.NO_REGISTRIES_DESC}
+        Icon={Database}
+      />
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {registries.map((registry) => (
+        <div
+          key={registry.id}
+          className="p-4 bg-gray-800 border border-gray-700 rounded-lg hover:border-gray-600 transition"
+        >
+          <div className="flex items-start justify-between">
+            {/* Left: Basic Info */}
+            <div className="flex-1">
+              <div className="flex items-center gap-3 mb-2">
+                <Database className="w-5 h-5 text-purple-400 flex-shrink-0" />
+                <h3 className="text-lg font-semibold text-white">
+                  {registry.name}
+                </h3>
+                {registry.insecure && (
+                  <span className="px-2 py-0.5 bg-yellow-900/30 text-yellow-400 text-xs rounded">
+                    Insecure
+                  </span>
+                )}
+              </div>
+
+              <div className="ml-8 space-y-1">
+                <div className="flex items-center gap-2 text-sm text-gray-400">
+                  <ExternalLink className="w-4 h-4" />
+                  <a
+                    href={registry.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="hover:text-purple-400 transition"
+                  >
+                    {registry.url}
+                  </a>
+                </div>
+
+                {registry.description && (
+                  <p className="text-sm text-gray-500">{registry.description}</p>
+                )}
+
+                {registry.username && (
+                  <p className="text-sm text-gray-500">
+                    Username: <span className="text-gray-400">{registry.username}</span>
+                  </p>
+                )}
+              </div>
+            </div>
+
+            {/* Right: Action Buttons */}
+            <div className="flex items-center gap-2 ml-4">
+              <button
+                onClick={() => onEdit(registry)}
+                className="p-2 text-gray-400 hover:text-blue-400 hover:bg-gray-700 rounded-lg transition"
+                title="Edit"
+              >
+                <Edit2 className="w-4 h-4" />
+              </button>
+              <button
+                onClick={() => onDelete(registry)}
+                className="p-2 text-gray-400 hover:text-red-400 hover:bg-gray-700 rounded-lg transition"
+                title="Delete"
+              >
+                <Trash2 className="w-4 h-4" />
+              </button>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};