cloud/music_library
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move badge/1 to core components

Browse Source
This commit is contained in:
Claudio Ortolina
2025-02-19 09:49:05 +00:00
parent 163bbe8902
commit 5ef05a94f5
2 changed files with 49 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/components/core_components.ex
+49
View File
@@ -642,6 +642,55 @@ defmodule MusicLibraryWeb.CoreComponents do
""" """
end end
attr :color, :atom, values: [:green, :yellow, :gray], required: true
attr :text, :string, required: true
def badge(assigns) do
case assigns.color do
:green ->
~H"""
<span class={[
"inline-flex items-center rounded-md",
"px-2 py-1 text-xs font-medium",
"ring-1 ring-inset",
"bg-green-50 dark:bg-green-500/10",
"text-green-700 dark:text-green-400",
"ring-green-600/20 dark:ring-green-500/20"
]}>
{@text}
</span>
"""
:yellow ->
~H"""
<span class={[
"inline-flex items-center rounded-md",
"px-2 py-1 text-xs font-medium",
"ring-1 ring-inset",
"bg-yellow-50 dark:bg-yellow-400/10",
"text-yellow-800 dark:text-yellow-500",
"ring-yellow-600/20 dark:ring-yellow-400/20"
]}>
{@text}
</span>
"""
:gray ->
~H"""
<span class={[
"inline-flex items-center rounded-md",
"px-2 py-1 text-xs font-medium",
"ring-1 ring-inset",
"bg-zinc-50 dark:bg-zinc-500/10",
"text-zinc-700 dark:text-zinc-400",
"ring-zinc-600/20 dark:ring-zinc-500/20"
]}>
{@text}
</span>
"""
end
end
## JS Commands ## JS Commands
def show(js \\ %JS{}, selector) do def show(js \\ %JS{}, selector) do
lib/music_library_web/live/stats_live/data_components.ex
-49
View File
@@ -65,53 +65,4 @@ defmodule MusicLibraryWeb.StatsLive.DataComponents do
</div> </div>
""" """
end end
attr :color, :atom, values: [:green, :yellow, :gray], required: true
attr :text, :string, required: true
def badge(assigns) do
case assigns.color do
:green ->
~H"""
<span class={[
"inline-flex items-center rounded-md",
"px-2 py-1 text-xs font-medium",
"ring-1 ring-inset",
"bg-green-50 dark:bg-green-500/10",
"text-green-700 dark:text-green-400",
"ring-green-600/20 dark:ring-green-500/20"
]}>
{@text}
</span>
"""
:yellow ->
~H"""
<span class={[
"inline-flex items-center rounded-md",
"px-2 py-1 text-xs font-medium",
"ring-1 ring-inset",
"bg-yellow-50 dark:bg-yellow-400/10",
"text-yellow-800 dark:text-yellow-500",
"ring-yellow-600/20 dark:ring-yellow-400/20"
]}>
{@text}
</span>
"""
:gray ->
~H"""
<span class={[
"inline-flex items-center rounded-md",
"px-2 py-1 text-xs font-medium",
"ring-1 ring-inset",
"bg-zinc-50 dark:bg-zinc-500/10",
"text-zinc-700 dark:text-zinc-400",
"ring-zinc-600/20 dark:ring-zinc-500/20"
]}>
{@text}
</span>
"""
end
end
end end