@ludo.ninja/components 0.5.0 → 1.0.0

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

@@ -0,0 +1,86 @@
+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

@@ -0,0 +1,217 @@
+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

@@ -0,0 +1,176 @@
+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>
+  );
+};