@ludo.ninja/components 2.3.6 → 2.3.8

package/build/system/Cards/CardRank/index.js

@@ -0,0 +1,82 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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("../../index");
+// Styles
+const StyledCardRank = styled_components_1.default.div `
+  width: 64px;
+  height: 24px;
+  background-color: ${colors_1.WhiteColor};
+  border-radius: 4px;
+  padding: 5px;
+
+  .rankText {
+    color: ${colors_1.BlackColor};
+    margin-right: 4px;
+    font-size: 1.3em;
+    font-weight: 600;
+  }
+
+  .smallText {
+    font-size: 1.2em;
+    letter-spacing: -0.5px;
+  }
+
+  ${ScreenWidth_1.mediaQuery.phone} {
+    width: 43px;
+    height: 18px;
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    width: ${(0, _4k_1.adaptiveValueCalc)(64)};
+    height: ${(0, _4k_1.adaptiveValueCalc)(24)};
+    border-radius: ${(0, _4k_1.adaptiveValueCalc)(4)};
+    padding: ${(0, _4k_1.adaptiveValueCalc)(5)};
+
+    .rankText {
+      font-size: ${(0, _4k_1.adaptiveValueCalc)(13)};
+      margin-right: ${(0, _4k_1.adaptiveValueCalc)(4)};
+    }
+
+    .smallText {
+      font-size: ${(0, _4k_1.adaptiveValueCalc)(12)};
+      letter-spacing: ${(0, _4k_1.adaptiveValueCalc)(-0.5)};
+    }
+  }
+`;
+const SBox = (0, styled_components_1.default)(index_1.Box) `
+  height: 10px;
+  width: 32px;
+  background: ${colors_1.InactiveButtonColor};
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    height: ${(0, _4k_1.adaptiveValueCalc)(10)};
+    width: ${(0, _4k_1.adaptiveValueCalc)(32)};
+  }
+`;
+const RangeValue = styled_components_1.default.div `
+  display: block;
+  background: ${(props) => props.rankValue && (0, utils_1.getRankColor)(props.rankValue)};
+  height: 10px;
+  width: ${(props) => `${props.rankValue}%`};
+  border-radius: 2px 0 0 2px;
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    height: ${(0, _4k_1.adaptiveValueCalc)(10)};
+    border-radius: ${(0, _4k_1.adaptiveValueCalc)(2)} 0 0 ${(0, _4k_1.adaptiveValueCalc)(2)};
+  }
+`;
+// Component
+const CardRank = ({ rank }) => {
+    return ((0, jsx_runtime_1.jsx)(StyledCardRank, { children: (0, jsx_runtime_1.jsxs)(index_1.Flex, { alignItems: 'center', height: '100%', children: [(0, jsx_runtime_1.jsx)(index_1.Box, { children: (0, jsx_runtime_1.jsx)("p", { className: `rankText ${!Boolean(rank) && 'smallText'}`, children: rank ? rank : 'unknown' }) }), Boolean(rank) && ((0, jsx_runtime_1.jsx)(SBox, { children: (0, jsx_runtime_1.jsx)(RangeValue, { rankValue: rank }) }))] }) }));
+};
+// Export
+exports.default = CardRank;

package/build/system/Cards/CreationCard/CardHead.d.ts

@@ -0,0 +1,12 @@
+import { TCreation } from '../../../entities/creation/types';
+export declare const CardHead: ({ creation, isRegularCard, isIconLiked, addLikeToCard, deleteLikeFromCard, isUserProfile, isDisabled, isShowCheckbox, currentMyGalleryId, }: {
+    creation: TCreation;
+    isRegularCard: boolean;
+    isIconLiked: boolean;
+    addLikeToCard: (id: string) => void;
+    deleteLikeFromCard: (id: string) => void;
+    isUserProfile: boolean;
+    isDisabled?: boolean;
+    isShowCheckbox?: boolean | undefined;
+    currentMyGalleryId?: false | string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/build/system/Cards/CreationCard/CardHead.js

@@ -0,0 +1,62 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardHead = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const addCreationToFavoriteList_1 = __importDefault(require("../../../components/favoriteList/add/addCreationToFavoriteList"));
+const types_1 = require("../../../entities/labelCreationType/types");
+const store_1 = require("../../../modules/user/store");
+const addToFavListIcon_svg_1 = __importDefault(require("../../../public/cards/addToFavListIcon"));
+const addToGalleryIcon_svg_1 = __importDefault(require("../../../public/cards/addToGalleryIcon"));
+const heart_svg_1 = __importDefault(require("../../../public/cards/heart"));
+const env_1 = require("../../../store/env");
+const ui_1 = require("../../../store/ui");
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+const CardRank_1 = __importDefault(require("../CardRank"));
+const Headicons_1 = __importDefault(require("../Styles/Headicons"));
+const auth_1 = require("../../../utils/auth");
+const screen_1 = require("../../../utils/screen");
+const router_1 = require("next/router");
+// Component
+const CardHead = ({ creation, isRegularCard, isIconLiked, addLikeToCard, deleteLikeFromCard, isUserProfile, isDisabled, isShowCheckbox, currentMyGalleryId, }) => {
+    const redirectToLoginWindow = (0, auth_1.useRedirectToLoginWindow)();
+    const isProd = (0, env_1.useEnvStore)((state) => state.isProd);
+    const openModalSidebarPortal = (0, ui_1.useUiStore)((state) => state.openModalSidebarPortal);
+    const isSignedIn = (0, store_1.useUserStore)((state) => state.isSignedIn);
+    const isLicked = isIconLiked && isSignedIn;
+    const { windowDimensions } = (0, screen_1.useWindowDimensionsWithServerInitial)();
+    const isMobile = !!(windowDimensions?.windowWidth && windowDimensions.windowWidth <= ScreenWidth_1.ScreenWidth.DESKTOP);
+    const router = (0, router_1.useRouter)();
+    const isGallery = router.pathname.includes("gallery");
+    const handleClick = async (e, type) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!isSignedIn) {
+            redirectToLoginWindow();
+        }
+        else if (type === "fav-list") {
+            openModalSidebarPortal((0, jsx_runtime_1.jsx)(addCreationToFavoriteList_1.default, { ids: [creation.creationId], currentMyGalleryId: currentMyGalleryId }));
+        }
+        else if (type === "likes") {
+            if (!isLicked) {
+                await addLikeToCard(creation.itemId);
+            }
+            else {
+                await deleteLikeFromCard(creation.itemId);
+            }
+        }
+    };
+    const renderLikeButton = () => {
+        if ([types_1.LabelKeys.asset, types_1.LabelKeys.collection].includes(creation.itemType)) {
+            return ((0, jsx_runtime_1.jsx)("div", { className: `icon like ${isLicked ? "liked" : ""}`, onClick: (e) => handleClick(e, "likes"), children: (0, jsx_runtime_1.jsx)(heart_svg_1.default, {}) }));
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(Headicons_1.default, { isMobile: isMobile, style: isDisabled
+            ? {
+                pointerEvents: "none",
+            }
+            : {}, children: [(0, jsx_runtime_1.jsx)("div", { className: "rank", children: (0, jsx_runtime_1.jsx)(CardRank_1.default, { rank: creation.rank }) }), !isProd() && !isShowCheckbox && ((0, jsx_runtime_1.jsxs)("div", { className: "icons", children: [(0, jsx_runtime_1.jsx)("div", { className: "icon", onClick: (e) => handleClick(e, isRegularCard || !isUserProfile || isGallery ? "fav-list" : "gallery"), children: isRegularCard || !isUserProfile || isGallery ? (0, jsx_runtime_1.jsx)(addToFavListIcon_svg_1.default, {}) : (0, jsx_runtime_1.jsx)(addToGalleryIcon_svg_1.default, {}) }), renderLikeButton()] }))] }));
+};
+exports.CardHead = CardHead;

package/build/system/Cards/CreationCard/index.d.ts

@@ -0,0 +1,29 @@
+import { TCreation } from '../../../entities/creation/types';
+import { TGallery } from '../../../entities/gallery/types';
+import { searchSchema as schema } from "@ludo.ninja/api";
+import { ReactNode } from "react";
+export type RemoveToolsType = {
+    gallery?: TGallery;
+    removeFn: (itemType: "asset" | "collection") => void;
+};
+export interface ICheckboxState {
+    isShowCheckbox?: boolean;
+    checkboxSlot?: ReactNode;
+}
+export interface ICreationCard {
+    creationName?: string;
+    creation: TCreation;
+    isNeedHeight: boolean;
+    isNeedScaleTransform?: boolean;
+    likesDynamicInfo?: schema.IDynamicAssetData | schema.IDynamicCollectionData;
+    toolsForRemove?: RemoveToolsType | undefined;
+    isMobile: boolean;
+    isLoadingLikes?: boolean | undefined;
+    isNeedShowMoreButton?: boolean;
+    isUserProfile?: boolean;
+    isRegularCard?: boolean;
+    isNeedBounceTransform?: boolean;
+    currentMyGalleryId?: false | string;
+    playVideoOnHover?: boolean;
+}
+export declare const CreationCard: ({ creationName, creation, isNeedHeight, likesDynamicInfo, toolsForRemove, isMobile, isLoadingLikes, isNeedShowMoreButton, isUserProfile, isRegularCard, isShowCheckbox, checkboxSlot, currentMyGalleryId, isNeedScaleTransform, isNeedBounceTransform, playVideoOnHover }: ICreationCard & ICheckboxState) => import("react/jsx-runtime").JSX.Element;

package/build/system/Cards/CreationCard/index.js

@@ -0,0 +1,129 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CreationCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CreationMediaView_1 = require("../../../entities/creation/CreationMediaView");
+const types_1 = require("../../../entities/labelCreationType/types");
+const likes_1 = __importDefault(require("../../../hooks/likes"));
+const env_1 = require("../../../store/env");
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+const colors_1 = require("../../../styles/colors");
+const boxShadow_1 = __importDefault(require("../../../styles/mixins/boxShadow"));
+const boxTransform_1 = __importDefault(require("../../../styles/mixins/boxTransform"));
+const CardContent_1 = __importDefault(require("../CardContent"));
+const CardCategory_1 = __importDefault(require("../CardContent/CardCategory"));
+const CardLikes_1 = __importDefault(require("../CardContent/CardLikes"));
+const CardHead_1 = require("./CardHead");
+const Head_1 = __importDefault(require("../Styles/Head"));
+const Headicons_1 = __importDefault(require("../Styles/Headicons"));
+const index_1 = require("../../index");
+const ludoDomains_1 = require("@ludo.ninja/core/build/ludoDomains");
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const link_1 = __importDefault(require("next/link"));
+const react_1 = __importDefault(require("react"));
+const react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
+const styled_components_1 = __importStar(require("styled-components"));
+// Styles
+const StyledRegularCard = styled_components_1.default.div `
+  position: relative;
+  background-color: ${colors_1.WhiteColor};
+  border-radius: 6px;
+  ${boxShadow_1.default};
+  ${(props) => (props.isNeedBounceTransform ? boxTransform_1.default : null)}
+
+  min-height: ${(props) => (props.isNeedHeight ? "346px" : "")};
+
+  ${(props) => props.isShowCheckbox
+    ? (0, styled_components_1.css) `
+          ${Headicons_1.default} {
+            transition: 0.2s opacity ease-in;
+            opacity: 1 !important;
+          }
+        `
+    : (0, styled_components_1.css) `
+          &:hover ${Headicons_1.default} {
+            transition: 0.2s opacity ease-in;
+            opacity: 1 !important;
+          }
+        `}
+  .linkRegularCard {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+  }
+
+  ${ScreenWidth_1.mediaQuery.maxWidthTablet} {
+    width: 164px;
+    min-height: ${(props) => (props.isNeedHeight ? "258px" : "")};
+  }
+
+  ${ScreenWidth_1.mediaQuery.mobile} {
+    width: 154px;
+    min-height: ${(props) => (props.isNeedHeight ? "244px" : "")};
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
+
+    min-height: ${(props) => (props.isNeedHeight ? (0, _4k_1.adaptiveValueCalc)(346) : "")};
+  }
+`;
+// Component
+const CreationCard = ({ creationName, creation, isNeedHeight, likesDynamicInfo, toolsForRemove, isMobile, isLoadingLikes, isNeedShowMoreButton, isUserProfile, isRegularCard = true, isShowCheckbox, checkboxSlot, currentMyGalleryId, isNeedScaleTransform, isNeedBounceTransform = true, playVideoOnHover }) => {
+    const isProd = (0, env_1.useEnvStore)((state) => state.isProd);
+    const NEXT_PUBLIC_ENV_VALUE = (0, env_1.useEnvStore)((state) => state.NEXT_PUBLIC_ENV_VALUE);
+    const { likes, addLike, deleteLike } = (0, likes_1.default)({
+        defaultLikesCount: likesDynamicInfo?.likesNum || creation.likes,
+        defaultIsLiked: likesDynamicInfo?.isLikedByUser || creation.isLiked,
+        itemType: creation.itemType,
+        removeOnDislike: toolsForRemove,
+        isLoadingLikes,
+    });
+    // Todo cardLink
+    const isHideProd = isProd();
+    const HideLink = isHideProd ? react_1.default.Fragment : link_1.default;
+    const getLink = (href) => {
+        if (creation.itemType === types_1.LabelKeys.asset) {
+            return `${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["asset"]}/${href.replace(`/${types_1.LabelKeys.asset}/`, "")}`;
+        }
+        if (creation.itemType === types_1.LabelKeys.collection) {
+            return `${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["collections"]}/${href.replace(`/${types_1.LabelKeys.collection}/`, "")}`;
+        }
+        return href;
+    };
+    // const domain = ludoDomains[NEXT_PUBLIC_ENV_VALUE as TEnvValue]["app"];
+    //                 if (domain === window.origin) {
+    //                   router.push(`/rewards/${userId}`);
+    //                 } else {
+    //                   window.open(`${domain}/rewards/${userId}`,'_self');
+    //                 }
+    return ((0, jsx_runtime_1.jsxs)(StyledRegularCard, { isNeedHeight: isNeedHeight, isNeedTransform: isNeedShowMoreButton, isShowCheckbox: isShowCheckbox, isNeedBounceTransform: isNeedBounceTransform, children: [isShowCheckbox && checkboxSlot, (0, jsx_runtime_1.jsxs)(HideLink, { className: "linkRegularCard", href: getLink(creation.creationLink), children: [(0, jsx_runtime_1.jsxs)(Head_1.default, { children: [(0, jsx_runtime_1.jsx)(CreationMediaView_1.CreationMediaView, { media: creation.media, isNeedScaleTransform: isNeedScaleTransform, playVideoOnHover: playVideoOnHover }), (0, jsx_runtime_1.jsx)(CardHead_1.CardHead, { isRegularCard: !!isRegularCard, isIconLiked: likes.isLiked, creation: creation, addLikeToCard: addLike, deleteLikeFromCard: deleteLike, isUserProfile: isUserProfile || false, isDisabled: !!isLoadingLikes, isShowCheckbox: isShowCheckbox, currentMyGalleryId: currentMyGalleryId })] }), (0, jsx_runtime_1.jsx)(CardContent_1.default, { creationName: creationName, firstName: creation.creatorAddress, secondName: creation.name, cuttedSecondName: creation.getCuttedSecondName(!isMobile), itemId: creation.itemId, isNeedShowMoreButton: isHideProd ? false : !!isNeedShowMoreButton, href: getLink(creation.creationLink), children: (0, jsx_runtime_1.jsxs)(index_1.Flex, { alignItems: "end", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(CardCategory_1.default, { label: creation.label }), !isHideProd &&
+                                    (isLoadingLikes ? ((0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { style: { borderRadius: "3px" }, height: "100%", width: "30px" })) : ((0, jsx_runtime_1.jsx)(CardLikes_1.default, { isLiked: likes.isLiked, likes: likes.likesCount })))] }) })] })] }));
+};
+exports.CreationCard = CreationCard;

package/build/system/Cards/MultiMediaCard/index.d.ts

@@ -0,0 +1,8 @@
+import { TCreation } from '../../../entities/creation/types';
+import { TGallery } from '../../../entities/gallery/types';
+declare const MultiMediaCard: ({ gallery, assets, collections, }: {
+    gallery: TGallery;
+    assets: TCreation[] | null;
+    collections: TCreation[] | null;
+}) => import("react/jsx-runtime").JSX.Element;
+export default MultiMediaCard;

package/build/system/Cards/MultiMediaCard/index.js

@@ -0,0 +1,126 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CardCategory_1 = __importDefault(require("../CardContent/CardCategory"));
+const CardImage_1 = __importDefault(require("../CardMedia/CardImage"));
+const CreationMediaView_1 = require("../../../entities/creation/CreationMediaView");
+const env_1 = require("../../../store/env");
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+const colors_1 = require("../../../styles/colors");
+const boxShadow_1 = __importDefault(require("../../../styles/mixins/boxShadow"));
+const boxTransform_1 = __importDefault(require("../../../styles/mixins/boxTransform"));
+const CardContent_1 = __importDefault(require("../CardContent"));
+const CardLikes_1 = __importDefault(require("../CardContent/CardLikes"));
+const MultiHead_1 = __importDefault(require("../Styles/MultiHead"));
+const index_1 = require("../../index");
+const constants_1 = require("@ludo.ninja/core/build/constants");
+const ludoDomains_1 = require("@ludo.ninja/core/build/ludoDomains");
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const link_1 = __importDefault(require("next/link"));
+const styled_components_1 = __importDefault(require("styled-components"));
+// Styles
+const StyledMultiCard = styled_components_1.default.div `
+  position: relative;
+  background-color: ${colors_1.WhiteColor};
+  border-radius: 6px;
+  ${boxShadow_1.default};
+  ${boxTransform_1.default};
+  @media (max-width: 1199px) {
+    height: max-content;
+  }
+
+  .media {
+    width: 100%;
+    height: 100%;
+    aspect-ratio: 1 / 1;
+
+    & .svg {
+      width: 100%;
+      height: 100%;
+    }
+
+    & img {
+      border-radius: 3px;
+    }
+
+    & span {
+      display: none;
+    }
+
+    & video {
+      border-radius: 3px;
+    }
+  }
+
+  .media.digital {
+    position: relative;
+
+    & .svg {
+      position: absolute;
+      width: 20px;
+      height: 20px;
+      bottom: 0;
+      right: 0;
+    }
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
+    .media {
+      & img {
+        border-radius: ${(0, _4k_1.adaptiveValueCalc)(3)};
+      }
+      & video {
+        border-radius: ${(0, _4k_1.adaptiveValueCalc)(3)};
+      }
+    }
+
+    .media.digital {
+      & .svg {
+        width: ${(0, _4k_1.adaptiveValueCalc)(20)};
+        height: ${(0, _4k_1.adaptiveValueCalc)(20)};
+      }
+    }
+  }
+`;
+// Component
+const MultiMediaCard = ({ gallery, assets, collections, }) => {
+    const mediaTemplate = (mediaKey, media) => {
+        return ((0, jsx_runtime_1.jsx)("div", { className: media.type?.name === "CardVideo" || media.type?.name === "CardAudio" ? "media digital" : "media", children: media }, mediaKey));
+    };
+    const renderMedia = () => {
+        // if (
+        //   (!assets || assets.length === 0) &&
+        //   (!collections || collections.length === 0)
+        // )
+        //   return null;
+        const galleryCreationIds = gallery.creationIds;
+        const cardsMedia = [];
+        for (let i = 0; i < 4; i++) {
+            const creationId = galleryCreationIds[i];
+            const asset = assets?.find((asset) => {
+                return creationId === asset.creationId;
+            });
+            const collection = collections?.find((collection) => collection.creationId === creationId?.split(".").splice(1).join("."));
+            if (asset) {
+                cardsMedia.push(mediaTemplate(i, (0, jsx_runtime_1.jsx)(CreationMediaView_1.CreationMediaView, { media: asset.media })));
+            }
+            else if (collection) {
+                cardsMedia.push(mediaTemplate(i, (0, jsx_runtime_1.jsx)(CardImage_1.default, { alt: `${collection.name} ${collection.address || ""}`, imgSrc: collection.originalUrls?.[0] ?? "", errorImg: `${constants_1.staticLink}/public/noContent/noContent.svg` })));
+            }
+            else {
+                cardsMedia.push(mediaTemplate(i, (0, jsx_runtime_1.jsx)("img", { src: `${constants_1.staticLink}/public/gallery/defaultImage.svg`, alt: "gallery_default", className: "svg" })));
+            }
+        }
+        return cardsMedia;
+    };
+    const secondName = gallery.username !== "" ? gallery.username : "";
+    // const userCreationAddresses = gallery?.getGalleryCreations()[0]?.getOwnersAddresses();
+    const NEXT_PUBLIC_ENV_VALUE = (0, env_1.useEnvStore)((state) => state.NEXT_PUBLIC_ENV_VALUE);
+    return ((0, jsx_runtime_1.jsx)(StyledMultiCard, { children: (0, jsx_runtime_1.jsxs)(link_1.default, { href: `${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["app"]}${gallery.creationLink}`, children: [(0, jsx_runtime_1.jsx)(MultiHead_1.default, { children: renderMedia() }), (0, jsx_runtime_1.jsx)(CardContent_1.default, { firstName: gallery.name, secondName: secondName, wallets: gallery.userWallets, isNeedShowMoreButton: false, itemId: gallery.galleryId, children: (0, jsx_runtime_1.jsxs)(index_1.Flex, { alignItems: "flex-end", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(CardCategory_1.default, { label: gallery.label }), (0, jsx_runtime_1.jsx)(CardLikes_1.default, { isLiked: false, likes: 0 })] }) })] }) }));
+};
+// Export
+exports.default = MultiMediaCard;

package/build/system/Cards/Styles/Content.d.ts

@@ -0,0 +1,2 @@
+declare const StyledContentCard: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export default StyledContentCard;

package/build/system/Cards/Styles/Content.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// Styles
+const styled_components_1 = __importDefault(require("styled-components"));
+const colors_1 = require("../../../styles/colors");
+const typography_1 = require("../../../styles/typography");
+const StyledContentCard = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  padding: 12px 16px;
+  height: auto;
+
+  &Header {
+    display: flex;
+    justify-content: space-between;
+
+    &Artist {
+      .artist_name {
+        ${typography_1.TextSmall};
+        color: ${colors_1.TextGrayColor};
+        line-height: 1.39em;
+      }
+      .art_name {
+        ${typography_1.MainText};
+        color: ${colors_1.BlackColor};
+        line-height: 1.47em;
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  @media (max-width: 1040px) {
+    height: auto;
+    padding: 12px;
+  }
+`;
+exports.default = StyledContentCard;

package/build/system/Cards/Styles/Head.d.ts

@@ -0,0 +1,2 @@
+declare const StyledCardHead: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export default StyledCardHead;

package/build/system/Cards/Styles/Head.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_components_1 = __importDefault(require("styled-components"));
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+// Styles
+const StyledCardHead = styled_components_1.default.div `
+  position: relative;
+  height: 252px;
+  width: 252px;
+  margin: 0 auto;
+  overflow: hidden;
+
+  .playIcon,
+  .pauseIcon {
+    position: absolute;
+    right: 6%;
+    bottom: 6%;
+
+    :hover {
+      circle {
+        opacity: 0.6;
+        fill: #12183a;
+      }
+    }
+  }
+
+  @media (max-width: 1199px) {
+    height: 164px;
+    width: 164px;
+  }
+
+  @media (max-width: 767px) {
+    height: 154px;
+    width: 154px;
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    height: ${(0, _4k_1.adaptiveValueCalc)(252)};
+    width: ${(0, _4k_1.adaptiveValueCalc)(252)};
+  }
+`;
+exports.default = StyledCardHead;

package/build/system/Cards/Styles/Headicons.d.ts

@@ -0,0 +1,4 @@
+declare const StyledHeadIcons: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    isMobile: boolean;
+}, never>;
+export default StyledHeadIcons;