src/components/code-snippet/code-snippet.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from 'react';
   6 import { StyleRulesCallback, WithStyles, Typography, withStyles, Theme } from '@material-ui/core';
   7 import { ArvadosTheme } from '~/common/custom-theme';
   8 import * as classNames from 'classnames';
   9
  10 type CssRules = 'root';
  11
  12 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  13     root: {
  14         boxSizing: 'border-box',
  15         overflow: 'auto',
  16         padding: theme.spacing.unit
  17     }
  18 });
  19
  20 export interface CodeSnippetDataProps {
  21     lines: string[];
  22     className?: string;
  23 }
  24
  25 type CodeSnippetProps = CodeSnippetDataProps & WithStyles<CssRules>;
  26
  27 export const CodeSnippet = withStyles(styles)(
  28     ({ classes, lines, className }: CodeSnippetProps) =>
  29         <Typography
  30         component="div"
  31         className={classNames(classes.root, className)}>
  32             {
  33                 lines.map((line: string, index: number) => {
  34                     return <Typography key={index} component="pre">{line}</Typography>;
  35                 })
  36             }
  37         </Typography>
  38     );