@story-telling-reporter/react-ui-toolkit/lib/twreporter/hint.js

## Installation `yarn install`

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Hint = Hint;
var _react = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _icons = require("./icons");
var _mediaQuery = require("./utils/media-query");
var _hooks = require("../hooks");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function Hint({
  className,
  id
}) {
  const containerRef = (0, _react.useRef)(null);
  const [muted, setMuted] = (0, _hooks.useMuted)(true, containerRef);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
    id: id,
    className: className,
    "data-twreporter-story-telling": true,
    "data-react-ui-toolkit": true,
    "data-muted-hint": true,
    "data-muted": muted,
    ref: containerRef,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(HintText, {
      children: muted ? '本文含聲音敘事，開啟聲音以獲得完整閱讀體驗' : '已開啟本篇文章的聲音'
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Button, {
      className: muted ? 'dark' : 'light',
      onClick: () => {
        setMuted(!muted);
      },
      children: [muted ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        children: "\u9EDE\u64CA\u958B\u555F\u8072\u97F3"
      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        children: "\u9EDE\u64CA\u95DC\u9589\u8072\u97F3"
      }), muted ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SoundIcon, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.MuteIcon, {})]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SeparationLineContainer, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SeparationLine, {})
    })]
  });
}
const Container = _styledComponents.default.div.withConfig({
  displayName: "hint__Container",
  componentId: "sc-jrdnfq-0"
})(["display:flex;flex-direction:column;align-items:center;gap:16px;margin-left:auto;margin-right:auto;width:calc(100vw - 68px);", "{padding-left:24px;padding-right:24px;}", "{width:453px;}", "{width:480px;}", "{width:580px;}"], _mediaQuery.mediaQuery.tabletAbove, _mediaQuery.mediaQuery.tabletOnly, _mediaQuery.mediaQuery.desktopOnly, _mediaQuery.mediaQuery.hdOnly);
const Button = _styledComponents.default.div.withConfig({
  displayName: "hint__Button",
  componentId: "sc-jrdnfq-1"
})(["display:flex;justify-content:center;align-items:center;gap:4px;padding:4px 12px;border-radius:40px;cursor:pointer;> span{font-size:14px;font-family:Noto Sans TC,Sans-Serif,serif;font-weight:500;line-height:21px;}> svg{width:18px;height:18px;}&.dark{background-color:#404040;color:#fff;svg{fill:#fff;}}&.light{background-color:#fff;color:#404040;svg{fill:#404040;}}@media (hover:hover){&.dark:hover{background-color:#000;}&.light:hover{background-color:#e2e2e2;}}"]);
const HintText = _styledComponents.default.p.withConfig({
  displayName: "hint__HintText",
  componentId: "sc-jrdnfq-2"
})(["margin:0;text-align:center;font-family:Noto Sans TC,Sans-Serif,serif;font-weight:400;font-size:14px;line-height:21px;letter-spacing:0em;color:#808080;"]);
const SeparationLineContainer = _styledComponents.default.div.withConfig({
  displayName: "hint__SeparationLineContainer",
  componentId: "sc-jrdnfq-3"
})(["width:192px;margin-top:24px;", "{width:272px;}"], _mediaQuery.mediaQuery.hdOnly);