48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
import {
|
|
RdxPageContainer,
|
|
RdxPageFrame,
|
|
RdxPageHeader,
|
|
RdxPageStack,
|
|
} from "@repo/rdx-ui/components";
|
|
import { Outlet } from "react-router-dom";
|
|
|
|
import type { SettingsNavigationSection } from "@/settings/build-settings-navigation";
|
|
|
|
import { useAppTranslation } from "../locales/i18n";
|
|
|
|
import { SettingsNavigation } from "./settings-navigation";
|
|
|
|
interface SettingsLayoutProps {
|
|
sections: SettingsNavigationSection[];
|
|
}
|
|
|
|
/**
|
|
* Compone la navegación y el contenido de configuración dentro del frame estándar de página.
|
|
*/
|
|
export const SettingsLayout = ({ sections }: SettingsLayoutProps) => {
|
|
const { t } = useAppTranslation();
|
|
|
|
return (
|
|
<RdxPageFrame>
|
|
<RdxPageContainer className="space-y-6" width="full">
|
|
<RdxPageHeader
|
|
description={t("web.settings.description")}
|
|
title={t("web.settings.title")}
|
|
/>
|
|
|
|
<RdxPageStack spacing="default">
|
|
<div className="grid gap-6 lg:grid-cols-[18rem_minmax(0,1fr)]">
|
|
<aside className="min-w-0 lg:sticky lg:top-6 lg:self-start">
|
|
<SettingsNavigation sections={sections} />
|
|
</aside>
|
|
|
|
<section className="min-w-0">
|
|
<Outlet />
|
|
</section>
|
|
</div>
|
|
</RdxPageStack>
|
|
</RdxPageContainer>
|
|
</RdxPageFrame>
|
|
);
|
|
};
|