@bigbinary/neeto-themes-frontend 1.1.15 → 1.1.16

package/dist/index.js

@@ -7081,11 +7081,12 @@ var buildInitialValues = function buildInitialValues(theme, themeConfig) {
     name: t$2("neetoThemes.build.leftSideBar.themes.createTheme.newThemeName"),
     properties: themeConfig.map(function (_ref) {
       var key = _ref.key,
-        kind = _ref.kind;
+        kind = _ref.kind,
+        defaultValue = _ref.defaultValue;
       switch (kind) {
         case "color":
           return {
-            value: "#000000",
+            value: defaultValue,
             kind: "color",
             key: key
           };
@@ -7194,6 +7195,77 @@ var Customize = function Customize(_ref) {
   });
 };
 
+var Thumbnail = function Thumbnail(_ref) {
+  var _theme$snakeToCamelCa, _findBy, _findBy2;
+  var active = _ref.active,
+    isPreviewing = _ref.isPreviewing,
+    isHighLightedTheme = _ref.isHighLightedTheme,
+    theme = _ref.theme;
+  var _useConfigStore = useConfigStore(function (store) {
+      return {
+        themeConfig: store["themeConfig"]
+      };
+    }, shallow),
+    _useConfigStore$theme = _useConfigStore.themeConfig,
+    themeConfig = _useConfigStore$theme === void 0 ? [] : _useConfigStore$theme;
+  var _themeConfig = _slicedToArray$3(themeConfig, 2),
+    colorObject1 = _themeConfig[0],
+    colorObject2 = _themeConfig[1];
+  var primaryLabel = humanize(colorObject1 === null || colorObject1 === void 0 ? void 0 : colorObject1.key);
+  var secondaryLabel = humanize(colorObject2 === null || colorObject2 === void 0 ? void 0 : colorObject2.key);
+  var primaryColor = findBy({
+    key: colorObject1.key
+  }, theme.properties).value;
+  var secondaryColor = findBy({
+    key: colorObject2.key
+  }, theme.properties).value;
+  var backgroundImageUrl = (_theme$snakeToCamelCa = theme[snakeToCamelCase(findBy({
+    useAsCardBackground: true
+  }, themeConfig).key)]) === null || _theme$snakeToCamelCa === void 0 ? void 0 : _theme$snakeToCamelCa.url;
+  var buttonBackgroundColor = (_findBy = findBy({
+    key: (_findBy2 = findBy({
+      useAsCardButtonBackground: true
+    }, themeConfig)) === null || _findBy2 === void 0 ? void 0 : _findBy2.key
+  }, theme.properties)) === null || _findBy === void 0 ? void 0 : _findBy.value;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames("neeto-themes-theme-thumbnail neeto-ui-rounded-lg border transition-all duration-300 ease-in-out", {
+      "neeto-ui-border-gray-400": !active,
+      "neeto-ui-border-gray-800 neeto-themes-theme-thumbnail--active": active,
+      "neeto-themes-theme-thumbnail--preview-active": isPreviewing,
+      "neeto-themes-theme-thumbnail--highlight-active": isHighLightedTheme
+    }),
+    style: {
+      backgroundImage: backgroundImageUrl ? "url(".concat(backgroundImageUrl, ")") : "initial",
+      backgroundSize: "cover"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-rounded-lg cursor-pointer p-3 transition-all duration-300 ease-in-out group-hover:opacity-85"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-rounded-lg p-3"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "mb-3"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    style: "h3",
+    weight: "semibold"
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: primaryColor
+    }
+  }, primaryLabel)), /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-gray-600",
+    style: "body2"
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: secondaryColor
+    }
+  }, secondaryLabel))), /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-rounded-lg h-5 w-12",
+    style: {
+      backgroundColor: buttonBackgroundColor
+    }
+  }))));
+};
+
 var Card = function Card(_ref) {
   var _ref$active = _ref.active,
     active = _ref$active === void 0 ? false : _ref$active,
@@ -7207,7 +7279,7 @@ var Card = function Card(_ref) {
     onCloneTheme = _ref.onCloneTheme,
     isHighLightedTheme = _ref.isHighLightedTheme,
     setThemeBeingApplied = _ref.setThemeBeingApplied,
-    Thumbnail = _ref.thumbnail;
+    Thumbnail$1 = _ref.thumbnail;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var id = theme.id,
@@ -7246,7 +7318,12 @@ var Card = function Card(_ref) {
     onClick: function onClick() {
       return onSetPreviewTheme(theme);
     }
-  }, Thumbnail && /*#__PURE__*/React.createElement(Thumbnail, {
+  }, Thumbnail$1 ? /*#__PURE__*/React.createElement(Thumbnail$1, {
+    active: active,
+    isHighLightedTheme: isHighLightedTheme,
+    isPreviewing: isPreviewing,
+    theme: theme
+  }) : /*#__PURE__*/React.createElement(Thumbnail, {
     active: active,
     isHighLightedTheme: isHighLightedTheme,
     isPreviewing: isPreviewing,