initial commit

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

src/admin/components/Pagination.tsx

@@ -0,0 +1,62 @@
+interface PaginationProps {
+  pagination: {
+    total: number
+    page: number
+    per_page: number
+    total_pages: number
+  } | null
+  onPageChange: (page: number) => void
+  onPerPageChange?: (perPage: number) => void
+}
+
+export default function Pagination({ pagination, onPageChange, onPerPageChange }: PaginationProps) {
+  if (!pagination || pagination.total_pages <= 1) return null
+
+  const { page, total_pages } = pagination
+
+  const getPages = () => {
+    const pages: (number | string)[] = []
+    const delta = 2
+    for (let i = 1; i <= total_pages; i++) {
+      if (i === 1 || i === total_pages || (i >= page - delta && i <= page + delta)) {
+        pages.push(i)
+      } else if (pages[pages.length - 1] !== '...') {
+        pages.push('...')
+      }
+    }
+    return pages
+  }
+
+  return (
+    <div className="admin-pagination">
+      <div className="admin-pagination-pages">
+        <button disabled={page <= 1} onClick={() => onPageChange(page - 1)} className="admin-pagination-btn">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M15 18l-6-6 6-6" /></svg>
+        </button>
+        {getPages().map((p, i) =>
+          typeof p === 'string' ? (
+            <span key={`dots-${i}`} className="admin-pagination-dots">...</span>
+          ) : (
+            <button key={p} onClick={() => onPageChange(p)} className={`admin-pagination-btn ${p === page ? 'active' : ''}`}>
+              {p}
+            </button>
+          )
+        )}
+        <button disabled={page >= total_pages} onClick={() => onPageChange(page + 1)} className="admin-pagination-btn">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 18l6-6-6-6" /></svg>
+        </button>
+      </div>
+      {onPerPageChange && (
+        <select
+          value={pagination.per_page}
+          onChange={e => onPerPageChange(Number(e.target.value))}
+          className="admin-form-select admin-pagination-select"
+        >
+          {[10, 25, 50, 100].map(n => (
+            <option key={n} value={n}>{n} / stránka</option>
+          ))}
+        </select>
+      )}
+    </div>
+  )
+}