@material-ui/core#CardMedia TypeScript Examples
The following examples show how to use
@material-ui/core#CardMedia.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: ProductItem.tsx From frontend-clean-architecture with MIT License | 6 votes |
|
ProductItem: React.FC<ProductListProps> = ({ product }) => {
const classes = useStyles();
const bloc = useCartPloc();
return (
<Grid item xs={6} sm={4} md={3} lg={2}>
<Card className={classes.card}>
<CardMedia
className={classes.cardMedia}
image={product.image}
title="Image title"
/>
<CardContent className={classes.cardContent}>
<Typography className={classes.productTitle} gutterBottom variant="subtitle1">
{product.title}
</Typography>
<Typography variant="h6" className={classes.productPrice}>
{product.price.toLocaleString("es-ES", {
style: "currency",
currency: "EUR",
})}
</Typography>
</CardContent>
<CardActions className={classes.cardActions}>
<Button
size="small"
color="primary"
onClick={() => bloc.addProductToCart(product)}>
Add to Cart
</Button>
</CardActions>
</Card>
</Grid>
);
}
Example #2
| Source File: index.tsx From react-app-architecture with Apache License 2.0 | 6 votes |
|
ReasourceCard = ({
href,
imgUrl,
title,
description,
action,
}: {
href: string;
imgUrl: string;
title: string;
description: string;
action: string;
}) => {
const classes = useStyles();
return (
<Card className={classes.card} raised={true} elevation={4}>
<CardActionArea href={href} target="_blank">
<CardMedia component="img" alt={title} src={imgUrl} title={title} />
<CardContent>
<Typography variant="h6" component="h2">
{title}
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
{description}
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button component="a" size="small" color="primary" href={href} target="_blank">
{action}
</Button>
</CardActions>
</Card>
);
}
Example #3
| Source File: DocsCardGrid.tsx From backstage with Apache License 2.0 | 6 votes |
|
DocsCardGrid = (props: DocsCardGridProps) => {
const { entities } = props;
const getRouteToReaderPageFor = useRouteRef(rootDocsRouteRef);
const config = useApi(configApiRef);
if (!entities) return null;
return (
<ItemCardGrid data-testid="docs-explore">
{!entities?.length
? null
: entities.map((entity, index: number) => (
<Card key={index}>
<CardMedia>
<ItemCardHeader
title={entity.metadata.title ?? entity.metadata.name}
/>
</CardMedia>
<CardContent>{entity.metadata.description}</CardContent>
<CardActions>
<Button
to={getRouteToReaderPageFor({
namespace: toLowerMaybe(
entity.metadata.namespace ?? 'default',
config,
),
kind: toLowerMaybe(entity.kind, config),
name: toLowerMaybe(entity.metadata.name, config),
})}
color="primary"
data-testid="read_docs"
>
Read Docs
</Button>
</CardActions>
</Card>
))}
</ItemCardGrid>
);
}
Example #4
| Source File: DomainCard.tsx From backstage with Apache License 2.0 | 6 votes |
|
DomainCard = ({ entity }: DomainCardProps) => {
const catalogEntityRoute = useRouteRef(entityRouteRef);
const ownedByRelations = getEntityRelations(entity, RELATION_OWNED_BY);
const url = catalogEntityRoute(entityRouteParams(entity));
const owner = (
<EntityRefLinks
entityRefs={ownedByRelations}
defaultKind="group"
color="inherit"
/>
);
return (
<Card>
<CardMedia>
<ItemCardHeader title={entity.metadata.name} subtitle={owner} />
</CardMedia>
<CardContent>
{entity.metadata.tags?.length ? (
<Box>
{entity.metadata.tags.map(tag => (
<Chip size="small" label={tag} key={tag} />
))}
</Box>
) : null}
{entity.metadata.description}
</CardContent>
<CardActions>
<Button to={url} color="primary">
Explore
</Button>
</CardActions>
</Card>
);
}
Example #5
| Source File: TestVariationList.tsx From frontend with Apache License 2.0 | 5 votes |
|
TestVariationList: React.FunctionComponent<IProps> = ({
items,
onDeleteClick,
}) => {
const classes = useStyles();
const [selectedItem, setSelectedItem] = React.useState<TestVariation | null>(
null
);
const handleClose = () => {
setSelectedItem(null);
};
return (
<React.Fragment>
<Grid container>
{items.length === 0 && (
<Typography variant="h5">No variations</Typography>
)}
{items.map((t) => (
<Grid item key={t.id} xs={4}>
<Card className={classes.card}>
<CardMedia
component="img"
className={classes.media}
image={staticService.getImage(t.baselineName)}
title={t.name}
/>
<CardContent>
<TestVariationDetails testVariation={t} />
</CardContent>
<CardActions>
<Button
color="primary"
component={Link}
to={`${routes.VARIATION_DETAILS_PAGE}/${t.id}`}
>
History
</Button>
<IconButton
onClick={(event: React.MouseEvent<HTMLElement>) =>
setSelectedItem(t)
}
>
<Delete />
</IconButton>
</CardActions>
</Card>
</Grid>
))}
</Grid>
{selectedItem && (
<BaseModal
open={!!selectedItem}
title={"Delete TestVariation"}
submitButtonText={"Delete"}
onCancel={handleClose}
content={
<Typography>{`Are you sure you want to delete: ${selectedItem.name}?`}</Typography>
}
onSubmit={() => {
onDeleteClick(selectedItem.id);
handleClose();
}}
/>
)}
</React.Fragment>
);
}
Example #6
| Source File: DemoContent.tsx From mo360-ftk with MIT License | 5 votes |
|
public render(): JSX.Element {
const { classes } = this.props;
return (
<Container>
<Typography variant={'h5'} gutterBottom={true} align="center">
{this.i18n.translateToString('HeadlineDemoContent')}
</Typography>
<Grid container spacing={3}>
<Grid item xs={12} md={6}>
<Card className={classes.card}>
<CardActionArea
href="https://github.com/Daimler/mo360-ftk/tree/master/docs"
target="_blank"
className={classes.cardAction}
>
<CardMedia className={classes.media} component="img" image={Logo} />
<CardContent className={classes.cardContent}>
<Typography variant="h6">Documentation</Typography>
</CardContent>
</CardActionArea>
</Card>
</Grid>
<Grid item xs={12} md={6}>
<Card className={classes.card}>
<CardActionArea
href="https://github.com/Daimler/mo360-ftk"
target="_blank"
className={classes.cardAction}
>
<CardMedia className={classes.media} component="img" image={LogoGithub} />
<CardContent className={classes.cardContent}>
<Typography variant="h6">Sources @ GitHub</Typography>
</CardContent>
</CardActionArea>
</Card>
</Grid>
</Grid>
<Box m={3} className={classes.centered}>
<Button variant="contained" color="secondary" onClick={() => this.router.navigateToHome()}>
{this.i18n.translateToString('BackToHome')}
</Button>
</Box>
</Container>
);
}
Example #7
| Source File: index.tsx From react-app-architecture with Apache License 2.0 | 5 votes |
|
BlogCard = ({
blog,
selection,
}: {
blog: Blog;
selection?: (blog: Blog) => void;
}): ReactElement => {
const classes = useStyles();
const { title, description, author, imgUrl, blogUrl, publishedAt } = blog;
return (
<Card
className={classes.card}
raised={true}
onClick={() => {
selection && selection(blog);
}}
>
<CardActionArea className={classes.cardContent} component={Link} to={'/blog/' + blogUrl}>
<CardMedia
className={classes.cardMedia}
component="img"
alt={title}
src={imgUrl}
title={title}
/>
<CardContent>
<Typography variant="h6" component="h2" className={classes.cardTitle}>
{title}
</Typography>
<Typography
variant="body2"
color="textSecondary"
component="p"
className={classes.cardDescription}
>
{description}
</Typography>
</CardContent>
<CardHeader
className={classes.cardAuthor}
avatar={
author.profilePicUrl ? (
<Avatar aria-label={author.name} src={author.profilePicUrl} />
) : (
<FirstLetter text={author.name} />
)
}
title={author.name}
subheader={convertToReadableDate(publishedAt)}
/>
</CardActionArea>
</Card>
);
}
Example #8
| Source File: index.tsx From aqualink-app with MIT License | 5 votes |
|
FeaturedMedia = ({
siteId,
url,
featuredImage,
surveyId,
classes,
}: FeaturedMediaProps) => {
const user = useSelector(userInfoSelector);
const isSiteAdmin = isAdmin(user, siteId);
if (url) {
return (
<Card className={classes.card}>
<CardContent className={classes.content}>
<iframe
className={classes.fullHeightAndWidth}
title="live-video-stream"
src={`${url}${convertOptionsToQueryParams(playerOptions)}`}
allowFullScreen
/>
</CardContent>
</Card>
);
}
if (featuredImage && surveyId) {
return (
<Link to={`/sites/${siteId}/survey_details/${surveyId}`}>
<CardMedia
className={classes.card}
style={{ height: "100%" }}
image={featuredImage}
/>
</Link>
);
}
return (
<Card className={classes.card}>
<div className={classes.noVideoCardHeader}>
<Grid container direction="column" alignItems="center" spacing={2}>
<Grid item>
<Typography className={classes.noVideoCardHeaderText} variant="h5">
{isSiteAdmin ? "ADD YOUR FIRST SURVEY" : "SURVEY TO BE UPLOADED"}
</Typography>
</Grid>
{isSiteAdmin && (
<Grid item>
<IconButton component={Link} to={`/sites/${siteId}/new_survey`}>
<img src={uploadIcon} alt="upload" />
</IconButton>
</Grid>
)}
</Grid>
</div>
<div className={classes.noVideoCardContent} />
</Card>
);
}
Example #9
| Source File: TemplateCard.tsx From backstage with Apache License 2.0 | 5 votes |
|
TemplateCard = ({ template, deprecated }: TemplateCardProps) => {
const backstageTheme = useTheme<BackstageTheme>();
const templateRoute = useRouteRef(selectedTemplateRouteRef);
const templateProps = getTemplateCardProps(template);
const ownedByRelations = getEntityRelations(
template as Entity,
RELATION_OWNED_BY,
);
const themeId = backstageTheme.getPageTheme({ themeId: templateProps.type })
? templateProps.type
: 'other';
const theme = backstageTheme.getPageTheme({ themeId });
const classes = useStyles({ backgroundImage: theme.backgroundImage });
const href = templateRoute({ templateName: templateProps.name });
const scmIntegrationsApi = useApi(scmIntegrationsApiRef);
const sourceLocation = getEntitySourceLocation(template, scmIntegrationsApi);
return (
<Card>
<CardMedia className={classes.cardHeader}>
<FavoriteEntity className={classes.starButton} entity={template} />
{deprecated && <DeprecationWarning />}
<ItemCardHeader
title={templateProps.title}
subtitle={templateProps.type}
classes={{ root: classes.title }}
/>
</CardMedia>
<CardContent style={{ display: 'grid' }}>
<Box className={classes.box}>
<Typography variant="body2" className={classes.label}>
Description
</Typography>
<MarkdownContent content={templateProps.description} />
</Box>
<Box className={classes.box}>
<Typography variant="body2" className={classes.label}>
Owner
</Typography>
<EntityRefLinks entityRefs={ownedByRelations} defaultKind="Group" />
</Box>
<Box>
<Typography variant="body2" className={classes.label}>
Tags
</Typography>
{templateProps.tags?.map(tag => (
<Chip size="small" label={tag} key={tag} />
))}
</Box>
</CardContent>
<CardActions>
{sourceLocation && (
<IconButton
className={classes.leftButton}
href={sourceLocation.locationTargetUrl}
>
<ScmIntegrationIcon type={sourceLocation.integrationType} />
</IconButton>
)}
<Button
color="primary"
to={href}
aria-label={`Choose ${templateProps.title}`}
>
Choose
</Button>
</CardActions>
</Card>
);
}
Example #10
| Source File: ToolCard.tsx From backstage with Apache License 2.0 | 5 votes |
|
ToolCard = ({ card, objectFit }: Props) => {
const classes = useStyles();
const { title, description, url, image, lifecycle, tags } = card;
return (
<Card key={title}>
<CardMedia
image={image}
title={title}
className={classNames(classes.media, {
[classes.mediaContain]: objectFit === 'contain',
})}
/>
<CardContent>
<Typography paragraph variant="h5">
{title}{' '}
{lifecycle && lifecycle.toLocaleLowerCase('en-US') !== 'ga' && (
<Chip
size="small"
label={lifecycle}
className={classNames(
classes.lifecycle,
classes[lifecycle.toLocaleLowerCase('en-US')],
)}
/>
)}
</Typography>
<Typography>{description || 'Description missing'}</Typography>
{tags && (
<Box marginTop={2}>
{tags.map((item, idx) => (
<Chip size="small" key={idx} label={item} />
))}
</Box>
)}
</CardContent>
<CardActions>
<Button color="primary" to={url} disabled={!url}>
Explore
</Button>
</CardActions>
</Card>
);
}
Example #11
| Source File: index.tsx From aqualink-app with MIT License | 5 votes |
|
Card = forwardRef<HTMLDivElement, CardProps>(
(
{ title, text, backgroundColor, direction, image, scaleDown, classes },
ref
) => {
const titleOnly = !text;
return (
<div ref={ref}>
<Box bgcolor={backgroundColor} className={classes.container}>
<Grid container direction={direction} item xs={12}>
<Grid item xs={12} md={titleOnly ? 12 : 6}>
<Box className={classes.textContainer}>
<Box mb="1rem">
<Typography
className={classes.cardTitle}
variant="h5"
align={titleOnly ? "center" : "inherit"}
>
{title}
</Typography>
</Box>
<Typography variant="h6">{text}</Typography>
</Box>
</Grid>
<Grid item xs={12} md={titleOnly ? 12 : 6}>
<CardMedia
className={
scaleDown ? classes.cardImageScaleDown : classes.cardImage
}
component="img"
src={image}
/>
</Grid>
</Grid>
</Box>
</div>
);
}
)
Example #12
| Source File: SliderCard.tsx From aqualink-app with MIT License | 5 votes |
|
SliderCard = ({
loading,
media,
isSiteAdmin,
onSurveyMediaUpdate,
classes,
}: SliderCardProps) => {
const { id, url, comments, observations, featured } = media;
return (
<Card elevation={3} className={classes.shadowBox}>
{loading ? (
<Grid
className={classes.fullHeight}
container
justify="center"
alignItems="center"
item
xs={12}
>
<CircularProgress size="4rem" thickness={1} />
</Grid>
) : (
<Grid className={classes.fullHeight} container>
<Grid className={classes.imageWrapper} item sm={12} md={6}>
<CardMedia className={classes.cardImage} image={url} />
</Grid>
<Grid
className={classes.mediaInfoWrapper}
container
item
sm={12}
md={6}
>
<Grid
container
item
xs={10}
justify="space-around"
alignItems="flex-start"
spacing={2}
>
<Grid item xs={12}>
<Typography variant="h6">IMAGE OBSERVATION</Typography>
<Typography variant="subtitle1">
{findOption(observations)}
</Typography>
</Grid>
<Grid item xs={12}>
<Typography variant="h6">IMAGE COMMENTS</Typography>
<Typography variant="subtitle1">{comments}</Typography>
</Grid>
</Grid>
{isSiteAdmin && (
<Grid container justify="flex-end" item xs={2}>
{featured ? (
<Tooltip title="Featured image">
<IconButton className={classes.featuredIcon}>
<StarIcon color="primary" />
</IconButton>
</Tooltip>
) : (
<Tooltip title="Set as featured image">
<IconButton
onClick={() => onSurveyMediaUpdate(id)}
className={classes.featuredIcon}
>
<StarBorderIcon color="primary" />
</IconButton>
</Tooltip>
)}
</Grid>
)}
</Grid>
</Grid>
)}
</Card>
);
}
Example #13
| Source File: CardContent.tsx From aqualink-app with MIT License | 4 votes |
|
SelectedSiteCardContent = ({
site,
loading,
error,
imageUrl = null,
}: SelectedSiteCardContentProps) => {
const classes = useStyles({ imageUrl, loading });
const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down("sm"));
const sortedDailyData = sortByDate(site?.dailyData || [], "date");
const dailyDataLen = sortedDailyData.length;
const { maxBottomTemperature, satelliteTemperature, degreeHeatingDays } =
(dailyDataLen && sortedDailyData[dailyDataLen - 1]) || {};
const useCardWithImageLayout = Boolean(loading || imageUrl);
const metrics = [
{
label: "SURFACE TEMP",
value: formatNumber(satelliteTemperature, 1),
unit: " °C",
display: isNumber(satelliteTemperature),
},
{
label: "HEAT STRESS",
value: formatNumber(degreeHeatingWeeksCalculator(degreeHeatingDays), 1),
unit: " DHW",
display: isNumber(degreeHeatingDays),
},
{
label: `TEMP AT ${site?.depth}m`,
value: formatNumber(maxBottomTemperature, 1),
unit: " °C",
display: isNumber(maxBottomTemperature) && isNumber(site?.depth),
},
];
const { name, region: regionName } = site
? getSiteNameAndRegion(site)
: { name: null, region: null };
const chartDataset = site
? standardDailyDataDataset(
site.dailyData,
site.maxMonthlyMean,
false,
site.timezone
)
: undefined;
const ChartComponent =
site && chartDataset ? (
<Chart
siteId={site.id}
datasets={[chartDataset]}
surveys={[]}
temperatureThreshold={
site.maxMonthlyMean ? site.maxMonthlyMean + 1 : null
}
maxMonthlyMean={site.maxMonthlyMean || null}
background
/>
) : null;
const onExploreButtonClick = () => {
trackButtonClick(
GaCategory.BUTTON_CLICK,
GaAction.MAP_PAGE_BUTTON_CLICK,
"Explore"
);
};
if (error) {
return <Alert severity="error">{error}</Alert>;
}
if (!loading && !site) {
return <Alert severity="error">Featured site is not available</Alert>;
}
return (
<Grid
className={classes.cardWrapper}
container
justify="space-between"
spacing={1}
>
{useCardWithImageLayout && (
<Grid item xs={12} md={6} lg={4}>
<Box position="relative" height="100%" minHeight={300}>
<LoadingSkeleton
className={classes.imageBorderRadius}
image={featuredImageLoading}
loading={loading}
variant="rect"
height="100%"
>
{site && imageUrl && (
<Link to={`/sites/${site.id}`}>
<CardMedia
className={classNames(
classes.cardImage,
classes.imageBorderRadius
)}
image={imageUrl}
/>
</Link>
)}
<Hidden mdUp>
<Box
bgcolor="rgba(3, 48, 66, 0.75)"
height="55%"
width="100%"
position="absolute"
top={0}
left={0}
>
<Box className={classes.cardImageTextWrapper}>
<Typography variant="h5">{name}</Typography>
{regionName && (
<Typography variant="h6">{regionName}</Typography>
)}
</Box>
</Box>
</Hidden>
{site && (
<Box position="absolute" bottom={16} px={2} width="100%">
<Grid
container
alignItems="center"
justify={
site.videoStream && isTablet
? "space-between"
: "flex-end"
}
>
{site.videoStream && isTablet && (
<Chip
live
liveText="LIVE VIDEO"
to={`/sites/${site.id}`}
width={80}
/>
)}
<Grid item>
<Button
className={classes.exporeButton}
component={Link}
to={`/sites/${site.id}`}
onClick={onExploreButtonClick}
size="small"
variant="contained"
color="primary"
>
EXPLORE
</Button>
</Grid>
</Grid>
</Box>
)}
</LoadingSkeleton>
</Box>
</Grid>
)}
<Grid
item
xs={12}
md={useCardWithImageLayout ? 6 : 12}
lg={useCardWithImageLayout ? 6 : 10}
className={classes.cardAnalyticsWrapper}
>
<Box pb="0.5rem" pl="0.5rem" pt="1.5rem" fontWeight={400}>
<Hidden smDown={useCardWithImageLayout}>
<LoadingSkeleton
loading={loading}
variant="text"
lines={1}
textHeight={28}
longText
>
<Grid container alignItems="center">
<Grid item className={classes.cardTitleWrapper}>
<Typography
className={classes.cardTitle}
color="textSecondary"
variant="h5"
>
<span title={name || ""}>{name}</span>
</Typography>
</Grid>
{site?.videoStream && (
<Chip
live
liveText="LIVE VIDEO"
to={`/sites/${site.id}`}
width={80}
/>
)}
</Grid>
</LoadingSkeleton>
<LoadingSkeleton
loading={loading}
variant="text"
lines={1}
textHeight={19}
className={classes.siteRegionName}
>
<Typography
color="textSecondary"
variant="h6"
className={classNames(
classes.cardTitle,
classes.siteRegionName
)}
>
<span title={regionName || ""}>{regionName}</span>
</Typography>
</LoadingSkeleton>
</Hidden>
<LoadingSkeleton
loading={loading}
variant="text"
lines={1}
textHeight={12}
>
<Typography color="textSecondary" variant="caption">
DAILY SURFACE TEMP. (°C)
</Typography>
</LoadingSkeleton>
</Box>
<Hidden smDown>
<LoadingSkeleton
image={chartLoading}
loading={loading}
variant="rect"
width="98%"
height={180}
>
<div>{ChartComponent}</div>
</LoadingSkeleton>
</Hidden>
<Hidden mdUp>
<LoadingSkeleton
className={classes.mobileChartLoading}
image={chartLoading}
loading={loading}
variant="rect"
width="98%"
height={200}
>
{ChartComponent}
</LoadingSkeleton>
</Hidden>
</Grid>
<Grid item xs={12} lg={2} container>
<div className={classes.metricsContainer}>
{metrics.map(({ label, value, unit, display }) => (
<div key={label} className={classes.metric}>
<LoadingSkeleton
longText
loading={loading}
variant="text"
lines={1}
textHeight={12}
>
{display && (
<Typography variant="caption" color="textSecondary">
{label}
</Typography>
)}
</LoadingSkeleton>
<LoadingSkeleton
loading={loading}
variant="rect"
width={80}
height={32}
>
{display && (
<Typography variant="h4" color="primary">
{value}
<Typography variant="h6" component="span">
{unit}
</Typography>
</Typography>
)}
</LoadingSkeleton>
</div>
))}
</div>
</Grid>
</Grid>
);
}
Example #14
| Source File: index.tsx From aqualink-app with MIT License | 4 votes |
|
Tracker = () => {
const heroAspectRatio = useImageAspectRatio(hero);
const image1AspectRatio = useImageAspectRatio(image1);
const image2AspectRatio = useImageAspectRatio(image2);
const image3AspectRatio = useImageAspectRatio(image3);
const classes = useStyles({
heroAspectRatio,
image1AspectRatio,
image2AspectRatio,
image3AspectRatio,
});
return (
<>
<NavBar searchLocation={false} />
<Box className={classes.hero}>
<CardMedia className={classes.image} image={hero} />
<Container className={classes.titleWrapper}>
<Typography
className={classes.heroTitle}
variant="h1"
color="textPrimary"
>
Tracking Heatwaves
</Typography>
</Container>
</Box>
<Container className={classes.root}>
<Grid
container
className={classes.header}
justify="space-between"
alignItems="flex-end"
>
<Grid item xs={12} sm={7} md={9}>
<Typography className={classes.title}>
Using Sensor Networks to Monitor Heat Waves in Real-time
</Typography>
</Grid>
<Grid
className={classes.footPrintImageWrapper}
item
xs={12}
sm={5}
md={3}
>
<FootPrintImage imageHeight={128} />
</Grid>
</Grid>
<Grid container spacing={3}>
<Grid item xs={12} md={5} lg={4}>
<Typography variant="h6">
The ability for sensors to be grouped for a particular event, such
as a Heatwave, or a particular region, is important for users to
get critical information at a glance. We have launched a new
feature called Dashboards where anyone can create a customized
collection of sensors to track this information. For example, the
<a
className={classes.link}
rel="noopener noreferrer"
target="_blank"
href="https://www.minderoo.org/"
>
{" "}
Minderoo Foundation
</a>{" "}
worked with us and the{" "}
<a
className={classes.link}
rel="noopener noreferrer"
target="_blank"
href="https://www.uwa.edu.au"
>
University of Western Australila
</a>{" "}
to deploy Smart Buoys along the Western coast of Australia. This
was done in a critical time for the region where an extreme
heatwave, known as the{" "}
<a
className={classes.link}
rel="noopener noreferrer"
target="_blank"
href="https://en.wikipedia.org/wiki/La_Ni%C3%B1a"
>
La Nina
</a>
, was exptected to come through the area, potentially bringing
devastating affects to the local ecosystems. They created a
dashboard{" "}
<Link className={classes.link} to="/collections/minderoo">
here
</Link>{" "}
that aggregrates all the sensors involved in tracking this event
to get a real-time view of the severity. Scientists, media, and
the general public can use this feature to get a holistic view of
regional and event-based information, and we hope to enable a
better understanding of how to protect the ecosystems during such
times as the La Nina Heatwave.
</Typography>
</Grid>
<Grid item xs={12} md={7} lg={8}>
<Card className={classes.card1} variant="outlined">
<a
rel="noopener noreferrer"
target="_blank"
href="/collections/minderoo"
>
<CardMedia className={classes.image} image={image1} />
</a>
</Card>
</Grid>
</Grid>
<Box margin="72px 0 48px 0">
<Typography className={classes.title} variant="h2">
Create Your Dashboard
</Typography>
</Box>
<Grid container spacing={3}>
<Grid item xs={12} md={7} lg={8}>
<Card className={classes.card2} variant="outlined">
<CardMedia className={classes.image} image={image2} />
</Card>
</Grid>
<Grid item xs={12} md={5} lg={4}>
<Typography variant="h6">
To get started, head over to one of the sites you are interested
in adding to your Dashboard. A bookmark icon will appear next to
the site name in the heading. Clicking this will add the site. To
remove it, simply click the bookmark icon again. Your dashboard
page will aggregate all the sites that you add this way, and the
name of the collection can be customized to reflect the region,
event, or other interest.
</Typography>
</Grid>
</Grid>
<Box margin="48px 0 72px 0">
<Grid
container
justify="space-between"
alignItems="center"
spacing={3}
>
<Grid item xs={12} md={7} lg={9}>
<Typography variant="h6">
We worked closely with the Minderoo Foundation to build this
feature. The funding for the Heatwave Tracker development was
provided by the FootPrint Coalition and we would like to thank
them for their support.
</Typography>
</Grid>
</Grid>
</Box>
<Box margin="72px 0 48px 0">
<Typography className={classes.title} variant="h2">
Track global heat stress at a glance
</Typography>
</Box>
<Grid className={classes.globalStressWrapper} container spacing={3}>
<Grid item xs={12} md={5} lg={4}>
<Typography variant="h6">
Aqualink has developed a tracker that highlights all the sites
under the most stress, at a glance. Use{" "}
<Link className={classes.link} to="/collections/heat-stress">
this page
</Link>{" "}
to see where the ocean is getting warmer and spot new heat waves.
</Typography>
</Grid>
<Grid item xs={12} md={7} lg={8}>
<Card className={classes.card3} variant="outlined">
<Link to="/collections/heat-stress">
<CardMedia className={classes.image} image={image3} />
</Link>
</Card>
</Grid>
</Grid>
</Container>
<Footer />
</>
);
}
Example #15
| Source File: MediaCard.tsx From aqualink-app with MIT License | 4 votes |
|
MediaCard = ({
preview,
surveyPoint,
siteId,
observation,
comments,
surveyPointOptions,
index,
file,
featuredFile,
handleSurveyPointOptionAdd,
deleteCard,
setFeatured,
handleCommentsChange,
handleObservationChange,
handleSurveyPointChange,
classes,
}: MediaCardProps) => {
const size = (file && file.size && file.size / 1000000)?.toFixed(2);
const [addSurveyPointDialogOpen, setAddSurveyPointDialogOpen] =
useState<boolean>(false);
const onImageClick = useCallback(() => {
setFeatured(index);
}, [index, setFeatured]);
return (
<>
<NewSurveyPointDialog
siteId={siteId}
open={addSurveyPointDialogOpen}
onClose={() => setAddSurveyPointDialogOpen(false)}
onSuccess={handleSurveyPointOptionAdd}
/>
<Grid style={{ marginTop: "2rem" }} container item xs={12}>
<Paper elevation={0} className={classes.mediaCardWrapper}>
<Grid
style={{ height: "100%" }}
container
alignItems="center"
justify="space-between"
item
xs={12}
>
<Grid style={{ height: "100%" }} item xs={3}>
<CardMedia className={classes.cardImage} image={preview}>
{size && (
<Grid
className={classes.mediaSizeWrapper}
container
item
xs={12}
alignItems="flex-end"
justify="flex-end"
>
<Grid
className={classes.mediaSize}
container
alignItems="center"
justify="center"
item
xs={3}
>
<Typography variant="subtitle2">{size} MB</Typography>
</Grid>
</Grid>
)}
</CardMedia>
</Grid>
<Grid container justify="center" item xs={3}>
<Grid style={{ marginBottom: "1rem" }} item xs={10}>
<Typography color="textSecondary" variant="h6">
Survey Point
</Typography>
</Grid>
<Grid style={{ marginBottom: "2rem" }} item xs={10}>
<TextField
className={classes.textField}
select
id="surveyPoint"
name="surveyPoint"
onChange={handleSurveyPointChange}
value={surveyPoint}
fullWidth
variant="outlined"
inputProps={{
className: classes.textField,
}}
>
{surveyPointOptions.map((item) => (
<MenuItem
className={classNames(
classes.textField,
classes.menuItem
)}
value={item.id}
key={item.id}
>
{item.name}
</MenuItem>
))}
<MenuItem className={classes.textField}>
<AddIcon />
<Button
style={{ color: "black" }}
onClick={() => setAddSurveyPointDialogOpen(true)}
>
Add new survey point
</Button>
</MenuItem>
</TextField>
</Grid>
<Grid style={{ marginBottom: "1rem" }} item xs={10}>
<Typography color="textSecondary" variant="h6">
Observation
</Typography>
</Grid>
<Grid style={{ marginBottom: "2rem" }} item xs={10}>
<TextField
className={classes.textField}
select
id="observation"
name="observation"
onChange={handleObservationChange}
value={observation}
placeholder="Select One"
fullWidth
variant="outlined"
inputProps={{
className: classes.textField,
}}
>
{observationOptions.map((item) => (
<MenuItem
className={classes.textField}
value={item.key}
key={item.key}
>
{item.value}
</MenuItem>
))}
</TextField>
</Grid>
</Grid>
<Grid container justify="center" item xs={5}>
<Grid style={{ marginBottom: "1rem" }} item xs={12}>
<Typography color="textSecondary" variant="h6">
Comments
</Typography>
</Grid>
<Grid style={{ marginBottom: "2rem" }} item xs={12}>
<TextField
className={classes.textField}
variant="outlined"
multiline
name="comments"
placeholder="Comments"
onChange={handleCommentsChange}
value={comments}
rows="8"
fullWidth
inputProps={{
className: classes.textField,
}}
/>
</Grid>
</Grid>
<Grid style={{ height: "100%" }} container item xs={1}>
<Grid
container
item
alignContent="space-between"
justify="flex-end"
xs={12}
>
<IconButton onClick={onImageClick}>
<Tooltip
title={
index === featuredFile
? "Featured image"
: "Set this image as featured"
}
>
<StarIcon
fill={index === featuredFile ? "#168dbd" : "#939393"}
className={classes.starIcon}
/>
</Tooltip>
</IconButton>
<IconButton onClick={() => deleteCard(index)}>
<DeleteOutlineOutlined />
</IconButton>
</Grid>
</Grid>
</Grid>
</Paper>
</Grid>
</>
);
}
Example #16
| Source File: index.tsx From firetable with Apache License 2.0 | 4 votes |
|
export default function BasicCard({
className,
style,
overline,
title,
imageSource,
imageShape = "square",
imageClassName,
tabs,
bodyContent,
primaryButton,
primaryLink,
secondaryAction,
}: ICardProps) {
const classes = useStyles();
const [tab, setTab] = useState(0);
const handleChangeTab = (event: React.ChangeEvent<{}>, newValue: number) =>
setTab(newValue);
return (
<Card className={clsx(classes.root, className)} style={style}>
<Grid
container
direction="column"
wrap="nowrap"
className={classes.container}
>
<Grid item xs className={classes.cardContentContainer}>
<CardContent className={clsx(classes.container, classes.cardContent)}>
<Grid
container
direction="column"
wrap="nowrap"
className={classes.container}
>
{(overline || title || imageSource) && (
<Grid item className={classes.headerContainer}>
<Grid container spacing={3}>
<Grid item xs>
{overline && (
<Typography
variant="overline"
className={classes.overline}
>
{overline}
</Typography>
)}
{title && (
<Typography variant="h5" className={classes.title}>
{title}
</Typography>
)}
</Grid>
{imageSource && (
<Grid item>
<CardMedia
className={clsx(
classes.image,
imageShape === "circle" && classes.imageCircle,
imageClassName
)}
image={imageSource}
title={typeof title === "string" ? title : ""}
/>
</Grid>
)}
</Grid>
</Grid>
)}
{tabs && (
<Grid item className={classes.tabsContainer}>
<Tabs
className={classes.tabs}
value={tab}
onChange={handleChangeTab}
indicatorColor="primary"
textColor="primary"
variant="fullWidth"
aria-label="full width tabs"
>
{tabs?.map((tab, index) => (
<Tab
key={`card-tab-${index}`}
className={classes.tab}
label={tab.label}
disabled={tab.disabled}
{...a11yProps(index)}
/>
))}
</Tabs>
<Divider className={clsx(classes.tabs, classes.tabDivider)} />
</Grid>
)}
{(tabs || bodyContent) && (
<Grid item xs className={classes.contentContainer}>
{tabs && (
<div className={classes.tabSection}>
{tabs[tab].content && Array.isArray(tabs[tab].content) ? (
<Grid
container
direction="column"
wrap="nowrap"
justify="space-between"
spacing={3}
className={classes.tabContentGrid}
>
{(tabs[tab].content as React.ReactNode[]).map(
(element, index) => (
<Grid item key={`tab-content-${index}`}>
{element}
</Grid>
)
)}
</Grid>
) : (
tabs[tab].content
)}
</div>
)}
{bodyContent && Array.isArray(bodyContent) ? (
<Grid
container
direction="column"
wrap="nowrap"
justify="space-between"
className={classes.container}
>
{bodyContent.map((element, i) => (
<Grid item key={i}>
{element}
</Grid>
))}
</Grid>
) : (
bodyContent
)}
</Grid>
)}
</Grid>
</CardContent>
</Grid>
{(primaryButton || primaryLink || secondaryAction) && (
<Grid item>
<Divider className={classes.divider} />
<CardActions className={classes.cardActions}>
<Grid item>
{primaryButton && (
<Button
{...primaryButton}
color={primaryButton.color || "primary"}
disabled={!!primaryButton.disabled}
endIcon={
primaryButton.endIcon === undefined ? (
<GoIcon />
) : (
primaryButton.endIcon
)
}
>
{primaryButton.label}
</Button>
)}
{primaryLink && (
<Button
classes={{ label: classes.primaryLinkLabel }}
{...(primaryLink as any)}
color={primaryLink.color || "primary"}
component="a"
endIcon={
primaryLink.endIcon === undefined ? (
<GoIcon />
) : (
primaryLink.endIcon
)
}
>
{primaryLink.label}
</Button>
)}
</Grid>
{secondaryAction && <Grid item>{secondaryAction}</Grid>}
</CardActions>
</Grid>
)}
</Grid>
</Card>
);
}
Example #17
| Source File: index.tsx From aqualink-app with MIT License | 4 votes |
|
Faq = ({ classes }: FaqProps) => {
return (
<>
<NavBar searchLocation={false} />
<div>
{/* Main container */}
<div className="page-container">
{/* bloc-11 */}
<div className="bloc l-bloc" id="bloc-11">
<div className="container bloc-lg">
<div className="row">
<div className="col">
<Typography className={classes.title} variant="h4">
Frequently Asked Questions
</Typography>
</div>
</div>
<div className="row faqq">
<div className="col">
<Typography className={classes.question} variant="h5">
Overview of the Aqualink system and Survey guide
</Typography>
<p>
We have created an animated field guide that will describe
the best practices for conducting a survey and using the
Aqualink system.
<br />
<br />
</p>
<div className={classes.videoWrapper}>
<CardMedia
className={classes.video}
src="https://www.youtube.com/embed/E_nXCl612lg"
title="field_guide"
component="iframe"
allow="fullscreen"
/>
</div>
</div>
</div>
<div className="row faqq">
<div className="col">
<Typography className={classes.question} variant="h5">
How are you measuring temperature?
</Typography>
<p>
We collect temperature through satellite observations or
spotter (a Smart Buoy). Satellite measurements collect
temperature information from the very top layer of the
surface (skin temperature) based on a 5km grid. NOAA
publishes observed temperatures on a daily basis and makes
that available in their “Daily Global 5km Satellite Coral
Bleaching Heat Stress Monitoring”. Sofar Ocean imports this
data into their servers and Aqualink uses their API to
render the data in our web application. When a Smart Buoy is
deployed we collect temperature information every hour from
a depth of 1 meter as well as the moored depth which is at
the sea floor.
</p>
</div>
</div>
<div className="row faqq">
<div className="col">
<Typography className={classes.question} variant="h5">
What is heat stress?
</Typography>
<p>
Heat stress is a measure of the amount of time above the 20
year historical maximum temperature. The unit of measure for
heat stress is degree heating weeks. Many marine
environments, like coral sites, degrade after prolonged heat
exposure which is why this is an important metric.
</p>
</div>
</div>
<div className="row faqq">
<div className="col">
<Typography className={classes.question} variant="h5">
I am managing a large area and would like more than one
Smart Buoy, can I get multiple?
</Typography>
<p>
Please submit an application for each site or location you
would like a spotter for and we’ll be in touch to figure out
a staged roll out with you.
</p>
</div>
</div>
<div className="row faqq">
<div className="col">
<Typography className={classes.question} variant="h5">
Who is responsible for the satellite communication costs?
</Typography>
<p>
Aqualink will be responsible for any satellite communication
costs.
</p>
</div>
</div>
<div className="row faqq">
<div className="col">
<Typography className={classes.question} variant="h5">
What is the maximum depth a temperature sensor on the Smart
Buoy can be deployed?
</Typography>
<p>100 meters.</p>
</div>
</div>
<div className="row faqq">
<div className="col">
<Typography className={classes.question} variant="h5">
What are the shipping costs?
<br />
</Typography>
<p>
Shipping cost will vary greatly depending on your location.
To get an idea of shipping costs you can visit
https://onlineshippingcalculator.com/ and enter the
following:
<br />
</p>
<ul>
<li>
<p>Set ship from location to San Francisco CA USA</p>
</li>
<li>
<p>Set ship to location to your location</p>
</li>
<li>
<p>Weight will be 22lbs</p>
</li>
<li>
<p>
Dimension will be 18 inches x 18 inches x 14 inches.
</p>
</li>
<li>
<p>
Because our shipment will arrive in two boxes and using
our negotiated rates you will need to multiply this
result by 1.5x.
<br />
</p>
</li>
<li>
<p>
This should be a rough estimate.
<br />
</p>
</li>
<li>
<p>
This does not include total landed costs for
international shipping (see below).
<br />
</p>
</li>
</ul>
</div>
</div>
<div className="row faqq">
<div className="col">
<Typography className={classes.question} variant="h5">
Am I responsible for customs / duties / taxes?
</Typography>
<p>
Yes. As the recipient of the equipment you will need to
determine if you need to pay these to receive your equipment
at customs.
</p>
</div>
</div>
<div className="row faqq">
<div className="col">
<Typography className={classes.question} variant="h5">
How big is the Aqualink Smart Buoy?
</Typography>
<p>
The total Smart Buoy system is small enough for regular
shipping such as UPS, DHL, FedEx, etc. The dimensions and
weight of the buoy are:
<br />
<br />
42cm diameter
<br />
31cm height
<br />
5.4 KG
<br />
<br />
There is a ballast chain and smart mooring cable, the weight
and dimensions are still TBD but depending on the length of
cable needed for your target depth this should be around the
same dimensions and less than 15kg.
<br />
</p>
</div>
</div>
<div className="row faqq">
<div className="col">
<Typography className={classes.question} variant="h5">
Can I see more specification for the spotter buoy?
</Typography>
<p>
You can see some of the specifications
<a
href="https://content.sofarocean.com/hubfs/Spotter%20product%20documentation%20page/Sofar_Spotter_Specs_8_30_19.pdf"
target="_blank"
rel="noopener noreferrer"
>
here
</a>
:<br />
More specifications will be released soon.
<br />
</p>
</div>
</div>
<div className="row faqq">
<div className="col">
<Typography className={classes.question} variant="h5">
How is the Smart Buoy moored? Does it come with a mooring
anchor?
</Typography>
<p>
The Smart Buoy does not come with an anchor. It terminates
in a stainless steel shackle with a chain. This can be
attached to an existing mooring. We will work with you to
determine the best arrangement for mooring at your site as
factors like depth, wind, current, wave action, and storms
may determine the configuration of the mooring.
<br />
</p>
</div>
</div>
<div className="row faqq">
<div className="col">
<Typography className={classes.question} variant="h5">
Am I responsible for permitting and permissions to install?
</Typography>
<p>
Yes. You will need to know the regulations for your
installation site and ensure you have the proper permits and
permissions.
<br />
</p>
</div>
</div>
<div className="row faqq">
<div className="col">
<Typography className={classes.question} variant="h5">
How do I receive data from the Smart Buoy?
</Typography>
<p>
Data will be available in an open-source dashboard provided
by aqualink.org.
<br />
</p>
</div>
</div>
<div className="row faqq">
<div className="col">
<Typography className={classes.question} variant="h5">
How often will I receive data?
</Typography>
<p>
Data will be real time transmitted every 30-45 minutes.
<br />
</p>
</div>
</div>
<div className="row faqq">
<div className="col">
<Typography className={classes.question} variant="h5">
What data will I receive from the Smart Buoy?
</Typography>
<p>
The planned data available will be:
<br />
<br />
significant wave height
<br />
peak period
<br />
mean period
<br />
peak direction
<br />
mean direction
<br />
peak directional spread
<br />
mean directional spread
<br />
wind speed
<br />
wind direction
<br />
GPS coordinates
<br />
surface temperature (placement configurable)
<br />
subsurface temperature (placement configurable)
<br />
</p>
</div>
</div>
</div>
</div>
{/* bloc-11 END */}
</div>
</div>
<Footer />
</>
);
}
Example #18
| Source File: index.tsx From aqualink-app with MIT License | 4 votes |
|
About = ({ classes }: AboutProps) => {
return (
<>
<NavBar searchLocation={false} />
<div>
<div className="page-container">
<div className="bloc l-bloc" id="bloc-0">
{/* bloc-1 */}
<div className="bloc l-bloc" id="bloc-1">
<div className="container bloc-md mobilecentered">
<div className="row">
<div className="centered order-lg-0 order-1 order-md-0 order-sm-0 col">
<Typography className={classes.title} variant="h4">
About Us
</Typography>
<p>
Aqualink is a philanthropic engineering organization
working on building ocean conservation technology. Read
more about our inspiration, smart buoy, and web
application in our press release:{" "}
<a href="https://medium.com/aqualink/introducing-aqualink-dd1023393b8">
Introducing Aqualink
</a>
<br />
<br />
We have also created an animated field guide to give an
overview to the system and outline the best practices for
taking a survey and using the Aqualink system.
</p>
</div>
<div
className={classNames("offset-lg-0 col-lg-12 order-lg-1", [
classes.videoWrapper,
])}
>
<CardMedia
className={classes.video}
src="https://www.youtube.com/embed/E_nXCl612lg"
title="field_guide"
component="iframe"
allow="fullscreen"
/>
</div>
</div>
<br />
<div className="row voffset-lg">
<div className="centered order-lg-0 order-1 order-md-0 order-sm-0 col">
<Typography className={classes.title} variant="h4">
The Team
</Typography>
<p>
We have been working in rapid development and
entrepreneurial businesses that scale and hope to bring a
similar mindset to ocean conservation. We have an extended
team of engineering contractors in a variety of
disciplines, all of whom embrace open source philosophies
and want to help build ocean conservation tools.
<br />
</p>
</div>
</div>
<div className="row voffset-md">
<div className="col-lg-4 col-md-4">
<div className="card border-0">
<div className="card-body team-card">
<img
src={peter}
className="rounded-circle mx-auto d-block mt-5 img-style lazyload"
width={100}
alt="placeholder user"
/>
<h5 className="text-center mg-sm">Peter Rive</h5>
<p className="text-lg-center">
Co-founder of SolarCity, a pioneer in making solar
energy an affordable alternative to fossil fuels for
homeowners.
</p>
</div>
</div>
</div>
<div className="col-lg-4 col-md-4 mt-3 mt-md-0">
<div className="card border-0">
<div className="card-body team-card">
<img
src={lyndon}
className="rounded-circle mx-auto d-block mt-5 img-placeholder-us-style lazyload"
width={100}
alt="placeholder user"
/>
<h5 className="text-center mg-sm">Lyndon Rive</h5>
<p className="text-lg-center">
Also a co-founder of SolarCity, current National
Geographic board member, and member of the USA
underwater hockey team.
<br />
</p>
</div>
</div>
</div>
<div className="col-lg-4 col-md-4 mt-3 mt-md-0">
<div className="card border-0">
<div className="card-body team-card">
<img
src={drew}
className="rounded-circle mx-auto d-block mt-5 img-3-style lazyload"
width={100}
alt="placeholder user"
/>
<h5 className="text-center mg-sm">
<a href="https://www.linkedin.com/in/drewjgray/">
Drew Gray
</a>
</h5>
<p className="text-lg-center">
Computer-vision/AI software engineer, PhD in robotics,
and experience building autonomous systems at Tesla,
Cruise, and Uber.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<Footer />
</>
);
}
Example #19
| Source File: index.tsx From aqualink-app with MIT License | 4 votes |
|
SurveyCard = ({
pointId,
pointName,
isAdmin,
siteId,
survey = null,
loading = false,
}: SurveyCardProps) => {
const classes = useStyles();
const isShowingFeatured = pointId === -1;
const displayDeleteButton = isAdmin && typeof siteId === "number";
const user = useSelector(userInfoSelector);
const dispatch = useDispatch();
const onSurveyDelete = async () => {
if (survey?.id && siteId && user && user.token) {
return surveyServices.deleteSurvey(siteId, survey.id, user.token);
}
return new Promise<void>((resolve) => resolve());
};
const onSurveyDeleteSuccess = () => dispatch(surveysRequest(`${siteId}`));
return (
<Paper elevation={0} className={classes.surveyCard}>
<Grid style={{ height: "100%" }} container justify="space-between">
<Grid className={classes.cardImageWrapper} item xs={12} md={5}>
<LoadingSkeleton
loading={loading}
variant="rect"
height="100%"
width="100%"
image={pointImageSkeleton}
>
{survey && (
<Link to={`/sites/${siteId}/survey_details/${survey.id}`}>
<CardMedia
className={classes.cardImage}
image={
isShowingFeatured
? survey.featuredSurveyMedia?.url
: survey.surveyPointImage?.[pointId]?.[0]
}
/>
</Link>
)}
</LoadingSkeleton>
</Grid>
<Grid className={classes.infoWrapper} container item xs={12} md={7}>
<Grid
className={classes.info}
container
item
xs={12}
direction={loading ? "column" : "row"}
justify={loading ? "center" : "flex-start"}
>
<LoadingSkeleton
loading={loading}
variant="text"
lines={8}
longText
>
{survey && (
<>
{survey.user?.fullName && (
<Grid container alignItems="center" item xs={12}>
<Typography className={classes.cardFields} variant="h6">
User:
</Typography>
<Typography
className={`${classes.cardValues} ${classes.valuesWithMargin}`}
variant="h6"
>
{survey.user.fullName}
</Typography>
</Grid>
)}
{survey.featuredSurveyMedia?.surveyPoint?.name && (
<Grid container alignItems="center" item xs={12}>
<Typography className={classes.cardFields} variant="h6">
Survey Point:
</Typography>
<Typography
className={`${classes.cardValues} ${classes.valuesWithMargin} ${classes.blueText}`}
variant="h6"
title={survey.featuredSurveyMedia.surveyPoint.name}
>
<CustomLink
to={`/sites/${siteId}/points/${
isShowingFeatured
? survey.featuredSurveyMedia.surveyPoint.id
: pointId
}`}
isIcon={false}
tooltipTitle=""
content={
pointName === "All"
? survey.featuredSurveyMedia.surveyPoint.name
: pointName
}
/>
</Typography>
</Grid>
)}
{survey.comments && (
<Grid
className={classes.commentsWrapper}
container
alignItems="flex-start"
item
xs={12}
>
<Grid style={{ height: "80%" }} item xs={12}>
<Typography className={classes.cardFields} variant="h6">
Comments:
</Typography>
<Typography
className={`${classes.cardValues} ${classes.comments}`}
variant="h6"
>
{survey.comments}
</Typography>
</Grid>
</Grid>
)}
{survey.temperature && (
<Grid container alignItems="center" item xs={12}>
<Typography className={classes.cardFields} variant="h6">
Temp:
</Typography>
<Typography
className={`${classes.cardValues} ${classes.valuesWithMargin}`}
variant="h6"
>
{`${formatNumber(survey.temperature, 1)} °C`}
</Typography>
</Grid>
)}
<Grid
container
alignItems="center"
justify="space-between"
item
xs={12}
>
<Grid item xs={10}>
<Link
style={{ color: "inherit", textDecoration: "none" }}
to={`/sites/${siteId}/survey_details/${survey.id}`}
>
<Button size="small" variant="outlined" color="primary">
VIEW DETAILS
</Button>
</Link>
</Grid>
{displayDeleteButton && (
<Grid container justify="flex-end" item xs={2}>
<DeleteButton
content={
<Typography color="textSecondary">{`Are you sure you would like to delete the survey for ${moment(
survey.diveDate
).format(
"MM/DD/YYYY"
)}? It will delete all media associated with this survey.`}</Typography>
}
onConfirm={onSurveyDelete}
onSuccess={onSurveyDeleteSuccess}
/>
</Grid>
)}
</Grid>
</>
)}
</LoadingSkeleton>
</Grid>
</Grid>
</Grid>
</Paper>
);
}
Example #20
| Source File: TestVariationDetailsPage.tsx From frontend with Apache License 2.0 | 4 votes |
|
TestVariationDetailsPage: React.FunctionComponent = () => {
const classes = useStyles();
const navigate = useNavigate();
const { enqueueSnackbar } = useSnackbar();
const { testVariationId } = useParams<{ testVariationId: string }>();
const [testVariation, setTestVariation] = React.useState<TestVariation>();
React.useEffect(() => {
if (testVariationId) {
testVariationService
.getDetails(testVariationId)
.then((item) => {
setTestVariation(item);
})
.catch((err) =>
enqueueSnackbar(err, {
variant: "error",
})
);
}
}, [testVariationId, enqueueSnackbar]);
return (
<React.Fragment>
<Container>
<Box mt={2}>
{testVariation && (
<Grid container direction="column" spacing={2}>
<Grid item>
<TestVariationDetails testVariation={testVariation} />
</Grid>
{testVariation.baselines.map((baseline: Baseline) => (
<Grid item key={baseline.id}>
<Card>
<CardActions>
<Button
color="primary"
disabled={!baseline.testRun}
onClick={() => {
const { testRun } = baseline;
if (testRun) {
navigate({
pathname: buildProjectPageUrl(
testVariation.projectId
),
...buildTestRunLocation(
testRun.buildId,
testRun.id
),
});
}
}}
>
Test Run
</Button>
{baseline.testRun && (
<TestStatusChip status={baseline.testRun.status} />
)}
{baseline.user && (
<Typography>
{`${baseline.user.firstName} ${baseline.user.lastName} <${baseline.user.email}>`}
</Typography>
)}
<Typography>
{formatDateTime(baseline.createdAt)}
</Typography>
</CardActions>
<CardMedia
component="img"
className={classes.media}
image={staticService.getImage(baseline.baselineName)}
/>
</Card>
</Grid>
))}
</Grid>
)}
</Box>
</Container>
</React.Fragment>
);
}
Example #21
| Source File: StyledCard.tsx From firetable with Apache License 2.0 | 4 votes |
|
export default function StyledCard({
className,
overline,
title,
imageSource,
bodyContent,
primaryButton,
primaryLink,
secondaryAction,
headerAction,
}: StyledCardProps) {
const classes = useStyles();
return (
<Card className={clsx(className, classes.root)}>
<Grid
container
direction="column"
wrap="nowrap"
className={classes.container}
>
<Grid item xs>
<CardContent className={clsx(classes.container, classes.cardContent)}>
<Grid
container
direction="column"
wrap="nowrap"
className={classes.container}
>
<Grid item>
<Grid container className={classes.headerSection} spacing={3}>
<Grid item xs>
{overline && (
<Typography
variant="overline"
className={classes.overline}
>
{overline}
</Typography>
)}
<Grid container direction="row" justify="space-between">
{title && (
<Typography variant="h5" className={classes.title}>
{title}
</Typography>
)}
{headerAction && headerAction}
</Grid>
</Grid>
{imageSource && (
<Grid item>
<CardMedia
className={classes.image}
image={imageSource}
title={title}
/>
</Grid>
)}
</Grid>
</Grid>
<Grid item xs>
{bodyContent && Array.isArray(bodyContent) ? (
<Grid
container
direction="column"
wrap="nowrap"
justify="space-between"
>
{bodyContent.map((element) => (
<Grid item>{element}</Grid>
))}
</Grid>
) : (
<Typography variant="body2" color="textSecondary">
{bodyContent}
</Typography>
)}
</Grid>
</Grid>
</CardContent>
</Grid>
<Grid item>
<Divider className={classes.divider} />
<CardActions className={classes.cardActions}>
{primaryButton && <Button color="primary" {...primaryButton} />}
{primaryLink && (
<Button
color="primary"
component={Link as any}
to={primaryLink.to}
children={primaryLink.children || primaryLink.label}
endIcon={<GoIcon />}
/>
)}
{secondaryAction}
</CardActions>
</Grid>
</Grid>
</Card>
);
}
