Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | 766x | import type { ReactNode } from "react";
type StickyPageHeaderProps = {
children: ReactNode;
};
/**
* Page header that is sticky with backdrop blur on desktop (sm+),
* and a plain flowing element on mobile. Use this instead of manually
* applying the sticky header CSS classes on each page.
*/
export function StickyPageHeader({ children }: StickyPageHeaderProps) {
return (
<div className="py-2 sm:py-0 sm:sticky sm:top-0 sm:z-10 sm:-mx-6 lg:-mx-8 sm:-mt-6 lg:-mt-8 sm:px-6 lg:px-8 sm:min-h-16 sm:flex sm:items-center sm:bg-background-base/95 sm:backdrop-blur-sm sm:border-b sm:border-border-default">
{children}
</div>
);
}
|