Packages
phoenix_kit
1.6.13
1.7.208
1.7.207
1.7.206
1.7.205
1.7.204
1.7.203
1.7.202
1.7.201
1.7.200
1.7.199
1.7.198
1.7.197
1.7.196
1.7.194
1.7.193
1.7.192
1.7.191
1.7.190
1.7.189
1.7.187
1.7.186
1.7.185
1.7.184
1.7.183
1.7.182
1.7.181
1.7.180
1.7.179
1.7.178
1.7.177
1.7.176
1.7.175
1.7.174
1.7.173
1.7.172
1.7.171
1.7.170
1.7.169
1.7.168
1.7.167
1.7.166
1.7.165
1.7.164
1.7.162
1.7.161
1.7.160
1.7.159
1.7.157
1.7.156
1.7.155
1.7.154
1.7.153
1.7.152
1.7.151
1.7.150
1.7.149
1.7.146
1.7.145
1.7.144
1.7.143
1.7.138
1.7.133
1.7.132
1.7.131
1.7.130
1.7.128
1.7.126
1.7.125
1.7.121
1.7.120
1.7.119
1.7.118
1.7.117
1.7.116
1.7.115
1.7.114
1.7.113
1.7.112
1.7.111
1.7.110
1.7.109
1.7.108
1.7.107
1.7.106
1.7.105
1.7.104
1.7.103
1.7.102
1.7.101
1.7.100
1.7.99
1.7.98
1.7.97
1.7.96
1.7.95
1.7.94
1.7.93
1.7.92
1.7.91
1.7.90
1.7.89
1.7.88
1.7.87
1.7.86
1.7.85
1.7.84
1.7.83
1.7.82
1.7.81
1.7.80
1.7.79
1.7.78
1.7.77
1.7.76
1.7.75
1.7.74
1.7.71
1.7.70
1.7.69
1.7.66
1.7.65
1.7.64
1.7.63
1.7.62
1.7.61
1.7.59
1.7.58
1.7.57
1.7.56
1.7.55
1.7.54
1.7.53
1.7.52
1.7.51
1.7.49
1.7.44
1.7.43
1.7.42
1.7.41
1.7.39
1.7.38
1.7.37
1.7.36
1.7.34
1.7.33
1.7.31
1.7.30
1.7.29
1.7.28
1.7.27
1.7.26
1.7.25
1.7.24
1.7.23
1.7.22
1.7.21
1.7.20
1.7.19
1.7.18
1.7.17
1.7.16
1.7.15
1.7.14
1.7.13
1.7.12
1.7.11
1.7.10
1.7.9
1.7.8
1.7.7
1.7.6
1.7.5
1.7.4
1.7.3
1.7.2
1.7.1
1.7.0
1.6.20
1.6.19
1.6.18
1.6.17
1.6.16
1.6.15
1.6.14
1.6.13
1.6.12
1.6.11
1.6.10
1.6.9
1.6.8
1.6.7
1.6.6
1.6.5
1.6.4
1.6.3
1.5.2
1.5.1
1.5.0
1.4.9
1.4.8
1.4.7
1.4.6
1.4.5
1.4.4
1.4.3
1.4.2
1.4.1
1.4.0
1.3.2
1.3.1
1.3.0
1.2.10
1.2.9
1.2.8
1.2.7
1.2.5
1.2.4
1.2.2
1.2.1
1.2.0
1.1.0
1.0.0
A foundation for building Elixir Phoenix apps — SaaS, social networks, ERP systems, marketplaces, and more
Current section
Files
Jump to
Current section
Files
lib/phoenix_kit_web/live/modules/languages.html.heex
<PhoenixKitWeb.Components.LayoutWrapper.app_layout
flash={@flash}
phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
page_title="{@project_title} Languages"
current_path={@current_path}
project_title={@project_title}
current_locale={@current_locale}
>
<div class="container flex flex-col mx-auto px-4 py-6">
<%!-- Header Section --%>
<header class="w-full relative mb-6">
<%!-- Back Button (Left aligned) --%>
<.link
navigate={PhoenixKit.Utils.Routes.path("/admin/modules")}
class="btn btn-outline btn-primary btn-sm absolute left-0 top-0 -mb-12"
>
<PhoenixKitWeb.Components.Core.Icons.icon_arrow_left /> Back to Modules
</.link>
<%!-- Title Section --%>
<div class="text-center">
<h1 class="text-4xl font-bold text-base-content mb-3">Languages</h1>
<p class="text-lg text-base-content">Configure and manage language module</p>
</div>
</header>
<%!-- System Toggle Section --%>
<div class="card bg-base-100 shadow-xl mb-6">
<div class="card-body">
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="text-3xl mr-4">🌐</div>
<div>
<h3 class="card-title text-xl">Languages</h3>
<p class="text-base-content/70">
Enable language module for your application
</p>
</div>
</div>
<div class="form-control">
<label class="label cursor-pointer">
<input
type="checkbox"
class="toggle toggle-primary toggle-lg"
checked={@ml_enabled}
phx-click="toggle_languages"
/>
</label>
</div>
</div>
</div>
</div>
<%!-- Languages Management Section (always show to allow adding languages) --%>
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<div class="mb-4">
<%= if @in_configured_mode do %>
<h3 class="card-title text-xl">Language Configuration</h3>
<p class="text-sm text-base-content/60 mt-1">
Manage your configured languages
</p>
<% else %>
<h3 class="card-title text-xl">Add Your First Language</h3>
<p class="text-sm text-base-content/60 mt-1">
Select a language to begin configuration
</p>
<% end %>
</div>
<%!-- Add Language Dropdown (always show) --%>
<%= if not Enum.empty?(@available_languages_for_selection) do %>
<div class="mb-4">
<form phx-submit="add_language">
<div class="flex items-center gap-3">
<div class="form-control flex-1">
<select
name="language_code"
class="select select-bordered"
required
>
<option value="" disabled selected>Select a language to add...</option>
<%= for language <- @available_languages_for_selection do %>
<option value={language.code}>
{language.name} ({language.native}) {language.flag}
</option>
<% end %>
</select>
</div>
<button type="submit" class="btn btn-primary btn-sm">
<PhoenixKitWeb.Components.Core.Icons.icon_plus class="w-4 h-4 mr-1" />
Add Language
</button>
</div>
</form>
</div>
<% end %>
<%!-- Languages List (always show) --%>
<div class="space-y-3">
<%= for {language, index} <- Enum.with_index(@languages) do %>
<div class="flex items-center justify-between p-4 bg-base-200 rounded-lg">
<div class="flex items-center flex-1">
<div class="text-2xl mr-3">
{get_language_flag(language["code"])}
</div>
<div class="flex-1">
<div class="flex items-center gap-2">
<span class="font-medium">{language["name"]}</span>
<span class="badge badge-outline badge-sm">{language["code"]}</span>
<%= if language["is_default"] do %>
<span class="badge badge-primary badge-sm">Default</span>
<% end %>
<%= if language["code"] in @unknown_language_codes do %>
<span class="badge badge-warning badge-sm">Unknown</span>
<% end %>
</div>
<div class="flex items-center gap-2">
<%!-- Move buttons only in configured mode --%>
<%= if @in_configured_mode do %>
<div class="btn-group">
<button
class="btn btn-outline btn-xs"
phx-click="move_up"
phx-value-code={language["code"]}
disabled={index == 0}
title="Move up"
>
↑
</button>
<button
class="btn btn-outline btn-xs"
phx-click="move_down"
phx-value-code={language["code"]}
disabled={index == @language_count - 1}
title="Move down"
>
↓
</button>
</div>
<% end %>
</div>
</div>
</div>
<div class="flex items-center gap-2">
<%!-- Enable/Disable Toggle --%>
<div class="form-control">
<label class={[
"label cursor-pointer",
!@in_configured_mode && "opacity-50 cursor-not-allowed"
]}>
<span class="label-text mr-2 text-sm">Enabled</span>
<input
type="checkbox"
class="toggle toggle-sm toggle-primary"
checked={language["is_enabled"]}
phx-click="toggle_language"
phx-value-code={language["code"]}
disabled={not @in_configured_mode or language["is_default"]}
/>
</label>
</div>
<%!-- Set Default Button (only in configured mode, and not the default language) --%>
<%= if @in_configured_mode and not language["is_default"] do %>
<button
class="btn btn-outline btn-xs"
phx-click="set_default"
phx-value-code={language["code"]}
>
Set Default
</button>
<% end %>
<%!-- Remove Button (show for unknown codes or in configured mode, but not for default language) --%>
<%= if (language["code"] in @unknown_language_codes and not language["is_default"]) or (@in_configured_mode and not language["is_default"]) do %>
<button
class="btn btn-error btn-xs"
phx-click="remove_language"
phx-value-code={language["code"]}
onclick="return confirm('Are you sure you want to remove this language?')"
>
<PhoenixKitWeb.Components.Core.Icons.icon_trash class="w-3 h-3" />
</button>
<% end %>
</div>
</div>
<% end %>
</div>
</div>
</div>
<%!-- Help Section (only when in configured mode) --%>
<%= if @in_configured_mode do %>
<div class="alert alert-info mt-6">
<PhoenixKitWeb.Components.Core.Icons.icon_info class="w-5 h-5" />
<div>
<h3 class="font-bold">Language Configuration</h3>
<div class="text-sm space-y-1">
<p>• Use standard language codes like 'en', 'es', 'fr', or 'zh-CN' for regions</p>
<p>• The default language cannot be disabled and serves as the fallback</p>
<p>• Use the arrow buttons to reorder languages in the list</p>
<p>• At least one language must remain configured at all times</p>
</div>
</div>
</div>
<% end %>
<%!-- Frontend Language Switcher Component Section --%>
<div class="card bg-base-100 shadow-xl mt-6">
<div class="card-body">
<h2 class="card-title text-xl mb-4">Frontend Language Switcher</h2>
<p class="text-base-content/70 mb-6">
Configure and preview the language switcher component for your frontend application.
</p>
<%= if @ml_enabled and length(@languages) >= 1 do %>
<%!-- Two Column Layout: Settings | Preview --%>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 auto-rows-fr">
<%!-- Left Column: Settings --%>
<div class="lg:col-span-1 border border-base-200 rounded-lg p-4 flex flex-col">
<h3 class="font-bold mb-4">Switcher Settings</h3>
<div class="space-y-4">
<%!-- Show Flags Toggle --%>
<div class="form-control">
<label class="label cursor-pointer">
<span class="label-text">Show Flags</span>
<input
type="checkbox"
class="toggle toggle-sm toggle-primary"
checked={@switcher_show_flags}
phx-click="toggle_switcher_setting"
phx-value-setting="switcher_show_flags"
/>
</label>
</div>
<%!-- Show Language Names Toggle --%>
<div class="form-control">
<label class="label cursor-pointer">
<span class="label-text">Show Names</span>
<input
type="checkbox"
class="toggle toggle-sm toggle-primary"
checked={@switcher_show_names}
phx-click="toggle_switcher_setting"
phx-value-setting="switcher_show_names"
/>
</label>
</div>
<%!-- Go to Home Page Toggle --%>
<div class="form-control">
<label class="label cursor-pointer">
<span class="label-text">Go to Home</span>
<input
type="checkbox"
class="toggle toggle-sm toggle-primary"
checked={@switcher_goto_home}
phx-click="toggle_switcher_setting"
phx-value-setting="switcher_goto_home"
/>
</label>
</div>
<%!-- Hide Current Language Toggle --%>
<div class="form-control">
<label class="label cursor-pointer">
<span class="label-text">Hide Current</span>
<input
type="checkbox"
class="toggle toggle-sm toggle-primary"
checked={@switcher_hide_current}
phx-click="toggle_switcher_setting"
phx-value-setting="switcher_hide_current"
/>
</label>
</div>
</div>
</div>
<%!-- Right Column: Preview and Code --%>
<div class="lg:col-span-2 space-y-4">
<%!-- Live Preview --%>
<div class="border border-base-200 rounded-lg p-4">
<h3 class="font-bold mb-3">Live Preview</h3>
<div class="bg-base-200 rounded p-4 flex items-center justify-center min-h-24">
<.language_switcher_dropdown
current_locale={@current_locale}
show_flags={@switcher_show_flags}
show_names={@switcher_show_names}
_language_update_key={@language_count}
/>
</div>
</div>
<%!-- Generated Code --%>
<div class="border border-base-200 rounded-lg p-4">
<h3 class="font-bold mb-3">Generated Code</h3>
<div class="text-xs text-base-content/60 bg-base-200 rounded p-3 font-mono overflow-x-auto">
<pre>{generate_switcher_code(@switcher_show_flags, @switcher_show_names, @switcher_goto_home, @switcher_hide_current)}</pre>
</div>
<p class="text-xs text-base-content/60 mt-2">
Copy this code to your frontend application and customize as needed.
</p>
</div>
</div>
</div>
<%!-- Implementation Instructions --%>
<div class="alert alert-warning mt-6">
<PhoenixKitWeb.Components.Core.Icons.icon_warning class="w-5 h-5" />
<div>
<h3 class="font-bold">Implementation Notes</h3>
<div class="text-sm space-y-1">
<p>
• Make sure <code class="bg-base-300 px-2 py-1 rounded">@current_locale</code>
is available in your assigns
</p>
<p>
• The component automatically fetches enabled languages from the Language Module
</p>
<p>• Only enabled languages will appear in the switcher</p>
<p>• Language switcher works with your existing route-based locale system</p>
</div>
</div>
</div>
<% else %>
<div class="alert alert-info">
<PhoenixKitWeb.Components.Core.Icons.icon_info class="w-5 h-5" />
<div>
<h3 class="font-bold">Enable and Configure Languages</h3>
<p class="text-sm mt-2">
<%= if not @ml_enabled do %>
First, enable the Languages module using the toggle at the top, then add at least one language to see live previews of the language switcher component.
<% else %>
Add at least one language using the form above to see live previews of the language switcher component.
<% end %>
</p>
</div>
</div>
<% end %>
</div>
</div>
</div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>