update

lib/zoeyscomputer_web/live/api_key_live/show.html.heex

@@ -0,0 +1,47 @@
+<.header>
+  API Key Details
+  <:actions>
+    <.link patch={~p"/api-keys"}>
+      <.button>Back to API keys</.button>
+    </.link>
+  </:actions>
+</.header>
+
+<.list>
+  <:item title="Name"><%= @api_key.name %></:item>
+  <:item title="Token">
+    <div class="flex items-center gap-2">
+      <code class="bg-ctp-crust border border-ctp-mauve p-2 rounded" id="api-token">
+        <%= @api_key.token %>
+      </code>
+      <button
+        type="button"
+        class="text-sm text-ctp-mauve hover:text-ctp-pink"
+        phx-click={JS.dispatch("phx:copy", to: "#{@api_key.token}")}
+      >
+        Copy
+      </button>
+    </div>
+  </:item>
+  <:item title="Created">
+    <%= Calendar.strftime(@api_key.inserted_at, "%Y-%m-%d %H:%M:%S") %>
+  </:item>
+</.list>
+
+<.back navigate={~p"/api-keys"}>Back to api_keys</.back>
+
+<.modal
+  :if={@live_action == :edit}
+  id="api_key-modal"
+  show
+  on_cancel={JS.patch(~p"/api-keys/#{@api_key}")}
+>
+  <.live_component
+    module={ZoeyscomputerWeb.ApiKeyLive.FormComponent}
+    id={@api_key.id}
+    title={@page_title}
+    action={@live_action}
+    api_key={@api_key}
+    patch={~p"/api-keys/#{@api_key}"}
+  />
+</.modal>