@ludo.ninja/components 1.1.2 → 1.1.3

package/dist/components/profile/followersSocial/social/index.jsx

@@ -1,88 +1,35 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import React from 'react';
-
 import Image from 'next/image';
-
 import styled from 'styled-components';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
 // Styles
-var StyledProfileSocialItem = styled.a(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      [
-        '\n  display: block;\n  width: 20px;\n  height: 20px;\n  margin-right: 7px;\n  transition: all 0.2s;\n  transform: scale(1);\n  will-change: transform;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  :hover img {\n    transform: scale(1.3);\n    transition: all 0.2s;\n  }\n',
-      ],
-      [
-        '\n  display: block;\n  width: 20px;\n  height: 20px;\n  margin-right: 7px;\n  transition: all 0.2s;\n  transform: scale(1);\n  will-change: transform;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  :hover img {\n    transform: scale(1.3);\n    transition: all 0.2s;\n  }\n',
-      ]
-    ))
-);
+var StyledProfileSocialItem = styled.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  width: 20px;\n  height: 20px;\n  margin-right: 7px;\n  transition: all 0.2s;\n  transform: scale(1);\n  will-change: transform;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  :hover img {\n    transform: scale(1.3);\n    transition: all 0.2s;\n  }\n"], ["\n  display: block;\n  width: 20px;\n  height: 20px;\n  margin-right: 7px;\n  transition: all 0.2s;\n  transform: scale(1);\n  will-change: transform;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  :hover img {\n    transform: scale(1.3);\n    transition: all 0.2s;\n  }\n"])));
 // Components
 export var ProfileSocial = function (_a) {
-  var social = _a.social;
-  var socialIcon = function (icon, type) {
-    var websiteLink =
-      type === 'website'
-        ? (icon === null || icon === void 0 ? void 0 : icon.includes('http'))
-          ? icon
-          : 'https://'.concat(icon)
-        : icon;
-    if (icon) {
-      return (
-        <StyledProfileSocialItem
-          className={'profileStatsSocialItem'}
-          target={'_blank'}
-          rel="noreferrer"
-          href={websiteLink}
-        >
-          <Image
-            src={'/socials/'.concat([type], '.svg')}
-            width={20}
-            title={type}
-            height={20}
-            alt={icon}
-          />
-        </StyledProfileSocialItem>
-      );
-    }
-  };
-  var isSocialNullish = Object.values(social).every(function (value) {
-    return value === null;
-  });
-  if (
-    !isSocialNullish &&
-    !(social === null || social === void 0 ? void 0 : social.website)
-  )
-    return null;
-  return (
-    <>
-      {socialIcon(
-        social === null || social === void 0 ? void 0 : social.facebook,
-        'facebook'
-      )}
-      {socialIcon(
-        social === null || social === void 0 ? void 0 : social.instagram,
-        'instagram'
-      )}
-      {socialIcon(
-        social === null || social === void 0 ? void 0 : social.website,
-        'website'
-      )}
-      {socialIcon(
-        social === null || social === void 0 ? void 0 : social.twitter,
-        'twitter'
-      )}
-    </>
-  );
+    var social = _a.social;
+    var socialIcon = function (icon, type) {
+        var websiteLink = type === 'website'
+            ? (icon === null || icon === void 0 ? void 0 : icon.includes('http'))
+                ? icon
+                : "https://".concat(icon)
+            : icon;
+        if (icon) {
+            return (<StyledProfileSocialItem className={'profileStatsSocialItem'} target={'_blank'} rel="noreferrer" href={websiteLink}>
+          <Image src={"/socials/".concat([type], ".svg")} width={20} title={type} height={20} alt={icon}/>
+        </StyledProfileSocialItem>);
+        }
+    };
+    var isSocialNullish = Object.values(social).every(function (value) { return value === null; });
+    if (!isSocialNullish && !(social === null || social === void 0 ? void 0 : social.website))
+        return null;
+    return (<>
+      {socialIcon(social === null || social === void 0 ? void 0 : social.facebook, 'facebook')}
+      {socialIcon(social === null || social === void 0 ? void 0 : social.instagram, 'instagram')}
+      {socialIcon(social === null || social === void 0 ? void 0 : social.website, 'website')}
+      {socialIcon(social === null || social === void 0 ? void 0 : social.twitter, 'twitter')}
+    </>);
 };
 var templateObject_1;

package/dist/components/profile/info/index.jsx

@@ -1,103 +1,39 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import React from 'react';
-
 import styled from 'styled-components';
-
 import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-
 import { ScreenWidth, mediaQuery } from '@/styles/ScreenWidth';
-
 import { ProfileAboutText, ProfileStats } from '@/components/profile';
-
 import { ProfilePic } from '@system';
-
 import { getMediaENVDomain } from '@/utils/env';
 import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
 // Styles
-var StyledProfileInfo = styled.div(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      [
-        '\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 29px;\n\n  ',
-        ' {\n    margin-bottom: ',
-        ';\n  }\n\n  ',
-        ' {\n    flex-direction: column;\n    margin-bottom: 0;\n  }\n\n  .profileImgWithDescription {\n    display: flex;\n    width: 69.67%;\n    margin-right: 44px;\n\n    .profileImage {\n      a {\n        pointer-events: none;\n      }\n    }\n\n    ',
-        ' {\n      flex-direction: column;\n      width: 100%;\n      margin-right: 0;\n\n      .profileImage img {\n        width: 64px;\n        height: 64px;\n        margin-right: 0;\n        margin-bottom: 12px;\n      }\n    }\n\n    ',
-        ' {\n      margin-right: ',
-        ';\n\n      .profileImage img {\n        width: ',
-        ';\n        height: ',
-        ';\n      }\n    }\n  }\n',
-      ],
-      [
-        '\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 29px;\n\n  ',
-        ' {\n    margin-bottom: ',
-        ';\n  }\n\n  ',
-        ' {\n    flex-direction: column;\n    margin-bottom: 0;\n  }\n\n  .profileImgWithDescription {\n    display: flex;\n    width: 69.67%;\n    margin-right: 44px;\n\n    .profileImage {\n      a {\n        pointer-events: none;\n      }\n    }\n\n    ',
-        ' {\n      flex-direction: column;\n      width: 100%;\n      margin-right: 0;\n\n      .profileImage img {\n        width: 64px;\n        height: 64px;\n        margin-right: 0;\n        margin-bottom: 12px;\n      }\n    }\n\n    ',
-        ' {\n      margin-right: ',
-        ';\n\n      .profileImage img {\n        width: ',
-        ';\n        height: ',
-        ';\n      }\n    }\n  }\n',
-      ]
-    )),
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(29),
-  mediaQuery.mobile,
-  mediaQuery.mobile,
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(44),
-  adaptiveValueCalc(120),
-  adaptiveValueCalc(120)
-);
+var StyledProfileInfo = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 29px;\n\n  ", " {\n    margin-bottom: ", ";\n  }\n\n  ", " {\n    flex-direction: column;\n    margin-bottom: 0;\n  }\n\n  .profileImgWithDescription {\n    display: flex;\n    width: 69.67%;\n    margin-right: 44px;\n\n    .profileImage {\n      a {\n        pointer-events: none;\n      }\n    }\n\n    ", " {\n      flex-direction: column;\n      width: 100%;\n      margin-right: 0;\n\n      .profileImage img {\n        width: 64px;\n        height: 64px;\n        margin-right: 0;\n        margin-bottom: 12px;\n      }\n    }\n\n    ", " {\n      margin-right: ", ";\n\n      .profileImage img {\n        width: ", ";\n        height: ", ";\n      }\n    }\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 29px;\n\n  ", " {\n    margin-bottom: ", ";\n  }\n\n  ", " {\n    flex-direction: column;\n    margin-bottom: 0;\n  }\n\n  .profileImgWithDescription {\n    display: flex;\n    width: 69.67%;\n    margin-right: 44px;\n\n    .profileImage {\n      a {\n        pointer-events: none;\n      }\n    }\n\n    ", " {\n      flex-direction: column;\n      width: 100%;\n      margin-right: 0;\n\n      .profileImage img {\n        width: 64px;\n        height: 64px;\n        margin-right: 0;\n        margin-bottom: 12px;\n      }\n    }\n\n    ", " {\n      margin-right: ", ";\n\n      .profileImage img {\n        width: ", ";\n        height: ", ";\n      }\n    }\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(29), mediaQuery.mobile, mediaQuery.mobile, mediaQuery.minWidthFourK, adaptiveValueCalc(44), adaptiveValueCalc(120), adaptiveValueCalc(120));
 // Components
 export var ProfileInfo = function (_a) {
-  var profile = _a.profile;
-  var windowDimensions =
-    useWindowDimensionsWithServerInitial().windowDimensions;
-  var getProfileImgSize = function () {
-    if (!windowDimensions) return 120;
-    if (windowDimensions.windowWidth <= ScreenWidth.MOBILE) return 64;
-    return 120;
-  };
-  var size = getProfileImgSize();
-  return (
-    <StyledProfileInfo>
+    var profile = _a.profile;
+    var windowDimensions = useWindowDimensionsWithServerInitial().windowDimensions;
+    var getProfileImgSize = function () {
+        if (!windowDimensions)
+            return 120;
+        if (windowDimensions.windowWidth <= ScreenWidth.MOBILE)
+            return 64;
+        return 120;
+    };
+    var size = getProfileImgSize();
+    return (<StyledProfileInfo>
       <div className={'profileImgWithDescription'}>
         <div className={'profileImage'}>
-          <ProfilePic
-            userPicSrc={profile.getUserPic({
-              mediaDomain: getMediaENVDomain(),
-            })}
-            size={size}
-          />
+          <ProfilePic userPicSrc={profile.getUserPic({
+            mediaDomain: getMediaENVDomain(),
+        })} size={size}/>
         </div>
-        <ProfileAboutText
-          username={profile.getName()}
-          about={profile.getAbout()}
-          following={
-            profile === null || profile === void 0
-              ? void 0
-              : profile.getIsFollowing()
-          }
-          followings={profile.getFollowings()}
-          followers={profile.getFollowers()}
-          wallets={profile.getWallets()}
-          social={[]}
-        />
+        <ProfileAboutText username={profile.getName()} about={profile.getAbout()} following={profile === null || profile === void 0 ? void 0 : profile.getIsFollowing()} followings={profile.getFollowings()} followers={profile.getFollowers()} wallets={profile.getWallets()} social={[]}/>
       </div>
-      <ProfileStats rank={profile.getUserRank()} />
-    </StyledProfileInfo>
-  );
+      <ProfileStats rank={profile.getUserRank()}/>
+    </StyledProfileInfo>);
 };
 var templateObject_1;

package/dist/components/profile/interests/index.jsx

@@ -1,169 +1,54 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import React from 'react';
-
 import styled from 'styled-components';
-
 import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-
 import useFetchUserInterests from '@/api/server-preferences/queries/useFetchUserInterests';
-
 import { mediaQuery } from '@/styles/ScreenWidth';
-import {
-  BlackColor,
-  InactiveButtonColor,
-  TextGrayColor,
-} from '@/styles/colors';
+import { BlackColor, InactiveButtonColor, TextGrayColor, } from '@/styles/colors';
 import { FH5, TextSmall } from '@/styles/typography';
-
 import colors from '@/components/profile/interests/data';
-
 import Palete from '@/system/Palete';
-
 import { dmsansFontVarCss } from '@/fonts/vars';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
 // Styles
-var StyledProfileInterests = styled.div(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      [
-        '\n  margin-bottom: 16px;\n\n  .caption {\n    ',
-        ';\n    color: ',
-        ';\n  }\n\n  .diagrammaProgress {\n    display: flex;\n    justify-content: flex-start;\n    margin-top: 8px;\n    border-radius: 4px;\n    height: 32px;\n    background-color: ',
-        ';\n\n    &Item {\n      display: block;\n      height: 100%;\n\n      :first-child {\n        border-top-left-radius: 4px;\n        border-bottom-left-radius: 4px;\n      }\n    }\n  }\n\n  .diagrammaTable {\n    font-family: ',
-        ';\n\n    margin-top: 8px;\n\n    &Item {\n      ',
-        ';\n      display: flex;\n      justify-content: space-between;\n      margin-top: 8px;\n      user-select: none;\n\n      &StartValue {\n        display: flex;\n        align-items: center;\n        color: ',
-        ';\n\n        strong {\n          display: inline-block;\n          width: 10px;\n          height: 10px;\n          border-radius: 50%;\n          margin-right: 8px;\n        }\n      }\n\n      &EndValue {\n        color: ',
-        ';\n      }\n    }\n  }\n\n  ',
-        ' {\n    margin-bottom: ',
-        ';\n\n    .diagrammaProgress {\n      margin-top: ',
-        ';\n      border-radius: ',
-        ';\n      height: ',
-        ';\n\n      &Item {\n        :first-child {\n          border-top-left-radius: ',
-        ';\n          border-bottom-left-radius: ',
-        ';\n        }\n      }\n    }\n    .diagrammaTable {\n      margin-top: ',
-        ';\n      &Item {\n        margin-top: ',
-        ';\n        &StartValue {\n          strong {\n            width: ',
-        ';\n            height: ',
-        ';\n            margin-right: ',
-        ';\n          }\n        }\n      }\n    }\n  }\n',
-      ],
-      [
-        '\n  margin-bottom: 16px;\n\n  .caption {\n    ',
-        ';\n    color: ',
-        ';\n  }\n\n  .diagrammaProgress {\n    display: flex;\n    justify-content: flex-start;\n    margin-top: 8px;\n    border-radius: 4px;\n    height: 32px;\n    background-color: ',
-        ';\n\n    &Item {\n      display: block;\n      height: 100%;\n\n      :first-child {\n        border-top-left-radius: 4px;\n        border-bottom-left-radius: 4px;\n      }\n    }\n  }\n\n  .diagrammaTable {\n    font-family: ',
-        ';\n\n    margin-top: 8px;\n\n    &Item {\n      ',
-        ';\n      display: flex;\n      justify-content: space-between;\n      margin-top: 8px;\n      user-select: none;\n\n      &StartValue {\n        display: flex;\n        align-items: center;\n        color: ',
-        ';\n\n        strong {\n          display: inline-block;\n          width: 10px;\n          height: 10px;\n          border-radius: 50%;\n          margin-right: 8px;\n        }\n      }\n\n      &EndValue {\n        color: ',
-        ';\n      }\n    }\n  }\n\n  ',
-        ' {\n    margin-bottom: ',
-        ';\n\n    .diagrammaProgress {\n      margin-top: ',
-        ';\n      border-radius: ',
-        ';\n      height: ',
-        ';\n\n      &Item {\n        :first-child {\n          border-top-left-radius: ',
-        ';\n          border-bottom-left-radius: ',
-        ';\n        }\n      }\n    }\n    .diagrammaTable {\n      margin-top: ',
-        ';\n      &Item {\n        margin-top: ',
-        ';\n        &StartValue {\n          strong {\n            width: ',
-        ';\n            height: ',
-        ';\n            margin-right: ',
-        ';\n          }\n        }\n      }\n    }\n  }\n',
-      ]
-    )),
-  FH5,
-  BlackColor,
-  InactiveButtonColor,
-  dmsansFontVarCss.css,
-  TextSmall,
-  BlackColor,
-  TextGrayColor,
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(16),
-  adaptiveValueCalc(8),
-  adaptiveValueCalc(4),
-  adaptiveValueCalc(32),
-  adaptiveValueCalc(4),
-  adaptiveValueCalc(4),
-  adaptiveValueCalc(8),
-  adaptiveValueCalc(8),
-  adaptiveValueCalc(10),
-  adaptiveValueCalc(10),
-  adaptiveValueCalc(8)
-);
+var StyledProfileInterests = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: 16px;\n\n  .caption {\n    ", ";\n    color: ", ";\n  }\n\n  .diagrammaProgress {\n    display: flex;\n    justify-content: flex-start;\n    margin-top: 8px;\n    border-radius: 4px;\n    height: 32px;\n    background-color: ", ";\n\n    &Item {\n      display: block;\n      height: 100%;\n\n      :first-child {\n        border-top-left-radius: 4px;\n        border-bottom-left-radius: 4px;\n      }\n    }\n  }\n\n  .diagrammaTable {\n    font-family: ", ";\n\n    margin-top: 8px;\n\n    &Item {\n      ", ";\n      display: flex;\n      justify-content: space-between;\n      margin-top: 8px;\n      user-select: none;\n\n      &StartValue {\n        display: flex;\n        align-items: center;\n        color: ", ";\n\n        strong {\n          display: inline-block;\n          width: 10px;\n          height: 10px;\n          border-radius: 50%;\n          margin-right: 8px;\n        }\n      }\n\n      &EndValue {\n        color: ", ";\n      }\n    }\n  }\n\n  ", " {\n    margin-bottom: ", ";\n\n    .diagrammaProgress {\n      margin-top: ", ";\n      border-radius: ", ";\n      height: ", ";\n\n      &Item {\n        :first-child {\n          border-top-left-radius: ", ";\n          border-bottom-left-radius: ", ";\n        }\n      }\n    }\n    .diagrammaTable {\n      margin-top: ", ";\n      &Item {\n        margin-top: ", ";\n        &StartValue {\n          strong {\n            width: ", ";\n            height: ", ";\n            margin-right: ", ";\n          }\n        }\n      }\n    }\n  }\n"], ["\n  margin-bottom: 16px;\n\n  .caption {\n    ", ";\n    color: ", ";\n  }\n\n  .diagrammaProgress {\n    display: flex;\n    justify-content: flex-start;\n    margin-top: 8px;\n    border-radius: 4px;\n    height: 32px;\n    background-color: ", ";\n\n    &Item {\n      display: block;\n      height: 100%;\n\n      :first-child {\n        border-top-left-radius: 4px;\n        border-bottom-left-radius: 4px;\n      }\n    }\n  }\n\n  .diagrammaTable {\n    font-family: ", ";\n\n    margin-top: 8px;\n\n    &Item {\n      ", ";\n      display: flex;\n      justify-content: space-between;\n      margin-top: 8px;\n      user-select: none;\n\n      &StartValue {\n        display: flex;\n        align-items: center;\n        color: ", ";\n\n        strong {\n          display: inline-block;\n          width: 10px;\n          height: 10px;\n          border-radius: 50%;\n          margin-right: 8px;\n        }\n      }\n\n      &EndValue {\n        color: ", ";\n      }\n    }\n  }\n\n  ", " {\n    margin-bottom: ", ";\n\n    .diagrammaProgress {\n      margin-top: ", ";\n      border-radius: ", ";\n      height: ", ";\n\n      &Item {\n        :first-child {\n          border-top-left-radius: ", ";\n          border-bottom-left-radius: ", ";\n        }\n      }\n    }\n    .diagrammaTable {\n      margin-top: ", ";\n      &Item {\n        margin-top: ", ";\n        &StartValue {\n          strong {\n            width: ", ";\n            height: ", ";\n            margin-right: ", ";\n          }\n        }\n      }\n    }\n  }\n"])), FH5, BlackColor, InactiveButtonColor, dmsansFontVarCss.css, TextSmall, BlackColor, TextGrayColor, mediaQuery.minWidthFourK, adaptiveValueCalc(16), adaptiveValueCalc(8), adaptiveValueCalc(4), adaptiveValueCalc(32), adaptiveValueCalc(4), adaptiveValueCalc(4), adaptiveValueCalc(8), adaptiveValueCalc(8), adaptiveValueCalc(10), adaptiveValueCalc(10), adaptiveValueCalc(8));
 // Component
 export var ProfileInterests = function () {
-  var _a = useFetchUserInterests(),
-    userInterests = _a.userInterests,
-    loading = _a.loading,
-    error = _a.error;
-  var renderDiagrammaProgressItem = function () {
-    return userInterests === null || userInterests === void 0
-      ? void 0
-      : userInterests.map(function (interest, iter) {
-          return (
-            <span
-              key={interest.imageUrl}
-              className={'diagrammaProgressItem'}
-              style={{
-                backgroundColor: colors[iter].colorLabel,
-                width: ''.concat(interest.percents, '%'),
-              }}
-            ></span>
-          );
+    var _a = useFetchUserInterests(), userInterests = _a.userInterests, loading = _a.loading, error = _a.error;
+    var renderDiagrammaProgressItem = function () {
+        return userInterests === null || userInterests === void 0 ? void 0 : userInterests.map(function (interest, iter) {
+            return (<span key={interest.imageUrl} className={'diagrammaProgressItem'} style={{
+                    backgroundColor: colors[iter].colorLabel,
+                    width: "".concat(interest.percents, "%"),
+                }}></span>);
         });
-  };
-  var renderDiagrammaTableItem = function () {
-    return userInterests === null || userInterests === void 0
-      ? void 0
-      : userInterests.map(function (interest, iter) {
-          var mediaQuery = window.matchMedia(
-            '(min-width: 768px) and (max-width: 1199px)'
-          );
-          var shouldTruncate =
-            mediaQuery.matches && interest.name && interest.name.length > 11;
-          return (
-            <span key={interest.imageUrl} className="diagrammaTableItem">
-              <p className={'diagrammaTableItemStartValue'}>
-                <strong
-                  style={{ backgroundColor: colors[iter].colorLabel }}
-                ></strong>
-                {shouldTruncate
-                  ? interest.name.substring(0, 11) + '...'
-                  : interest.name}
-              </p>
-              <p className={'diagrammaTableItemEndValue'}>
-                {''.concat(interest.percents, '%')}
-              </p>
-            </span>
-          );
+    };
+    var renderDiagrammaTableItem = function () {
+        return userInterests === null || userInterests === void 0 ? void 0 : userInterests.map(function (interest, iter) {
+            var mediaQuery = window.matchMedia('(min-width: 768px) and (max-width: 1199px)');
+            var shouldTruncate = mediaQuery.matches && interest.name && interest.name.length > 11;
+            return (<span key={interest.imageUrl} className="diagrammaTableItem">
+          <p className={'diagrammaTableItemStartValue'}>
+            <strong style={{ backgroundColor: colors[iter].colorLabel }}></strong>
+            {shouldTruncate
+                    ? interest.name.substring(0, 11) + '...'
+                    : interest.name}
+          </p>
+          <p className={'diagrammaTableItemEndValue'}>{"".concat(interest.percents, "%")}</p>
+        </span>);
         });
-  };
-  if (
-    loading ||
-    error ||
-    !(userInterests === null || userInterests === void 0
-      ? void 0
-      : userInterests.length)
-  )
-    return null;
-  return (
-    <StyledProfileInterests>
+    };
+    if (loading || error || !(userInterests === null || userInterests === void 0 ? void 0 : userInterests.length))
+        return null;
+    return (<StyledProfileInterests>
       <Palete>
         <span className="caption">Interests</span>
         <div className={'diagrammaProgress'}>
           {renderDiagrammaProgressItem()}
         </div>
-        <div className={'diagrammaTable'}>
+        <div className={"diagrammaTable"}>
           {renderDiagrammaTableItem()}
           {/*<span className="diagrammaTableItem">*/}
           {/*  <p className={'diagrammaTableItemStartValue'}>*/}
@@ -174,7 +59,6 @@ export var ProfileInterests = function () {
           {/*</span>*/}
         </div>
       </Palete>
-    </StyledProfileInterests>
-  );
+    </StyledProfileInterests>);
 };
 var templateObject_1;

package/dist/components/profile/jsonLd/index.jsx

@@ -1,16 +1,5 @@
 export var profileJSONLD = function (profile, userpic) {
-  return {
-    __html:
-      '{\n      "@context": "http://schema.org",\n      "@type": "Article",\n      "mainEntityOfPage": {\n        "@type": "WebPage",\n        "@id": "'
-        .concat(profile.userId, '"\n      },\n      "headline": "')
-        .concat(profile.username, '",\n      "image": [\n        "')
-        .concat(userpic, '"\n      ],\n      "datePublished": "')
-        .concat(Date.now().toString(), '",\n      "dateModified": "')
-        .concat(
-          Date.now().toString(),
-          '",\n      "author": {\n        "@type": "Person",\n        "name": "'
-        )
-        .concat(profile.username, '"\n      },\n      "description": "')
-        .concat(profile.about, '"\n    }'),
-  };
+    return {
+        __html: "{\n      \"@context\": \"http://schema.org\",\n      \"@type\": \"Article\",\n      \"mainEntityOfPage\": {\n        \"@type\": \"WebPage\",\n        \"@id\": \"".concat(profile.userId, "\"\n      },\n      \"headline\": \"").concat(profile.username, "\",\n      \"image\": [\n        \"").concat(userpic, "\"\n      ],\n      \"datePublished\": \"").concat(Date.now().toString(), "\",\n      \"dateModified\": \"").concat(Date.now().toString(), "\",\n      \"author\": {\n        \"@type\": \"Person\",\n        \"name\": \"").concat(profile.username, "\"\n      },\n      \"description\": \"").concat(profile.about, "\"\n    }"),
+    };
 };

package/dist/components/profile/pageHead/index.jsx

@@ -1,116 +1,45 @@
 import React from 'react';
-
 import Head from 'next/head';
-
 // Private
 var seo = function (title, about, url, image) {
-  return {
-    title: title,
-    about: about,
-    openGraph: {
-      type: 'website',
-      locale: 'en_US',
-      url: url,
-      title: title,
-      about: about,
-      image: image,
-      site_name: process.env.NEXT_PUBLIC_ENV_DOMAIN,
-      imageWidth: '512',
-      imageHeight: '512',
-    },
-    twitter: {
-      handle: '@ludo',
-      cardType: 'summary_large_image',
-    },
-  };
+    return {
+        title: title,
+        about: about,
+        openGraph: {
+            type: 'website',
+            locale: 'en_US',
+            url: url,
+            title: title,
+            about: about,
+            image: image,
+            site_name: process.env.NEXT_PUBLIC_ENV_DOMAIN,
+            imageWidth: '512',
+            imageHeight: '512',
+        },
+        twitter: {
+            handle: '@ludo',
+            cardType: 'summary_large_image',
+        },
+    };
 };
 // Components
 export var ProfilePageHead = function (_a) {
-  var userUrl = _a.userUrl,
-    profile = _a.profile;
-  var seoValues = seo(
-    profile.getName() || '',
-    profile.getAbout(),
-    userUrl,
-    ''
+    var userUrl = _a.userUrl, profile = _a.profile;
+    var seoValues = seo(profile.getName() || '', profile.getAbout(), userUrl, ''
     // profilePic
-  );
-  return (
-    <Head>
+    );
+    return (<Head>
       {seoValues.title && <title key="title">{seoValues.title}</title>}
-      {seoValues.about && (
-        <meta key="description" name="description" content={seoValues.about} />
-      )}
-      {seoValues.twitter.cardType && (
-        <meta
-          key="twitter:card"
-          name="twitter:card"
-          content={seoValues.twitter.cardType}
-        />
-      )}
-      {seoValues.twitter.handle && (
-        <meta
-          key="twitter:site"
-          name="twitter:site"
-          content={seoValues.twitter.handle}
-        />
-      )}
-      {seoValues.openGraph.url && (
-        <meta
-          key="og:url"
-          property="og:url"
-          content={seoValues.openGraph.url}
-        />
-      )}
-      {seoValues.openGraph.type && (
-        <meta
-          key="og:type"
-          property="og:type"
-          content={seoValues.openGraph.type}
-        />
-      )}
-      {seoValues.openGraph.title && (
-        <meta
-          key="og:title"
-          property="og:title"
-          content={seoValues.openGraph.title}
-        />
-      )}
-      {seoValues.openGraph.about && (
-        <meta
-          key="og:description"
-          property="og:description"
-          content={seoValues.openGraph.about}
-        />
-      )}
-      {seoValues.openGraph.image && (
-        <meta
-          key="og:image"
-          property="og:image"
-          content={seoValues.openGraph.image}
-        />
-      )}
-      {seoValues.openGraph.imageWidth && (
-        <meta
-          key="og:image:width"
-          property="og:image:width"
-          content={seoValues.openGraph.imageWidth}
-        />
-      )}
-      {seoValues.openGraph.imageHeight && (
-        <meta
-          key="og:image:height"
-          property="og:image:height"
-          content={seoValues.openGraph.imageHeight}
-        />
-      )}
-      {seoValues.openGraph.locale && (
-        <meta
-          key="og:locale"
-          property="og:locale"
-          content={seoValues.openGraph.locale}
-        />
-      )}
-    </Head>
-  );
+      {seoValues.about && (<meta key="description" name="description" content={seoValues.about}/>)}
+      {seoValues.twitter.cardType && (<meta key="twitter:card" name="twitter:card" content={seoValues.twitter.cardType}/>)}
+      {seoValues.twitter.handle && (<meta key="twitter:site" name="twitter:site" content={seoValues.twitter.handle}/>)}
+      {seoValues.openGraph.url && (<meta key="og:url" property="og:url" content={seoValues.openGraph.url}/>)}
+      {seoValues.openGraph.type && (<meta key="og:type" property="og:type" content={seoValues.openGraph.type}/>)}
+      {seoValues.openGraph.title && (<meta key="og:title" property="og:title" content={seoValues.openGraph.title}/>)}
+      {seoValues.openGraph.about && (<meta key="og:description" property="og:description" content={seoValues.openGraph.about}/>)}
+      {seoValues.openGraph.image && (<meta key="og:image" property="og:image" content={seoValues.openGraph.image}/>)}
+      {seoValues.openGraph.imageWidth && (<meta key="og:image:width" property="og:image:width" content={seoValues.openGraph.imageWidth}/>)}
+      {seoValues.openGraph.imageHeight && (<meta key="og:image:height" property="og:image:height" content={seoValues.openGraph.imageHeight}/>)}
+      {seoValues.openGraph.locale && (<meta key="og:locale" property="og:locale" content={seoValues.openGraph.locale}/>)}
+    </Head>);
 };