@story-telling-reporter/react-ui-toolkit/lib/kids/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,
  text,
  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: text
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Button, {
      onClick: () => {
        setMuted(!muted);
      },
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
        children: muted ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.MuteIcon, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SoundIcon, {})
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        children: muted ? '點擊開啟聲音' : '點擊關閉聲音'
      })]
    })]
  });
}
const Container = _styledComponents.default.div.withConfig({
  displayName: "hint__Container",
  componentId: "sc-157hlkw-0"
})(["display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:60px;"]);
const Icon = _styledComponents.default.div.withConfig({
  displayName: "hint__Icon",
  componentId: "sc-157hlkw-1"
})(["width:36px;height:36px;cursor:pointer;"]);
const Button = _styledComponents.default.div.withConfig({
  displayName: "hint__Button",
  componentId: "sc-157hlkw-2"
})(["display:flex;justify-content:center;align-items:center;gap:10px;> span{font-family:source-han-sans-traditional,Noto Sans TC,PingFang TC,Apple LiGothic Medium,Roboto,Microsoft JhengHei,Lucida Grande,Lucida Sans Unicode,sans-serif;font-size:12px;font-weight:500;color:#666;}"]);
const HintText = _styledComponents.default.p.withConfig({
  displayName: "hint__HintText",
  componentId: "sc-157hlkw-3"
})(["text-align:center;font-family:Swei Marker Sans CJK TC,Noto Sans TC,Sans-Serif,serif;font-weight:400;font-size:16px;line-height:1.5;color:#666;white-space:nowrap;", "{white-space:pre-wrap;}"], _mediaQuery.mediaQuery.smallOnly);