# SaladUI Card

This card is inspired by the SaladUI (which is inspired by ShadCN)

https://gist.github.com/user-attachments/assets/8a017420-58c3-4d25-a400-1ef93eeac405

#### See better-states tailwind plugin to have the full functionality: 

[https://gist.github.com/Neophen/2f512ace1e7182e5346076333e4a0fdc](https://gist.github.com/Neophen/2f512ace1e7182e5346076333e4a0fdc)

## Explanation
The order of the `card_header/card_content/card_footer` doesn't matter as they all slot into the right place

So this markup:

```html 
<.card action={[
        {:patch, ~q"/:locale/admin/users/#{@user.id}"},
        {:sr_label, dgettext("admin", "View user %{name}", name: @user.first_name)}
      ]} >
   <.card_footer />
   <.card_header />
   <.card_content />
<./card>
```

Will always render the following:

```html
<.card action="...">
   <.card_header />
   <.card_content />
   <.card_footer />
<./card>
```

I've placed the main action on the card component to avoid thinking about tabbing index issues for keyboard navigation so that if you have a menu like so:

```html
<.card
  id={@user.id}
  action={[
    {:patch, ~q"/:locale/admin/users/#{@user.id}"},
    {:sr_label, dgettext("admin", "View user %{name}", name: @user.first_name)}
  ]}
>
  <.card_header>
    <.card_accent_text>
      <.text_h4 text={@user.email} />
    </.card_accent_text>
  </.card_header>

  <.card_menu>
    <.card_menu_action icon="lucide-settings" patch={~q"/:locale/admin/users/#{@user.id}"}>
      <%= dgettext("admin", "Settings") %>
    </.card_menu_action>
    <.card_menu_action
      data-confirm-title={dgettext("admin", "Delete %{user}", user: @user.first_name)}
      data-confirm-message={dgettext("admin", "Are you sure? This action cannot be undone!")}
      data-confirm-confirm={dgettext("admin", "Delete user?")}
      data-confirm-type="danger"
      phx-click="delete_user"
      phx-value-id={@user.id}
      icon="lucide-trash"
    >
      <%= dgettext("admin", "Delete") %>
    </.card_menu_action>
  </.card_menu>
  <.card_footer_muted_text text={dgettext("admin", "Edited %{time}", time: @user.updated_at)} />
</.card>
```

The first tab index is always on the `<.card_action />` this is for accesibility sake, you could also just delete this part from the card and make sure the `<.card_action>` is always the first component in the html. 
Again it works by placing it self in the correct visual position. so the order doesn't matter.

The `<.card_accent_text>` and `<.card_muted_text>` act to provide highlighting or muting stuff on the card to avoid visual overload for the consumers.