semantic-ui-react#Image JavaScript Examples

function likeCommentReplyNotification({ _id, createdAt, sender, reply, post }) {
  return (
    <Feed.Event key={_id}>
      <Feed.Label
        image={`/images/profile-picture/100x100/${sender[0].profilePicture}`}
      />
      <Feed.Content>
        <Feed.Summary>
          <Feed.User as={Link} to={"/" + sender[0].username}>
            {sender[0].username}
          </Feed.User>{" "}
          <span style={{ fontWeight: "normal" }}>liked your reply</span>{" "}
          {reply[0].text} <span style={{ fontWeight: "normal" }}>on</span>{" "}
          <Link to={`/p/${post[0]._id}`}>post</Link>
          <Feed.Date>{dayjs(createdAt).fromNow()}</Feed.Date>
        </Feed.Summary>
        <Feed.Extra images>
          <Link to={`/p/${post[0]._id}`}>
            <Image
              rounded
              src={`/images/post-images/thumbnail/${post[0].photo}`}
            />
          </Link>
        </Feed.Extra>
      </Feed.Content>
    </Feed.Event>
  );
}

export default function Category(props) {
  const pic = props.category.picture
    ? props.category.picture
    : "https://react.semantic-ui.com/images/avatar/large/matthew.png";

  return (
    <Card color="teal">
      <Image src={pic} wrapped ui={false} />
      <Card.Content>
        <Card.Header>{props.category.name}</Card.Header>
      </Card.Content>
    </Card>
  );
}

render() {
    const { asItem, isRestricted, linkTo, size, url, isLoading, ...uiProps } =
      this.props;
    const Cmp = asItem ? Item.Image : Image;
    const link = linkTo ? { as: Link, to: linkTo } : {};
    return (
      <Overridable id="LiteratureCover.layout" {...this.props}>
        {!isLoading && (
          <Cmp
            centered
            disabled={isRestricted}
            label={this.getLabel(isRestricted)}
            {...link}
            onError={(e) => (e.target.style.display = 'none')}
            src={url}
            size={size}
            className="image-cover"
            {...uiProps}
          />
        )}
      </Overridable>
    );
  }

export default function FollowingFollowerList({
  user: { _id, username, profilePicture }
}) {
  return (
    <List.Item>
      <List.Content floated="right">
        <FollowButton userId={_id}></FollowButton>
      </List.Content>
      <Image avatar src={`/images/profile-picture/100x100/${profilePicture}`} />
      <List.Content as={Link} to={"/" + username} style={{ color: "#3d3d3d" }}>
        {username}
      </List.Content>
    </List.Item>
  );
}

TodoList = () => {
  const { loading, error, data } = useSubscription(GET_TODOS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;
  return (
    <Card.Group>
      {data.queryTodo.map(({ id, title, description, completed }) => (
        <Card>
          <Image
            src="/diggy.png"
            wrapped
            ui={false}
          />
          <Card.Content>
            <Card.Header>{title}</Card.Header>
            <Card.Meta>{completed ? "Done" : "Pending"}</Card.Meta>
            <Card.Description>{description}</Card.Description>
          </Card.Content>
        </Card>
      ))}
    </Card.Group>
  );
}

function postTaggedNotification({ _id, createdAt, sender, post }) {
  return (
    <Feed.Event key={_id}>
      <Feed.Label
        image={`/images/profile-picture/100x100/${sender[0].profilePicture}`}
      />
      <Feed.Content>
        <Feed.Summary>
          <Feed.User as={Link} to={"/" + sender[0].username}>
            {sender[0].username}
          </Feed.User>{" "}
          <span style={{ fontWeight: "normal" }}> tagged you on</span>{" "}
          <Link to={`/p/${post[0]._id}`}>post</Link>
          <Feed.Date>{dayjs(createdAt).fromNow()}</Feed.Date>
        </Feed.Summary>
        <Feed.Extra images>
          <Link to={`/p/${post[0]._id}`}>
            <Image
              rounded
              src={`/images/post-images/thumbnail/${post[0].photo}`}
            />
          </Link>
        </Feed.Extra>
      </Feed.Content>
    </Feed.Event>
  );
}

ChatAvatar = ({ chat, username, className }) => {
  const { chatConfig } = useChat();
  const [avatar, setAvatar] = useState('');

  useEffect(() => {
    fb.firestore
      .collection('chatUsers')
      .where('userName', '==', username)
      .get()
      .then(snap => {
        const data = snap.docs[0]?.data();
        if (data?.avatar) {
          setAvatar(data.avatar);
        }
      });
  }, [chat, chatConfig, username]);

  return avatar ? (
    <Image className={className || 'chat-list-avatar'} src={avatar} />
  ) : (
    <div className={className || 'empty-avatar'}>
      {chat.people
        .find(p => p.person.username !== chatConfig.userName)
        .person.username[0].toUpperCase()}
    </div>
  );
}

function VespaDescription() {
  return (
    <Box my={4}>
      <Image src={VespaIcon} size="tiny" centered />
      <Text mt={3}>
        This is an{' '}
        <Link to="https://github.com/vespa-engine/cord-19/blob/master/README.md">
          open source application{' '}
        </Link>
        on <Link to="https://vespa.ai">Vespa.ai</Link>
      </Text>
      <Text mt={1}>The big data serving engine.</Text>
    </Box>
  );
}

DisplayPictureModal = ({ imageLink, contactName, isDarkMode }) => {
  const [open, setOpen] = useState(false);

  return (
    <Modal
      closeIcon
      open={open}
      trigger={
        <Image
          avatar
          style={{ width: '49px', height: '49px' }}
          src={getCircularAvatar(imageLink)}
          className="avatar-image"
        />
      }
      onClose={() => setOpen(false)}
      onOpen={() => setOpen(true)}
      className={isDarkMode ? 'dark-mode-modal' : ''}
    >
      <Header icon="picture" content={`DP Preview: ${contactName}`} />
      <Modal.Content>
        <Image
          src={imageLink}
          size="large"
          rounded
          className="avatar-preview"
        />
      </Modal.Content>
    </Modal>
  );
}

function PostCard({
  post: { body, createdAt, id, username, likeCount, commentCount, likes }
}) {
  const { user } = useContext(AuthContext);

  return (
    <Card id="post-card-home" fluid>
      <Card.Content>
        <Image
          floated="right"
          size="mini"
          src="https://github.githubassets.com/images/modules/logos_page/Octocat.png"
        />
        <Card.Header id="user-post">{username}</Card.Header>
        <Card.Meta as={Link} to={`/posts/${id}`}>
          {moment(createdAt).fromNow(true)}
        </Card.Meta>
        <Card.Description>{body}</Card.Description>
      </Card.Content>
      <Card.Content extra>
        <LikeButton user={user} post={{ id, likes, likeCount }} />
        <MyPopup content="Comment">
          <Button labelPosition="right" as={Link} to={`/posts/${id}`}>
            <Button color="blue" basic>
              <Icon name="comments" />
            </Button>
            <Label basic color="blue" pointing="left">
              {commentCount}
            </Label>
          </Button>
        </MyPopup>
        {user && user.username === username && <DeleteButton postId={id} />}
      </Card.Content>
    </Card>
  );
}

function Product({ id, title, price, rating, imageUrl }) {
  const [, dispatch] = useStateValue();

  const addTobasket = () => {
    dispatch({
      type: "ADD_TO_BASKET",
      item: {
        id,
        title,
        price,
        rating,
        imageUrl,
      },
    });
  };
  return (
    <div className="product">
      <Card className="product__card">
        <Image className="product__image" centered src={imageUrl} />
        <Card.Content>
          <Card.Header className="product__title">{title}</Card.Header>
          <Card.Meta>
            <Rating icon="star" defaultRating={rating} maxRating={5} />
          </Card.Meta>
          <Card.Description>
            <span className="product__price">${price}</span>
          </Card.Description>
        </Card.Content>
        <Card.Content extra className="product__footer">
          <Button inverted className="product__button" onClick={addTobasket}>
            ADD TO BASKET
          </Button>
        </Card.Content>
      </Card>
    </div>
  );
}

render() {
    const {
      messageBgColor,
      messageHeader,
      messageContent,
      buttonContent,
      redirect,
      iconName,
      loading
    } = this.state;

    const { eligible, voter } = this.props;
    if (redirect) {
      return eligible ? <Vote voter={voter} /> : <Results />;
    }

    return (
      <GridContainer verticalAlign="middle" centered columns={1}>
        <Grid.Column width={5}>
          <Image size="huge" src={AdaBotHeadImage} alt="Ada Bot Head" />
          <Progress color="blue" percent={50}></Progress>
          <Message size="massive" color={messageBgColor} icon>
            <Icon name={iconName} loading={loading} />
            <Message.Content>
              <Message.Header>{messageHeader}</Message.Header>
              {messageContent}
            </Message.Content>
          </Message>
          {!loading && (
            <Button
              onClick={this.handleButtonClick}
              fluid
              color="blue"
              size="massive"
            >
              {buttonContent}
            </Button>
          )}
        </Grid.Column>
      </GridContainer>
    );
  }

render() {
		return (
			<div className="mleft">
				<h2 className="gophie-page-title mtop">Trending Movies</h2>
				<Style.TrendingMainCarousel
					responsive={responsive}
					deviceType={this.props.deviceType}
					keyBoardControl={true}
					infinite={true}
					ssr={true}
					autoPlay={this.props.deviceType !== 'mobile' ? true : false}
					transitionDuration={800}
					containerClass="carousel-container"
				>
					{this.state.trending.map((trendingMovie) => {
						if (trendingMovie.name.endsWith('Tags')) {
							trendingMovie.name = trendingMovie.name.substr(0, trendingMovie.name.length - 4);
						}

						return (
							<div key={trendingMovie.referral_id} className="trending-carousal-image__container">
								<p className="movie-size" style={{transform: 'translate(0px)'}}>{trendingMovie.size}</p>
								<Image
									className="img-fluid trending-carousal-image"
									onKeyDown={() => {
										this.openModal(trendingMovie.referral_id);
									}}
									onClick={() => {
										this.openModal(trendingMovie.referral_id);
									}}
									alt={trendingMovie.name}
									onError={(e) => (
										// eslint-disable-next-line
										(e.target.onerror = null),
										(e.target.src =
											'https://raw.githubusercontent.com/Go-phie/gophie-web/master/public/no-pic.png')
									)}
									src={
										trendingMovie.cover_photo_link
											? trendingMovie.cover_photo_link
											: 'https://raw.githubusercontent.com/Go-phie/gophie-web/master/public/no-pic.png'
									}
								/>
								<div className="carousal-image-detail">
									<p>{trendingMovie.name}</p>
								</div>
								{this.state.showMovieSidebar[trendingMovie.referral_id] ? (
									<MovieSidebar
										toggle={() => this.openModal(trendingMovie.referral_id)}
										movie={trendingMovie}
										shareMovie={this.props.shareMovie}
									/>
								) : null}
							</div>
						);
					})}
				</Style.TrendingMainCarousel>
				{!this.state.isLoading ? null : (
					<Style.TrendingLoaderContainer className="w-100 d-flex">
						<CarouselSkeletonLoader />
						<CarouselSkeletonLoader />
						<CarouselSkeletonLoader />
						<CarouselSkeletonLoader />
					</Style.TrendingLoaderContainer>
				)}

				{!this.state.error ? null : (
					<div className="error">
						<p className="error-text">
							<NetworkIcon />
							<p>Try Again</p>
						</p>
					</div>
				)}
			</div>
		);
	}

render() {
    const teamID = this.props.team._id;
    const teamChallenges = _.map(TeamChallenges.find({ teamID }).fetch(),
    (tc) => Challenges.findDoc(tc.challengeID).title);
    const teamSkills = _.map(TeamSkills.find({ teamID }).fetch(), (ts) => Skills.findDoc(ts.skillID).name);
    const teamTools = _.map(TeamTools.find({ teamID }).fetch(), (tt) => Tools.findDoc(tt.toolID).name);
    return (
        <Item style={{ padding: '0rem 2rem 0rem 2rem' }}>
          <Item.Content>
            <Item.Header>
              <Header as={'h3'} style={{ color: '#263763', paddingTop: '2rem' }}>
                <Icon name='users' size='tiny' />
                {this.props.team.name}
              </Header>
            </Item.Header>
            <Item.Meta>
              <Grid columns='equal'>
                <Grid.Column>
                  GitHub: {this.props.team.gitHubRepo}<br />
                  DevPost: {this.props.team.devPostPage}
                  <Image src={this.props.team.image} rounded size='large' />
                </Grid.Column>
                <Grid.Column>
                  <Header>Challenges</Header>
                  <List>
                    {teamChallenges.map((skill) => <List.Item key={skill}>{skill}</List.Item>)}
                  </List>
                </Grid.Column>
                <Grid.Column>
                  <Header>Skills</Header>
                  <List>
                    {teamSkills.map((skill) => <List.Item key={skill}>{skill}</List.Item>)}
                  </List>
                </Grid.Column>
                <Grid.Column>
                  <Header>Tools</Header>
                  <List>
                    {teamTools.map((skill) => <List.Item key={skill}>{skill}</List.Item>)}
                  </List>
                </Grid.Column>
                <Grid.Column>
                  <Header>Members</Header>
                  {this.props.teamParticipants.map((participant) => <p key={participant}>
                    {participant.firstName} {participant.lastName}</p>)}
                </Grid.Column>
              </Grid>
            </Item.Meta>
          </Item.Content>
        </Item>
    );
  }

ImageUpload = ({
  file,
  close,
  onSubmit,
  crop = false,
  header = 'Send This Image?',
}) => {
  const [imageSrc, setImageSrc] = useState('');
  const cropRef = useRef();

  // Use the File Reader API to
  // read the file and set the source
  useEffect(() => {
    const fr = new FileReader();
    fr.onload = () => setImageSrc(fr.result);
    fr.readAsDataURL(file);
  }, [file]);

  return (
    <Modal dimmer="blurring" open={true}>
      <Modal.Header>{header}</Modal.Header>

      <Modal.Content image>
        {crop ? (
          <AvatarEditor
            ref={cropRef}
            width={200}
            height={200}
            border={50}
            image={imageSrc}
          />
        ) : (
          <Image size="medium" src={imageSrc} alt="preview" />
        )}
      </Modal.Content>

      <Modal.Actions>
        <div className="image-upload-actions">
          <button className="cancel" onClick={close}>
            Cancel
          </button>
          <button
            className="submit"
            onClick={() => {
              if (crop && cropRef) {
                const canvas = cropRef.current
                  .getImageScaledToCanvas()
                  .toDataURL();
                fetch(canvas)
                  .then(res => res.blob())
                  .then(blob => onSubmit(blob));
              } else {
                onSubmit();
              }
            }}
          >
            Upload
          </button>
        </div>
      </Modal.Actions>
    </Modal>
  );
}

render() {
    const processingMessage=(x)=>{
      return x.message.indexOf('data:image')=== 0?
        <Image src={x.message}/>
        :<Message
          color={x.sendBy === this.props.clientId? 'green':'orange' }>

          { (x.message.indexOf('text/csv') > -1 || x.message.indexOf('octet-stream') > -1 || x.message.indexOf('data:application') > -1 )?
          <a href={x.message} target="_blank" download={x.filename}><Icon name='download' /> {x.filename}</a>
          :x.message}
        </Message>
    }
    console.log('chat')
    return (
      <div>
        <div className='chat_history'>
          {this.props.messages.map(x=> {
            console.log(x);
            return <div className={x.sendBy === this.props.clientId? 'message_me':'message_other' }>
            {
              processingMessage(x)
            }
            <span color='grey'>{moment(x.timestamp).fromNow()}</span>
            </div>
          })
          }
        </div>
        <div>
          <Input type='text' placeholder='...' action>
            <input onChange={this.props.onMessageChange} value={this.props.message}/>
            <Button color='facebook' type='submit'  onClick={this.props.onSubmit}>
            <Icon name='rocketchat' />

            Chat
          </Button>

          </Input>
          <div className="ui middle aligned aligned grid container upload_files">
            <div className="ui fluid segment">
            <input type="file" onChange={ (e) => this.props.fileEvent(e.target.files) } className="inputfile" id="embedpollfileinput" />

            <label for="embedpollfileinput" className="ui green right floated button">
              <i className="ui upload icon"></i>
              Upload image
            </label>

            </div>

          </div>
        </div>
      </div>

    );
  }

Message = props => (
  <List.Item className={ props.className }>
    <Image avatar src={ props.image } />
    <List.Content className='message-text' >
      { props.text }
    </List.Content>
  </List.Item>
)

render() {
    const { newUsers, username } = this.props;

    const users = newUsers.users.map((user) => {
      return (
        <List.Item key={user._id}>
          <Image
            avatar
            src={`/images/profile-picture/100x100/${user.profilePicture}`}
          />
          <List.Content>
            <List.Header
              as={Link}
              to={user.username === username ? "/profile" : "/" + user.username}
            >
              {user.username}
            </List.Header>

            <span style={{ color: "#757575" }}>
              joined {dayjs(user.date).fromNow()}
            </span>
          </List.Content>
        </List.Item>
      );
    });
    return (
      <Fragment>
        <List size="big">
          {newUsers.fetching ? (
            <Dimmer active>
              <Loader />
            </Dimmer>
          ) : null}
          {
            <List.Item>
              <List.Content>
                <List.Header> all users: {newUsers.usersCount}</List.Header>
              </List.Content>
            </List.Item>
          }
          {users}
          {newUsers.usersCount - newUsers.users.length !== 0 ? (
            <Button
              fluid
              loading={newUsers.fetchingNewUsers}
              onClick={() => this.fetchMoreUsers()}
            >
              More users
            </Button>
          ) : null}
        </List>
      </Fragment>
    );
  }

export default function AccountSelector (props) {
  const { api, keyring } = useSubstrate();
  const { setAccountAddress } = props;
  const [accountSelected, setAccountSelected] = useState('');

  // Get the list of accounts we possess the private key for
  const keyringOptions = keyring.getPairs().map(account => ({
    key: account.address,
    value: account.address,
    text: account.meta.name.toUpperCase(),
    icon: 'user'
  }));

  const initialAddress =
    keyringOptions.length > 0 ? keyringOptions[0].value : '';

  // Set the initial address
  useEffect(() => {
    setAccountSelected(initialAddress);
    setAccountAddress(initialAddress);
  }, [setAccountAddress, initialAddress]);

  const onChange = address => {
    // Update state with new account address
    setAccountAddress(address);
    setAccountSelected(address);
  };

  return (
    <Menu
      attached='top'
      tabular
      style={{
        backgroundColor: '#fff',
        borderColor: '#fff',
        paddingTop: '1em',
        paddingBottom: '1em'
      }}
    >
      <Container>
        <Menu.Menu>
          <Image src='Substrate-Logo.png' size='mini' />
        </Menu.Menu>
        <Menu.Menu position='right'>
          <Icon
            name='users'
            size='large'
            circular
            color={accountSelected ? 'green' : 'red'}
          />
          <Dropdown
            search
            selection
            clearable
            placeholder='Select an account'
            options={keyringOptions}
            onChange={(_, dropdown) => { onChange(dropdown.value); }}
            value={accountSelected}
          />
          {api.query.balances && api.query.balances.freeBalance
            ? <BalanceAnnotation accountSelected={accountSelected} />
            : null}
        </Menu.Menu>
      </Container>
    </Menu>
  );
}

ImageContainer = styled(Image)`
  width: 600px;
  height: 600px;
  align-self: center;
`

render() {
    const { answeringModal } = this.props;
    const { hasMedia } = this.state;
    return (
      <Fragment>
        <Modal open={answeringModal.isOpen}>
          <Modal.Content image>
            {!hasMedia ? (
              <Image
                wrapped
                size="medium"
                src={
                  "http://localhost:5000/images/profile-picture/" +
                  answeringModal.caller.profilePicture
                }
              />
            ) : null}
            <Modal.Description>
              <video
                style={{
                  width: 300,
                  height: "auto"
                }}
                ref={ref => {
                  this.myVideo = ref;
                }}
              ></video>
              <video
                style={{
                  width: 300,
                  height: "auto"
                }}
                ref={ref => {
                  this.userVideo = ref;
                }}
              ></video>
            </Modal.Description>
          </Modal.Content>
          <Modal.Actions>
            <Button negative onClick={this.handleClose}>
              Decline
            </Button>
            <Button onClick={this.handeAnswer} positive content="Answer" />
          </Modal.Actions>
        </Modal>
      </Fragment>
    );
  }

ChatAvatar = ({ file, close, onSubmit, crop = false, username, userstatus }) => {

  const [imageSrc, setImageSrc] = useState("");
  const cropRef = useRef();
  const newUsername = useState(username);
  const newStatus = useState(userstatus);

  useEffect(() => {
    const fr = new FileReader();
    fr.onload = () => setImageSrc(fr.result);
    fr.readAsDataURL(file);
  }, [file]);

  return (
    <div className="chat-new-avatar">
      {crop ? (
        <AvatarEditor
          ref={cropRef}
          width={100}
          height={100}
          border={40}
          borderRadius={50}
          image={imageSrc}
        />
      ) : (
        <Image size="medium" src={imageSrc} alt="preview" />
      )}
              
      <div className="image-upload-actions">
        <button className="cancel" onClick={close}>
          Cancel
        </button>
        <button
          className="submit"
          onClick={() => {
            if (crop && cropRef) {
              const canvas = cropRef.current
                .getImageScaledToCanvas()
                .toDataURL();
              fetch(canvas)
                .then((res) => res.blob())
                .then((blob) => onSubmit(blob, newUsername, newStatus));
            } else {
              onSubmit();
            }
          }}
        >
          Upload
        </button>
      </div>
    </div>
  );
}

//List => Panel => ItemView

export default function PostList(props) {
  const headline = props.headline ? props.headline : "All Posts";

  return (
    <div>
      <Header as="h1" icon>
        <Header.Content>
          {headline}{" "}
          {props.tagData && (
            <span>
              {" "}
              In <i>{props.tagData.name}</i>
            </span>
          )}
        </Header.Content>
      </Header>
      {props.posts.length < 1 && <p>Not Records Found!</p>}
      <Item.Group divided>
        {props.posts &&
          props.posts.map((item) => {
            let author = "Admin";
            if (item.author) {
              author = item.author.firstName + " " + item.author.lastName;
            }
            return (
              <Item key={item._id}>
                <div className="image">
                  <Link href={`/blog/[slug]`} as={`/blog/${item.slug}`}>
                    <a>
                      <Image alt={item.title} src={item.image} />
                    </a>
                  </Link>
                </div>

                <Item.Content>
                  <Item.Header>
                    <Link href={`/blog/[slug]`} as={`/blog/${item.slug}`}>
                      <a>{item.title}</a>
                    </Link>
                  </Item.Header>
                  <Item.Meta>
                    <span className="cinema">
                      {author} | <TimeAgo date={item.createdAt} />
                    </span>
                  </Item.Meta>
                  <Item.Description>{item.summary}</Item.Description>
                  <Item.Extra>
                    {item.tags.map((tag) => (
                      <Link
                        passHref
                        key={tag}
                        href={`/blog/tags/[slug]`}
                        as={`/blog/tags/${tag}`}
                      >
                        <Label as="a">{tag}</Label>
                      </Link>
                    ))}
                  </Item.Extra>
                </Item.Content>
              </Item>
            );
          })}
      </Item.Group>
      {props.showLoadMore && !props.isLoading && (
        <Segment textAlign="center">
          <Button color="blue" onClick={props.loadMore}>
            Load More
          </Button>
        </Segment>
      )}
    </div>
  );
}

export default function Detail(props) {
  const context = useContext(Context);
  const { currency, getCurrency } = context;

  if (currency === null) {
    getCurrency();
  }

  console.log(currency + " " + parseFloat(currency));
  const cop = 1 * parseFloat(props.product.price);

  return (
    <Modal trigger={<Button fluid>Show product</Button>}>
      <Modal.Content>
        <Grid>
          <Grid.Row>
            <Grid.Column>
              <Image src={props.product.picture1} />
            </Grid.Column>
          </Grid.Row>
          <Grid.Row columns={2}>
            <Grid.Column>
              <Image src={props.product.picture2} />
            </Grid.Column>
            <Grid.Column>
              <Image src={props.product.picture3} />
            </Grid.Column>
          </Grid.Row>
        </Grid>
        <br />
        <Form>
          <Form.Input name="name" label="Name" value={props.product.name} />
          <Form.Input
            name="description"
            label="Description"
            value={props.product.description}
          />
          <Form.Group widths="equal">
            <Form.Input
              name="price"
              label="Price (USD)"
              value={"$" + props.product.price}
            />
            <Form.Input name="price" label="Price (COP)" value={"$" + cop} />
          </Form.Group>
          <Form.Group widths="equal">
            <Form.Input
              name="category"
              label="Category"
              value={props.product.category_id}
            />
            <Form.Input
              name="weight"
              label="Weight"
              value={props.product.weight}
            />
          </Form.Group>
          <Button primary fluid>
            Comprar
          </Button>
        </Form>
      </Modal.Content>
    </Modal>
  );
}

DefaultView = ({ content, intl, location }) => {
  const blocksFieldname = getBlocksFieldname(content);
  const blocksLayoutFieldname = getBlocksLayoutFieldname(content);

  return hasBlocksData(content) ? (
    <div id="page-document" className="ui container">
      {map(content[blocksLayoutFieldname].items, (block) => {
        const Block =
          config.blocks.blocksConfig[
            content[blocksFieldname]?.[block]?.['@type']
          ]?.['view'] || null;
        return Block !== null ? (
          <Block
            key={block}
            id={block}
            properties={content}
            data={content[blocksFieldname][block]}
            path={getBaseUrl(location?.pathname || '')}
          />
        ) : (
          <div key={block}>
            {intl.formatMessage(messages.unknownBlock, {
              block: content[blocksFieldname]?.[block]?.['@type'],
            })}
          </div>
        );
      })}
    </div>
  ) : (
    <Container id="page-document">
      <h1 className="documentFirstHeading">{content.title}</h1>
      {content.description && (
        <p className="documentDescription">{content.description}</p>
      )}
      {content.image && (
        <Image
          className="document-image"
          src={content.image.scales.thumb.download}
          floated="right"
        />
      )}
      {content.remoteUrl && (
        <span>
          The link address is:
          <a href={content.remoteUrl}>{content.remoteUrl}</a>
        </span>
      )}
      {content.text?.data && (
        <div
          dangerouslySetInnerHTML={{
            __html: content.text.data,
          }}
        />
      )}
      {content.slate && <RichTextWidgetView value={content.slate} />}
    </Container>
  );
}

LoginLayout = ({
  hasError,
  errorHeader,
  errorMessage,
  backgroundImage,
  showLogo,
  ...props
}) => {
  return (
    <Overridable
      id="Login.layout"
      backgroundImage={backgroundImage}
      showLogo={showLogo}
      {...props}
    >
      <>
        <Notifications />
        <div className="frontsite">
          <Container
            fluid
            className="auth-page blur"
            style={{
              backgroundImage: backgroundImage
                ? `url(${backgroundImage})`
                : null,
            }}
          >
            <Container>
              <Container textAlign="center">
                <EnvironmentLabel pointing="below" classContext="login" />
              </Container>
              {showLogo && invenioConfig.APP.LOGO_SRC && (
                <Image src={invenioConfig.APP.LOGO_SRC} size="small" centered />
              )}
              <Segment
                className="background-transparent pb-default pt-default"
                color="orange"
              >
                <Grid
                  stretched
                  verticalAlign="middle"
                  textAlign="center"
                  centered
                  columns={2}
                  padded
                >
                  <Grid.Row>
                    <LeftCol />
                    <RightCol
                      hasError={hasError}
                      errorHeader={errorHeader}
                      errorMessage={errorMessage}
                    />
                  </Grid.Row>
                </Grid>
                <Link className="alternative" to={FrontSiteRoutes.home}>
                  <Icon name="home" />
                  Home page
                </Link>
              </Segment>
            </Container>
          </Container>
        </div>
      </>
    </Overridable>
  );
}

ImageResized = style(Image)`
  height: 500px;
  width: 100%;
  object-fit: cover;
`

ProfPic = styled(Image)`
  &&& {
    width: 100%;
    height: 134px;
  }
`

render() {
    let linkHide = this.props.link === undefined;
    let externalHide = this.props.externalLink === undefined;
    let detailsHide = this.props.detailsLink === undefined;
    let shareHide = this.props.shareIconName === undefined;
    return (
      <div>
        <Card className="claim_Card">
          <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css"
          />
          <Image className="ui medium image" src={this.props.image} />
          <Card.Content>
            <Card.Header>{this.props.header}</Card.Header>
            <Card.Meta>
              <span className="date">{this.props.date}</span>
            </Card.Meta>
            <Card.Description>{this.props.description}</Card.Description>
          </Card.Content>
          <Card.Content extra>
            <Router>
              <Link
                className={this.props.classLink}
                hidden={linkHide}
                to={this.props.link}
                onClick={this.props.action}
              >
                <Popup
                  trigger={<Icon name={this.props.iconName} />}
                  mouseEnterDelay={250}
                  content={this.props.popupContent}
                  position="bottom center"
                />
              </Link>
              <span className="spacespan" hidden={linkHide}>
                {" "}
              </span>
              <a
                className={this.props.externalClassName}
                hidden={externalHide}
                target="_blank"
                rel="noopener noreferrer"
                href={this.props.externalLink}
                onClick={this.props.externalAction}
              >
                <Popup
                  trigger={<Icon name={this.props.externalIconName} />}
                  mouseEnterDelay={250}
                  content={this.props.externalPopupContent}
                  position="bottom center"
                />
              </a>
              <span className="spacespan" hidden={externalHide}>
                {" "}
              </span>
              <Link
                className={this.props.detailsClassName}
                hidden={detailsHide}
                to={this.props.detailsLink}
                onClick={this.props.detailsAction}
              >
                <Popup
                  trigger={<Icon name={this.props.detailsIconName} />}
                  mouseEnterDelay={250}
                  content={this.props.detailsPopupContent}
                  position="bottom center"
                />
              </Link>
              <span className="spacespan" hidden={detailsHide}>
                {" "}
              </span>
              <Link
                className="linkRoute"
                hidden={shareHide}
                to="/shareroute"
                onClick={this.props.shareAction}
              >
                <Popup
                  trigger={<Icon name={this.props.shareIconName} />}
                  mouseEnterDelay={250}
                  content="Share the route with with friends"
                  position="bottom center"
                />
              </Link>
            </Router>
          </Card.Content>
        </Card>
      </div>
    );
  }