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

A Backstage plugin that helps you manage GitOps profiles

import { jsxs, jsx } from 'react/jsx-runtime';
import { useState } from 'react';
import Avatar from '@material-ui/core/Avatar';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardHeader from '@material-ui/core/CardHeader';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import { makeStyles, createStyles } from '@material-ui/core/styles';
import { green } 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: {
      backgroundColor: green[500]
    }
  })
);
const ProfileCard = (props) => {
  const [selection, setSelection] = useState(false);
  const handleSelect = () => {
    props.onClick(props.index, props.repository);
    setSelection(props.selections.has(props.index));
  };
  const classes = useStyles();
  return /* @__PURE__ */ jsxs(Card, { className: classes.root, children: [
    /* @__PURE__ */ jsx(
      CardHeader,
      {
        avatar: /* @__PURE__ */ jsx(Avatar, { "aria-label": "recipe", className: classes.avatar, children: props.shortName }),
        action: /* @__PURE__ */ jsx(IconButton, { "aria-label": "settings" }),
        title: props.title,
        subheader: props.repository.replace("https://github.com/", "")
      }
    ),
    /* @__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: selection ? /* @__PURE__ */ jsx(CheckBoxIcon, { color: "primary" }) : /* @__PURE__ */ jsx(CheckBoxOutlineBlankIcon, {}) }) })
  ] });
};

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