resources

2026-02-18 19:57:46 +00:00
parent 485ae4c3d7
commit 8b97f8a38a
8 changed files with 341 additions and 15 deletions
@@ -0,0 +1,87 @@
+import { useState } from 'react';
+import { Copy, Check, Server, Wrench } from 'lucide-react';
+import { useGlobal } from 'hooks/useGlobal';
+import { useResources, type Resource } from '@/state/useResources';
+
+const CopyCommand = ({ command }: { command: string }) => {
+  const [copied, setCopied] = useState(false);
+
+  const copy = () => {
+    navigator.clipboard.writeText(command);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
+
+  return (
+    <div className="flex items-center gap-1 mt-1">
+      <code className="flex-1 bg-duck-dark/5 rounded px-2 py-1 text-xs text-duck-dark/70">{command}</code>
+      <button
+        type="button"
+        onClick={copy}
+        className="shrink-0 p-1 rounded hover:bg-duck-dark/10 cursor-pointer transition-colors"
+      >
+        {copied ? <Check className="h-3.5 w-3.5 text-green-600" /> : <Copy className="h-3.5 w-3.5 text-duck-dark/50" />}
+      </button>
+    </div>
+  );
+};
+
+const CommandRow = ({ label, command }: { label: string; command: string }) => (
+  <div className="text-xs text-duck-dark/50">
+    {label}:
+    <CopyCommand command={command} />
+  </div>
+);
+
+export const Resources = () => {
+  const { resources } = useResources();
+  const [selectedId] = useGlobal<string | null>('RESOURCE_SELECTED', null);
+
+  const resource = resources?.find((r: Resource) => r.id === selectedId);
+
+  if (!resource) {
+    return (
+      <div className="h-full flex items-center justify-center">
+        <p className="text-sm text-duck-dark/30">Select a resource to view details</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full overflow-y-auto p-6">
+      <div className="flex items-center gap-2 mb-1">
+        {resource.port ? (
+          <Server className="h-4 w-4 text-duck-teal shrink-0" />
+        ) : (
+          <Wrench className="h-4 w-4 text-duck-dark/40 shrink-0" />
+        )}
+        <h2 className="text-lg font-bold text-duck-dark">{resource.name}</h2>
+        <span className="text-sm text-duck-dark/40">{resource.subtitle}</span>
+      </div>
+
+      <div className="flex items-center gap-2 mb-4">
+        <span className="text-xs bg-duck-dark/5 text-duck-dark/50 rounded-full px-2 py-0.5">{resource.type}</span>
+        {resource.port && (
+          <span className="text-xs bg-duck-teal/10 text-duck-teal rounded-full px-2 py-0.5">:{resource.port}</span>
+        )}
+        {resource.installed ? (
+          <span className="text-xs bg-green-100 text-green-700 rounded-full px-2 py-0.5">
+            {resource.version ?? 'Running'}
+          </span>
+        ) : (
+          <span className="text-xs bg-duck-dark/5 text-duck-dark/40 rounded-full px-2 py-0.5">Not installed</span>
+        )}
+      </div>
+
+      <p className="text-sm text-duck-dark/70 mb-6">{resource.description}</p>
+
+      <div className="flex flex-col gap-2">
+        {resource.installCommand && <CommandRow label="Install" command={resource.installCommand} />}
+        {resource.uninstallCommand && <CommandRow label="Uninstall" command={resource.uninstallCommand} />}
+        {resource.manageCommand && <CommandRow label="Manage" command={resource.manageCommand} />}
+        {resource.verifyCommand && <CommandRow label="Verify" command={resource.verifyCommand} />}
+        {resource.updateCommand && <CommandRow label="Update" command={resource.updateCommand} />}
+      </div>
+    </div>
+  );
+};