Deployment and lifecycle management for Nix
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
+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
+
…
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