dotfiles/app/lib/prymn_web/live/dashboard_live.ex

defmodule PrymnWeb.DashboardLive do
  use PrymnWeb, :live_view

  @impl true
  def render(assigns) do
    ~H"""
    <div class="mx-auto max-w-4xl">
      <div class="mb-5">
        <h1 class="text-3xl font-bold leading-snug">Good morning, <%= @current_user.email %>!</h1>
        <h2 class="text-lg font-medium">Your overview</h2>
      </div>
      <div class="flex flex-wrap justify-center space-x-4 md:flex-nowrap">
        <div class="basis-4/12 rounded-lg p-3 shadow-md">
          <span class="text-7xl font-medium">0</span>
          <h2 class="mt-5 font-medium leading-snug text-gray-600">Projects</h2>
          <.link class="text-sm text-blue-600">
            <.icon class="h-3 w-4" name="hero-arrow-right" /> Manage your projects
          </.link>
        </div>
        <div class="basis-4/12 rounded-lg p-3 shadow-md">
          <span class="text-7xl font-medium">0</span>
          <h2 class="mt-5 font-medium leading-snug text-gray-600">Total Servers</h2>
          <.link class="text-sm text-blue-600" navigate={~p"/servers"}>
            <.icon class="h-3 w-4" name="hero-arrow-right" /> View your servers
          </.link>
        </div>
        <div class="basis-4/12 rounded-lg p-3 shadow-md">
          <span class="text-7xl font-medium">0</span>
          <h2 class="mt-5 font-medium leading-snug text-gray-600">Apps</h2>
          <.link class="text-sm text-blue-600" navigate={~p"/apps"}>
            <.icon class="h-3 w-4" name="hero-arrow-right" /> View your apps
          </.link>
        </div>
      </div>
    </div>
    <div class="mx-auto mt-7 max-w-6xl">
      <div class="flex items-center justify-between">
        <div class="space-x-6 text-sm text-blue-600">
          <button>24 Hours</button>
          <button>7 Days</button>
          <button>30 Days</button>
        </div>
        <p>15 November &mdash; 16 November</p>
      </div>
      <div class="h-[150px] mt-3 w-full shrink-0 bg-slate-200"></div>
      <div class="h-[150px] mt-3 w-full shrink-0 bg-slate-200"></div>
      <div class="h-[150px] mt-3 w-full shrink-0 bg-slate-200"></div>
      <div class="h-[150px] mt-3 w-full shrink-0 bg-slate-200"></div>
    </div>
    """
  end
end