maglevcms 2.1.0 → 3.0.0.beta2

data/app/components/maglev/uikit/list/list_item_component.rb

@@ -0,0 +1,85 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    module List
+      class ListItemComponent < Maglev::Uikit::BaseComponent
+        renders_one :handle
+        renders_one :image
+        renders_one :big_image
+        renders_one :pre_title
+        renders_one :title
+        renders_one :action
+
+        attr_reader :link, :index, :options
+
+        def initialize(id: nil, link: nil, options: {})
+          @id = id
+          @link = link
+          @custom_wrapper_classes = options[:wrapper_classes]
+          @index = options[:index]
+          @options = options
+        end
+
+        def id
+          @id || SecureRandom.uuid
+        end
+
+        def link?
+          link.present?
+        end
+
+        def link_url
+          link[:url]
+        end
+
+        def link_data
+          link[:data] || {}
+        end
+
+        def wrapper_classes
+          class_variants(
+            base: 'bg-gray-100 rounded-md px-2 flex text-gray-800'
+          ).render(class: @custom_wrapper_classes)
+        end
+
+        def content_classes
+          class_variants(
+            base: 'flex flex-1 py-3 gap-3 overflow-hidden px-2',
+            variants: {
+              disposition: {
+                row: 'flex-row items-center',
+                col: 'flex-col'
+              }
+            },
+            default: { disposition: :col }
+          ).render(disposition: big_image? ? :col : :row)
+        end
+
+        def image_classes(...)
+          class_variants(
+            base: 'object-cover w-full h-full'
+          ).render(...)
+        end
+
+        def big_image_classes(...)
+          class_variants(
+            base: 'w-full'
+          ).render(...)
+        end
+
+        def sortable_scope
+          options[:sortable_scope]
+        end
+
+        def sortable_target
+          sortable_scope.present? ? "item-#{sortable_scope}" : 'item'
+        end
+
+        def sortable_handle
+          sortable_scope.present? ? "handle-#{sortable_scope}" : 'handle'
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/uikit/locale_switcher_component/locale_switcher_component.html.erb

@@ -0,0 +1,22 @@
+<%= render(Maglev::Uikit::MenuDropdownComponent.new) do |dropdown| %>
+  <% dropdown.with_trigger do %>
+    <button 
+      class="flex-1 h-full w-full px-6 hover:bg-gray-100 transition-colors duration-200 flex items-center focus:outline-none focus:none cursor-pointer space-x-2"
+      data-action="click->uikit-dropdown#toggle" 
+      data-uikit-dropdown-target="button">
+      <%= render Maglev::Uikit::IconComponent.new(name: 'global') %>
+      <span class="whitespace-nowrap">
+        <%= current_locale_label %>
+      </span>
+      <%= render Maglev::Uikit::IconComponent.new(name: 'arrow_down') %>
+    </button>
+  <% end %>
+  
+  <% locales.each do |locale| %>
+    <% dropdown.with_item do %>
+      <%= link_to locale[:path], class: dropdown.item_classes, data: locale[:data_attributes] do %>
+        <span class="<%= 'font-bold' if locale[:value] == current_locale %>"><%= locale[:label] %></span>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/maglev/uikit/locale_switcher_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    class LocaleSwitcherComponent < Maglev::Uikit::BaseComponent
+      attr_reader :locales, :current_locale
+
+      def initialize(locales:, current_locale:)
+        @locales = locales
+        @current_locale = current_locale.to_s
+      end
+
+      def current_locale_label
+        locales.find { |locale| locale[:value].to_s == current_locale }[:label]
+      end
+    end
+  end
+end

data/app/components/maglev/uikit/menu_dropdown_component/menu_dropdown_component.html.erb

@@ -0,0 +1,15 @@
+<%= render Maglev::Uikit::DropdownComponent.new(placement: placement) do |component| %>
+  <% component.with_trigger do %>
+    <% if trigger.present? %>
+      <%= trigger %>
+    <% else %>
+      <%= render Maglev::Uikit::IconButtonComponent.new(icon_name: icon_name, data: { action: "click->uikit-dropdown#toggle", 'uikit-dropdown-target': 'button' }) %>
+    <% end %>
+  <% end %>
+
+  <div class="flex flex-col w-48 text-gray-800">
+    <% items.each do |item| %>
+      <%= item %>
+    <% end %>
+  </div>
+<% end %>

data/app/components/maglev/uikit/menu_dropdown_component.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    class MenuDropdownComponent < Maglev::Uikit::BaseComponent
+      renders_one :trigger
+      renders_many :items
+
+      attr_reader :icon_name, :placement
+
+      def initialize(icon_name: nil, placement: 'bottom-start')
+        @icon_name = icon_name
+        @placement = placement
+      end
+
+      def item_classes(...)
+        class_variants(
+          base: %(
+            flex items-center px-4 py-4 hover:bg-gray-100 w-full
+            transition-colors duration-200 focus:outline-none cursor-pointer flex-1
+          )
+        ).render(...)
+      end
+
+      def form_item_classes(...)
+        class_variants(
+          base: 'flex items-center focus:outline-none cursor-pointer'
+        ).render(...)
+      end
+    end
+  end
+end

data/app/components/maglev/uikit/modal_component/modal_component.html.erb

@@ -0,0 +1,63 @@
+<div 
+  class="relative z-50 hidden" 
+  role="dialog" 
+  tabindex="0"
+  aria-modal="true"
+  data-controller="uikit-modal"
+  data-action="hashchange@window->uikit-modal#openFromUrl keydown.esc->uikit-modal#close"
+  <% if open %>data-uikit-modal-open-value="true"<% end %>
+  <% if id %>data-uikit-modal-id-value="<%= id %>"<% end %>
+  data-uikit-modal-focus-value="<%= focus %>"
+>  
+  <div 
+    class="fixed inset-0 bg-neutral-600/75 transition-opacity opacity-0 hidden"
+    data-uikit-modal-target="backgroundBackdrop"
+    data-transition-enter="ease-out duration-100"
+    data-transition-enter-start="opacity-0"
+    data-transition-enter-end="opacity-100"
+    data-transition-leave="ease-in duration-100"
+    data-transition-leave-start="opacity-100"
+    data-transition-leave-end="opacity-0"
+  ></div>
+
+  <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
+    <div class="flex min-h-full items-center justify-center p-4" data-action="click->uikit-modal#close:self">
+      <div 
+        class="relative transform overflow-y-visible rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:min-w-96 sm:p-6 w-full sm:w-auto hidden"
+        data-uikit-modal-target="dialog"
+        data-transition-enter="ease-out duration-100"
+        data-transition-enter-start="opacity-0 -translate-y-6 scale-95"
+        data-transition-enter-end="opacity-100 translate-y-0 scale-100"
+        data-transition-leave="ease-in duration-100"
+        data-transition-leave-start="opacity-100 translate-y-0 scale-100"
+        data-transition-leave-end="opacity-0 -translate-y-6 scale-95"
+      >
+        <%= helpers.turbo_frame_tag 'modal-dialog' do %>
+          <div class="flex items-center justify-between">
+            <h2 class="text-gray-800 font-semibold antialiased text-lg"><%= title %></h2>
+
+            <div class="ml-auto pl-2 gap-0.5 flex items-center">
+              <% if notification? %>
+                <%= notification %>          
+              <% end %>
+
+              <div class="relative -right-2">
+                <%= render Maglev::Uikit::IconButtonComponent.new(icon_name: 'close', data: { action: 'click->uikit-modal#close' }) %>
+              </div>
+            </div>
+          </div>
+                    
+          <div class="mt-5">
+            <%= content %>
+          </div>
+
+          <% if footer? %>
+            <div class="pt-5 flex justify-end items-center gap-2">
+              <%= footer %>
+            </div>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</div>

data/app/components/maglev/uikit/modal_component/modal_controller.js

@@ -0,0 +1,47 @@
+import { Controller } from "@hotwired/stimulus"
+import { enter, leave } from 'el-transition'
+
+export default class extends Controller {
+  static targets = ['dialog', 'backgroundBackdrop']
+  static values = { id: String, open: Boolean, focus: Boolean }
+
+  connect() {
+    if (this.openValue || window.location.hash === `#${this.idValue}`) this.delayedOpen()
+  }
+
+  delayedOpen() {
+    setTimeout(() => this.open(), 200)
+  }
+
+  openFromUrl(event) {
+    if (event.target.location.hash === `#${this.idValue}`) {
+      this.open()
+    }
+  }
+
+  open() {    
+    this.element.classList.remove('hidden')
+
+    enter(this.dialogTarget)
+    enter(this.backgroundBackdropTarget)
+
+    if (this.focusValue === true) {
+      const firstInput = this.element.querySelector('input[type=text], input[type=search], input[type=email]')
+      firstInput?.focus()
+    }
+  }
+
+  close(event) {
+    // closing after a form submission? Closing the modal only the request was successful.
+    if (event?.detail?.formSubmission !== undefined && event?.detail?.success === false)
+      return
+    
+    leave(this.dialogTarget)
+    leave(this.backgroundBackdropTarget)
+
+    // wait for 400ms (max duration of an animation)
+    setTimeout(() => this.element.classList.add('hidden'), 400)
+
+    if (this.idValue) history.replaceState(null, null, ' ')
+  }
+}

data/app/components/maglev/uikit/modal_component.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    class ModalComponent < Maglev::Uikit::BaseComponent
+      renders_one :title
+      renders_one :footer
+      renders_one :notification
+
+      attr_reader :id, :open, :focus
+
+      def initialize(id:, open: false, focus: true, size: 'default')
+        @id = id
+        @open = open
+        @focus = focus
+        @size = size
+      end
+
+      def dialog_classes
+        class_variants(
+          base: %(
+            relative transform overflow-y-visible rounded-lg bg-white px-4 pb-4 pt-5 text-left
+            shadow-xl transition-all sm:my-8 sm:p-6 hidden
+          ),
+          variants: {
+            size: { small: 'w-full sm:max-w-xl sm:min-w-96 sm:w-auto' }
+          },
+          defaults: { size: :default }
+        ).render(size: @size)
+      end
+    end
+  end
+end

data/app/components/maglev/uikit/page_actions_dropdown_component/page_actions_dropdown_component.html.erb

@@ -0,0 +1,56 @@
+<%= render Maglev::Uikit::MenuDropdownComponent.new(icon_name: icon_name) do |dropdown| %>
+  <% dropdown.with_item do %>
+    <%= link_to paths[:edit], class: dropdown.item_classes, data: { turbo_frame: '_top' } do %>
+      <%= render Maglev::Uikit::IconComponent.new(name: 'settings', class_names: 'shrink-0') %>
+      <span class="ml-2 whitespace-nowrap truncate overflow-hidden"><%= t('maglev.editor.pages.actions.edit') %></span>
+    <% end %>
+  <% end if allow?(:edit) %>
+
+  <% dropdown.with_item do %>    
+    <%= render Maglev::Uikit::MenuDropdownComponent.new(placement: 'right-start') do |sub_menu| %>
+      <% sub_menu.with_trigger do %>
+        <%= button_tag class: sub_menu.item_classes, data: { action: 'click->uikit-dropdown#toggle', 'uikit-dropdown-target': 'button' } do %>
+          <%= render Maglev::Uikit::IconComponent.new(name: 'preview', class_names: 'shrink-0') %>
+          <span class="ml-2 whitespace-nowrap truncate overflow-hidden"><%= t('maglev.editor.pages.actions.preview') %></span>
+        <% end %>
+      <% end %>
+      <% sub_menu.with_item do %>
+        <%= link_to t('maglev.editor.pages.actions.draft_preview'), paths[:preview], class: sub_menu.item_classes, target: '_blank' %>
+      <% end %>
+      <% sub_menu.with_item do %>
+        <%= link_to t('maglev.editor.pages.actions.live_preview'), live_url, class: sub_menu.item_classes, target: '_blank' %>
+      <% end %>
+    <% end %>
+  <% end if allow?(:preview) %>
+
+  <% dropdown.with_item do %>
+    <%= button_to paths[:clone], class: dropdown.form_item_classes, form_class: dropdown.item_classes do %>
+      <%= render Maglev::Uikit::IconComponent.new(name: 'clone', class_names: 'shrink-0') %>
+      <span class="ml-2 whitespace-nowrap truncate overflow-hidden"><%= t('maglev.editor.pages.actions.clone') %></span>
+    <% end %>
+  <% end if allow?(:clone) %>
+
+  <% dropdown.with_item do %> 
+    <div data-controller="copy-to-clipboard" data-copy-to-clipboard-source-value="<%= live_url %>">
+      <%= link_to '#', class: dropdown.item_classes, data: { copy_to_clipboard_target: 'text', action: 'click->copy-to-clipboard#copy:prevent' } do %>
+        <%= render Maglev::Uikit::IconComponent.new(name: 'clipboard', class_names: 'shrink-0') %>
+        <span class="ml-2 whitespace-nowrap truncate overflow-hidden">
+          <%= t('maglev.editor.pages.actions.copy_url_to_clipboard') %>
+        </span>                                    
+      <% end %>
+      <div class="<%= dropdown.item_classes %> hidden" data-copy-to-clipboard-target="success">
+        <%= render Maglev::Uikit::IconComponent.new(name: 'checkbox_circle', class_names: 'text-green-500 shrink-0') %>
+        <span class="ml-2 whitespace-nowrap truncate overflow-hidden text-green-500">
+          <%= t('maglev.editor.pages.actions.copy_url_to_clipboard_success') %>
+        </span>
+      </div>
+    </div>
+  <% end if allow?(:copy_url_to_clipboard) %>
+
+  <% dropdown.with_item do %>
+    <%= button_to paths[:delete], method: :delete, class: dropdown.item_classes, form_class: dropdown.form_item_classes, data: { turbo_confirm: t('maglev.editor.pages.actions.confirm_delete'), turbo_frame: '_top' } do %>
+      <%= render Maglev::Uikit::IconComponent.new(name: 'delete_bin', class_names: 'shrink-0') %>
+      <span class="ml-2 whitespace-nowrap truncate overflow-hidden"><%= t('maglev.editor.pages.actions.delete') %></span>
+    <% end %>
+  <% end if allow?(:delete) %>
+<% end %>

data/app/components/maglev/uikit/page_actions_dropdown_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    class PageActionsDropdownComponent < Maglev::Uikit::BaseComponent
+      attr_reader :paths, :live_url, :without_actions, :icon_direction
+
+      def initialize(paths:, live_url:, without_actions: [], icon_direction: :vertical)
+        @paths = paths
+        @live_url = live_url
+        @without_actions = without_actions
+        @icon_direction = icon_direction
+      end
+
+      def allow?(action)
+        !without_actions.include?(action)
+      end
+
+      def icon_name
+        icon_direction == :vertical ? 'more_2' : 'more'
+      end
+    end
+  end
+end

data/app/components/maglev/uikit/page_layout_component/back_link_component.html.erb

@@ -0,0 +1,4 @@
+<%= link_to path, class: 'text-gray-500 hover:text-gray-700 inline-flex items-center space-x text-xs', data: { turbo_frame: '_top' } do %>
+  <%= render Maglev::Uikit::IconComponent.new(name: 'arrow_left', size: '1.15rem', class_names: 'relative -left-1') %>
+  <%= content %>
+<% end %>

data/app/components/maglev/uikit/page_layout_component/page_layout_component.html.erb

@@ -0,0 +1,58 @@
+<div 
+  id="page-layout"   
+  data-controller="uikit-page-layout"
+  data-action="turbo:before-render@window->uikit-page-layout#vtPair"
+  class="<%= wrapper_classes %>"
+  <%= expanded ? 'data-expanded' : 'data-not-expanded' %>  
+>
+  <div class="py-6 mx-4">
+    <% title_html = capture do %>
+      <h2 class="text-gray-800 font-semibold text-lg capitalize-first antialiased" data-editor-page-layout-title>
+        <%= title %>
+      </h2>
+    <% end %>
+
+    <div class="h-6 flex items-center">
+      <div class="shrink-0">
+        <% if pre_title? %>
+          <%= pre_title %>
+        <% elsif back_link? %>
+          <%= back_link %>
+        <% else %>
+          <%= title_html %>
+        <% end %>
+      </div>
+      <div class="ml-auto pl-2 gap-0.5 flex items-center">
+        <turbo-frame id="page-layout-notification">
+          <% if notification? %>
+            <%= notification %>
+          <% end %>
+        </turbo-frame>
+
+        <%= link_to back_path, class: 'h-7 w-7 flex items-center justify-center rounded-full focus:outline-none transition-colors duration-200 relative -right-2 bg-gray-600/0 hover:text-gray-900 text-gray-800 hover:bg-gray-600/10', data: { turbo_frame: '_top' } do %>
+          <%= render Maglev::Uikit::IconComponent.new(name: 'close', size: '1.15rem') %>
+        <% end %>
+      </div>
+    </div>
+
+    <% if pre_title? || back_link? %>
+      <%= title_html %>
+    <% end %>
+
+    <% if description? %>
+      <div class="text-gray-400 text-sm">
+        <%= description %>
+      </div>
+    <% end %>
+  </div>
+
+  <div class="flex-1 flex flex-col overflow-y-auto mx-4">
+    <%= content %>
+  </div>
+
+  <% if footer? %>
+    <div class="mt-4 mx-4 pb-4">
+      <%= footer  %>
+    </div>
+  <% end %>
+</div>

data/app/components/maglev/uikit/page_layout_component/page_layout_controller.js

@@ -0,0 +1,34 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+
+  connect() {
+    this.updateBodyDataset(this.element.dataset.expanded)
+  }
+  
+  vtPair(event) {
+    const oldDoc = document
+    const newBody = event.detail.newBody
+
+    const hadPageLayout = !!oldDoc.querySelector('#page-layout')
+    const hasPageLayout = !!newBody.querySelector('#page-layout')
+    const hasExpandedPageLayout = !!newBody.querySelector('#page-layout[data-expanded]')
+
+    this.updateBodyDataset(hasExpandedPageLayout)
+
+    // required for a smoother transition (application.css) between the page layout and the expanded page layout
+    if (hadPageLayout && hasPageLayout) {
+      document.documentElement.dataset.pageLayoutVtPair = "already-present"
+    } else {
+      delete document.documentElement.dataset.pageLayoutVtPair
+    }
+  }
+
+  updateBodyDataset(expanded) {
+    if (expanded === undefined || expanded === false) {
+      delete document.body.dataset.expandedPageLayout   
+    } else {
+      document.body.dataset.expandedPageLayout = true
+    }
+  }
+}

data/app/components/maglev/uikit/page_layout_component.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    class PageLayoutComponent < Maglev::Uikit::BaseComponent
+      renders_one :back_link, 'BackLinkComponent'
+      renders_one :pre_title
+      renders_one :title
+      renders_one :description
+      renders_one :notification
+      renders_one :footer
+
+      attr_reader :back_path, :expanded
+
+      def initialize(back_path: nil, expanded: false)
+        @back_path = back_path
+        @expanded = expanded
+      end
+
+      def wrapper_classes
+        class_variants(
+          base: %(
+            slide-pane absolute inset-y-0 h-[100dvh-(--spacing(16))] bg-white
+            border-r border-gray-200 origin-top-left flex flex-col top-16 w-104
+          ),
+          variants: {
+            expanded: 'left-0 z-40',
+            '!expanded': 'left-16 z-10'
+          }
+        ).render(expanded: expanded)
+      end
+
+      class BackLinkComponent < Maglev::Uikit::BaseComponent
+        attr_reader :path
+
+        def initialize(path:)
+          @path = path
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/uikit/pagination_component/pagination_component.html.erb

@@ -0,0 +1,70 @@
+<% a = pagy_anchor(pagy) %>
+
+<% left_arrow = capture do %>
+  <%= render Maglev::Uikit::IconComponent.new(name: 'arrow_left', size: '1.25rem') %>  
+<% end %>
+
+<% right_arrow = capture do %>
+  <%= render Maglev::Uikit::IconComponent.new(name: 'arrow_right', size: '1.25rem') %>
+<% end %>
+
+<div class="flex items-center justify-between bg-white w-full h-10">
+  <div class="flex flex-1 justify-between sm:hidden">
+    <% if pagy.prev %>
+      <%== a.(pagy.prev, pagy_t('pagy.aria_label.prev'), aria_label: 'Previous', classes: 'relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100') %>
+    <% else %>
+      <a role="link" aria-disabled="true" aria-label="Previous" class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100">
+        <%= pagy_t('pagy.aria_label.prev') %>
+      </a>
+    <% end %>
+
+     <% if pagy.next %>
+      <%== a.(pagy.next, pagy_t('pagy.aria_label.next'), aria_label: 'Next', classes: 'relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100') %>
+    <% else %>
+      <a role="link" aria-disabled="true" aria-label="Next" class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100">
+        <%= pagy_t('pagy.aria_label.next') %>
+      </a>
+    <% end %>
+  </div>
+
+  <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
+    <div>
+      <p class="text-sm">
+        <%== pagy_info(pagy, item_name: item_name) %>
+      </p>
+    </div>
+
+    <div class="<%= 'hidden' if pagy.series.size == 1 %>">  
+      <nav class="isolate inline-flex gap-1" aria-label="Pages">
+        <%# Previous page link %>
+        <% if pagy.prev %>
+          <%== a.(pagy.prev, left_arrow, aria_label: 'Previous', classes: 'relative inline-flex items-center rounded-sm px-1 py-1 text-gray-400 hover:bg-gray-100 focus:z-20 focus:outline-offset-0') %>
+        <% else %>
+          <a role="link" aria-disabled="true" aria-label="Previous" class="relative inline-flex items-center rounded-sm px-1 py-1 text-gray-400 hover:bg-gray-100 focus:z-20 focus:outline-offset-0">
+            <%= left_arrow %>
+          </a>
+        <% end %>
+        
+        <%# Page links (series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36]) %>
+        <% pagy.series.each do |item| %>
+          <% if item.is_a?(Integer) %>
+            <%== a.(item, classes: 'relative inline-flex items-center px-2.5 py-1 text-sm font-semibold text-gray-900 hover:bg-gray-100 focus:z-20 focus:outline-offset-0') %>
+          <% elsif item.is_a?(String) %>
+            <a role="link" aria-disabled="true" aria-current="page" class="relative z-10 inline-flex items-center bg-editor-primary px-2.5 py-1 text-sm font-semibold text-white focus:z-20"><%= item %></a>
+          <% elsif item == :gap %>
+            <a role="link" aria-disabled="true" class="relative inline-flex items-center px-2.5 py-1 text-sm font-semibold text-gray-700 focus:outline-offset-0">&hellip;</a>
+          <% end %>
+        <% end %>
+
+        <%# Next page link %>
+        <% if pagy.next %>
+          <%== a.(pagy.next, right_arrow, aria_label: 'Next', classes: 'relative inline-flex items-center rounded-sm px-1 py-1 text-gray-400 hover:bg-gray-100 focus:z-20 focus:outline-offset-0') %>
+        <% else %>
+          <a role="link" aria-disabled="true" aria-label="Next" class="relative inline-flex items-center rounded-sm px-1 py-1 text-gray-400 hover:bg-gray-100 focus:z-20 focus:outline-offset-0">
+            <%= right_arrow %>
+          </a>
+        <% end %>
+      </nav>
+    </div>
+  </div>
+</div>

data/app/components/maglev/uikit/pagination_component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    class PaginationComponent < Maglev::Uikit::BaseComponent
+      include Pagy::Frontend
+
+      attr_reader :pagy, :hidden_if_single_page
+
+      def initialize(pagy:, item_name: 'item', hidden_if_single_page: true)
+        @pagy = pagy
+        @hidden_if_single_page = hidden_if_single_page
+        @item_name = item_name
+      end
+
+      def item_name
+        @item_name.pluralize(@pagy.count)
+      end
+
+      def render?
+        !(hidden_if_single_page && pagy.pages < 2)
+      end
+    end
+  end
+end

data/app/components/maglev/uikit/section_toolbar/bottom_component.html.erb

@@ -0,0 +1,13 @@
+<div class="absolute bottom-0 flex justify-center w-full hidden transition ease-[cubic-bezier(0.55,0,0.1,1)]"
+  data-uikit-section-toolbar-target="bottom"
+  data-transition-enter="duration-200"
+  data-transition-enter-start="translate-y-[50%] opacity-0"
+  data-transition-enter-end="translate-y-0 opacity-100"
+  data-transition-leave="duration-200"
+  data-transition-leave-start="translate-y-0 opacity-100"
+  data-transition-leave-end="translate-y-[50%] opacity-0"
+>
+  <%= link_to paths[:add], class: button_classes, data: { turbo_frame: '_top' } do %>
+    <%= render Maglev::Uikit::IconComponent.new(name: 'add') %>
+  <% end if insert_button? %>
+</div>