Skip to content

Commit

Permalink
Replace card_horizontal component with card attr.
Browse files Browse the repository at this point in the history
Instead of separate card and card_horizontal components, add the
:direction attribute to the card component.
  • Loading branch information
houhoulis committed Jan 10, 2025
1 parent afa2445 commit f8ab91a
Showing 1 changed file with 30 additions and 47 deletions.
77 changes: 30 additions & 47 deletions sources/lib/components/station_ui/html/card.ex
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ defmodule StationUI.HTML.Card do
### Horizontal Card
<.card_horizontal>
<.card direction="horizontal">
<:header>
<img
class="h-full w-[260px] object-cover"
Expand Down Expand Up @@ -79,7 +79,7 @@ defmodule StationUI.HTML.Card do
</.button>
</div>
</:content>
</.card_horizontal>
</.card>
"""

@base_classes "@container min-w-[200px] w-full h-full"
Expand All @@ -91,45 +91,6 @@ defmodule StationUI.HTML.Card do
@base_content_classes "grid gap-0.5 @[350px]:gap-1 @[425px]:gap-2 p-2 @[425px]:px-4 @[625px]:px-6 @[625px]:py-3 @[850px]:px-8 @[850px]:py-4"
defp base_content_classes, do: @base_content_classes

attr :class, :any, default: ""

slot :header

slot :content, required: true do
attr :class, :string
end

def card(assigns) do
~H"""
<div class={[base_classes() | List.wrap(@class)]}>
<div class={base_inner_classes()}>
<header :for={header <- @header}>
{render_slot(header)}
</header>
<.content_card slot={@content} />
</div>
</div>
"""
end

attr :slot, :any, required: true

defp content_card(assigns) do
class =
case assigns.slot do
[%{class: class} | _] -> class
_ -> "bg-white"
end

assigns = assign(assigns, :class, class)

~H"""
<div class={[base_content_classes() | List.wrap(@class)]}>
{render_slot(@slot)}
</div>
"""
end

@base_horizontal_classes "@container min-w-[200px] w-full h-full"
defp base_horizontal_classes, do: @base_horizontal_classes

Expand All @@ -140,29 +101,44 @@ defmodule StationUI.HTML.Card do
defp base_horizontal_content_classes, do: @base_horizontal_content_classes

attr :class, :any, default: ""
slot :inner_block, required: true
attr :direction, :string

slot :header

slot :content do
slot :content, required: true do
attr :class, :string
end

def card_horizontal(assigns) do
def card(%{direction: "horizontal"} = assigns) do
~H"""
<div class={[base_horizontal_classes() | List.wrap(@class)]}>
<div class={base_horizontal_inner_classes()}>
<header :for={header <- @header}>
{render_slot(header)}
</header>
<.content_card_horizontal slot={@content} />
<.content_card slot={@content} direction="horizontal" />
</div>
</div>
"""
end

def card(assigns) do
~H"""
<div class={[base_classes() | List.wrap(@class)]}>
<div class={base_inner_classes()}>
<header :for={header <- @header}>
{render_slot(header)}
</header>
<.content_card slot={@content} />
</div>
</div>
"""
end

attr :slot, :any, required: true
attr :direction, :string, default: ""

defp content_card_horizontal(assigns) do
defp content_card(assigns) do
class =
case assigns.slot do
[%{class: class} | _] -> class
Expand All @@ -171,8 +147,15 @@ defmodule StationUI.HTML.Card do

assigns = assign(assigns, :class, class)

content_class =
if assigns.direction == "horizontal" do
[base_horizontal_content_classes() | List.wrap(class)]
else
[base_content_classes() | List.wrap(class)]
end

~H"""
<div class={[base_horizontal_content_classes() | List.wrap(@class)]}>
<div class={content_class}>
{render_slot(@slot)}
</div>
"""
Expand Down

0 comments on commit f8ab91a

Please sign in to comment.