ba92dd363c
Standardize all spacing to multiples of 4px (0.25rem): - 0.15rem (2.4px) → 0.25rem (4px) - 0.35rem (5.6px) → 0.25rem (4px) - 0.375rem (6px) → 0.25rem (4px) for borderRadius - 0.4rem (6.4px) → 0.5rem (8px) - 0.6rem (9.6px) → 0.5rem (8px) Updated theme.css density variables, silo-base.css focus ring, and all TSX component inline styles. Closes #71
82 lines
2.0 KiB
TypeScript
82 lines
2.0 KiB
TypeScript
import type { ReactNode } from "react";
|
|
|
|
interface PageFooterProps {
|
|
stats?: ReactNode;
|
|
page?: number;
|
|
pageSize?: number;
|
|
itemCount?: number;
|
|
onPageChange?: (page: number) => void;
|
|
}
|
|
|
|
export function PageFooter({
|
|
stats,
|
|
page,
|
|
pageSize,
|
|
itemCount,
|
|
onPageChange,
|
|
}: PageFooterProps) {
|
|
const hasPagination = page !== undefined && onPageChange !== undefined;
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
position: "fixed",
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
height: "var(--d-footer-h)",
|
|
backgroundColor: "var(--ctp-surface0)",
|
|
borderTop: "1px solid var(--ctp-surface1)",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
padding: "0 var(--d-footer-px)",
|
|
fontSize: "var(--d-footer-font)",
|
|
color: "var(--ctp-subtext0)",
|
|
zIndex: 100,
|
|
}}
|
|
>
|
|
<div style={{ display: "flex", gap: "1.5rem", alignItems: "center" }}>
|
|
{stats}
|
|
</div>
|
|
|
|
{hasPagination && (
|
|
<div style={{ display: "flex", gap: "0.5rem", alignItems: "center" }}>
|
|
<button
|
|
onClick={() => onPageChange(Math.max(1, page - 1))}
|
|
disabled={page <= 1}
|
|
style={pageBtnStyle}
|
|
>
|
|
Prev
|
|
</button>
|
|
<span>
|
|
Page {page}
|
|
{itemCount !== undefined && ` \u00b7 ${itemCount} items`}
|
|
</span>
|
|
<button
|
|
onClick={() => onPageChange(page + 1)}
|
|
disabled={
|
|
pageSize !== undefined &&
|
|
itemCount !== undefined &&
|
|
itemCount < pageSize
|
|
}
|
|
style={pageBtnStyle}
|
|
>
|
|
Next
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const pageBtnStyle: React.CSSProperties = {
|
|
padding: "0.25rem 0.5rem",
|
|
fontSize: "inherit",
|
|
border: "none",
|
|
borderRadius: "0.25rem",
|
|
backgroundColor: "var(--ctp-surface1)",
|
|
color: "var(--ctp-text)",
|
|
cursor: "pointer",
|
|
};
|