fn_registry/frontend/functions/ui/settings_page.md at ac65791663d9a260eadfb4e4189080fe41aeaac1

Files

T

egutierrez 2d108c295a refactor: migrate frontend from shadcn/Tailwind to Mantine v9

Reescribe todos los componentes UI para usar Mantine v9 en lugar de shadcn/Tailwind.
Elimina cn(), CVA, components.json, theme_provider custom y globals.css con Tailwind.
Añade 25+ componentes nuevos (AppShell, AuthForm, DatePickerInput, Dropzone, etc.)
y MantineProvider como wrapper estándar del sistema de temas.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

2026-04-06 23:46:44 +02:00

2.0 KiB

Raw Blame History

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, params, output, tested, tests, test_file_path, file_path, source_repo, source_license, source_file

name

kind

lang

domain

version

purity

signature

description

tags

uses_functions

uses_types

returns

returns_optional

error_type

imports

params

output

tested

tests

test_file_path

file_path

source_repo

source_license

source_file

settings_page

function

1.0.0

pure

settingsPage(props: SettingsPageProps): ReactElement

Genera una página de configuración con navegación lateral, secciones y campos de formulario (text, number, toggle, select, textarea).

settings

page

form

sections

factory

composition

false

react

@mantine/core

name	desc
props	Configuración: título, secciones con campos (text, number, toggle, select, textarea) y callback onSave

Componente ReactElement que renderiza página de configuración con sidebar y secciones navegables

false

frontend/functions/ui/settings_page.tsx

https://gitea-dgg044oo04woo4ggcsws4gk0.organic-machine.com/Bl4cksmith/Frontend_Library

MIT

Ejemplo

settingsPage({
  title: 'Project Settings',
  sections: [
    {
      id: 'general',
      title: 'General',
      description: 'Basic project configuration',
      fields: [
        { key: 'name', label: 'Project Name', type: 'text', value: 'My Project' },
        { key: 'visibility', label: 'Public', description: 'Make project visible to everyone', type: 'toggle', value: true },
        { key: 'language', label: 'Language', type: 'select', options: [{ label: 'English', value: 'en' }, { label: 'Spanish', value: 'es' }] },
      ],
    },
    {
      id: 'notifications',
      title: 'Notifications',
      fields: [
        { key: 'email', label: 'Email notifications', type: 'toggle', value: false },
        { key: 'webhook', label: 'Webhook URL', type: 'text', placeholder: 'https://...' },
      ],
    },
  ],
  onSave: handleSave,
})

Notas

Layout de settings estándar con sidebar de navegación (oculta en mobile). Secciones con anclas para scroll. Soporta 5 tipos de campo.

2.0 KiB Raw Blame History

Ejemplo

Notas

2.0 KiB

Raw Blame History