@blerp/design 1.3.17 → 1.4.1

package/dist/esm/CollectionCard.js

@@ -1,17 +1,85 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
-import { BookmarkRounded, BookmarkAddOutlined, AccountCircleRounded, LockRounded, VisibilityOffRounded } from '@mui/icons-material';
 import React, { useState } from 'react';
-import { usePalette } from 'react-palette';
-import { Box, Stack, IconButton, Tooltip, Text } from './index.js';
-import { PremiumCollectionCard } from './PremiumCollectionCard.js';
-import styled from 'styled-components';
+import { Box, Stack, Tooltip, Text, IconButton } from './index.js';
+import { Blerp } from './PremiumCollectionCard.js';
+import { useCustomPalette } from './helpers.js';
 import { TwitchBitIcon } from './Icons/Icons.js';
 
-var _templateObject;
-const LineClamp = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: -webkit-box;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    margin: 5px 0;\n    max-width: 92%;\n"]))); //on background click
-//primary and secondary action buttons
+const AccountCircleIcon = _ref => {
+  let {
+    sx = {}
+  } = _ref;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: sx.fontSize || 24,
+    height: sx.fontSize || 24,
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    style: {
+      color: sx.color
+    }
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 4c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm0 14c-2.03 0-4.43-.82-6.14-2.88C7.55 15.8 9.68 15 12 15s4.45.8 6.14 2.12C16.43 19.18 14.03 20 12 20z"
+  }));
+};
+
+const BookmarkIcon = _ref2 => {
+  let {
+    sx = {},
+    onClick
+  } = _ref2;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: sx.fontSize || 24,
+    height: sx.fontSize || 24,
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    onClick: onClick,
+    style: {
+      color: sx.color,
+      cursor: onClick ? "pointer" : "default"
+    }
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"
+  }));
+};
+
+const BookmarkIconIcon = _ref3 => {
+  let {
+    sx = {},
+    onClick
+  } = _ref3;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: sx.fontSize || 24,
+    height: sx.fontSize || 24,
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    onClick: onClick,
+    style: {
+      color: sx.color,
+      cursor: onClick ? "pointer" : "default"
+    }
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M17 11v6.97l-5-2.14-5 2.14V5h6V3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V11h-2zm4-4h-2v2h-2V7h-2V5h2V3h2v2h2v2z"
+  }));
+};
+
+const VisibilityOffIcon = _ref4 => {
+  let {
+    sx = {}
+  } = _ref4;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: sx.fontSize || 24,
+    height: sx.fontSize || 24,
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    style: {
+      color: sx.color,
+      marginLeft: sx.marginLeft
+    }
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"
+  }));
+};
 
-const CollectionCard = _ref => {
+const CollectionCard = _ref6 => {
   var _collection$image, _collection$image$ori, _collection$image2, _collection$image2$or, _collection$image3, _collection$image3$or;
 
   let {
@@ -40,13 +108,13 @@ const CollectionCard = _ref => {
     bottomLeftIcon,
     handleClickBottomLeftIcon,
     premiumDiamondPill
-  } = _ref;
+  } = _ref6;
   const [cardColors, setCardColors] = useState(null);
   const {
     data,
     loading,
     error
-  } = usePalette((collection === null || collection === void 0 ? void 0 : collection.visibility) !== "PRIVATE" || isOwner ? collection === null || collection === void 0 ? void 0 : (_collection$image = collection.image) === null || _collection$image === void 0 ? void 0 : (_collection$image$ori = _collection$image.original) === null || _collection$image$ori === void 0 ? void 0 : _collection$image$ori.url : "black");
+  } = useCustomPalette((collection === null || collection === void 0 ? void 0 : collection.visibility) !== "PRIVATE" || isOwner ? collection === null || collection === void 0 ? void 0 : (_collection$image = collection.image) === null || _collection$image === void 0 ? void 0 : (_collection$image$ori = _collection$image.original) === null || _collection$image$ori === void 0 ? void 0 : _collection$image$ori.url : "black");
 
   const renderProfileImage = () => {
     var _collection$ownerObje, _collection$ownerObje2, _collection$ownerObje3, _collection$ownerObje4, _collection$ownerObje5, _collection$ownerObje6;
@@ -88,7 +156,7 @@ const CollectionCard = _ref => {
         borderRadius: "50%",
         pointerEvents: "none"
       }
-    }) : /*#__PURE__*/React.createElement(AccountCircleRounded, {
+    }) : /*#__PURE__*/React.createElement(AccountCircleIcon, {
       sx: {
         fontSize: "16px",
         color: "white.override"
@@ -106,7 +174,7 @@ const CollectionCard = _ref => {
           backgroundColor: "grey3.override"
         }
       }
-    }, collection !== null && collection !== void 0 && collection.saved ? /*#__PURE__*/React.createElement(BookmarkRounded, {
+    }, collection !== null && collection !== void 0 && collection.saved ? /*#__PURE__*/React.createElement(BookmarkIcon, {
       onClick: e => {
         e.stopPropagation();
         handleClickSave(false);
@@ -115,7 +183,7 @@ const CollectionCard = _ref => {
         fontSize: "16px",
         color: "white.override"
       }
-    }) : /*#__PURE__*/React.createElement(BookmarkAddOutlined, {
+    }) : /*#__PURE__*/React.createElement(BookmarkIcon, {
       onClick: e => {
         e.stopPropagation();
         handleClickSave(true);
@@ -144,7 +212,7 @@ const CollectionCard = _ref => {
   }
 
   if (isPremium) {
-    return /*#__PURE__*/React.createElement(PremiumCollectionCard, {
+    return /*#__PURE__*/React.createElement(Blerp, {
       collection: collection,
       variantSize: variantSize,
       handleClickBackground: handleClickBackground,
@@ -177,19 +245,7 @@ const CollectionCard = _ref => {
       display: "flex",
       alignItems: "center",
       width: fluid ? "80%" : sizeParams.width,
-      height: fluid ? "80%" : sizeParams.height // ":hover #collection-background-1": {
-      //     transform: "rotate(7deg)",
-      //     height: "91%",
-      //     right: "-11px",
-      //     top: "12px",
-      // },
-      // ":hover #collection-background-2": {
-      //     transform: "rotate(14deg)",
-      //     height: "84%",
-      //     right: "-20px",
-      //     top: "24px",
-      // },
-
+      height: fluid ? "80%" : sizeParams.height
     }
   }, /*#__PURE__*/React.createElement(Box, {
     onClick: () => {
@@ -287,15 +343,27 @@ const CollectionCard = _ref => {
     }
   }, renderPrimaryActionButton()), renderProfileImage(), /*#__PURE__*/React.createElement(Tooltip, {
     title: "This collection has been removed or hidden"
-  }, /*#__PURE__*/React.createElement(LockRounded, {
+  }, /*#__PURE__*/React.createElement(BookmarkIconIcon, {
     sx: {
       color: "white.override",
       fontSize: "35px"
     }
-  })), /*#__PURE__*/React.createElement(LineClamp, null, /*#__PURE__*/React.createElement(Text, {
+  })), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      display: "-webkit-box",
+      WebkitLineClamp: "1",
+      WebkitBoxOrient: "vertical",
+      overflow: "hidden",
+      margin: "5px 0",
+      maxWidth: "92%"
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
     fontSize: fontSize ? fontSize : "22px",
     color: "white.override",
-    textAlign: "center"
+    textAlign: "center",
+    sx: {
+      color: "white.override"
+    }
   }, collection === null || collection === void 0 ? void 0 : collection.title))) : /*#__PURE__*/React.createElement(Box, {
     sx: {
       backgroundImage: "linear-gradient(".concat(data.muted || "#000000", "7a, #0000007a), url(").concat(collection === null || collection === void 0 ? void 0 : (_collection$image2 = collection.image) === null || _collection$image2 === void 0 ? void 0 : (_collection$image2$or = _collection$image2.original) === null || _collection$image2$or === void 0 ? void 0 : _collection$image2$or.url, ")"),
@@ -338,7 +406,7 @@ const CollectionCard = _ref => {
     }
   }))), (collection === null || collection === void 0 ? void 0 : collection.visibility) === "PRIVATE" && isOwner && /*#__PURE__*/React.createElement(Tooltip, {
     title: "Private"
-  }, /*#__PURE__*/React.createElement(LockRounded, {
+  }, /*#__PURE__*/React.createElement(BookmarkIconIcon, {
     sx: {
       marginLeft: "4px",
       fontSize: "16px",
@@ -346,13 +414,22 @@ const CollectionCard = _ref => {
     }
   })), (collection === null || collection === void 0 ? void 0 : collection.visibility) === "UNLISTED" && /*#__PURE__*/React.createElement(Tooltip, {
     title: "Unlisted"
-  }, /*#__PURE__*/React.createElement(VisibilityOffRounded, {
+  }, /*#__PURE__*/React.createElement(VisibilityOffIcon, {
     sx: {
       marginLeft: "4px",
       fontSize: "16px",
       color: "white.override"
     }
-  }))), secondaryActionButton ? secondaryActionButton : renderProfileImage(), /*#__PURE__*/React.createElement(LineClamp, null, isLink ? /*#__PURE__*/React.createElement("a", {
+  }))), secondaryActionButton ? secondaryActionButton : renderProfileImage(), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      display: "-webkit-box",
+      WebkitLineClamp: "1",
+      WebkitBoxOrient: "vertical",
+      overflow: "hidden",
+      margin: "5px 0",
+      maxWidth: "92%"
+    }
+  }, isLink ? /*#__PURE__*/React.createElement("a", {
     href: "/sound-collection/".concat(collection._id),
     style: {
       color: "white",
@@ -363,6 +440,7 @@ const CollectionCard = _ref => {
     color: "white.override",
     textAlign: "center",
     sx: {
+      color: "white.override",
       ":hover": {
         textDecoration: "underline"
       }
@@ -370,7 +448,10 @@ const CollectionCard = _ref => {
   }, collection === null || collection === void 0 ? void 0 : collection.title)) : /*#__PURE__*/React.createElement(Text, {
     fontSize: fontSize ? fontSize : "22px",
     color: "white.override",
-    textAlign: "center"
+    textAlign: "center",
+    sx: {
+      color: "white.override"
+    }
   }, collection === null || collection === void 0 ? void 0 : collection.title)))) : /*#__PURE__*/React.createElement(Box, {
     sx: {
       backgroundImage: "linear-gradient(".concat(cardColors ? cardColors[0] : "#000000", "7a, #0000004a), url(").concat(collection === null || collection === void 0 ? void 0 : (_collection$image3 = collection.image) === null || _collection$image3 === void 0 ? void 0 : (_collection$image3$or = _collection$image3.original) === null || _collection$image3$or === void 0 ? void 0 : _collection$image3$or.url, ")"),
@@ -388,5 +469,4 @@ const CollectionCard = _ref => {
   })));
 };
 
-export default CollectionCard;
-export { CollectionCard };
+export { CollectionCard, CollectionCard as default };