Blocos
SettingsLayout
Layout de duas colunas para páginas de configuração com nav lateral e conteúdo.
SettingsLayout resolve o padrão "settings" que aparece em qualquer painel: uma nav vertical do lado esquerdo + conteúdo no centro, com um cabeçalho opcional no topo. Cada item da nav usa o BlockLink (router-agnostic).
Conteúdo da seção ativa.
'use client';
import { SettingsLayout } from '@uranus-workspace/blocks';
import { User } from 'lucide-react';
export default function SettingsLayoutDefault() {
return (
<SettingsLayout
groups={[
{
label: 'Conta',
items: [
{
id: '1',
label: 'Perfil',
href: '#',
icon: <User className="size-4" aria-hidden />,
active: true,
},
{ id: '2', label: 'Segurança', href: '#' },
],
},
]}
>
<p className="text-sm text-fd-muted-foreground">Conteúdo da seção ativa.</p>
</SettingsLayout>
);
}
Uso
import { SettingsLayout, FormSection } from '@uranus-workspace/blocks';
<SettingsLayout
header={<h1>Configurações</h1>}
groups={[
{
label: 'Conta',
items: [
{ id: 'profile', label: 'Perfil', href: '/settings/profile', active: true },
{ id: 'security', label: 'Segurança', href: '/settings/security' },
],
},
]}
>
<FormSection title="Perfil" layout="split">
{/* fields */}
</FormSection>
</SettingsLayout>Props
groups— lista de grupos comlabeleitems: SettingsNavItem[].linkComponent—next/linkou similar; useLinkProviderpara configurar globalmente.header— slot livre acima do layout (geralmente umPageHeader).
Acessibilidade
A <nav> tem aria-label="Settings". O item ativo recebe aria-current="page" automaticamente.