Footer
Footer component for the page.
---import Button from '@bejamas/ui/components/Button.astro';import Footer from '@bejamas/ui/components/Footer.astro';import LinkGroup from '@bejamas/ui/components/LinkGroup.astro';---
<Footer> <div slot="cta"> <h2>Call to action</h2> <Button>Call to action</Button> </div> <div class="grid grid-cols-4 gap-4"> <div>Acme, Inc. Logo</div> <LinkGroup title="Resources" items={[ { label: "Blog", href: "/blog" }, { label: "Documentation", href: "/docs" } ]} /> <LinkGroup title="Company" items={[ { label: "Home", href: "/" }, { label: "About", href: "/about" } ]} /> </div></Footer>Installation
Section titled “Installation” bunx bejamas add footer npx bejamas add footer pnpm dlx bejamas add footer yarn dlx bejamas add footer---/** * @component Footer * @title Footer * @description Footer component for the page. * @status stable * @since 0.1.0 * * @preview * * <Footer> * <div slot="cta"> * <h2>Call to action</h2> * <Button>Call to action</Button> * </div> * <div class="grid grid-cols-4 gap-4"> * <div>Acme, Inc. Logo</div> * <LinkGroup * title="Resources" * items={[ * { label: "Blog", href: "/blog" }, * { label: "Documentation", href: "/docs" } * ]} * /> * <LinkGroup * title="Company" * items={[ * { label: "Home", href: "/" }, * { label: "About", href: "/about" } * ]} * /> * </div> * </Footer> * * @usage * * ## Structure * * A Footer component is composed of the following parts: * * - `Footer.astro` - The footer container. * - `LinkGroup.astro` - Links within the footer. * * ```astro * --- * import Footer from '@bejamas/ui/components/Footer.astro'; * --- * * <Footer /> * * ``` * */
import { cn } from "@bejamas/ui/lib/utils";
const { class: className = "", ...props } = Astro.props;---
<footer class={cn("bg-footer text-footer-foreground w-full", className)} {...props}> { Astro.slots.cta && ( <div class="flex justify-center"> <slot name="cta" /> </div> ) } <slot /></footer>Structure
Section titled “Structure”A Footer component is composed of the following parts:
Footer.astro- The footer container.LinkGroup.astro- Links within the footer.
---import Footer from '@bejamas/ui/components/Footer.astro';---
<Footer />