Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace card_horizontal component with card attr. #28

Merged
merged 2 commits into from
Jan 17, 2025
Merged

Replace card_horizontal component with card attr. #28

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f8ab91a
Replace card_horizontal component with card attr.
houhoulis Jan 10, 2025
9b1e846
Update re feedback.
houhoulis Jan 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 29 additions & 47 deletions sources/lib/components/station_ui/html/card.ex
View file
Open in desktop
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
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I could have pattern-matched the content_card function the way I did the card function. But there is only one word's difference between the two content_card function bodies, so I used one if statement to consolidate.

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

assigns = assign(assigns, :class, class)

content_class =
case assigns do
%{direction: "horizontal"} -> [base_horizontal_content_classes() | List.wrap(class)]
_ -> [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
Loading