Deployment and lifecycle management for Nix
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

style: add custom pagination component with Tailwind styling

Wrap Flop.Phoenix.pagination in a styled .pagination component with inline
flex layout, dark pill for current page, chevron icons on prev/next, ellipsis,
and proper disabled state styling.

SOW-110

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

+59 -3
+58
apps/sower/lib/sower_web/components/sower_components.ex
··· 149 149 """ 150 150 end 151 151 152 + attr :meta, Flop.Meta, required: true 153 + attr :path, :string, default: nil 154 + 155 + def pagination(assigns) do 156 + ~H""" 157 + <Flop.Phoenix.pagination 158 + meta={@meta} 159 + path={@path} 160 + class="flex items-center justify-center gap-1 mt-6" 161 + page_list_attrs={[class: "order-2 flex items-center gap-1"]} 162 + page_list_item_attrs={[class: "contents"]} 163 + page_link_attrs={[ 164 + class: 165 + "inline-flex items-center justify-center rounded-md px-3 py-1.5 text-sm font-medium text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition" 166 + ]} 167 + current_page_link_attrs={[ 168 + class: 169 + "inline-flex items-center justify-center rounded-md px-3 py-1.5 text-sm font-medium bg-zinc-900 text-white dark:bg-zinc-100 dark:text-zinc-900" 170 + ]} 171 + disabled_link_attrs={[ 172 + class: "opacity-40 pointer-events-none" 173 + ]} 174 + > 175 + <:previous attrs={[ 176 + class: 177 + "order-1 inline-flex items-center justify-center rounded-md px-3 py-1.5 text-sm font-medium text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition" 178 + ]}> 179 + <svg class="w-4 h-4 mr-1" viewBox="0 0 20 20" fill="currentColor"> 180 + <path 181 + fill-rule="evenodd" 182 + d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" 183 + clip-rule="evenodd" 184 + /> 185 + </svg> 186 + Prev 187 + </:previous> 188 + <:next attrs={[ 189 + class: 190 + "order-3 inline-flex items-center justify-center rounded-md px-3 py-1.5 text-sm font-medium text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition" 191 + ]}> 192 + Next 193 + <svg class="w-4 h-4 ml-1" viewBox="0 0 20 20" fill="currentColor"> 194 + <path 195 + fill-rule="evenodd" 196 + d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" 197 + clip-rule="evenodd" 198 + /> 199 + </svg> 200 + </:next> 201 + <:ellipsis> 202 + <span class="inline-flex items-center justify-center px-2 py-1.5 text-sm text-zinc-400 dark:text-zinc-500"> 203 + &hellip; 204 + </span> 205 + </:ellipsis> 206 + </Flop.Phoenix.pagination> 207 + """ 208 + end 209 + 152 210 attr :label, :string, required: true 153 211 slot :inner_block, required: true 154 212
+1 -3
apps/sower/lib/sower_web/live/seed_live/index.html.heex
··· 51 51 </:action> 52 52 </.table> 53 53 54 - <div class="mt-4"> 55 - <Flop.Phoenix.pagination meta={@meta} path={~p"/seeds"} /> 56 - </div> 54 + <.pagination meta={@meta} path={~p"/seeds"} /> 57 55 </Layouts.app>