@penaprieto/design-system
Version:
Multi-brand React design system with design tokens from Figma
17 lines (16 loc) • 3.02 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Footer = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
require("./Footer.css");
const Button_1 = require("../Button");
const Icon_1 = require("../Icon");
const Footer = ({ logo, columns = [], socialLinks = [], appLinks = [], legalLinks = [], copyright, className = '', }) => {
const rootClassName = ['ds-footer', className].filter(Boolean).join(' ');
return ((0, jsx_runtime_1.jsxs)("footer", { className: rootClassName, children: [(0, jsx_runtime_1.jsxs)("div", { className: "ds-footer__container", children: [logo && ((0, jsx_runtime_1.jsx)("div", { className: "ds-footer__logo-row", children: typeof logo === 'string' ? ((0, jsx_runtime_1.jsx)("img", { src: logo, alt: "Logo", className: "ds-footer__logo" })) : (logo) })), columns.map((column, index) => ((0, jsx_runtime_1.jsxs)("div", { className: "ds-footer__column", children: [(0, jsx_runtime_1.jsx)("h4", { className: "ds-footer__title", children: column.title }), (0, jsx_runtime_1.jsx)("ul", { className: "ds-footer__list", children: column.links.map((link, linkIndex) => ((0, jsx_runtime_1.jsx)("li", { className: "ds-footer__item", children: (0, jsx_runtime_1.jsx)("a", { href: link.href, className: "ds-footer__link", children: link.label }) }, linkIndex))) })] }, index)))] }), (0, jsx_runtime_1.jsxs)("div", { className: "ds-footer__bottom", children: [(appLinks.length > 0 || socialLinks.length > 0) && ((0, jsx_runtime_1.jsxs)("div", { className: "ds-footer__apps-social", children: [appLinks.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "ds-footer__apps", children: appLinks.map((app, index) => ((0, jsx_runtime_1.jsx)("a", { href: app.href, className: "ds-footer__app-link", "aria-label": app.alt, children: (0, jsx_runtime_1.jsx)("img", { src: app.image, alt: app.alt, height: "40" }) }, index))) })), socialLinks.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "ds-footer__social", children: socialLinks.map((social, index) => ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "ghost", shape: "icon", size: "large", onClick: () => window.open(social.href, '_blank'), "aria-label": social.label, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: social.icon, size: 24 }) }, index))) }))] })), legalLinks.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "ds-footer__legal-links", children: legalLinks.map((link, index) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [index > 0 && (0, jsx_runtime_1.jsx)("span", { className: "ds-footer__legal-sep", children: "|" }), (0, jsx_runtime_1.jsx)("a", { href: link.href, children: link.label })] }, index))) })), copyright && (0, jsx_runtime_1.jsx)("div", { className: "ds-footer__copyright", children: copyright })] })] }));
};
exports.Footer = Footer;