rsh26_pool_example/lib/rsh26pool_web/controllers/page_html/home.html.heex

<Layouts.app flash={@flash} current_participant={@current_participant}>
  <div class="text-center py-6">
    <h1 class="text-4xl sm:text-5xl font-extrabold tracking-tight">
      みんなで<span class="text-primary">投票</span>
    </h1>
    <p class="mt-4 text-base-content/70">
      ルームを作って、アイデアを出し合い、好きなものに投票しよう。
    </p>
  </div>

  <div
    :if={@current_participant}
    class="alert bg-base-200 border border-base-300 flex items-center justify-between"
  >
    <span>
      現在ルーム「{@current_participant.room.name}」（番号 {@current_participant.room.room_number}）に参加中です。
    </span>
    <.link
      :if={@current_participant.role == "owner"}
      navigate={~p"/manage/#{@current_participant.room.room_number}"}
      class="btn btn-sm btn-primary"
    >
      管理ページへ
    </.link>
    <.link
      :if={@current_participant.role != "owner"}
      navigate={~p"/vote/#{@current_participant.room.room_number}"}
      class="btn btn-sm btn-primary"
    >
      投票ページへ
    </.link>
  </div>

  <div class="grid gap-4 sm:grid-cols-2 mt-4">
    <.link
      navigate={~p"/create"}
      id="home-create-link"
      class="card bg-base-100 border border-base-200 shadow-sm hover:shadow-md hover:border-primary transition group"
    >
      <div class="card-body items-center text-center">
        <div class="rounded-full bg-primary/10 p-4 group-hover:bg-primary/20 transition">
          <.icon name="hero-plus-circle" class="size-8 text-primary" />
        </div>
        <h2 class="card-title mt-2">ルームを作成</h2>
        <p class="text-sm text-base-content/70">
          投票の設定を決めて、新しいルームを立ち上げます。
        </p>
      </div>
    </.link>

    <.link
      navigate={~p"/enter"}
      id="home-enter-link"
      class="card bg-base-100 border border-base-200 shadow-sm hover:shadow-md hover:border-primary transition group"
    >
      <div class="card-body items-center text-center">
        <div class="rounded-full bg-primary/10 p-4 group-hover:bg-primary/20 transition">
          <.icon name="hero-arrow-right-on-rectangle" class="size-8 text-primary" />
        </div>
        <h2 class="card-title mt-2">ルームに参加</h2>
        <p class="text-sm text-base-content/70">
          ルーム番号を入力して、既存のルームに参加します。
        </p>
      </div>
    </.link>
  </div>
</Layouts.app>