listing-facebook/client/app/layouts/users-layout.tsx

42 lines
969 B
TypeScript

import { Outlet } from "react-router";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "~/components/ui/card";
import { UsersProvider, useUsersContext } from "./contexts/user-layout.context";
function UsersLayoutContent() {
const { title, description, action } = useUsersContext();
return (
<div className="mx-auto space-y-6">
<div className="max-w-full flex flex-col gap-6">
<Card>
<CardHeader className="flex items-center justify-between">
<div>
<CardTitle className="mb-1">{title}</CardTitle>
<CardDescription>{description}</CardDescription>
</div>
{action}
</CardHeader>
<CardContent>
<Outlet />
</CardContent>
</Card>
</div>
</div>
);
}
export default function UsersLayout() {
return (
<UsersProvider>
<UsersLayoutContent />
</UsersProvider>
);
}