フロントエンドプレイアブル

app/views/users/show.html.erb

@@ -0,0 +1,83 @@
+<% content_for :title, @user.username %>
+
+<div class="mb-6 flex items-center justify-between">
+  <div>
+    <h1 class="text-3xl font-bold text-gray-900"><%= @user.username %></h1>
+    <% if @user.admin? %>
+      <span class="mt-2 inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800">
+        管理者
+      </span>
+    <% end %>
+  </div>
+  <div class="flex space-x-3">
+    <%= link_to "編集", edit_user_path(@user), class: "inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50" %>
+    <%= link_to "一覧に戻る", users_path, class: "inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50" %>
+  </div>
+</div>
+
+<div class="bg-white shadow overflow-hidden sm:rounded-lg">
+  <div class="px-4 py-5 sm:px-6">
+    <h3 class="text-lg leading-6 font-medium text-gray-900">
+      ユーザー情報
+    </h3>
+  </div>
+  <div class="border-t border-gray-200">
+    <dl>
+      <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+        <dt class="text-sm font-medium text-gray-500">
+          ユーザー名
+        </dt>
+        <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+          <%= @user.username %>
+        </dd>
+      </div>
+      <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+        <dt class="text-sm font-medium text-gray-500">
+          メールアドレス
+        </dt>
+        <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+          <%= @user.email %>
+        </dd>
+      </div>
+      <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+        <dt class="text-sm font-medium text-gray-500">
+          権限
+        </dt>
+        <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+          <%= @user.admin? ? "管理者" : "一般ユーザー" %>
+        </dd>
+      </div>
+      <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+        <dt class="text-sm font-medium text-gray-500">
+          登録日
+        </dt>
+        <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+          <%= @user.created_at.strftime("%Y年%m月%d日 %H:%M") %>
+        </dd>
+      </div>
+      <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+        <dt class="text-sm font-medium text-gray-500">
+          最終更新日
+        </dt>
+        <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+          <%= @user.updated_at.strftime("%Y年%m月%d日 %H:%M") %>
+        </dd>
+      </div>
+    </dl>
+  </div>
+</div>
+
+<% if @user != current_user %>
+  <div class="mt-6 flex space-x-3">
+    <%= button_to "#{@user.admin? ? '管理者権限を削除' : '管理者権限を付与'}", 
+                  toggle_admin_user_path(@user), 
+                  method: :patch,
+                  class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-yellow-600 hover:bg-yellow-700",
+                  data: { confirm: "#{@user.admin? ? '管理者権限を削除' : '管理者権限を付与'}しますか?" } %>
+    <%= button_to "ユーザーを削除", 
+                  user_path(@user), 
+                  method: :delete,
+                  class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700",
+                  data: { confirm: "#{@user.username}を削除しますか?" } %>
+  </div>
+<% end %>