@blocklet/ui-react/lib/Footer/social-media.js

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

import { jsx as o } from "react/jsx-runtime";
import t from "prop-types";
import { styled as a } from "@arcblock/ux/lib/Theme";
import l from "../Icon/index.js";
function p({ items: e = null, ...n }) {
  return e?.length ? /* @__PURE__ */ o(c, { ...n, children: e.map((r, i) => /* @__PURE__ */ o(
    "a",
    {
      href: r.link,
      target: "_blank",
      "aria-label": `Social media icon${r.title ? ` for ${r.title}` : ""}`,
      rel: "noreferrer",
      children: /* @__PURE__ */ o(l, { icon: r.icon || r.title, size: 24, component: "span" })
    },
    i
  )) }) : null;
}
p.propTypes = {
  items: t.arrayOf(
    t.shape({
      // icon 对应 Icon#icon prop, 支持 iconify name 和 url 2 种形式:
      icon: t.string,
      link: t.string
    })
  )
};
const c = a("div")`
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
  a {
    color: ${(e) => e.theme.palette.text.secondary};
    text-decoration: none;
    transition: color 0.2s ease-in-out;
    &:hover {
      color: ${({ theme: e }) => e.palette.text.primary};
    }
  }
  ${(e) => e.theme.breakpoints.down("md")} {
    gap: 12px;
  }
`;
export {
  p as default
};