Empty

<%= render Shadcn::EmptyComponent.new(class_name: "border border-dashed rounded-lg") do |empty| %>
  <% empty.with_header do |header| %>
    <% header.with_media(variant: :icon) do %>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"/></svg>
    <% end %>
    <% header.with_title { "Cloud Storage Empty" } %>
    <% header.with_description { "Upload files to your cloud storage to access them anywhere." } %>
  <% end %>
  <% empty.with_content do %>
    <%= render Shadcn::ButtonComponent.new(variant: :outline, size: :sm) { "Upload Files" } %>
  <% end %>
<% end %>

<%= render Shadcn::Empty.new(class_name: "bg-gradient-to-b from-muted/50 to-background from-30% rounded-lg") do |empty| %>
  <% empty.with_header do |header| %>
    <% header.with_media(variant: :icon) do %>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
        <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
      </svg>
    <% end %>
    <% header.with_title { "No Notifications" } %>
    <% header.with_description { "You're all caught up. New notifications will appear here." } %>
  <% end %>
  <% empty.with_content do %>
    <%= render Shadcn::Button.new(variant: :outline, size: :sm) do %>
      <svg class="mr-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" />
        <path d="M21 3v5h-5" />
      </svg>
      Refresh
    <% end %>
  <% end %>
<% end %>

<%= render Shadcn::EmptyComponent.new do |empty| %>
  <% empty.with_header do |header| %>
    <% header.with_media do %>
      <%= render Shadcn::AvatarComponent.new(
        src: "https://github.com/shadcn.png",
        alt: "User",
        size: :lg,
        class_name: "grayscale"
      ) %>
    <% end %>
    <% header.with_title { "User Offline" } %>
    <% header.with_description { "This user is currently offline. You can leave a message or try again later." } %>
  <% end %>
  <% empty.with_content do %>
    <%= render Shadcn::ButtonComponent.new(size: :sm) { "Leave Message" } %>
  <% end %>
<% end %>

<%= render Shadcn::EmptyComponent.new do |empty| %>
  <% empty.with_header do |header| %>
    <% header.with_title { "404 - Not Found" } %>
    <% header.with_description { "The page you're looking for doesn't exist. Try searching below." } %>
  <% end %>
  <% empty.with_content do %>
    <div class="w-full max-w-sm">
      <%= render Shadcn::InputGroupComponent.new do |group| %>
        <% group.with_input(placeholder: "Try searching for pages...") %>
        <% group.with_suffix do %>
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
        <% end %>
      <% end %>
    </div>
    <p class="text-sm text-muted-foreground">
      Need help? <a href="#" class="text-primary underline-offset-4 hover:underline">Contact support</a>
    </p>
  <% end %>
<% end %>