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

0% Statements 0/3
100% Branches 0/0
0% Functions 0/1
0% Lines 0/3

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                                                                                   
import * as React from "react";
import { Flex, Box, Text } from "rimble-ui";
import { SchemaDataResponse, SchemaDataInput } from "./types";
import { H4 } from "../../layouts/LayoutComponents";
import { fonts } from "../../../themes";
 
export interface SchemaHeaderProps {
  schema: SchemaDataResponse | SchemaDataInput;
  style?: any;
  className?: string;
  rimbleProps?: { [prop: string]: any };
}
 
export const SchemaHeader: React.FunctionComponent<SchemaHeaderProps> = (props) => {
  const { schema, style, className, rimbleProps } = props;
  return (
    <Flex style={style} className={className} {...rimbleProps}>
      <Flex
        alignItems="center"
        justifyContent="center"
        border={1}
        borderRadius="50%"
        minWidth="50px"
        width="50px"
        height="50px"
        textAlign="center"
        fontSize={4}
      >
        {schema.icon}
      </Flex>
      <Box ml={2}>
        <H4 mt={1} mb={1}>
          {schema.name}
        </H4>
        <Text fontFamily={fonts.monospace} fontSize={1}>
          {schema.slug}
        </Text>
      </Box>
    </Flex>
  );
};