joao.dubas/slax
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(chat): interpolate values using new curly braces syntax

Browse Source
This commit is contained in:
João Paulo Dubas 2024-12-24 00:05:51 +00:00
parent cd45664a63
commit ada10afa96
Signed by: joao.dubas
SSH Key Fingerprint: SHA256:V1mixgOGRc/YMhGx/DNkOSmJxgA2vHNrDZEk3wt/kOA
6 changed files with 41 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
lib/slax_web/components/core_components.ex
View File

@ -80,7 +80,7 @@ defmodule SlaxWeb.CoreComponents do
</button> </button>
</div> </div>
<div id={"#{@id}-content"}> <div id={"#{@id}-content"}>
<%= render_slot(@inner_block) %> {render_slot(@inner_block)}
</div> </div>
</.focus_wrap> </.focus_wrap>
</div> </div>
@ -125,9 +125,9 @@ defmodule SlaxWeb.CoreComponents do
<p :if={@title} class="flex items-center gap-1.5 text-sm font-semibold leading-6"> <p :if={@title} class="flex items-center gap-1.5 text-sm font-semibold leading-6">
<.icon :if={@kind == :info} name="hero-information-circle-mini" class="h-4 w-4" /> <.icon :if={@kind == :info} name="hero-information-circle-mini" class="h-4 w-4" />
<.icon :if={@kind == :error} name="hero-exclamation-circle-mini" class="h-4 w-4" /> <.icon :if={@kind == :error} name="hero-exclamation-circle-mini" class="h-4 w-4" />
<%= @title %> {@title}
</p> </p>
<p class="mt-2 text-sm leading-5"><%= msg %></p> <p class="mt-2 text-sm leading-5">{msg}</p>
<button type="button" class="group absolute top-1 right-1 p-2" aria-label={gettext("close")}> <button type="button" class="group absolute top-1 right-1 p-2" aria-label={gettext("close")}>
<.icon name="hero-x-mark-solid" class="h-5 w-5 opacity-40 group-hover:opacity-70" /> <.icon name="hero-x-mark-solid" class="h-5 w-5 opacity-40 group-hover:opacity-70" />
</button> </button>
@ -158,7 +158,7 @@ defmodule SlaxWeb.CoreComponents do
phx-connected={hide("#client-error")} phx-connected={hide("#client-error")}
hidden hidden
> >
<%= gettext("Attempting to reconnect") %> {gettext("Attempting to reconnect")}
<.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" /> <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" />
</.flash> </.flash>
@ -170,7 +170,7 @@ defmodule SlaxWeb.CoreComponents do
phx-connected={hide("#server-error")} phx-connected={hide("#server-error")}
hidden hidden
> >
<%= gettext("Hang in there while we get back on track") %> {gettext("Hang in there while we get back on track")}
<.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" /> <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" />
</.flash> </.flash>
</div> </div>
@ -204,9 +204,9 @@ defmodule SlaxWeb.CoreComponents do
~H""" ~H"""
<.form :let={f} for={@for} as={@as} {@rest}> <.form :let={f} for={@for} as={@as} {@rest}>
<div class="mt-10 space-y-8 bg-white"> <div class="mt-10 space-y-8 bg-white">
<%= render_slot(@inner_block, f) %> {render_slot(@inner_block, f)}
<div :for={action <- @actions} class="mt-2 flex items-center justify-between gap-6"> <div :for={action <- @actions} class="mt-2 flex items-center justify-between gap-6">
<%= render_slot(action, f) %> {render_slot(action, f)}
</div> </div>
</div> </div>
</.form> </.form>
@ -238,7 +238,7 @@ defmodule SlaxWeb.CoreComponents do
]} ]}
{@rest} {@rest}
> >
<%= render_slot(@inner_block) %> {render_slot(@inner_block)}
</button> </button>
""" """
end end
@ -322,9 +322,9 @@ defmodule SlaxWeb.CoreComponents do
class="rounded border-zinc-300 text-zinc-900 focus:ring-0" class="rounded border-zinc-300 text-zinc-900 focus:ring-0"
{@rest} {@rest}
/> />
<%= @label %> {@label}
</label> </label>
<.error :for={msg <- @errors}><%= msg %></.error> <.error :for={msg <- @errors}>{msg}</.error>
</div> </div>
""" """
end end
@ -332,7 +332,7 @@ defmodule SlaxWeb.CoreComponents do
def input(%{type: "select"} = assigns) do def input(%{type: "select"} = assigns) do
~H""" ~H"""
<div> <div>
<.label for={@id}><%= @label %></.label> <.label for={@id}>{@label}</.label>
<select <select
id={@id} id={@id}
name={@name} name={@name}
@ -340,10 +340,10 @@ defmodule SlaxWeb.CoreComponents do
multiple={@multiple} multiple={@multiple}
{@rest} {@rest}
> >
<option :if={@prompt} value=""><%= @prompt %></option> <option :if={@prompt} value="">{@prompt}</option>
<%= Phoenix.HTML.Form.options_for_select(@options, @value) %> {Phoenix.HTML.Form.options_for_select(@options, @value)}
</select> </select>
<.error :for={msg <- @errors}><%= msg %></.error> <.error :for={msg <- @errors}>{msg}</.error>
</div> </div>
""" """
end end
@ -351,7 +351,7 @@ defmodule SlaxWeb.CoreComponents do
def input(%{type: "textarea"} = assigns) do def input(%{type: "textarea"} = assigns) do
~H""" ~H"""
<div> <div>
<.label for={@id}><%= @label %></.label> <.label for={@id}>{@label}</.label>
<textarea <textarea
id={@id} id={@id}
name={@name} name={@name}
@ -362,7 +362,7 @@ defmodule SlaxWeb.CoreComponents do
]} ]}
{@rest} {@rest}
><%= Phoenix.HTML.Form.normalize_value("textarea", @value) %></textarea> ><%= Phoenix.HTML.Form.normalize_value("textarea", @value) %></textarea>
<.error :for={msg <- @errors}><%= msg %></.error> <.error :for={msg <- @errors}>{msg}</.error>
</div> </div>
""" """
end end
@ -371,7 +371,7 @@ defmodule SlaxWeb.CoreComponents do
def input(assigns) do def input(assigns) do
~H""" ~H"""
<div> <div>
<.label for={@id}><%= @label %></.label> <.label for={@id}>{@label}</.label>
<input <input
type={@type} type={@type}
name={@name} name={@name}
@ -384,7 +384,7 @@ defmodule SlaxWeb.CoreComponents do
]} ]}
{@rest} {@rest}
/> />
<.error :for={msg <- @errors}><%= msg %></.error> <.error :for={msg <- @errors}>{msg}</.error>
</div> </div>
""" """
end end
@ -398,7 +398,7 @@ defmodule SlaxWeb.CoreComponents do
def label(assigns) do def label(assigns) do
~H""" ~H"""
<label for={@for} class="block text-sm font-semibold leading-6 text-zinc-800"> <label for={@for} class="block text-sm font-semibold leading-6 text-zinc-800">
<%= render_slot(@inner_block) %> {render_slot(@inner_block)}
</label> </label>
""" """
end end
@ -412,7 +412,7 @@ defmodule SlaxWeb.CoreComponents do
~H""" ~H"""
<p class="mt-3 flex gap-3 text-sm leading-6 text-rose-600"> <p class="mt-3 flex gap-3 text-sm leading-6 text-rose-600">
<.icon name="hero-exclamation-circle-mini" class="mt-0.5 h-5 w-5 flex-none" /> <.icon name="hero-exclamation-circle-mini" class="mt-0.5 h-5 w-5 flex-none" />
<%= render_slot(@inner_block) %> {render_slot(@inner_block)}
</p> </p>
""" """
end end
@ -431,13 +431,13 @@ defmodule SlaxWeb.CoreComponents do
<header class={[@actions != [] && "flex items-center justify-between gap-6", @class]}> <header class={[@actions != [] && "flex items-center justify-between gap-6", @class]}>
<div> <div>
<h1 class="text-lg font-semibold leading-8 text-zinc-800"> <h1 class="text-lg font-semibold leading-8 text-zinc-800">
<%= render_slot(@inner_block) %> {render_slot(@inner_block)}
</h1> </h1>
<p :if={@subtitle != []} class="mt-2 text-sm leading-6 text-zinc-600"> <p :if={@subtitle != []} class="mt-2 text-sm leading-6 text-zinc-600">
<%= render_slot(@subtitle) %> {render_slot(@subtitle)}
</p> </p>
</div> </div>
<div class="flex-none"><%= render_slot(@actions) %></div> <div class="flex-none">{render_slot(@actions)}</div>
</header> </header>
""" """
end end
@ -478,9 +478,9 @@ defmodule SlaxWeb.CoreComponents do
<table class="w-[40rem] mt-11 sm:w-full"> <table class="w-[40rem] mt-11 sm:w-full">
<thead class="text-sm text-left leading-6 text-zinc-500"> <thead class="text-sm text-left leading-6 text-zinc-500">
<tr> <tr>
<th :for={col <- @col} class="p-0 pb-4 pr-6 font-normal"><%= col[:label] %></th> <th :for={col <- @col} class="p-0 pb-4 pr-6 font-normal">{col[:label]}</th>
<th :if={@action != []} class="relative p-0 pb-4"> <th :if={@action != []} class="relative p-0 pb-4">
<span class="sr-only"><%= gettext("Actions") %></span> <span class="sr-only">{gettext("Actions")}</span>
</th> </th>
</tr> </tr>
</thead> </thead>
@ -498,7 +498,7 @@ defmodule SlaxWeb.CoreComponents do
<div class="block py-4 pr-6"> <div class="block py-4 pr-6">
<span class="absolute -inset-y-px right-0 -left-4 group-hover:bg-zinc-50 sm:rounded-l-xl" /> <span class="absolute -inset-y-px right-0 -left-4 group-hover:bg-zinc-50 sm:rounded-l-xl" />
<span class={["relative", i == 0 && "font-semibold text-zinc-900"]}> <span class={["relative", i == 0 && "font-semibold text-zinc-900"]}>
<%= render_slot(col, @row_item.(row)) %> {render_slot(col, @row_item.(row))}
</span> </span>
</div> </div>
</td> </td>
@ -509,7 +509,7 @@ defmodule SlaxWeb.CoreComponents do
:for={action <- @action} :for={action <- @action}
class="relative ml-4 font-semibold leading-6 text-zinc-900 hover:text-zinc-700" class="relative ml-4 font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
> >
<%= render_slot(action, @row_item.(row)) %> {render_slot(action, @row_item.(row))}
</span> </span>
</div> </div>
</td> </td>
@ -539,8 +539,8 @@ defmodule SlaxWeb.CoreComponents do
<div class="mt-14"> <div class="mt-14">
<dl class="-my-4 divide-y divide-zinc-100"> <dl class="-my-4 divide-y divide-zinc-100">
<div :for={item <- @item} class="flex gap-4 py-4 text-sm leading-6 sm:gap-8"> <div :for={item <- @item} class="flex gap-4 py-4 text-sm leading-6 sm:gap-8">
<dt class="w-1/4 flex-none text-zinc-500"><%= item.title %></dt> <dt class="w-1/4 flex-none text-zinc-500">{item.title}</dt>
<dd class="text-zinc-700"><%= render_slot(item) %></dd> <dd class="text-zinc-700">{render_slot(item)}</dd>
</div> </div>
</dl> </dl>
</div> </div>
@ -565,7 +565,7 @@ defmodule SlaxWeb.CoreComponents do
class="text-sm font-semibold leading-6 text-zinc-900 hover:text-zinc-700" class="text-sm font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
> >
<.icon name="hero-arrow-left-solid" class="h-3 w-3" /> <.icon name="hero-arrow-left-solid" class="h-3 w-3" />
<%= render_slot(@inner_block) %> {render_slot(@inner_block)}
</.link> </.link>
</div> </div>
""" """
@ -591,10 +591,12 @@ defmodule SlaxWeb.CoreComponents do
""" """
attr :name, :string, required: true attr :name, :string, required: true
attr :class, :string, default: nil attr :class, :string, default: nil
attr :id, :string, default: nil
attr :style, :string, default: nil
def icon(%{name: "hero-" <> _} = assigns) do def icon(%{name: "hero-" <> _} = assigns) do
~H""" ~H"""
<span class={[@name, @class]} /> <span class={[@name, @class]} id={@id} style={@style} />
""" """
end end

2
lib/slax_web/components/layouts/app.html.heex
View File

@ -1,4 +1,4 @@
<main class="flex w-full h-screen text-gray-700"> <main class="flex w-full h-screen text-gray-700">
<.flash_group flash={@flash} /> <.flash_group flash={@flash} />
<%= @inner_content %> {@inner_content}
</main> </main>

4
lib/slax_web/components/layouts/root.html.heex
View File

@ -5,13 +5,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="csrf-token" content={get_csrf_token()} /> <meta name="csrf-token" content={get_csrf_token()} />
<.live_title suffix=" · Slax"> <.live_title suffix=" · Slax">
<%= assigns[:page_title] || "Slax" %> {assigns[:page_title] || "Slax"}
</.live_title> </.live_title>
<link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} /> <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
<script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}> <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
</script> </script>
</head> </head>
<body class="bg-white"> <body class="bg-white">
<%= @inner_content %> {@inner_content}
</body> </body>
</html> </html>

2
lib/slax_web/controllers/page_html/home.html.heex
View File

@ -49,7 +49,7 @@
<h1 class="text-brand mt-10 flex items-center text-sm font-semibold leading-6"> <h1 class="text-brand mt-10 flex items-center text-sm font-semibold leading-6">
Phoenix Framework Phoenix Framework
<small class="bg-brand/5 text-[0.8125rem] ml-3 rounded-full px-2 font-medium leading-6"> <small class="bg-brand/5 text-[0.8125rem] ml-3 rounded-full px-2 font-medium leading-6">
v<%= Application.spec(:phoenix, :vsn) %> v{Application.spec(:phoenix, :vsn)}
</small> </small>
</h1> </h1>
<p class="text-[2rem] mt-4 font-semibold leading-10 tracking-tighter text-zinc-900 text-balance"> <p class="text-[2rem] mt-4 font-semibold leading-10 tracking-tighter text-zinc-900 text-balance">

2
lib/slax_web/live/chat_room_live/edit.ex
View File

@ -9,7 +9,7 @@ defmodule SlaxWeb.ChatRoomLive.Edit do
~H""" ~H"""
<div class="mx-auto w-96 mt-12"> <div class="mx-auto w-96 mt-12">
<.header> <.header>
<%= @page_title %> {@page_title}
<:actions> <:actions>
<.link <.link
class="font-normal text-xs text-blue-600 hover:text-blue-700" class="font-normal text-xs text-blue-600 hover:text-blue-700"

6
lib/slax_web/live/chat_room_live/index.ex
View File

@ -8,7 +8,7 @@ defmodule SlaxWeb.ChatRoomLive.Index do
~H""" ~H"""
<main class="flex-1 p-6 max-w-4xl mx-auto"> <main class="flex-1 p-6 max-w-4xl mx-auto">
<div class="mb-4"> <div class="mb-4">
<h1 class="text-xl font-semibold"><%= @page_title %></h1> <h1 class="text-xl font-semibold">{@page_title}</h1>
</div> </div>
<div class="bg-slate-50 border rounded"> <div class="bg-slate-50 border rounded">
<div id="rooms" class="divide-y" phx-update="stream"> <div id="rooms" class="divide-y" phx-update="stream">
@ -20,7 +20,7 @@ defmodule SlaxWeb.ChatRoomLive.Index do
> >
<div> <div>
<div class="font-medium mb-1"> <div class="font-medium mb-1">
#<%= room.name %> #{room.name}
<span class="mx-1 text-gray-500 font-light text-sm opacity-0 group-hover:opacity-100"> <span class="mx-1 text-gray-500 font-light text-sm opacity-0 group-hover:opacity-100">
View room View room
</span> </span>
@ -33,7 +33,7 @@ defmodule SlaxWeb.ChatRoomLive.Index do
<span class="mx-1">·</span> <span class="mx-1">·</span>
<% end %> <% end %>
<%= if room.topic do %> <%= if room.topic do %>
<%= room.topic %> {room.topic}
<% end %> <% end %>
</div> </div>
</div> </div>