All files / src/components/views/Nfts NftDetails.tsx

0% Statements 0/4
0% Branches 0/4
0% Functions 0/2
0% Lines 0/4

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54                                                                                                           
import * as React from "react";
import { H5, H6 } from "../../layouts/LayoutComponents";
import { NftBorder } from "./NftComponents";
import { Box, Flex, Text } from "rimble-ui";
import { LinkedDomainsBorder } from "./NftComponents";
import { baseColors, fonts } from "../../../themes";
import { DomainImage } from "../../elements/DomainImage";
import { DomainLink } from "../../elements/DomainLink";
 
export interface NftDetailsProps {
  name: string;
  imgUrl: string;
  details: string;
  domains: string[];
}
 
export const NftDetails: React.FunctionComponent<NftDetailsProps> = (props) => {
  const { imgUrl, name, details, domains } = props;
  return (
    <NftBorder>
      <Flex flexDirection="row" alignItems="flex-start" mx={2} my={2}>
        <Box mr={3} borderRadius={1}>
          <img height={"144px"} src={imgUrl} />
        </Box>
        <Flex flexDirection="column" alignItems="start" justifyContent="start">
          <H5 mt={0}>{name}</H5>
          <Text>{details}</Text>
          {domains && domains.length > 0 ? (
            <>
              <H6 mb={1}>Domains linked to this creator</H6>
              <LinkedDomainsBorder>
                {domains?.map((d) => {
                  return (
                    <DomainLink to={`search?filter=${d}`} key={`domain-${d}`}>
                      <Flex flexDirection="row" flexGrow={1}>
                        <DomainImage domain={d} />
                        <Text color={baseColors.blurple} fontFamily={fonts.sansSerif} fontWeight={2}>
                          {d}
                        </Text>
                      </Flex>
                    </DomainLink>
                  );
                })}
              </LinkedDomainsBorder>
            </>
          ) : (
            <></>
          )}
        </Flex>
      </Flex>
    </NftBorder>
  );
};