All files / src/components/views/Schemas SchemaCard.tsx

0% Statements 0/9
0% Branches 0/14
0% Functions 0/4
0% Lines 0/9

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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91                                                                                                                                                                                     
import * as React from "react";
import styled from "styled-components";
import Linkify from "linkify-react";
import { Flex, Box, Text } from "rimble-ui";
import { StarBorder, CallSplit, Send } from "@rimble/icons";
import { SchemaDataResponse, SchemaDataInput } from "./types";
import { fonts, colors } from "../../../themes";
import { SchemaHeader } from "./SchemaHeader";
 
const Wrapper = styled(Flex)`
  ${(props) =>
    props.onClick &&
    `
    cursor: pointer;
    &:hover {
      border-color: ${colors.primary.base};
    }
  `}
`;
const IconWrap = styled(Box)`
  svg {
    vertical-align: text-bottom;
  }
`;
const GitHubLink = styled.a`
  text-decoration: none;
  color: ${colors.silver};
  &:hover {
    color: ${colors.primary.base};
  }
`;
 
export interface SchemaCardProps {
  schema: SchemaDataResponse | SchemaDataInput;
  style?: any;
  className?: string;
  onClick?(): void;
}
 
export const SchemaCard: React.FunctionComponent<SchemaCardProps> = (props) => {
  const { schema, className, style, onClick } = props;
  return (
    <Wrapper
      className={className}
      pt={4}
      border={1}
      borderRadius={2}
      fontFamily={fonts.sansSerif}
      flexDirection="column"
      justifyContent="space-between"
      style={style}
      onClick={onClick}
    >
      <Box px={3}>
        <SchemaHeader schema={schema} />
        {"favoriteCount" in schema && (
          <IconWrap fontSize={1} mt={3} mb={4}>
            <StarBorder size="18px" /> {schema.favoriteCount}
            <CallSplit size="18px" ml={3} /> 0
            <Send size="18px" ml={3} /> 0
          </IconWrap>
        )}
        {schema.description && (
          <Text my={2} onClick={(event: any) => event.stopPropagation()}>
            <Linkify options={{ target: "_blank" }}>{schema.description}</Linkify>
          </Text>
        )}
      </Box>
      <Flex px={3} borderTop={2} height="48px" fontSize={1} justifyContent="space-between" alignItems="center">
        {"creator" in schema && schema.creator ? (
          <GitHubLink
            href={`https://github.com/${schema.creator.nickName}`}
            target="_blank"
            color={colors.silver}
            onClick={(event) => event.stopPropagation()}
          >
            {schema.creator.name || schema.creator.nickName}
          </GitHubLink>
        ) : (
          <span></span>
        )}
        {"updated" in schema && (
          <Box title="Last Updated" color={colors.silver}>
            {new Date(schema.updated).toLocaleDateString()}
          </Box>
        )}
      </Flex>
    </Wrapper>
  );
};