import React from 'react'; import style from './Preview.module.css'; import {Spinner} from 'react-bootstrap'; import {Link} from 'react-router-dom'; import GlobalInfos from '../../utils/GlobalInfos'; import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; import {faPhotoVideo} from '@fortawesome/free-solid-svg-icons'; interface PreviewProps { name: string; picLoader: (callback: (pic: string) => void) => void; linkPath?: string; onClick?: () => void; } interface PreviewState { picLoaded: boolean | null; } /** * Component for single preview tile * floating side by side */ class Preview extends React.Component { // store the picture to display pic?: string; constructor(props: PreviewProps) { super(props); this.state = { picLoaded: null }; } componentDidMount(): void { this.props.picLoader((result) => { this.pic = result; this.setState({ picLoaded: result !== '' }); }); } render(): JSX.Element { if (this.props.linkPath !== undefined) { return {this.content()}; } else { return this.content(); } } content(): JSX.Element { const themeStyle = GlobalInfos.getThemeStyle(); return (
{this.props.name}
{this.state.picLoaded === false ? ( ) : this.state.picLoaded === null ? ( ) : ( Pic loading. )}
); } } /** * Component for a Tag-name tile (used in category page) */ export class TagPreview extends React.Component<{name: string}> { render(): JSX.Element { const themeStyle = GlobalInfos.getThemeStyle(); return (
{this.props.name}
); } } export default Preview;