<div class="flex-col hidden lg:flex md:flex-shrink-0 w-96">
<div class="fixed flex flex-col overflow-y-auto bg-white rounded-lg shadow-lg dark:bg-gray-700 w-96">
  <div class="bg-bottom bg-no-repeat bg-cover rounded-t-lg" style="height: 250px;background-image: url(<%= Bonfire.Common.Config.get([:ui, :theme, :instance_image], '') %>)"></div>
  <div class="p-3 rounded-b-lg">
    <h2 class="text-xl font-extrabold text-gray-800 dark:text-gray-200"><%= Bonfire.Common.Config.get([:ui, :theme, :instance_name], "Bonfire") %></h2>
    <span class="mt-2 inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-blue-100 text-blue-800">
      <%= Bonfire.Application.named_version() %>
    </span>
    <p class="mt-2 text-base text-gray-700 dark:text-gray-300">
      <%= Bonfire.Common.Config.get([:ui, :theme, :instance_description], l "Yet another bonfire instance") %>
    </p>


  </div>
</div>
</div>

<section class="min-h-screen mb-6 bg-white rounded-lg shadow dark:bg-gray-700 w-center">
  <%= live_component(@socket, Bonfire.UI.Social.FeedHeaderLive, feed_title: @feed_title) %>
  <%= live_component(@socket, Bonfire.UI.Social.FeedLive, assigns_merge(assigns, id: "feed")) %>
</section>
