A page-number strip with previous/next controls and ellipsis truncation for navigating long lists of pages, rendered with an animated liquid-glass surface.
"use client";
import { useEffect, useState } from "react";
import LiquidPagination from "@/components/ui/liquid-pagination";
function useIsDarkMode() {
const [isDark, setIsDark] = useState(false);
useEffect(() => {
const root = document.documentElement;
const update = () => setIsDark(root.classList.contains("dark"));
update();
const observer = new MutationObserver(update);
observer.observe(root, { attributes: true, attributeFilter: ["class"] });
return () => observer.disconnect();
}, []);
return isDark;
}
export default function LiquidPaginationDemo() {
const isDark = useIsDarkMode();
return (
<div
className="lq-provider"
data-liquid-motion="on"
data-liquid-theme={isDark ? "dark" : "light"}
data-liquid-transparency="on"
style={
{
"--lq-accent": "#8f8f8f",
"--lq-frost": "0px",
"--lq-intensity": 1.2,
"--lq-space": "4px",
"--lq-veil": 0,
} as any
}
>
<div className="flex min-h-screen w-full items-center justify-center p-10">
<LiquidPagination count={12} defaultPage={3} />
</div>
</div>
);
}