/* * 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 { 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 { createStyles, Theme } from '@material-ui/core/styles'; import { green } from '@material-ui/core/colors'; import { makeStyles } from '@material-ui/core/styles'; 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: { backgroundColor: green[500], }, }), ); interface Props { shortName: string; title: string; repository: string; description: string; index: number; onClick: (i: number, repository: string) => void; selections: Set; } const ProfileCard = (props: Props) => { const [selection, setSelection] = useState(false); const handleSelect = () => { props.onClick(props.index, props.repository); setSelection(props.selections.has(props.index)); }; const classes = useStyles(); return ( {props.shortName} } action={} title={props.title} subheader={props.repository.replace('https://github.com/', '')} /> {props.description} {selection ? ( ) : ( )} ); }; export default ProfileCard;