@blocklet/ui-react/lib/Footer/layout/standard.js

Some useful front-end web components that can be used in Blocklets.

import { jsxs as n, jsx as i } from "react/jsx-runtime";
import o from "prop-types";
import m from "clsx";
import { Container as t, Box as r } from "@mui/material";
import { styled as x } from "@arcblock/ux/lib/Theme";
import f from "./row.js";
function h({ elements: e, data: l, className: s = "", ...p }) {
  const d = !!l.navigation?.length;
  let a = null;
  return d ? a = /* @__PURE__ */ n(t, { sx: { display: "flex", flexDirection: { xs: "column", md: "row" }, justifyContent: "space-between" }, children: [
    /* @__PURE__ */ n(
      r,
      {
        sx: {
          flex: "1 1 auto",
          paddingRight: { xs: 0, md: 3 },
          display: "flex",
          flexDirection: "column",
          alignItems: "flex-start",
          gap: 2,
          pb: 3
        },
        children: [
          /* @__PURE__ */ i(r, { children: e.brand }),
          /* @__PURE__ */ i(
            r,
            {
              sx: {
                lineHeight: 1
              },
              children: e.socialMedia
            }
          )
        ]
      }
    ),
    /* @__PURE__ */ i(r, { sx: ({ palette: c }) => ({ mb: 3, borderTop: { xs: `1px solid ${c.grey[200]}`, md: 0 } }), children: e.navigation })
  ] }) : a = /* @__PURE__ */ n(
    t,
    {
      sx: {
        display: "flex",
        flexDirection: { xs: "column", md: "row" },
        justifyContent: "space-between",
        alignItems: "space-between",
        gap: 2,
        pb: 3
      },
      children: [
        /* @__PURE__ */ i(r, { children: e.brand }),
        /* @__PURE__ */ i(
          r,
          {
            sx: {
              lineHeight: 1
            },
            children: e.socialMedia
          }
        )
      ]
    }
  ), /* @__PURE__ */ i(g, { ...p, className: m({ "footer--with-navs": d }, s), children: /* @__PURE__ */ n(t, { style: { padding: 0 }, children: [
    a,
    /* @__PURE__ */ i(r, { sx: { pt: 3, borderTop: 1, borderColor: "divider" } }),
    /* @__PURE__ */ i(t, { children: /* @__PURE__ */ n(f, { autoCenter: !0, children: [
      e.copyright,
      e.links
    ] }) })
  ] }) });
}
h.propTypes = {
  elements: o.shape({
    brand: o.element,
    navigation: o.element,
    socialMedia: o.element,
    copyright: o.element,
    links: o.element
  }).isRequired,
  data: o.object.isRequired,
  className: o.string
};
const g = x("div")`
  padding: 32px 0 24px 0;
  .footer-brand-name,
  .footer-brand-desc {
    display: none;
  }
  &.footer--with-navs {
    ${(e) => e.theme.breakpoints.up("md")} {
      .footer-brand-desc {
        max-width: 360px;
        display: block;
      }
    }
  }
  && .footer-brand-logo {
    margin-right: 0;
  }
`;
export {
  h as default
};