@blocklet/ui-react/lib/Footer/internal-footer.js

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

import { jsxs as w, jsx as r } from "react/jsx-runtime";
import n from "prop-types";
import { Box as d } from "@mui/material";
import v from "clsx";
import L from "./brand.js";
import y from "./links.js";
import M from "./social-media.js";
import O from "./copyright.js";
import B from "./layout/standard.js";
import N from "./layout/plain.js";
const f = [
  {
    name: "plain",
    // 没有 navigation 和 socialMedia, 使用一个简单的两端对齐布局
    support: (t, o) => !o.navigation?.length && !o.socialMedia?.length,
    component: N
  },
  {
    name: "standard",
    // 默认标准布局
    support: () => !0,
    component: B
  }
], S = f.reduce((t, o) => ({ ...t, [o.name]: o }), {});
function C({ ...t }) {
  const {
    brand: o = null,
    navigation: s = null,
    socialMedia: p = null,
    copyright: u = null,
    links: c = null,
    layout: l = "auto",
    ...e
  } = t, g = () => o ? /* @__PURE__ */ r(L, { ...o }) : null, h = () => s?.length ? /* @__PURE__ */ r(y, { links: s, columns: 3 }) : null, k = () => p?.length ? /* @__PURE__ */ r(M, { items: p }) : null, b = () => {
    const i = u?.owner || o?.name;
    return i ? /* @__PURE__ */ r(O, { owner: i, year: u?.year || void 0 }) : null;
  }, x = () => c?.length ? /* @__PURE__ */ r(y, { flowLayout: !0, links: c }) : null, m = {
    brand: g(),
    navigation: h(),
    socialMedia: k(),
    copyright: b(),
    links: x()
  };
  let a = null;
  if (l === "auto" ? a = f.find((i) => i.support(m, t)).component : a = S[l]?.component, !a)
    throw new Error(`layout ${l} is not supported.`);
  return /* @__PURE__ */ w(
    d,
    {
      ...e,
      className: v("blocklet__footer", e.className),
      sx: [
        {
          position: "relative"
        },
        ...Array.isArray(e.sx) ? e.sx : [e.sx]
      ],
      children: [
        /* @__PURE__ */ r(a, { elements: m, data: t }),
        /* @__PURE__ */ r(
          d,
          {
            sx: {
              position: "absolute",
              right: 16,
              bottom: 0,
              fontSize: 12,
              color: "transparent",
              "::selection": { background: "#000", color: "#fff" }
            },
            children: window?.blocklet?.version
          }
        )
      ]
    }
  );
}
C.propTypes = {
  brand: n.shape({
    name: n.node,
    description: n.string,
    logo: n.node
  }),
  navigation: n.arrayOf(
    n.shape({
      label: n.node,
      link: n.string
    })
  ),
  socialMedia: n.arrayOf(
    n.shape({
      icon: n.node,
      link: n.string
    })
  ),
  copyright: n.shape({
    owner: n.string,
    year: n.oneOfType([n.string, n.number])
  }),
  // privacy/legal 等链接, 常放于 footer 右下侧或最底部
  links: n.arrayOf(
    n.shape({
      label: n.node,
      link: n.string
    })
  ),
  // 可显式指定 footer layout, 默认根据内容自动决定 layout
  layout: n.oneOf(["auto", "standard", "plain"])
};
export {
  C as default
};