Card

<%= render Shadcn::CardComponent.new(class_name: "w-[350px]") do |card| %>
  <% card.with_header do |header| %>
    <% header.with_title { "Card Title" } %>
    <% header.with_description { "Card Description" } %>
  <% end %>
  <% card.with_content do %>
    <p>Card content goes here.</p>
  <% end %>
<% end %>

<%= render Shadcn::CardComponent.new(class_name: "w-[350px]") do |card| %>
  <% card.with_header do |header| %>
    <% header.with_title { "Notifications" } %>
    <% header.with_description { "You have 3 unread messages." } %>
  <% end %>
  <% card.with_content do %>
    <div class="space-y-4">
      <div class="flex items-center gap-4">
        <span class="flex h-2 w-2 rounded-full bg-sky-500"></span>
        <div class="flex-1 space-y-1">
          <p class="text-sm font-medium">Push Notifications</p>
          <p class="text-sm text-muted-foreground">Send notifications to device.</p>
        </div>
        <%= render Shadcn::SwitchComponent.new(checked: true) %>
      </div>
    </div>
  <% end %>
  <% card.with_footer do %>
    <%= render Shadcn::ButtonComponent.new(class_name: "w-full") { "Mark all as read" } %>
  <% end %>
<% end %>

<div class="grid gap-4 md:grid-cols-3">
  <%= render Shadcn::CardComponent.new do |card| %>
    <% card.with_header do |header| %>
      <% header.with_description { "Total Revenue" } %>
      <% header.with_title { "$45,231.89" } %>
    <% end %>
    <% card.with_content do %>
      <p class="text-xs text-muted-foreground">+20.1% from last month</p>
    <% end %>
  <% end %>

  <%= render Shadcn::CardComponent.new do |card| %>
    <% card.with_header do |header| %>
      <% header.with_description { "Subscriptions" } %>
      <% header.with_title { "+2350" } %>
    <% end %>
    <% card.with_content do %>
      <p class="text-xs text-muted-foreground">+180.1% from last month</p>
    <% end %>
  <% end %>

  <%= render Shadcn::CardComponent.new do |card| %>
    <% card.with_header do |header| %>
      <% header.with_description { "Active Now" } %>
      <% header.with_title { "+573" } %>
    <% end %>
    <% card.with_content do %>
      <p class="text-xs text-muted-foreground">+201 since last hour</p>
    <% end %>
  <% end %>
</div>

<%= render Shadcn::CardComponent.new(class_name: "w-[350px]") do |card| %>
  <% card.with_header do |header| %>
    <div class="flex items-center gap-4">
      <%= render Shadcn::AvatarComponent.new(
        src: "https://github.com/shadcn.png",
        alt: "Shadcn",
        size: :lg
      ) %>
      <div>
        <% header.with_title { "Shadcn" } %>
        <% header.with_description { "@shadcn" } %>
      </div>
    </div>
  <% end %>
  <% card.with_content do %>
    <p class="text-sm">Creator of shadcn/ui. Building in public at @shadcn.</p>
  <% end %>
  <% card.with_footer do %>
    <%= render Shadcn::ButtonComponent.new(variant: :outline, class_name: "w-full") { "Follow" } %>
  <% end %>
<% end %>