@blerp/design 1.2.74 → 1.2.76

package/dist/esm/EllipsisLoader.js

@@ -0,0 +1,41 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+import colors from './colors.js';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+const motion1 = props => keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    transform: scale(0);\n  }\n  100% {\n    transform: scale(1);\n  }\n"])));
+
+const motion2 = props => keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n   0% {\n    transform: translate(0, 0);\n  }\n  100% {\n    transform: translate(19px, 0);\n  }\n"])));
+
+const motion3 = props => keyframes(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  0% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0);\n  }\n"])));
+
+const EllipsisSpinner = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: relative;\n    width: ", ";\n    height: ", ";\n    div {\n        position: absolute;\n        width: 11px;\n        height: 11px;\n        border-radius: 50%;\n        background: ", ";\n        animation-timing-function: cubic-bezier(0, 1, 1, 0);\n    }\n    div:nth-child(1) {\n        left: 6px;\n        animation: ", " 0.6s infinite;\n    }\n    div:nth-child(2) {\n        left: 6px;\n        animation: ", " 0.6s infinite;\n    }\n    div:nth-child(3) {\n        left: 26px;\n        animation: ", " 0.6s infinite;\n    }\n    div:nth-child(4) {\n        left: 45px;\n        animation: ", " 0.6s infinite;\n    }\n"])), p => "".concat(p.size).concat(p.sizeUnit), p => "".concat(p.size).concat(p.sizeUnit), p => p.color, p => motion1(), p => motion2(), p => motion2(), p => motion3());
+const EllipsisLoader = _ref => {
+  let {
+    color,
+    size,
+    sizeUnit,
+    style
+  } = _ref;
+  return /*#__PURE__*/React.createElement(EllipsisSpinner, {
+    color: color,
+    size: size,
+    sizeUnit: sizeUnit,
+    style: { ...style
+    }
+  }, /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null));
+};
+EllipsisLoader.defaultProps = {
+  size: 24,
+  color: colors.notBlack,
+  sizeUnit: "px",
+  style: {
+    width: "60px",
+    height: "20px"
+  }
+};
+
+export default EllipsisLoader;
+export { EllipsisLoader };

package/dist/esm/GroupCard.js

@@ -0,0 +1,162 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { Stack, Text } from './index.js';
+import { AddedToIcons, FavoriteIconWithCounter } from './NewBlerp.js';
+
+var _templateObject;
+const BlerpImage = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background-image: url(", ");\n    background-repeat: no-repeat;\n    background-size: cover;\n    width: 140px;\n    height: 140px;\n    border-radius: 12px;\n    transition: 0.3s;\n    position: absolute;\n    opacity: ", ";\n    transform: rotate(", ");\n"])), props => props.image, props => props.firstImage ? "1" : props.hovering ? "1" : "0.5", props => props.hovering ? "45deg" : "20deg");
+const GroupCard = _ref => {
+  var _group$blerps14;
+
+  let {
+    group
+  } = _ref;
+  const [hovering, setHovering] = useState(false);
+  const formatter = Intl.NumberFormat("en", {
+    notation: "compact"
+  });
+  let saveCount = formatter.format(group === null || group === void 0 ? void 0 : group.totalSaveCount);
+
+  const calculateBottom = index => {
+    if (hovering) {
+      return "-20px";
+    }
+
+    return "".concat((index - 2) * 10, "px");
+  };
+
+  const calculateLeft = index => {
+    var _group$blerps, _group$blerps2, _group$blerps5, _group$blerps8, _group$blerps11;
+
+    if ((group === null || group === void 0 ? void 0 : (_group$blerps = group.blerps) === null || _group$blerps === void 0 ? void 0 : _group$blerps.length) === 1) {
+      return "25%";
+    }
+
+    if ((group === null || group === void 0 ? void 0 : (_group$blerps2 = group.blerps) === null || _group$blerps2 === void 0 ? void 0 : _group$blerps2.length) === 2) {
+      var _group$blerps4;
+
+      if (hovering) {
+        var _group$blerps3;
+
+        return "".concat((index - 0.05) / (group === null || group === void 0 ? void 0 : (_group$blerps3 = group.blerps) === null || _group$blerps3 === void 0 ? void 0 : _group$blerps3.length) * 100, "%");
+      }
+
+      return "".concat((index + 0.5) / ((group === null || group === void 0 ? void 0 : (_group$blerps4 = group.blerps) === null || _group$blerps4 === void 0 ? void 0 : _group$blerps4.length) + 2.5) * 100, "%");
+    }
+
+    if ((group === null || group === void 0 ? void 0 : (_group$blerps5 = group.blerps) === null || _group$blerps5 === void 0 ? void 0 : _group$blerps5.length) === 3) {
+      var _group$blerps7;
+
+      if (hovering) {
+        var _group$blerps6;
+
+        return "".concat((index - 0.35) / (group === null || group === void 0 ? void 0 : (_group$blerps6 = group.blerps) === null || _group$blerps6 === void 0 ? void 0 : _group$blerps6.length) * 100, "%");
+      }
+
+      return "".concat((index + 0.4) / ((group === null || group === void 0 ? void 0 : (_group$blerps7 = group.blerps) === null || _group$blerps7 === void 0 ? void 0 : _group$blerps7.length) + 2.5) * 100, "%");
+    }
+
+    if ((group === null || group === void 0 ? void 0 : (_group$blerps8 = group.blerps) === null || _group$blerps8 === void 0 ? void 0 : _group$blerps8.length) === 4) {
+      var _group$blerps10;
+
+      if (hovering) {
+        var _group$blerps9;
+
+        return "".concat((index - 0.6) / (group === null || group === void 0 ? void 0 : (_group$blerps9 = group.blerps) === null || _group$blerps9 === void 0 ? void 0 : _group$blerps9.length) * 100, "%");
+      }
+
+      return "".concat((index + 0.2) / ((group === null || group === void 0 ? void 0 : (_group$blerps10 = group.blerps) === null || _group$blerps10 === void 0 ? void 0 : _group$blerps10.length) + 2.5) * 100, "%");
+    }
+
+    if ((group === null || group === void 0 ? void 0 : (_group$blerps11 = group.blerps) === null || _group$blerps11 === void 0 ? void 0 : _group$blerps11.length) === 5) {
+      var _group$blerps13;
+
+      if (hovering) {
+        var _group$blerps12;
+
+        return "".concat((index - 0.7) / (group === null || group === void 0 ? void 0 : (_group$blerps12 = group.blerps) === null || _group$blerps12 === void 0 ? void 0 : _group$blerps12.length) * 100, "%");
+      }
+
+      return "".concat((index + 0.2) / ((group === null || group === void 0 ? void 0 : (_group$blerps13 = group.blerps) === null || _group$blerps13 === void 0 ? void 0 : _group$blerps13.length) + 2.5) * 100, "%");
+    }
+
+    return "".concat((index - 2) * 10, "px");
+  };
+
+  return /*#__PURE__*/React.createElement(Stack, {
+    sx: {
+      minWidth: "250px",
+      maxWidth: "290px",
+      minHeight: "250px",
+      maxHeight: "290px",
+      width: "100%",
+      height: "100%",
+      aspectRatio: "1 / 1",
+      backgroundColor: "grey2.main",
+      borderRadius: "12px",
+      padding: "30px",
+      position: "relative",
+      boxSizing: "border-box",
+      flex: "1",
+      overflow: "hidden"
+    },
+    onMouseEnter: () => {
+      setHovering(true);
+    },
+    onMouseLeave: () => {
+      setHovering(false);
+    }
+  }, /*#__PURE__*/React.createElement(Stack, {
+    height: "100%"
+  }, /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      color: "grey5.main",
+      fontSize: "12px",
+      fontWeight: "300"
+    }
+  }, (group === null || group === void 0 ? void 0 : group.biteCount) || 0, " Sounds"), /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      whiteSpace: "nowrap",
+      overflowX: "hidden",
+      textOverflow: "ellipsis",
+      maxWidth: "200px",
+      fontSize: "24px",
+      fontWeight: "600",
+      lineHeight: "1",
+      height: "31px",
+      marginBottom: "5px"
+    }
+  }, group === null || group === void 0 ? void 0 : group.title), /*#__PURE__*/React.createElement(Stack, {
+    direction: "row"
+  }, /*#__PURE__*/React.createElement(AddedToIcons, {
+    item: group,
+    hovering: true
+  }), /*#__PURE__*/React.createElement(FavoriteIconWithCounter, {
+    saved: group === null || group === void 0 ? void 0 : group.saved,
+    count: saveCount
+  })), /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    sx: {
+      width: "100%",
+      height: "100%",
+      right: "0",
+      bottom: "0"
+    }
+  }, (_group$blerps14 = group.blerps) === null || _group$blerps14 === void 0 ? void 0 : _group$blerps14.map((blerp, index) => {
+    var _group$blerps15, _blerp$image, _blerp$image$original;
+
+    return /*#__PURE__*/React.createElement(BlerpImage, {
+      index: index,
+      firstImage: index === ((_group$blerps15 = group.blerps) === null || _group$blerps15 === void 0 ? void 0 : _group$blerps15.length) - 1,
+      hovering: hovering,
+      image: blerp === null || blerp === void 0 ? void 0 : (_blerp$image = blerp.image) === null || _blerp$image === void 0 ? void 0 : (_blerp$image$original = _blerp$image.original) === null || _blerp$image$original === void 0 ? void 0 : _blerp$image$original.url,
+      style: {
+        bottom: calculateBottom(index),
+        left: calculateLeft(index)
+      }
+    });
+  }))));
+};
+
+export { GroupCard };