Footer

Componente de pie de página con soporte para enlaces, secciones y diseños centrados.

Importar

import { Footer } from 'asterui'

Ejemplos

Footer Básico

Pie de página simple alineado a la izquierda con enlaces horizontales.

import { Footer } from 'asterui'

function App() {
  return (
      <Footer horizontal className="bg-base-200 p-4">
        <a href="#" className="link link-hover">About</a>
        <a href="#" className="link link-hover">Contact</a>
        <a href="#" className="link link-hover">Privacy</a>
        <a href="#" className="link link-hover">Terms</a>
      </Footer>
    )
}

export default App

Footer con Secciones

Pie de página con secciones tituladas en columnas.

import { Footer } from 'asterui'

function App() {
  return (
      <Footer horizontal className="bg-base-200 p-10">
        <nav>
          <Footer.Title>Services</Footer.Title>
          <a href="#" className="link link-hover">Branding</a>
          <a href="#" className="link link-hover">Design</a>
          <a href="#" className="link link-hover">Marketing</a>
        </nav>
        <nav>
          <Footer.Title>Company</Footer.Title>
          <a href="#" className="link link-hover">About us</a>
          <a href="#" className="link link-hover">Contact</a>
          <a href="#" className="link link-hover">Jobs</a>
        </nav>
        <nav>
          <Footer.Title>Legal</Footer.Title>
          <a href="#" className="link link-hover">Terms of use</a>
          <a href="#" className="link link-hover">Privacy policy</a>
          <a href="#" className="link link-hover">Cookie policy</a>
        </nav>
      </Footer>
    )
}

export default App

Footer Centrado

Pie de página con contenido centrado.

import { Footer } from 'asterui'

function App() {
  return (
      <Footer center horizontal className="bg-base-200 p-4">
        <nav className="flex gap-4">
          <a href="#" className="link link-hover">About</a>
          <a href="#" className="link link-hover">Contact</a>
          <a href="#" className="link link-hover">Privacy</a>
          <a href="#" className="link link-hover">Terms</a>
        </nav>
        <aside>
          <p>© 2024 Company Name. All rights reserved.</p>
        </aside>
      </Footer>
    )
}

export default App

API

`Footer`

Propiedad	Descripción	Tipo	Predeterminado
`children`	Contenido del pie de página	`React.ReactNode`	-
`center`	Centra el contenido del pie de página	`boolean`	`false`
`horizontal`	Muestra columnas horizontalmente	`boolean`	`false`
`vertical`	Muestra columnas verticalmente (predeterminado)	`boolean`	`false`
`className`	Clases CSS adicionales	`string`	-

`Footer.Title`

Propiedad	Descripción	Tipo	Predeterminado
`children`	Texto del título	`React.ReactNode`	-
`className`	Clases CSS adicionales	`string`	-