@blocklet/ui-react/lib/Footer/brand.js

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

import { jsx as o, jsxs as n } from "react/jsx-runtime";
import { isValidElement as l } from "react";
import i from "prop-types";
import { styled as s } from "@arcblock/ux/lib/Theme";
import { Box as m } from "@mui/material";
function p({ name: e = "", logo: t = "", description: r = "", ...a }) {
  if (!e && !t && !r)
    return null;
  const d = l(t) ? t : /* @__PURE__ */ o("img", { src: t, alt: e });
  return /* @__PURE__ */ n(h, { ...a, children: [
    /* @__PURE__ */ n("div", { children: [
      t && /* @__PURE__ */ o(m, { component: "a", href: "/", className: "footer-brand-logo", children: d }),
      e && /* @__PURE__ */ o("div", { className: "footer-brand-name", children: e })
    ] }),
    r && /* @__PURE__ */ o("div", { className: "footer-brand-desc", children: r })
  ] });
}
p.propTypes = {
  name: i.node,
  logo: i.node,
  description: i.string
};
const h = s("div")`
  display: flex;
  flex-direction: column;
  font-size: 14px;
  a {
    text-decoration: none;
    color: inherit;
  }
  > div:first-of-type {
    display: flex;
    align-items: center;
  }
  .footer-brand-logo {
    display: flex;
    align-items: center;
    margin-right: 12px;
    line-height: 1;
    img,
    svg {
      width: auto;
      height: 40px;
      max-height: 40px;
    }
  }
  .footer-brand-name {
    font-size: 18px;
    color: ${(e) => e.theme.palette.grey[900]};
  }
  .footer-brand-desc {
    white-space: pre-line;
    margin-top: 16px;
    color: ${(e) => e.theme.palette.text.secondary};
  }

  ${(e) => e.theme.breakpoints.down("sm")} {
    width: auto;
  }

  ${(e) => e.theme.breakpoints.down("md")} {
    .footer-brand-logo {
      img,
      svg {
        height: 32px;
        max-height: 32px;
      }
    }
  }
`;
export {
  p as default
};