@ludo.ninja/components 1.4.3 → 1.4.5

package/src/components/assetPage/marketPlaces/index.tsx

@@ -1,86 +0,0 @@
-import React, { ReactNode } from 'react';
-
-import Image from 'next/image';
-import Link from 'next/link';
-
-import styled from 'styled-components';
-
-import { MarketPlaceEntity } from '@ludo.ninja/core';
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-
-import { mediaQuery } from '@/styles/ScreenWidth';
-import BoxShadow from '@/styles/mixins/boxShadow';
-import BoxTransform from '@/styles/mixins/boxTransform';
-
-import { getStaticENVDomain } from '@/utils/env';
-
-const Container = styled.div`
-  margin: 30px 0 0 0;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-
-  ${mediaQuery.tablet} {
-    margin: 20px 0 0;
-  }
-
-  ${mediaQuery.minWidthFourK} {
-    margin: ${adaptiveValueCalc(30)} 0 0 0;
-  }
-`;
-
-const StyledImage = styled(Image)`
-  ${BoxShadow};
-  ${BoxTransform};
-  border-radius: 6px;
-  margin: 0 7px 6px 0;
-  width: 40px;
-  height: 40px;
-
-  ${mediaQuery.minWidthFourK} {
-    border-radius: ${adaptiveValueCalc(6)};
-    margin: 0 ${adaptiveValueCalc(7)} ${adaptiveValueCalc(6)} 0;
-    width: ${adaptiveValueCalc(40)};
-    height: ${adaptiveValueCalc(40)};
-  }
-`;
-
-const MarketLinkWrapper = ({
-  market,
-  children,
-}: {
-  market: MarketPlaceEntity;
-  children: ReactNode;
-}) => {
-  if (market.getMarketPlaceUrl()) {
-    return (
-      <Link
-        target="_blank"
-        title={market.getMarketPlaceName()}
-        href={market.getMarketPlaceUrl() as string}
-      >
-        {children}
-      </Link>
-    );
-  }
-  return <>{children}</>;
-};
-
-export const MarketPlaces = ({ markets }: { markets: MarketPlaceEntity[] }) => (
-  <Container>
-    {markets?.map((market) => (
-      <MarketLinkWrapper key={market.getMarketPlaceId()} market={market}>
-        <StyledImage
-          width={40}
-          height={40}
-          src={
-            market.getMarketPlaceIconRegular({
-              domain: getStaticENVDomain(),
-            }) as string
-          }
-          alt={market.getMarketPlaceName()}
-        />
-      </MarketLinkWrapper>
-    ))}
-  </Container>
-);

package/src/components/assetPage/media/AssetImage/index.tsx

@@ -1,217 +0,0 @@
-import React, { useLayoutEffect, useRef, useState } from 'react';
-
-import Link from 'next/link';
-
-import Skeleton from 'react-loading-skeleton';
-import styled, { css } from 'styled-components';
-
-import {
-  AccentColor,
-  InactiveButtonColor,
-  WhiteColor,
-} from '@ludo.ninja/ui/build/styles/colors';
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-
-import { mediaQuery } from '@/styles/ScreenWidth';
-
-import { defineImgProportion } from '@/utils/imageProportionsSize';
-
-import { poppinsFontVarCss } from '@/fonts/vars';
-
-const SScreenshotContainer = styled.div`
-  border-radius: 16px;
-  overflow: hidden;
-  background-color: ${WhiteColor};
-  transition: background-color 150ms;
-
-  &:hover {
-    background-color: ${InactiveButtonColor};
-  }
-
-  .link {
-    display: flex;
-    align-items: center;
-    padding: 10px;
-    width: 100%;
-    height: 48px;
-
-    ${mediaQuery.desktop} {
-      height: 42px;
-    }
-
-    span {
-      text-align: center;
-      color: ${AccentColor};
-      font-family: ${poppinsFontVarCss.css};
-      font-size: 15px;
-      font-weight: 500;
-      line-height: 22px;
-      width: 100%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-
-  ${mediaQuery.minWidthFourK} {
-    border-radius: ${adaptiveValueCalc(16)};
-
-    .link {
-      padding: ${adaptiveValueCalc(10)};
-      height: ${adaptiveValueCalc(48)};
-
-      span {
-        font-size: ${adaptiveValueCalc(15)};
-        line-height: ${adaptiveValueCalc(22)};
-      }
-    }
-  }
-`;
-
-const ImageContainer = styled.div<{ isScreenshot: boolean | undefined }>`
-  display: flex;
-  position: relative;
-  align-self: center;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-
-  & img {
-    object-fit: contain;
-    aspect-ratio: auto;
-    width: 100%;
-    border-radius: 16px;
-    max-height: 510px;
-    max-width: 510px;
-  }
-
-  ${(props) =>
-    props.isScreenshot
-      ? css`
-          width: 508px;
-          height: 244px;
-
-          ${mediaQuery.desktop} {
-            width: 336px;
-            height: 164px;
-          }
-
-          ${mediaQuery.mobile} {
-            width: 320px;
-            height: 154px;
-          }
-        `
-      : css`
-          border-radius: 16px;
-          width: 510px;
-          height: 510px;
-
-          ${mediaQuery.desktop} {
-            width: 335px;
-            height: 335px;
-          }
-
-          ${mediaQuery.mobile} {
-            width: 320px;
-            height: 320px;
-          }
-        `}
-  ${mediaQuery.minWidthFourK} {
-    & img {
-      border-radius: ${adaptiveValueCalc(16)};
-      max-height: ${adaptiveValueCalc(510)};
-      max-width: ${adaptiveValueCalc(510)};
-    }
-
-    ${(props) =>
-      props.isScreenshot
-        ? css`
-            width: ${adaptiveValueCalc(508)};
-            height: ${adaptiveValueCalc(244)};
-          `
-        : css`
-            border-radius: ${adaptiveValueCalc(16)};
-            width: ${adaptiveValueCalc(510)};
-            height: ${adaptiveValueCalc(510)};
-          `}
-  }
-`;
-
-const AssetImage = ({
-  imageUrl,
-  errorImg,
-  originalUrl,
-  alt,
-  isScreenshot,
-}: {
-  imageUrl: string;
-  errorImg: string;
-  alt: string;
-  originalUrl?: string | null | undefined;
-  isScreenshot?: boolean;
-}) => {
-  const [size, setSize] = useState({});
-  const [loading, setLoading] = useState<boolean>(true);
-  const ref = useRef<HTMLImageElement | null>(null);
-
-  useLayoutEffect(() => {
-    const { width, height } = defineImgProportion(ref, 80);
-    if (imageUrl && parseFloat(height) && parseFloat(width)) {
-      defineImgProportion(ref, 80);
-      setSize({ width, height });
-    }
-  }, [imageUrl]);
-
-  const LinkComponent = originalUrl ? Link : React.Fragment;
-
-  const ScreenShotContainer = isScreenshot
-    ? SScreenshotContainer
-    : React.Fragment;
-
-  return (
-    <LinkComponent href={`${originalUrl}`} target="_blank">
-      <ScreenShotContainer>
-        <ImageContainer isScreenshot={isScreenshot}>
-          {loading && (
-            <Skeleton
-              height={'100%'}
-              width={'100%'}
-              style={{
-                lineHeight: 'normal',
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                visibility: `${loading ? 'hidden' : 'visible'}`,
-              }}
-            />
-          )}
-          <img
-            alt={alt}
-            ref={ref}
-            src={imageUrl}
-            onError={(e) => {
-              (e.target as HTMLImageElement).src = errorImg;
-              setSize({ width: '100%', height: '100%' });
-            }}
-            onLoad={() => setLoading(false)}
-            style={{
-              opacity: loading ? '0' : '1',
-              ...(isScreenshot
-                ? {
-                    maxHeight: '100%',
-                    maxWidth: '100%',
-                  }
-                : size),
-            }}
-          />
-        </ImageContainer>
-        {isScreenshot && originalUrl && (
-          <div className="link" title={originalUrl}>
-            <span>{originalUrl}</span>
-          </div>
-        )}
-      </ScreenShotContainer>
-    </LinkComponent>
-  );
-};
-
-export default AssetImage;

package/src/components/assetPage/moreDropDown/index.tsx

@@ -1,176 +0,0 @@
-import React, { useState } from 'react';
-
-import styled, { css } from 'styled-components';
-
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-import { ClickAwayListener } from '@ludo.ninja/utils';
-
-import { mediaQuery } from '@/styles/ScreenWidth';
-import {
-  BackgroundColorLight,
-  BlackColor,
-  TextGrayColor,
-  WhiteColor,
-} from '@/styles/colors';
-
-import IconWithButton from '@/system/Buttons/IconWithButton';
-
-import { getAdaptiveScale } from '@/utils/adaptive/scale';
-import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
-
-import { dmsansFontVarCss } from '@/fonts/vars';
-
-import MoreIcon from '@/public/creation/card/moreBtn.svg';
-
-const SContainer = styled.div`
-  position: relative;
-
-  & > *:first-child {
-    width: 24px;
-    height: 24px;
-
-    ${mediaQuery.minWidthFourK} {
-      width: ${adaptiveValueCalc(24)};
-      height: ${adaptiveValueCalc(24)};
-    }
-  }
-`;
-const SContent = styled.div<{ isOpen: boolean }>`
-  position: absolute;
-  padding: 8px;
-  top: calc(100% + 8px);
-  right: 0;
-  display: flex;
-  flex-direction: column;
-
-  transition: opacity 200ms;
-
-  pointer-events: ${(props) => (props.isOpen ? 'unset' : 'none')};
-  opacity: ${(props) => (props.isOpen ? '1' : '0')};
-
-  border-radius: 6px;
-  background: ${WhiteColor};
-  box-shadow: 0px 8px 16px -16px rgba(33, 21, 95, 0.1);
-  width: 184px;
-
-  ${mediaQuery.minWidthFourK} {
-    padding: ${adaptiveValueCalc(8)};
-    top: calc(100% + ${adaptiveValueCalc(8)});
-    border-radius: ${adaptiveValueCalc(6)};
-    box-shadow: 0 ${adaptiveValueCalc(8)} ${adaptiveValueCalc(16)}
-      ${adaptiveValueCalc(-16)} rgba(33, 21, 95, 0.1);
-    width: ${adaptiveValueCalc(184)};
-  }
-`;
-
-const hover = css`
-  color: ${BlackColor};
-  border-radius: 4px;
-  background: ${BackgroundColorLight};
-
-  ${mediaQuery.minWidthFourK} {
-    border-radius: ${adaptiveValueCalc(4)};
-  }
-`;
-
-const SButton = styled.button`
-  font-family: ${dmsansFontVarCss.css};
-  padding: 6px 8px;
-  color: ${TextGrayColor};
-  font-size: 13px;
-  font-weight: 400;
-  line-height: 18px;
-  outline: none;
-  border: none;
-  background: inherit;
-  transition: background-color 200ms;
-  text-align: left;
-
-  &:active {
-    ${hover}
-  }
-
-  @media (hover: hover) {
-    &:hover {
-      ${hover}
-    }
-  }
-
-  ${mediaQuery.minWidthFourK} {
-    padding: ${adaptiveValueCalc(6)} ${adaptiveValueCalc(8)};
-    font-size: ${adaptiveValueCalc(13)};
-    line-height: ${adaptiveValueCalc(18)};
-  }
-`;
-
-type TItem = {
-  id: number | string;
-  title: string;
-  onClick?: () => void;
-};
-
-interface IDropDown {
-  items: TItem[];
-}
-
-const SIcon = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  ${mediaQuery.minWidthFourK} {
-    width: ${adaptiveValueCalc(17)};
-    height: ${adaptiveValueCalc(4)};
-  }
-`;
-
-const IconResize = () => {
-  const { windowDimensions } = useWindowDimensionsWithServerInitial();
-
-  return (
-    <SIcon>
-      <MoreIcon
-        style={getAdaptiveScale({
-          windowDimensions,
-          currentSize: 1,
-        })}
-      />
-    </SIcon>
-  );
-};
-
-export const MoreDropDown = ({ items }: IDropDown) => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const handle = {
-    close() {
-      setIsOpen(false);
-    },
-    toggle() {
-      setIsOpen((prev) => !prev);
-    },
-  };
-
-  return (
-    <ClickAwayListener onClickAway={handle.close}>
-      <SContainer>
-        <IconWithButton variant={'dots'} onClick={handle.toggle}>
-          <IconResize />
-        </IconWithButton>
-        <SContent isOpen={isOpen}>
-          {items.map(({ title, onClick, id }) => (
-            <SButton
-              key={id}
-              onClick={() => {
-                onClick?.();
-                handle.close();
-              }}
-            >
-              <span>{title}</span>
-            </SButton>
-          ))}
-        </SContent>
-      </SContainer>
-    </ClickAwayListener>
-  );
-};