25 lines
765 B
TypeScript

import { BASE_URL } from '@api/constants';
import { FLORIS_PLOTS } from '@api/floris';
import { Heading, Span } from '@components/ui';
import React from 'react';
import styles from './styles.module.scss';
import { FlorisPlotsProps } from './types';
export function FlorisPlots({ filenames }: FlorisPlotsProps) {
return (
<div className={styles.plots}>
<Heading tag="h3">Plots</Heading>
{Object?.keys(filenames).map((key) => {
const url = `${BASE_URL}/api/floris/download_image/${filenames[key]}`;
return (
<div className={styles.plot}>
<Span>{FLORIS_PLOTS[key]?.label ?? '???'}</Span>
<img src={url} className={styles.image} alt="Plot" />
</div>
);
})}
</div>
);
}