0.7.2

WidgetFooter

Source code

.

---
import { WidgetFooter } from '@yatoday/astro-ui/astro';

export const socialLinks = [
  {ariaLabel: 'Whatsapp', icon: 'tabler:brand-whatsapp', href: '#'},
  {ariaLabel: 'Instagram', icon: 'tabler:brand-instagram', href: '#'},
  {ariaLabel: 'Facebook', icon: 'tabler:brand-facebook', href: '#'},
  {ariaLabel: 'YouTube', icon: 'tabler:brand-youtube', href: '#'},
];

export const footerData = {
  links: [
    {
      title: 'Product',
      links: [
        { text: 'Features', href: '#' },
        { text: 'Security', href: '#' },
        { text: 'Team', href: '#' },
        { text: 'Enterprise', href: '#' },
        { text: 'Customer stories', href: '#' },
        { text: 'Pricing', href: '#' },
      ],
    },
    {
      title: 'Platform',
      links: [
        { text: 'Developer API', href: '#' },
        { text: 'Partners', href: '#' },
        { text: 'Atom', href: '#' },
        { text: 'Electron', href: '#' },
        { text: 'Desktop', href: '#' },
        { text: 'Shop', href: '#' }
      ],
    },
    {
      title: 'Support',
      links: [
        { text: 'Docs', href: '#' },
        { text: 'Community Forum', href: '#' },
        { text: 'Services', href: '#' },
        { text: 'Skills', href: '#' },
        { text: 'Status', href: '#' },
        { text: 'Resources', href: '#' }
      ],
    },
    {
      title: 'Company',
      links: [
        { text: 'About', href: '#' },
        { text: 'Blog', href: '#' },
        { text: 'Careers', href: '#' },
        { text: 'Press', href: '#' },
        { text: 'Inclusion', href: '#' },
        { text: 'Social Impact', href: '#' }
      ],
    },
  ],
  secondaryLinks: [
    { text: 'Terms', href: '#' },
    { text: 'Privacy Policy', href: '#' },
  ],
  socialLinks: socialLinks,
  note: `Made in <a class="text-primary hover:underline" target="_blank" href="https://yatoday.es">Yatoday</a>`,
}
---

<WidgetFooter {...footerData}>
  <Fragment slot="bg">
    <div class="bg-background absolute inset-0 pointer-events-none" aria-hidden="true"></div>
  </Fragment>
</WidgetFooter>

Props

PropTypeDefaultDescription
socialLinksLink [][]-
secondaryLinksLink [][]-
linksArray[]Array of Link items
notestring--
idstring-Specify a unique id for the section
isDarkbooleanfalseAdds the dark CSS class to the WidgetWrapper
bgstring-Set background element
asstringfooterHTML tag name for the wrapper
classes.containerstring-CSS classes for the WidgetWrapper container