@ludo.ninja/components 2.1.73 → 2.1.74

package/build/components/assetPage/index.d.ts

@@ -1,10 +1,5 @@
-export { Participants } from './participants';
-export { Title } from './tittle';
 export { AssetMedia } from './assetNft';
-export { PriceRank } from './priceRank';
 export { Properties } from './properties';
 export { Information } from './information';
-export { Description } from './description';
-export { MarketPlaces } from './marketPlaces';
 export { AudioVideoPlayer } from './audioVideoPlayer';
 export { Viewer3D } from './viewer3D';

package/build/components/assetPage/index.js

@@ -1,22 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Viewer3D = exports.AudioVideoPlayer = exports.MarketPlaces = exports.Description = exports.Information = exports.Properties = exports.PriceRank = exports.AssetMedia = exports.Title = exports.Participants = void 0;
-var participants_1 = require("./participants");
-Object.defineProperty(exports, "Participants", { enumerable: true, get: function () { return participants_1.Participants; } });
-var tittle_1 = require("./tittle");
-Object.defineProperty(exports, "Title", { enumerable: true, get: function () { return tittle_1.Title; } });
+exports.Viewer3D = exports.AudioVideoPlayer = exports.Information = exports.Properties = exports.AssetMedia = void 0;
 var assetNft_1 = require("./assetNft");
 Object.defineProperty(exports, "AssetMedia", { enumerable: true, get: function () { return assetNft_1.AssetMedia; } });
-var priceRank_1 = require("./priceRank");
-Object.defineProperty(exports, "PriceRank", { enumerable: true, get: function () { return priceRank_1.PriceRank; } });
 var properties_1 = require("./properties");
 Object.defineProperty(exports, "Properties", { enumerable: true, get: function () { return properties_1.Properties; } });
 var information_1 = require("./information");
 Object.defineProperty(exports, "Information", { enumerable: true, get: function () { return information_1.Information; } });
-var description_1 = require("./description");
-Object.defineProperty(exports, "Description", { enumerable: true, get: function () { return description_1.Description; } });
-var marketPlaces_1 = require("./marketPlaces");
-Object.defineProperty(exports, "MarketPlaces", { enumerable: true, get: function () { return marketPlaces_1.MarketPlaces; } });
 var audioVideoPlayer_1 = require("./audioVideoPlayer");
 Object.defineProperty(exports, "AudioVideoPlayer", { enumerable: true, get: function () { return audioVideoPlayer_1.AudioVideoPlayer; } });
 var viewer3D_1 = require("./viewer3D");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ludo.ninja/components",
-  "version": "2.1.73",
+  "version": "2.1.74",
   "private": false,
   "main": "build/index.js",
   "types": "build/index.d.ts",

package/build/components/assetPage/description/index.d.ts

@@ -1,4 +0,0 @@
-import { assetSchema as schema } from '@ludo.ninja/api';
-type DescriptionProps = Pick<schema.IAsset, 'description'>;
-export declare const Description: ({ description }: DescriptionProps) => import("react/jsx-runtime").JSX.Element | null;
-export {};

package/build/components/assetPage/description/index.js

@@ -1,43 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Description = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_hyphen_1 = __importDefault(require("react-hyphen"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-const ScreenWidth_1 = require("../../../styles/ScreenWidth");
-const colors_1 = require("../../../styles/colors");
-const index_1 = require("../../../system/index");
-const SH3 = (0, styled_components_1.default)(index_1.H3) `
-  margin-top: 20px;
-  margin-bottom: 5px;
-
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    margin-top: ${(0, _4k_1.adaptiveValueCalc)(20)};
-    margin-bottom: ${(0, _4k_1.adaptiveValueCalc)(5)};
-  }
-`;
-const SFlex = (0, styled_components_1.default)(index_1.Flex) `
-  .text {
-    font-size: 14px;
-    color: ${colors_1.TextGrayColor};
-
-    ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-      font-size: ${(0, _4k_1.adaptiveValueCalc)(14)};
-    }
-  }
-`;
-const Description = ({ description }) => {
-    if (!description)
-        return null;
-    return ((0, jsx_runtime_1.jsxs)(SFlex, { className: "description", flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(SH3, { children: "Description" }), (0, jsx_runtime_1.jsx)(react_hyphen_1.default, { children: (0, jsx_runtime_1.jsx)("div", { 
-                    // style={{
-                    //   color: TextGrayColor,
-                    //   fontSize: '14px',
-                    // }}
-                    className: "text", dangerouslySetInnerHTML: { __html: description } }) })] }));
-};
-exports.Description = Description;

package/build/components/assetPage/participants/index.d.ts

@@ -1,9 +0,0 @@
-import { identitySchema as schema } from '@ludo.ninja/api';
-type ParticipantsProps = {
-    creatorsAddresses: string[] | null;
-    creatorsProfiles: schema.IProfile[];
-    ownersProfiles: schema.IProfile[];
-    ownersAddresses: string[] | null;
-};
-export declare const Participants: ({ creatorsProfiles, ownersProfiles, creatorsAddresses, ownersAddresses, }: ParticipantsProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/build/components/assetPage/participants/index.js

@@ -1,180 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Participants = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const link_1 = __importDefault(require("next/link"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-const utils_1 = require("@ludo.ninja/utils");
-const Urls_1 = require("../../../dto/common/Media/Urls");
-const env_1 = require("../../../store/env");
-const ScreenWidth_1 = require("../../../styles/ScreenWidth");
-const colors_1 = require("../../../styles/colors");
-const index_1 = require("../../../system/index");
-const scale_1 = require("../../../utils/adaptive/scale");
-const copyBtn_1 = require("../../../utils/copyBtn");
-const screen_1 = require("../../../utils/screen");
-const details_svg_1 = __importDefault(require("../../../public/assetPage/details"));
-const ludoDomains_1 = require("@ludo.ninja/core/build/ludoDomains");
-const MultiFlexRight = (0, styled_components_1.default)(index_1.Flex) `
-  margin-left: 100px;
-  align-items: center;
-
-  ${ScreenWidth_1.mediaQuery.desktop} {
-    margin: 20px 0 0 0;
-  }
-
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    margin-left: ${(0, _4k_1.adaptiveValueCalc)(100)};
-  }
-`;
-const MultiFlex = (0, styled_components_1.default)(index_1.Flex) `
-  margin: 20px 0 10px;
-
-  ${ScreenWidth_1.mediaQuery.desktop} {
-    flex-direction: column;
-  }
-
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    margin: ${(0, _4k_1.adaptiveValueCalc)(20)} 0 ${(0, _4k_1.adaptiveValueCalc)(10)};
-  }
-`;
-const SMultipleCreators = (0, styled_components_1.default)(index_1.Flex) `
-  margin-left: 20px;
-
-  img {
-    width: 40px;
-    height: 40px;
-  }
-
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    margin-left: ${(0, _4k_1.adaptiveValueCalc)(20)};
-
-    img {
-      width: ${(0, _4k_1.adaptiveValueCalc)(40)};
-      height: ${(0, _4k_1.adaptiveValueCalc)(40)};
-    }
-  }
-`;
-const SMultipleCreatorsH6 = (0, styled_components_1.default)(index_1.H6) `
-  margin-left: 15px;
-  color: ${colors_1.TextGrayColor};
-
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    margin-left: ${(0, _4k_1.adaptiveValueCalc)(15)};
-  }
-`;
-const MultipleCreators = ({ creatorsProfiles, creatorsAddresses, }) => {
-    const getMediaDomain = (0, env_1.useEnvStore)((state) => state.getMediaDomain);
-    if (!creatorsProfiles && !creatorsAddresses)
-        return null;
-    let accumulatedResult;
-    if (creatorsProfiles) {
-        accumulatedResult = [...creatorsProfiles];
-    }
-    if (creatorsAddresses) {
-        creatorsAddresses.map((item) => {
-            return { userId: item, userpic: '/defaultUserpics/defaultUserpic.svg' };
-        });
-        accumulatedResult = [
-            ...accumulatedResult,
-            creatorsAddresses,
-        ];
-    }
-    return ((0, jsx_runtime_1.jsx)(index_1.Flex, { alignItems: "center", children: (0, jsx_runtime_1.jsxs)(SMultipleCreators, { flexDirection: "row", alignItems: "center", children: [creatorsProfiles?.slice(0, 3).map((creator) => {
-                    return ((0, jsx_runtime_1.jsx)(index_1.ProfilePic, { size: 40, userPicSrc: (0, Urls_1.getUserPicImage)(getMediaDomain, creator?.userpic, '/defaultUserpics/defaultUserpic.svg') }, creator?.userId));
-                }), (0, jsx_runtime_1.jsxs)(SMultipleCreatorsH6, { children: [accumulatedResult && accumulatedResult?.length, " Creators"] })] }) }));
-};
-const SSingleUserLink = (0, styled_components_1.default)(link_1.default) `
-  font-size: 14px;
-
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    font-size: ${(0, _4k_1.adaptiveValueCalc)(14)};
-  }
-`;
-const SSingleUser = (0, styled_components_1.default)(index_1.Flex) `
-  margin-bottom: 10px;
-
-  img {
-    width: 40px;
-    height: 40px;
-  }
-
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    margin-bottom: ${(0, _4k_1.adaptiveValueCalc)(10)};
-
-    img {
-      width: ${(0, _4k_1.adaptiveValueCalc)(40)};
-      height: ${(0, _4k_1.adaptiveValueCalc)(40)};
-    }
-  }
-`;
-const SSingleUserFlex = (0, styled_components_1.default)(index_1.Flex) `
-  margin-left: 16px;
-
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    margin-left: ${(0, _4k_1.adaptiveValueCalc)(16)};
-  }
-`;
-const SingleUser = (props) => {
-    const NEXT_PUBLIC_ENV_VALUE = (0, env_1.useEnvStore)((state) => state.NEXT_PUBLIC_ENV_VALUE);
-    const getMediaDomain = (0, env_1.useEnvStore)((state) => state.getMediaDomain);
-    if (!props.profile && !props.address)
-        return null;
-    const isLudoWallet = (userName) => {
-        return userName ? ((0, jsx_runtime_1.jsx)(index_1.H5, { color: colors_1.BlackColor, children: userName })) : ((0, jsx_runtime_1.jsx)(copyBtn_1.CopyButton, { value: props.address, children: (0, jsx_runtime_1.jsx)(index_1.H5, { color: colors_1.BlackColor, children: (0, utils_1.shortenedText)(props.address) }) }));
-    };
-    const ludoUserMurkUp = (name) => {
-        return name ? ((0, jsx_runtime_1.jsx)(SSingleUserLink, { href: `${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["profile"]}/${props.profile?.userId}/nfts`, children: name })) : (isLudoWallet(props.profile?.username));
-    };
-    return ((0, jsx_runtime_1.jsxs)(SSingleUser, { width: '50%', alignItems: "center", children: [Boolean(props?.profile && props?.profile?.userpic) && ((0, jsx_runtime_1.jsx)(index_1.ProfilePic, { size: 40, userPicSrc: (0, Urls_1.getUserPicImage)(getMediaDomain, props?.profile?.userpic, '/defaultUserpics/defaultUserpic.svg') })), Boolean(props?.profile && props?.profile?.userpic) || ((0, jsx_runtime_1.jsx)(index_1.ProfilePic, { size: 40, userPicSrc: '/defaultUserpics/defaultUserpic.svg' })), (0, jsx_runtime_1.jsxs)(SSingleUserFlex, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(index_1.H6, { color: colors_1.TextGrayColor, children: props.title }), ludoUserMurkUp(props?.profile && props.profile.username)] })] }));
-};
-const SIconWrapper = styled_components_1.default.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 12px;
-  height: 12px;
-  margin-right: 10px;
-
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    width: ${(0, _4k_1.adaptiveValueCalc)(12)};
-    height: ${(0, _4k_1.adaptiveValueCalc)(12)};
-    margin-right: ${(0, _4k_1.adaptiveValueCalc)(10)};
-  }
-`;
-const DetailsIconResize = () => {
-    const { windowDimensions } = (0, screen_1.useWindowDimensionsWithServerInitial)();
-    return ((0, jsx_runtime_1.jsx)(SIconWrapper, { children: (0, jsx_runtime_1.jsx)(details_svg_1.default, { style: (0, scale_1.getAdaptiveScale)({ windowDimensions, currentSize: 1 }) }) }));
-};
-const SMultipleOwnersFlex = (0, styled_components_1.default)(index_1.Flex) `
-  margin-bottom: 7px;
-
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    margin-bottom: ${(0, _4k_1.adaptiveValueCalc)(7)};
-  }
-`;
-const MultipleOwners = ({ ownersProfiles, ownersAddresses, }) => {
-    if (!ownersAddresses && !ownersProfiles)
-        return null;
-    let accumulatedResult = [...ownersProfiles];
-    if (ownersAddresses) {
-        accumulatedResult = [
-            ...accumulatedResult,
-            ownersAddresses,
-        ];
-    }
-    return ((0, jsx_runtime_1.jsx)(MultiFlexRight, { alignItems: "center", children: (0, jsx_runtime_1.jsx)(index_1.Flex, { flexDirection: "column", children: (0, jsx_runtime_1.jsxs)(SMultipleOwnersFlex, { alignItems: "center", children: [(0, jsx_runtime_1.jsx)(DetailsIconResize, {}), ' ', (0, jsx_runtime_1.jsxs)(index_1.H6, { children: [accumulatedResult.length, ' ', accumulatedResult.length > 1 ? 'Owners' : 'Owner'] })] }) }) }));
-};
-const Participants = ({ creatorsProfiles, ownersProfiles, creatorsAddresses, ownersAddresses, }) => {
-    // console.clear();
-    // console.log(creatorsProfiles, 'creatorsProfiles');
-    // console.log(creatorsAddresses, 'creatorsAddresses');
-    // console.log(ownersProfiles, 'ownersProfiles');
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (creatorsProfiles?.length && creatorsProfiles?.length > 1) ||
-            (ownersProfiles?.length && ownersProfiles?.length > 1) ? ((0, jsx_runtime_1.jsxs)(MultiFlex, { children: [(0, jsx_runtime_1.jsx)(MultipleCreators, { creatorsAddresses: creatorsAddresses, creatorsProfiles: creatorsProfiles }), (0, jsx_runtime_1.jsx)(MultipleOwners, { ownersProfiles: ownersProfiles, ownersAddresses: ownersAddresses })] })) : ((0, jsx_runtime_1.jsxs)(MultiFlex, { children: [(0, jsx_runtime_1.jsx)(SingleUser, { title: "Creator", address: creatorsAddresses?.[0], profile: creatorsProfiles?.[0] }), (0, jsx_runtime_1.jsx)(SingleUser, { title: "Owner", address: ownersAddresses?.[0], profile: ownersProfiles?.[0] })] })) }));
-};
-exports.Participants = Participants;

package/build/components/assetPage/priceRank/index.d.ts

@@ -1,9 +0,0 @@
-import { BlockChainEntity } from '@ludo.ninja/core';
-type PriceRankProps = {
-    blockchain: BlockChainEntity;
-    rank: number;
-    latestPriceAmount: number | null;
-    latestPriceCurrency: string | null;
-};
-export declare const PriceRank: ({ rank, latestPriceAmount, latestPriceCurrency, }: PriceRankProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/build/components/assetPage/priceRank/index.js

@@ -1,112 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PriceRank = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_components_1 = __importDefault(require("styled-components"));
-const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-const utils_1 = require("@ludo.ninja/utils");
-const ScreenWidth_1 = require("../../../styles/ScreenWidth");
-const colors_1 = require("../../../styles/colors");
-const index_1 = require("../../../system/index");
-const RangeContainer = styled_components_1.default.div `
-  display: block;
-  width: 100px;
-  background: ${colors_1.InactiveButtonColor};
-  height: 9px;
-  border-radius: 2px;
-
-  ${ScreenWidth_1.mediaQuery.desktop} {
-    width: 40px;
-  }
-
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    width: ${(0, _4k_1.adaptiveValueCalc)(100)};
-    height: ${(0, _4k_1.adaptiveValueCalc)(9)};
-    border-radius: ${(0, _4k_1.adaptiveValueCalc)(2)};
-  }
-`;
-const RangeValue = styled_components_1.default.div `
-  display: block;
-  background: ${(props) => props.rankValue && (0, utils_1.getRankColor)(props.rankValue)};
-  height: 100%;
-  border-radius: 2px 0 0 2px;
-
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    border-radius: ${(0, _4k_1.adaptiveValueCalc)(2)} 0 0 ${(0, _4k_1.adaptiveValueCalc)(2)};
-  }
-`;
-const SPrice = (0, styled_components_1.default)(index_1.Box) `
-  width: 65%;
-  border-radius: 6px;
-  margin-right: 15px;
-  padding: 15px;
-  background-color: ${colors_1.WhiteColor};
-
-  .title-price {
-    margin-bottom: 6px;
-  }
-
-  .price-latest {
-    margin-left: 8px;
-    margin-right: 8px;
-  }
-
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
-    margin-right: ${(0, _4k_1.adaptiveValueCalc)(15)};
-    padding: ${(0, _4k_1.adaptiveValueCalc)(15)};
-
-    .title-price {
-      margin-bottom: ${(0, _4k_1.adaptiveValueCalc)(6)};
-    }
-
-    .price-latest {
-      margin-left: ${(0, _4k_1.adaptiveValueCalc)(8)};
-      margin-right: ${(0, _4k_1.adaptiveValueCalc)(8)};
-    }
-  }
-`;
-const SPriceFlex = (0, styled_components_1.default)(index_1.Flex) `
-  border-radius: 6px;
-
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
-  }
-`;
-const SRank = (0, styled_components_1.default)(index_1.Box) `
-  width: 35%;
-  border-radius: 6px;
-  padding: 15px;
-
-  .rank-title {
-    margin-bottom: 6px;
-  }
-
-  .rank-text {
-    margin-right: 8px;
-  }
-
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
-    padding: ${(0, _4k_1.adaptiveValueCalc)(15)};
-
-    .rank-title {
-      margin-bottom: ${(0, _4k_1.adaptiveValueCalc)(6)};
-    }
-
-    .rank-text {
-      margin-right: ${(0, _4k_1.adaptiveValueCalc)(8)};
-    }
-  }
-`;
-const PriceRank = ({ rank, latestPriceAmount, latestPriceCurrency, }) => {
-    // const { isLoading, converterAmount } = useConvertedValue({
-    //   latestPriceCurrency,
-    //   latestPriceAmount,
-    // });
-    return ((0, jsx_runtime_1.jsxs)(index_1.Flex, { children: [latestPriceAmount && latestPriceAmount !== 0 && latestPriceCurrency && ((0, jsx_runtime_1.jsxs)(SPrice, { children: [(0, jsx_runtime_1.jsx)(index_1.H6, { color: colors_1.TextGrayColor, className: "title-price", children: "Price" }), (0, jsx_runtime_1.jsx)(index_1.Flex, { children: (0, jsx_runtime_1.jsx)(SPriceFlex, { alignItems: "center", children: (0, jsx_runtime_1.jsx)(index_1.H2, { color: colors_1.BlackColor, className: "price-latest", children: latestPriceAmount }) }) })] })), (0, jsx_runtime_1.jsxs)(SRank, { backgroundColor: colors_1.WhiteColor, children: [(0, jsx_runtime_1.jsx)(index_1.H6, { color: colors_1.TextGrayColor, className: "rank-title", children: "Ludo Rank" }), (0, jsx_runtime_1.jsx)(index_1.Flex, { children: (0, jsx_runtime_1.jsx)(SPriceFlex, { alignItems: "center", children: Boolean(rank) ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.H2, { color: colors_1.BlackColor, className: "rank-text", children: rank }), (0, jsx_runtime_1.jsx)(RangeContainer, { children: (0, jsx_runtime_1.jsx)(RangeValue, { rankValue: rank, style: { width: `${rank}%` } }) })] })) : ((0, jsx_runtime_1.jsx)(index_1.H3, { color: colors_1.BlackColor, className: "rank-text", children: "unknown" })) }) })] })] }));
-};
-exports.PriceRank = PriceRank;

package/build/components/assetPage/tittle/index.d.ts

@@ -1,9 +0,0 @@
-import { assetSchema as schema } from '@ludo.ninja/api';
-type TitleProps = {
-    collectionId: string | null;
-    collectionTitle: string | null;
-    collectionMedias: schema.IMedia[];
-    name: null | string;
-};
-export declare const Title: ({ name, collectionTitle, collectionMedias, collectionId, }: TitleProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/build/components/assetPage/tittle/index.js

@@ -1,91 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Title = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const link_1 = __importDefault(require("next/link"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-const Urls_1 = require("../../../dto/common/Media/Urls");
-const env_1 = require("../../../store/env");
-const ScreenWidth_1 = require("../../../styles/ScreenWidth");
-const colors_1 = require("../../../styles/colors");
-const index_1 = require("../../../system/index");
-const ImageInterceptor_1 = require("../../../system/Img/ImageInterceptor");
-const ludoDomains_1 = require("@ludo.ninja/core/build/ludoDomains");
-const SCollection = (0, styled_components_1.default)(index_1.Flex) `
-  margin-bottom: 8px;
-
-  img {
-    margin-right: 8px;
-    width: 28px;
-    height: 28px;
-    border-radius: 2px;
-  }
-
-  a {
-    font-size: 18px;
-    font-weight: 600;
-    color: ${colors_1.AccentColor};
-  }
-
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    margin-bottom: ${(0, _4k_1.adaptiveValueCalc)(8)};
-
-    img {
-      margin-right: ${(0, _4k_1.adaptiveValueCalc)(8)};
-      width: ${(0, _4k_1.adaptiveValueCalc)(28)};
-      height: ${(0, _4k_1.adaptiveValueCalc)(28)};
-      border-radius: ${(0, _4k_1.adaptiveValueCalc)(2)};
-    }
-
-    a {
-      font-size: ${(0, _4k_1.adaptiveValueCalc)(18)};
-    }
-  }
-`;
-const SH1 = (0, styled_components_1.default)(index_1.H1) `
-  color: ${colors_1.BlackColor};
-  line-height: 42px;
-  word-break: break-word;
-
-  span {
-    padding-left: 5px;
-    color: blue;
-    cursor: pointer;
-  }
-
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    line-height: ${(0, _4k_1.adaptiveValueCalc)(42)};
-
-    span {
-      padding-left: ${(0, _4k_1.adaptiveValueCalc)(5)};
-    }
-  }
-`;
-const Collection = (props) => {
-    const NEXT_PUBLIC_STATIC_DOMAIN = (0, env_1.useEnvStore)((state) => state.NEXT_PUBLIC_STATIC_DOMAIN);
-    const NEXT_PUBLIC_ENV_VALUE = (0, env_1.useEnvStore)((state) => state.NEXT_PUBLIC_ENV_VALUE);
-    if (!props.collectionTitle || !props.collectionId)
-        return null;
-    return ((0, jsx_runtime_1.jsxs)(SCollection, { alignItems: "center", children: [!!props.collectionMedias && ((0, jsx_runtime_1.jsx)(ImageInterceptor_1.ImageInterceptor, { children: (0, jsx_runtime_1.jsx)(index_1.ExternalImage, { src: (0, Urls_1.getAssetImage)(props.collectionMedias[0]?.url, '/noContent/noContent.svg', Urls_1.mediaSizes.small, NEXT_PUBLIC_STATIC_DOMAIN), alt: "collection_img", width: 28, height: 28, borderRadius: 2 }) })), (0, jsx_runtime_1.jsx)(link_1.default, { href: `${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["collections"]}/${props?.collectionId}`, children: props.collectionTitle })] }));
-};
-const Title = ({ name, collectionTitle, collectionMedias, collectionId, }) => {
-    const [cuttedString, setCuttedString] = (0, react_1.useState)(name);
-    const [isNeedReadMore, setNeedReadMore] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
-        if (name && name.length > 35) {
-            setCuttedString(name.slice(0, 35));
-            setNeedReadMore(true);
-        }
-    }, []);
-    const handleReadMore = () => {
-        setCuttedString(name);
-        setNeedReadMore(false);
-    };
-    return ((0, jsx_runtime_1.jsxs)(index_1.Flex, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(Collection, { collectionId: collectionId, collectionTitle: collectionTitle, collectionMedias: collectionMedias }), (0, jsx_runtime_1.jsxs)(SH1, { children: [cuttedString, isNeedReadMore && (0, jsx_runtime_1.jsx)("span", { onClick: handleReadMore, children: "..." })] })] }));
-};
-exports.Title = Title;