/* * Copyright 2020 The Backstage Authors * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ import { makeStyles, Theme, 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: 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], }, }), ); interface Props { platformName: string; title: string; repository: string; description: string; index: number; onClick: (i: number, repo: string) => void; activeIndex: number; } const ClusterTemplateCard = (props: Props) => { const classes = useStyles(); const handleSelect = () => { props.onClick(props.index, props.repository); }; return ( {props.platformName} } action={} title={props.title} subheader={props.repository} /> {props.description} {props.activeIndex === props.index ? ( ) : ( )} ); }; export default ClusterTemplateCard;