semantic-ui-react#Segment JavaScript Examples

render() {
    let fRef = null;
    const schema = this.buildTheFormSchema();
    const formSchema = new SimpleSchema2Bridge(schema);
    return (
        <Segment>
          <Header dividing> Add suggestion to list. </Header>
          <AutoForm ref={ref => {
            fRef = ref;
          }} schema={formSchema} onSubmit={data => this.submit(data, fRef)}>
            <Form.Group widths="equal">
              <SelectField name="type" />
            </Form.Group>
              <Form.Group widths="equal">
              <TextField name="name" />
              </Form.Group>
                <Form.Group widths="equal">
              <TextField name="description" />
            </Form.Group>
            <SubmitField />
          </AutoForm>
        </Segment>
    );
  }

function SubTotal() {
    const[{basket},] = useStateValue();
  return (
    <div>
      <Item>
        <Item.Content>
          <Segment raised>
            <Label color="orange" ribbon>
              Total Price
            </Label>
            <span className="subtotal__price">${getBasketTotal(basket)}</span>
          </Segment>
        </Item.Content>
      </Item>
    </div>
  );
}

render() {
        if (this.props.loading) {
            return <Loader/>;
        }
        return (
            <Segment>
                <Item>
                    {this.props.submitted ? (
                        <Item.Content>
                            <Item.Header as='h3'>{`The rule ID is: ${this.props.results.rule_id}`}</Item.Header>
                            <Item.Header as='h3'>{`The booking priority is: ${this.props.results.priority}`}</Item.Header>
                            <Item.Header as='h3'>{`Contrast: ${this.props.results.contrast}`}</Item.Header>
                            <Item.Header as='h3'>{`P5: ${this.props.results.p5_flag}`}</Item.Header>
                            {this.props.results.specialty_exams &&
                            <Item.Header as='h3'>{`Specialty exams needed: ${this.props.results.specialty_exams.join(', ').trim()}`}</Item.Header>}
                        </Item.Content>
                    ) : (
                        <Item.Header as='h3'>MRI booking results will be displayed here.</Item.Header>
                    )}
                </Item>
            </Segment>
        )
    }

ContactsLoader = ({ isDarkMode }) => {
  return (
    <div>
      {Array.from(new Array(3)).map((_, i) => (
        <Segment key={i} raised inverted={isDarkMode}>
          <Placeholder fluid inverted={isDarkMode}>
            <Placeholder.Header image>
              <Placeholder.Line />
              <Placeholder.Line />
            </Placeholder.Header>
            <Placeholder.Paragraph>
              <Placeholder.Line length="full" />
              <Placeholder.Line length="full" />
            </Placeholder.Paragraph>
            <Placeholder.Paragraph>
              <Placeholder.Line length="full" />
              <Placeholder.Line length="full" />
            </Placeholder.Paragraph>
            <Placeholder.Paragraph>
              <Placeholder.Line length="full" />
              <Placeholder.Line length="full" />
            </Placeholder.Paragraph>
          </Placeholder>
        </Segment>
      ))}
    </div>
  );
}

render() {
    return (
      <Grid columns={2} stackable>
        <Grid.Row stretched>
          <Grid.Column width={4}>
            <Segment><CCP /></Segment>
          </Grid.Column>
          <Grid.Column width={12}>
            <Segment><CCPDataMenu /></Segment>
          </Grid.Column>
        </Grid.Row>
        <AmplifySignOut />
      </Grid>
    );
  }

export default function ContactForm() {
  const name = useFormInput("");
  const email = useFormInput("");
  // eslint-disable-next-line no-unused-vars
  const [state, dispatch] = useContext(ContactContext);

  const onSubmit = () => {
    dispatch({
      type: "ADD_CONTACT",
      payload: { id: _.uniqueId(10), name: name.value, email: email.value }
    })
    // Reset Form
    name.onReset();
    email.onReset();
  };

  return (
    <Segment basic>
      <Form onSubmit={onSubmit}>
        <Form.Group widths="3">
          <Form.Field width={6}>
            <Input placeholder="Enter Name" {...name} required />
          </Form.Field>
          <Form.Field width={6}>
            <Input placeholder="Enter Email" {...email} type="email" required />
          </Form.Field>
          <Form.Field width={4}>
            <Button fluid primary>
              New Contact
            </Button>
          </Form.Field>
        </Form.Group>
      </Form>
    </Segment>
  );
}

Footer = () => (
  <Segment id="deniFooter" inverted vertical style={{ padding: "5em 0em" }}>
    <Container>
      <Grid divided inverted stackable>
        <Grid.Row>
          <Grid.Column width={3}>
            <Header inverted as="h4" content="About" />
            <List link inverted>
              <List.Item as="a">Sitemap</List.Item>
              <List.Item as="a">Contact Us</List.Item>
              <List.Item as="a">Religious Ceremonies</List.Item>
              <List.Item as="a">Gazebo Plans</List.Item>
            </List>
          </Grid.Column>
          <Grid.Column width={3}>
            <Header inverted as="h4" content="Services" />
            <List link inverted>
              <List.Item as="a">Banana Pre-Order</List.Item>
              <List.Item as="a">DNA FAQ</List.Item>
              <List.Item as="a">How To Access</List.Item>
              <List.Item as="a">Favorite X-Men</List.Item>
            </List>
          </Grid.Column>
          <Grid.Column width={7}>
            <Header as="h4" inverted>
              Footer Header
            </Header>
            <p>
              Extra space for a call to action inside the footer that could help
              re-engage users.
            </p>
          </Grid.Column>
        </Grid.Row>
      </Grid>
    </Container>
  </Segment>
)

ShortcutListing = (props) => {
  const hotkeys = config.settings?.slate?.hotkeys;
  return (
    <div>
      <header className="header">
        <h2>Editor shortcuts</h2>
      </header>

      <Segment secondary attached>
        <List>
          <List.Item>
            Type a slash (<em>/</em>) to change block type
          </List.Item>
          {Object.entries(hotkeys || {}).map(([shortcut, { format, type }]) => (
            <List.Item key={shortcut}>{`${shortcut}: ${format}`}</List.Item>
          ))}
        </List>
        <div>On Windows, the MOD key is Ctrl, on Mac OS X it's Cmd.</div>
      </Segment>
    </div>
  );
}

render() {
    const { title, stats, text, buttonLeft, buttonRight } = this.props;

    return (
      <Segment raised className="brief-card">
        <Header textAlign="right" as="h3">
          {title}
        </Header>
        <p>
          {' '}
          <span data-test={stats}>{stats}</span> {text}
        </p>
        <Grid>
          <Grid.Row columns="equal">
            {buttonLeft ? (
              <Grid.Column key="left">{buttonLeft}</Grid.Column>
            ) : null}
            {buttonRight ? (
              <Grid.Column key="right">{buttonRight}</Grid.Column>
            ) : null}
          </Grid.Row>
        </Grid>
      </Segment>
    );
  }

render() {
    const { fieldPath, label, labelIcon } = this.props;
    return (
      <Form.Field
        id={fieldPath}
        name={fieldPath}
      >
        <FieldLabel htmlFor={fieldPath} icon={labelIcon} label={label} />
        <Segment size="massive" tertiary textAlign="center">
          Coming soon
        </Segment>
      </Form.Field>
    );
  }

render () {
    const date = new Date()
    const year = date.getFullYear()
    return (
      <Segment attached className='app-footer-segment'>
        <div className='app-footer-container'>
          <span>
            <a
              href='https://internet.channeli.in/maintainer_site/'
              target='_blank'
              rel='noopener noreferrer'
            >
              {isBrowser ? 'Information Management Group' : 'IMG'}
            </a>
            {', '}
            <a
              href='https://iitr.ac.in/'
              target='_blank'
              rel='noopener noreferrer'
            >
              {isBrowser ? 'IIT Roorkee' : 'IITR'}
            </a>
            {'  '}
            <Icon fitted name='copyright outline' /> {year}
          </span>
          <span>
            Made with <Icon fitted name='heart' color='red' /> by{' '}
            <a
              href='https://internet.channeli.in/maintainer_site/team/nisarg73/'
              target='_blank'
              rel='noopener noreferrer'
            >
              nisarg73
            </a>
          </span>
        </div>
      </Segment>
    )
  }

render() {
    return (
      <Segment
        raised
        className={this.props.isMobile ? 'mailForm_mobile' : 'mailForm'}
      >
        <Form
          target="_blank"
          action="https://covid19webapp.us19.list-manage.com/subscribe/post?u=6df180a9a54cb559de205f0a1&amp;id=b0e6458aa3"
          method="post"
        >
          <Form.Input
            name="EMAIL"
            placeholder="[email protected] email for Subscription"
            onChange={this.handleChange}
          />

          <Button>Submit</Button>
        </Form>
      </Segment>
    );
  }

function LocationDataURLView({ __id }) {
  const locationUrlLoadable = useRecoilValueLoadable(locationURLFromId(__id));

  const locationUrl =
    locationUrlLoadable.state === 'hasValue'
      ? locationUrlLoadable.contents
      : null;

  console.log({ locationUrl });

  const isLoading = locationUrlLoadable.state === 'loading';

  return (
    <Segment>
      <Header as="h4">Location URL</Header>
      <Form loading={isLoading}>
        {locationUrl ? (
          <LocationDataURLViewChild __id={__id} locationUrl={locationUrl} />
        ) : null}
      </Form>
    </Segment>
  );
}

function Footer({ page = null }) {
  return (
    <FooterBox page={page}>
      <Container>
        <Segment.Group horizontal size="small">
          <Segment basic textAlign={page === 'main' ? 'center' : 'left'}>
            <Link to="https://pages.semanticscholar.org/coronavirus-research">
              COVID-19 Open Research Dataset (CORD-19)
            </Link>
            . 2020. Version 2020-08-23. Accessed 2020-08-23.{' '}
            <Link to="https://doi.org/10.5281/zenodo.3727291">
              doi:10.5281/zenodo.3727291
            </Link>
            <br />
            Copyright Yahoo Licensed under{' '}
            <Link to="https://github.com/vespa-engine/cord-19/blob/master/LICENSE">
              Apache License 2.0
            </Link>
          </Segment>
          {page !== 'main' && (
            <Segment className="sides" basic>
              <Link to="https://vespa.ai">
                <Image src={logo} />
              </Link>
            </Segment>
          )}
        </Segment.Group>
      </Container>
    </FooterBox>
  );
}

Age = ({ pageId, age }) => {
  return (
    <Segment>
      {
        // eslint-disable-next-line
        <a id='age' className='target'></a>
      }
      <Header>Confirmed cases by Age: </Header>
      {/* {age && age.length > 3 && <TotalAgeChart id={id} age={age} />} */}
      {age && age.length > 3 && <DailyAgeChart pageId={pageId} age={age} />}
      {age && age[0] && <AgeChart pageId={pageId} age={age} />}
      {pageId === 'NSW' && (
        <small>
          Data source: always up to date from{' '}
          <a href='https://data.nsw.gov.au/data/dataset/nsw-covid-19-cases-by-age-range'>
            NSW Health open data.
          </a>
        </small>
      )}
    </Segment>
  );
}

render() {
        console.log('render');
        return (
            <Segment>
                <Header as="h1">
                  Share you computer screen and let work on lab exercise together online!
                </Header>
                <img ref={this.imageView} style={{display: 'none' }} alt="Right click to save" />
                <video ref={this.screen} autoPlay style={{display: 'none' }}></video>
                <p>Status: {this.state.status}</p>
                <button disabled = {(!this.state.enableStartCapture)? "disabled" : ""} onClick={() => this._startCapturing()}>Start screen Sharing</button>
                <button disabled = {(!this.state.enableStopCapture)? "disabled" : ""} onClick={() => this._stopCapturing()}>Stop screen Sharing</button>
            </Segment>
        );
    }

// Render the form. Use Uniforms: https://github.com/vazco/uniforms
  render() {
    const formSchema = new SimpleSchema2Bridge(schema);
    const memberNamesAndGitHub = _.map(this.props.members, (p) => {
      const fullName = Participants.getFullName(p._id);
      const gitHub = p.gitHub;
      return `${fullName}, (${gitHub})`;
    });
    return (
        <Grid container centered>
          <Grid.Column>
            <div style={{
              backgroundColor: '#E5F0FE', padding: '1rem 0rem', margin: '2rem 0rem',
              borderRadius: '2rem',
            }}>
              <Header as="h2" textAlign="center">Edit Team</Header>
            </div>
            <AutoForm schema={formSchema} onSubmit={data => this.submit(data)} model={this.props.team}
                      style={{
                        paddingBottom: '4rem',
                      }}>
              <Segment style={{
                borderRadius: '1rem',
                backgroundColor: '#E5F0FE',
              }} className={'teamCreate'}>
                <Grid container centered>
                  <Grid.Column style={{ paddingLeft: '3rem', paddingRight: '3rem' }}>
                    <TextField name='name' disabled />
                    <LongTextField name='description' required/>
                    <Header as="h4">Team Members:</Header>
                    <List>
                      {memberNamesAndGitHub.map((n) => <List.Item key={n}>{n}</List.Item>)}
                    </List>
                    <TextField name='gitHubRepo' required/>
                  </Grid.Column>
                </Grid>
                <div align='center'>
                  <SubmitField value='Submit'
                               style={{
                                 color: 'white', backgroundColor: '#dd000a',
                                 margin: '2rem 0rem',
                               }}/>
                </div>
                <ErrorsField/>
              </Segment>
            </AutoForm>
          </Grid.Column>
        </Grid>
    );
  }

function Home() {
  const [product, setProduct] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    db.collection("Products").onSnapshot((snapshot) => {
      setProduct(snapshot.docs.map((doc) => doc.data()));
      setLoading(false);
    });
  }, [setProduct]);
  console.log(product);

  return (
    <div className="home">
      {loading ? (
        <Segment className="home__segment">
          <Dimmer active inverted>
            <Loader size="large" className="home__loaderMessage">
              Loading...
            </Loader>
          </Dimmer>
        </Segment>
      ) : (
        <Container>
          <Grid container columns={4} doubling stackable>
            {product.map((product, index) => {
              return (
                <Grid.Column stretched key={index}>
                  <Product
                    id={product.id}
                    key={product.id}
                    title={product.title}
                    price={product.price}
                    rating={product.rating}
                    imageUrl={product.imageUrl}
                  ></Product>
                </Grid.Column>
              );
            })}
          </Grid>
        </Container>
      )}
    </div>
  );
}

render() {
        return (
            <Grid textAlign='center' style={{ height: '100vh' }} verticalAlign='middle'>
                <Grid.Column style={{ maxWidth: 400 }}>
                    <Segment>
                        <Header as='h2' color='blue' textAlign='center'>
                            Forgot Your Password?
                        </Header>
                        <Form onSubmit={this.handleSubmit} ref="form">
                            <Grid.Row>
                                <Input width={'100%'}
                                       type="text"
                                       name="email"
                                       placeholder="Enter your email address"
                                       onChange={this.handleChange}
                                       value={this.state.email}
                                       validators={['required']}
                                       errorMessages={['This field is required']}/>
                            </Grid.Row>
                            <Grid.Row>
                                <NavLink to="/login" style={{
                                    display: 'inline-block',
                                    padding: '4px 0 4px 0',
                                }}>Back to Login</NavLink>
                            </Grid.Row>
                            <Grid.Row>
                                <Button
                                    fluid
                                    content='Confirm Request'
                                    color="blue"
                                    disabled={!this.state.email}
                                />
                            </Grid.Row>
                        </Form>
                    </Segment>
                    { !!this.state.error &&
                    <Message negative>
                        <p>{this.state.error}</p>
                    </Message>}
                </Grid.Column>
            </Grid>);
    }

StyledSegment = style(Segment)`
  float: right;  
  width: 70% !important; 
  margin-bottom: 100px !important;
  margin-right: 60px !important;
`

Home = () => {
  const history = useHistory();
  const [profile, setProfile] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    getUserData()
      .then(response => {
        setProfile(response);
        setLoading(false);
      })
      .catch(e => {
        console.log(e.message);
        setProfile(false);
        setLoading(false);
      });
  }, []);

  const common = (
    <Segment textAlign={"center"}>
      <h2>
        Welcome to CRUD w/ <a href="https://appwrite.io/">Appwrite</a> Tutorial
      </h2>
    </Segment>
  );

  if (profile && loading === false) {
    console.log(profile);
    return (
      <div>
        {common}
        <Grid>
          <Grid.Row columns={3}>
            <Grid.Column />
            <Grid.Column>
              <Segment>
                <Grid verticalAlign={"middle"}>
                  <Grid.Row columns={2}>
                    <Grid.Column computer={12} textAlign={"left"}>
                      <h3>
                        Go to <Link to={"/users"}>User Dashboard</Link>
                      </h3>
                    </Grid.Column>
                    <Grid.Column computer={4}>
                      <Button
                        floated={"right"}
                        primary
                        onClick={() => logout(history)}
                      >
                        Logout
                      </Button>
                    </Grid.Column>
                  </Grid.Row>
                </Grid>
              </Segment>
            </Grid.Column>
            <Grid.Column />
          </Grid.Row>
        </Grid>
      </div>
    );
  } else if (profile === false && loading === false) {
    return (
      <div>
        {common}
        <Segment textAlign={"center"}>
          To start please <Link to={"/login"}>Login</Link>
        </Segment>
      </div>
    );
  } else {
    return <Spinner />;
  }
}

export default function ContactTable() {
  // Subscribe to `contacts` state and access dispatch function
  const [state, dispatch] = useContext(ContactContext);
  // Declare a local state to be used internally by this component
  const [selectedId, setSelectedId] = useState();

  const delContact = id => {
    dispatch({
      type: "DEL_CONTACT",
      payload: id
    });
  };

  const onRemoveUser = () => {
    delContact(selectedId);
    setSelectedId(null); // Clear selection
  };

  const rows = state.contacts.map(contact => (
    <Table.Row
      key={contact.id}
      onClick={() => setSelectedId(contact.id)}
      active={contact.id === selectedId}
    >
      <Table.Cell>{contact.id}</Table.Cell>
      <Table.Cell>{contact.name}</Table.Cell>
      <Table.Cell>{contact.email}</Table.Cell>
    </Table.Row>
  ));

  return (
    <Segment>
      <Table celled striped selectable>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell>Id</Table.HeaderCell>
            <Table.HeaderCell>Name</Table.HeaderCell>
            <Table.HeaderCell>Email</Table.HeaderCell>
          </Table.Row>
        </Table.Header>
        <Table.Body>{rows}</Table.Body>
        <Table.Footer fullWidth>
          <Table.Row>
            <Table.HeaderCell />
            <Table.HeaderCell colSpan="4">
              <Button
                floated="right"
                icon
                labelPosition="left"
                color="red"
                size="small"
                disabled={!selectedId}
                onClick={onRemoveUser}
              >
                <Icon name="trash" /> Remove User
              </Button>
            </Table.HeaderCell>
          </Table.Row>
        </Table.Footer>
      </Table>
    </Segment>
  );
}

//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 Categories() {
  const context = useContext(Context);
  const { user, categories, getCategories } = context;

  const [currentPage, setCurrentPage] = useState(1);
  const [cardsPerPage, setCardsPerPage] = useState(9);

  useEffect(() => {
    getCategories();
  }, []);

  // Get current categories
  const indexOfLastCategory = currentPage * cardsPerPage;
  const indexOfFirstCategory = indexOfLastCategory - cardsPerPage;
  const currentCategories = categories.slice(
    indexOfFirstCategory,
    indexOfLastCategory
  );

  const views =
    categories.length > 0 ? (
      currentCategories.map(category => <Category category={category} />)
    ) : (
      <Card>
        <Card.Content>
          <h2>Nothing here!</h2>
        </Card.Content>
      </Card>
    );

  const paginate = pageNumber => setCurrentPage(pageNumber);

  const pagination =
    categories.length > cardsPerPage ? (
      <Pagination
        cardsPerPage={cardsPerPage}
        totalCards={categories.length}
        paginate={paginate}
      />
    ) : null;

  const add = user ? user.admin ? <AddCategoryForm /> : null : null;

  return (
    <div>
      <Segment>
        <Grid>
          <Grid.Column floated="left" width={5}>
            <h1>Recent Categories</h1>
          </Grid.Column>
          <Grid.Column floated="right" width={5}>
            {add}
          </Grid.Column>
        </Grid>
      </Segment>
      <Card.Group fluid itemsPerRow="3">
        {views}
      </Card.Group>
      <br />
      <center>{pagination}</center>
    </div>
  );
}

MarkdownIntroduction = (props) => {
  return (
    <div>
      <header className="header">
        <h2>Markdown shortcuts</h2>
      </header>

      <Segment secondary attached style={{ fontFamily: 'monospace' }}>
        <List>
          <List.Item key={1} style={{ fontSize: 'xx-large' }}>
            # Title
          </List.Item>
          <List.Item key={2} style={{ fontSize: 'x-large' }}>
            ## Subtitle
          </List.Item>

          <List.Item key={3} style={{ paddingTop: '1rem' }}>
            * unordered list item
          </List.Item>
          <List.Item key={4}>+ unordered list item</List.Item>
          <List.Item key={5}>- unordered list item</List.Item>

          <List.Item key={6} style={{ paddingTop: '1rem' }}>
            1. ordered list item
          </List.Item>
          <List.Item key={7}>1) ordered list item</List.Item>

          <List.Item key={8} className="callout">
            &gt; block quote
          </List.Item>
          <List.Item key={9} style={{ fontWeight: 'bold' }}>
            **bold text**
          </List.Item>
          <List.Item key={10} style={{ fontWeight: 'bold' }}>
            __bold text__
          </List.Item>
          <List.Item key={11} style={{ fontStyle: 'italic' }}>
            *italic text*
          </List.Item>
          <List.Item key={12} style={{ fontStyle: 'italic' }}>
            _italic text_
          </List.Item>
          <List.Item key={13} style={{ textDecoration: 'line-through' }}>
            ~~strikethrough text~~
          </List.Item>
        </List>
      </Segment>
    </div>
  );
}

render () {
    const { name, keywords, enabled, stats } = this.props;
    return (
      <div>

        <Container textAlign='center'>
          <Button floated='left' circular icon='cog' onClick={this.onSettings} />
          <Button floated='right' circular icon='sign out' onClick={this.onLogout} />
          <Checkbox toggle disabled={!keywords} defaultChecked={Boolean(enabled)} onChange={this.onCheck} />
        </Container>

        <Segment textAlign='center'>

          {!name && !keywords &&
          <Placeholder fluid>
            <Placeholder.Line />
            <Placeholder.Line />
            <Placeholder.Line />
            <Placeholder.Line />
          </Placeholder>
          }

          {name &&
          <Header as='h4'>
            <Icon name='user' />{name}
          </Header>
          }

          {keywords && keywords.map((v, i) =>
            <Label color='red' tag>
              {v}
              {stats &&
                <Label.Detail>{stats[i]}</Label.Detail>
              }
            </Label>
          )}
        
        </Segment>

      </div>
    );
  }