@yuntijs/ui/es/WaveformIcon/index.js

☁️ Yunti UI - an open-source UI component library for building Cloud Native web apps

import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
import { createStyles, keyframes } from 'antd-style';
import React from 'react';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var useStyles = createStyles(function (_ref, props) {
  var css = _ref.css;
  var dance1 = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    0% {\n        transform: scaleY(0.4)\n    }\n    50% {\n      transform: scaleY(0.2)\n    }\n    100% {\n      transform: scaleY(0.5)\n    }\n  "])));
  var dance2 = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    0% {\n        transform: scaleY(0.7)\n    }\n    50% {\n      transform: scaleY(0.4)\n    }\n    100% {\n      transform: scaleY(0.7)\n    }\n  "])));
  var dance3 = keyframes(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    0% {\n        transform: scaleY(0.9)\n    }\n    50% {\n      transform: scaleY(0.7)\n    }\n    100% {\n      transform: scaleY(0.9)\n    }\n  "])));
  return {
    box: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      position: relative;\n\n      display: flex;\n      align-items: center;\n      justify-content: space-evenly;\n\n      width: ", "px;\n      height: ", "px;\n\n      background-color: ", ";\n    "])), props.width || 34, props.height || 22, props.bgColor || 'transparent'),
    line: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      display: inline-block;\n\n      width: 3px;\n      height: 90%;\n\n      background-color: ", ";\n      border: none;\n      border-radius: 30%;\n    "])), props.lineColor || '#000'),
    animate1: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      animation: ", " 500ms ease-in infinite alternate;\n    "])), dance1),
    animate2: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      animation: ", " 500ms ease-out infinite alternate;\n    "])), dance2),
    animate3: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      animation: ", " 500ms ease-in infinite alternate;\n    "])), dance3)
  };
});
export var WaveformIcon = function WaveformIcon(_ref2) {
  var height = _ref2.height,
    width = _ref2.width,
    lineColor = _ref2.lineColor,
    bgColor = _ref2.bgColor;
  var _useStyles = useStyles({
      height: height,
      width: width,
      lineColor: lineColor,
      bgColor: bgColor
    }),
    styles = _useStyles.styles,
    cx = _useStyles.cx;
  return /*#__PURE__*/_jsxs("div", {
    className: styles.box,
    children: [/*#__PURE__*/_jsx("div", {
      className: cx(styles.line, styles.animate1)
    }), /*#__PURE__*/_jsx("div", {
      className: cx(styles.line, styles.animate2)
    }), /*#__PURE__*/_jsx("div", {
      className: cx(styles.line, styles.animate3)
    }), /*#__PURE__*/_jsx("div", {
      className: cx(styles.line, styles.animate2)
    }), /*#__PURE__*/_jsx("div", {
      className: cx(styles.line, styles.animate1)
    }), /*#__PURE__*/_jsx("div", {
      className: cx(styles.line, styles.animate2)
    }), /*#__PURE__*/_jsx("div", {
      className: cx(styles.line, styles.animate1)
    })]
  });
};