@backstage-community/plugin-gitops-profiles/dist/components/ClusterTemplateCard/ClusterTemplateCard.esm.js

A Backstage plugin that helps you manage GitOps profiles

import { jsxs, jsx } from 'react/jsx-runtime';
import { makeStyles, createStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardHeader from '@material-ui/core/CardHeader';
import CardContent from '@material-ui/core/CardContent';
import CardActions from '@material-ui/core/CardActions';
import Avatar from '@material-ui/core/Avatar';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import { red } from '@material-ui/core/colors';
import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
import CheckBoxIcon from '@material-ui/icons/CheckBox';

const useStyles = makeStyles(
  (theme) => createStyles({
    root: {
      maxWidth: 345
    },
    media: {
      height: 0,
      paddingTop: "56.25%"
      // 16:9
    },
    expand: {
      transform: "rotate(0deg)",
      marginLeft: "auto",
      transition: theme.transitions.create("transform", {
        duration: theme.transitions.duration.shortest
      })
    },
    expandOpen: {
      transform: "rotate(180deg)"
    },
    avatar: {
      fontSize: "1.0rem",
      backgroundColor: red[500]
    }
  })
);
const ClusterTemplateCard = (props) => {
  const classes = useStyles();
  const handleSelect = () => {
    props.onClick(props.index, props.repository);
  };
  return /* @__PURE__ */ jsxs(Card, { className: classes.root, children: [
    /* @__PURE__ */ jsx(
      CardHeader,
      {
        avatar: /* @__PURE__ */ jsx(Avatar, { "aria-label": "recipe", className: classes.avatar, children: props.platformName }),
        action: /* @__PURE__ */ jsx(IconButton, { "aria-label": "settings" }),
        title: props.title,
        subheader: props.repository
      }
    ),
    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", component: "p", children: props.description }) }),
    /* @__PURE__ */ jsx(CardActions, { disableSpacing: true, children: /* @__PURE__ */ jsx(IconButton, { "aria-label": "select", onClick: handleSelect, children: props.activeIndex === props.index ? /* @__PURE__ */ jsx(CheckBoxIcon, { color: "primary" }) : /* @__PURE__ */ jsx(CheckBoxOutlineBlankIcon, {}) }) })
  ] });
};

export { ClusterTemplateCard as default };
//# sourceMappingURL=ClusterTemplateCard.esm.js.map