react-bootstrap#Card JavaScript Examples

The following examples show how to use react-bootstrap#Card. 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: Book.js    From mern_library_nginx with MIT License 6 votes vote down vote up
Book = ({ book, deleteHandler }) => {
   return (
      <Card className="my-3 p-3 rounded">
         <Card.Body>
            <Link to={`/books/${book._id}`}>
               <Card.Title as="div">
                  <strong>{book.title}</strong>
               </Card.Title>
            </Link>
            <Card.Subtitle className="mb-2 text-muted">
               {book.subtitle}
            </Card.Subtitle>
            <Card.Text>{book.description}</Card.Text>
            <Card.Text as="h6">ISBN {book.isbn}</Card.Text>
            <Button variant="primary">{book.author}</Button>
            <Button variant="danger" onClick={() => deleteHandler(book._id)}>
               <i className="fas fa-trash"></i>
            </Button>
         </Card.Body>
      </Card>
   );
}
Example #2
Source File: Notification.js    From viade_en1b with MIT License 6 votes vote down vote up
export function Notification(props) {
  const { notification } = props;

  return (
    <Card
      data-testid="notification-card"
      className="notification"
      onClick={() => {}}
    >
      <Card.Body className="notificationCardBody">
        <Card.Text data-testid="notification-card-text" className="notificationText">{notification.text}</Card.Text>
      </Card.Body>
    </Card>
  );
}
Example #3
Source File: Panel.jsx    From ashteki with GNU Affero General Public License v3.0 6 votes vote down vote up
Panel = ({ type = PanelType.Primary, title, titleClass, children }) => {
    /** @type {PanelType} */
    let retType;

    switch (type) {
        case PanelType.Primary:
            retType = 'primary';
            break;
        case PanelType.Default:
            retType = 'secondary';
            break;
        case PanelType.Info:
            retType = 'info';
            break;
        case PanelType.Warning:
            retType = 'warning';
            break;
        case PanelType.Danger:
            retType = 'danger';
            break;
        default:
            retType = 'border';
            break;
    }

    return (
        <Card border={retType} bg='dark'>
            {title && <Card.Header className={`${titleClass} text-center`}>{title}</Card.Header>}
            <Card.Body>{children}</Card.Body>
        </Card>
    );
}
Example #4
Source File: PatientPage.js    From SaraAlert with Apache License 2.0 6 votes vote down vote up
render() {
    return (
      <React.Fragment>
        <Card className="mx-2 card-square">
          <Card.Header
            as="h5"
            id="patient-info-header"
            onClick={() => {
              this.setState({ hideBody: !this.state.hideBody });
            }}>
            Monitoree Details {this.props.patient.user_defined_id ? `(ID: ${this.props.patient.user_defined_id})` : ''}{' '}
            {this.props.patient.id && <a href={window.BASE_PATH + '/patients/' + this.props.patient.id + '/edit'}>(edit details)</a>}
            <span className="float-right collapse-hover">
              <i className="fas fa-bars"></i>
            </span>
          </Card.Header>
          <Card.Body>
            <Patient
              details={{ ...this.props.patient }}
              jurisdictionPath={this.props.jurisdictionPath}
              groupMembers={this.props.group_members || []}
              hideBody={this.state.hideBody}
            />
          </Card.Body>
        </Card>
      </React.Fragment>
    );
  }
Example #5
Source File: Page404.js    From create-sas-app with Apache License 2.0 6 votes vote down vote up
render() {
		return (
			<div className="app flex-row align-items-center">
				<Card>
					<Row className="justify-content-center">
						<Col md="6">
							<div className="clearfix">
								<h1 className="float-left display-3 mr-4">404</h1>
								<h4 className="pt-3">Oops! You're lost.</h4>
								<p className="text-muted float-left">The page you are looking for was not found.</p>
								<Button className={'mb-4'} color="info" onClick={() => {
									this.props.history.push('/')
								}}>Get back on the right path</Button>
							</div>

						</Col>
					</Row>
				</Card>
			</div>
		);
	}
Example #6
Source File: NoticePlacementmore.js    From GB-GCGC with MIT License 6 votes vote down vote up
render() {
    return (
      <div>
        <Card>
          <Card.Body>
            <Card.Title>
              <h5 align="center">Notice Board-Placements</h5>
            </Card.Title>
            &nbsp;
            <div>
              <Table size="sm" responsive striped>
                <thead className="p-3" style={{backgroundColor:'#2A324B',color:'white',fontSize:'24px'}}>
                  <tr>
                    <th>S.No</th>
                    <th>Name of the Programme</th>
                    <th>Date</th>
                    <th>CTC</th>
                  </tr>
                </thead>
                <tbody>
                {this.state.train.map((item =>
                      <tr>
                        <td>{this.state.train.indexOf(item)+1}</td>
                        <td>{item.Company_name}</td>
                        <td>{item.Date}</td>
                        <td>{item.CTC}</td>
                        </tr>
                        ))}
                </tbody>
              </Table>
            </div>
          </Card.Body>
        </Card>
      </div>
    );
  }
Example #7
Source File: ipfs.js    From RC4Community with Apache License 2.0 6 votes vote down vote up
PreviewImage = ({ srcUrl }) => {
  return (
    <Card style={{ width: "18rem" }}>
      <Card.Img variant="top" src={srcUrl} />
      <Card.Body>
        <Card.Title>Image Preview</Card.Title>
        <Button href={srcUrl} target="_blank" variant="primary">
          Visit on IPFS
        </Button>
      </Card.Body>
    </Card>
  );
}
Example #8
Source File: Genre.js    From Anime-Tracker-Web-App with MIT License 6 votes vote down vote up
Genre = () => {
  let history = useHistory();
  return (
    <div className={styles.gridContainer}>
      {genres.map((genre, i) => (
        <div key={i}>
          <Card className={styles.genreCard}>
            <Card.Body>
              <Card.Title
                className={styles.gridItem}
                onClick={(event) => {
                  event.preventDefault();
                  const genreID = ++i;
                  history.push({
                    pathname: `/anime/genre/${genre}`,
                    state: {
                      genreID: genreID,
                    },
                  });
                  window.location = `/anime/genre/${genre}`;
                }}
              >
                {genre}
              </Card.Title>
            </Card.Body>
          </Card>
        </div>
      ))}
    </div>
  );
}
Example #9
Source File: information.js    From LearningJAMStack_Gatsby with MIT License 6 votes vote down vote up
InformationPage = ({ data }) => (
  <Layout>
    <SEO title="インフォメーション" />
    <Row>
      <Col className="space"></Col>
    </Row>
    <Row>
      <Col className="title-obi">
        <h1 className="h1-font">インフォメーション</h1>
      </Col>
    </Row>
    <Row>
      <Col className="space"></Col>
    </Row>
    <Row>
    {data.allMarkdownRemark.edges.map(({ node }) => (
          <Col xs={12} md={6} key={node.fields.slug}>
            <Card style={{marginTop:`1rem`}}>
              <Card.Body>
                <Card.Title>
                    <Link to={`/${node.fields.slug}`}>
                        {node.frontmatter.title}
                    </Link>
                </Card.Title>
                <Card.Text>
                    {node.excerpt}
                </Card.Text>
              </Card.Body>
            </Card>
          </Col>
    ))}
    </Row>
    <Row>
      <Col className="space"></Col>
    </Row>
  </Layout>
)
Example #10
Source File: Faq.js    From masakhane-web with MIT License 6 votes vote down vote up
export default function FAQPage() {
    return(
        <div>
            <Container className="my-4">
                <Card style={{ width: '100%' }}>
                    <Card.Body>
                        <Card.Title>FAQ</Card.Title>
                        {/* <Card.Subtitle className="mb-2 text-muted">Enter  subtitle here</Card.Subtitle> */}
                        <div>
                            <Card.Text style={{ fontSize: 16, color: 'black' }}>
                            1. I was not happy with the translation I got from the service.
                            </Card.Text>
                        </div>
                        <br />
                        <div>
                            <Card.Text style={{ fontSize: 14, color: 'grey' }}>
                            Thank you for trying this service. The Masakhane NLP Translation project built the models used to do the translation. 
                            This website provides a way for us to be able to test how well these models work. This service is still a work in progress and we expect the models to be improved every few months as we get more feedback from users such as yourself. 
                            Please do provide feedback by writing where there is a mistake in the translation so we can provide this information to the researchers. 
                            As such, this service is not a production system (should not be used for official translations).
                            </Card.Text>
                        </div>
                        <br />
                    </Card.Body>
                </Card>
            </Container>
        </div>
    )
}
Example #11
Source File: index.js    From Devhipster with MIT License 6 votes vote down vote up
function CardCourse({ title, description, icon, url, color }) {

  const history = useHistory();

  function handleClick() {
    history.push(url);
  }

  return (
    <Col md='4' style={{ padding: '15px' }} >
      <Card className={['dark', color, 'shadow'].join(' ')} bg="dark" text="white">
        <Card.Body className="text-white">
          <Card.Title className={color}>
            <h3>{title}</h3>
          </Card.Title>
          <Image fluid={true} src={icon} />
          <h5>{description}</h5>
          <Button
            onClick={handleClick}
            variant='dark'
          >
            <h5 style={{ margin: 0 }} >EM BREVE</h5>
          </Button>
        </Card.Body>
      </Card>
    </Col>
  );
}
Example #12
Source File: InactiveCard.jsx    From journey.io with MIT License 6 votes vote down vote up
InactiveCard = ({
  name,
  id,
  show,
  onClick,
  showDetails,
  toggleDetailsModal
}) => {
  return (
    <Card
      className="dashboardCard"
      style={{ width: '25rem', backgroundColor: '#CACACA' }}
    >
      <Card.Body>
        <Card.Title>{name}</Card.Title>
        <Card.Subtitle className="inactiveCard">Inactive</Card.Subtitle>
        <div className="buttons">
          <Button
            type="submit"
            variant="outline-info"
            onClick={() => {
              showDetails(id);
            }}
          >
            View Details
          </Button>
        </div>
        <Details
          show={show}
          campaign={name}
          id={id}
          toggleDetailsModal={toggleDetailsModal}
        />
      </Card.Body>
    </Card>
  );
}
Example #13
Source File: StatsCard.js    From caricovidsite with MIT License 6 votes vote down vote up
StatsCard  = ({totalActiveCases, totalCritical, totalDeaths, total}) => {

    const {t} = useTranslation();
    
    return (
      <div className="statsCard">
        <Card type="rounded-0" style={cardStyle}>
          <Card.Body className="div-only-mobile-cards">
            <Card.Text style={cardTextStyle}>
              {totalActiveCases && <div>
                {t("active_cases")}: <b>{totalActiveCases}</b>
              </div>}
              <div>
                {t("deaths")}: <b>{totalDeaths}</b>
              </div>
              {totalCritical && <div>
                {t("critical_condition")}: <b>{totalCritical}</b>
              </div>}
              <div>
                {t("confirmed_cases")}: <b>{total}</b>
              </div>
            </Card.Text>
          </Card.Body>
        </Card>
      </div>
    );
  }
Example #14
Source File: FollowCard.js    From tclone with MIT License 6 votes vote down vote up
function FollowCard(props) {
    let { isAuthenticated } = useSelector(state => state.auth)
    let footer = {
        href: "/explore/users"
    }
    let { className, ...rest } = props;
    return (
        <Card className={className}>
            <Card.Header>{props.title}</Card.Header>
            {isAuthenticated ?
                <Users length={props.length} {...rest} /> :
                <div className="message">Login to see users and their posts</div>
            }
            <Card.Footer>
                <Card.Link
                    as={Link}
                    to={footer.href}
                >Show more</Card.Link>
            </Card.Footer>
        </Card>
    )
}
Example #15
Source File: ImageCard.jsx    From gatsby-startbootstrap-agency with MIT License 6 votes vote down vote up
ImageCard = ({ className, imageFileName, imageAlt, header, subheader, extraInfo }) => {
  return (
    <Card className={clsx("image-card bg-dark text-white text-center", className)}>
      <Image className="image" fileName={imageFileName} alt={imageAlt || header || subheader} />
      <Card.ImgOverlay className="no-padding">
        <Container>
          <div className="intro-text">
            <div className="intro-lead-in">{subheader}</div>
            <div className="intro-heading text-uppercase">{header}</div>
            {extraInfo}
          </div>
        </Container>
      </Card.ImgOverlay>
    </Card>
  );
}
Example #16
Source File: competitionCard.js    From turqV2 with GNU General Public License v3.0 6 votes vote down vote up
CompetitionCard = ({title, id, description, link}) => (
<div className="col-12 col-md-6 col-lg-4 mt-4">
  <Link to={link} className="unstyled-link">
    <Card className="competition-card">
      <Card.Header className="competition-card-header">
        <h4>
          <Truncate lines={2}>
            {title}
          </Truncate>
        </h4>
      </Card.Header>
      <Card.Body>
        <Card.Text>
          <Truncate lines={5} ellipsis={<span>... </span>}>
            {description}
          </Truncate>
        </Card.Text>
      </Card.Body>
    </Card>
  </Link>
</div>
)
Example #17
Source File: index.js    From wedding-planner with MIT License 6 votes vote down vote up
InfoCard = (props) => {
  return (
    <Card
      style={{ width: '20rem' }}
      className="card-hover-style m-auto custom-margin"
    >
      <Card.Img variant="top" src={props.img} />
      <Card.Body>
        <Card.Title className="cards-component-title">
          {props.title}
        </Card.Title>
        <Card.Text className="cards-component-text">
          {props.summary}
        </Card.Text>
      </Card.Body>
    </Card>
  );
}
Example #18
Source File: Achievements.js    From Website2020 with MIT License 5 votes vote down vote up
function Posts() {
    return (
        <>
            <div className="section landing-section ">
                <Container>
                    <Row className="d-flex justify-content-center">
                        <Col lg="4" md="12" className="text-center mb-3">
                            <Card className="achievement-card">
                                <Card.Img src={atwork} className="card-img" />
                                <Card.Body>
                                    <Card.Title>Undergraduate Roboticists</Card.Title>
                                    <p className="card-info">
                                        Selected after a comprehensive recruitment, sharing our love for
                                        robotics, we build low-cost robust AUV systems.
                                    </p>
                                </Card.Body>
                            </Card>
                        </Col>
                        <Col lg="4" md="12" className="text-center mb-3">
                            <Card className="achievement-card">
                                <Card.Img variant="top" src={desbot} className="card-img" />
                                <Card.Body>
                                    <Card.Title>Ingenious Design & Creativity</Card.Title>
                                    <p className="card-info">
                                        The designing process behind our latest vehicle, Anahita, has
                                        been appreciated at the international level.
                                    </p>
                                </Card.Body>
                            </Card>
                        </Col>
                        <Col lg="4" md="12" className="text-center mb-3">
                            <Card className="achievement-card">
                                <Card.Img variant="top" src={niotwin} className="card-img" />
                                <Card.Body>
                                    <Card.Title>National Competition Winner</Card.Title>
                                    <p className="card-info">
                                        Twice Runners’ Up (2017 & 2019) at the NIOT SAVe, organised by
                                        the National Insitute Of Ocean Technology, Chennai.
                                    </p>
                                </Card.Body>
                            </Card>
                        </Col>

                    </Row>

                </Container>
            </div>

        </>
    )
}
Example #19
Source File: InstructorClasses.js    From front-end with MIT License 5 votes vote down vote up
InstructorClasses = ()=>{
    const [classes, setClasses]= useState([]);
    const [signout, setSignout]= useState(false);
    const {push}= useHistory();
    useEffect(()=>{
        axiosWithAuth()
            .get("/classes")
            .then(res=>{
                console.log("data classes: ", res.data);
                setClasses(res.data)
            })
            .catch(err=> console.log("instructorClasses.js error: ", err))
    },[])
    const signOut = ()=>{
        if (signout===false){
            return push('/InstructorLogin')
        }
        else{
            return console.log('you are still logged in')
        }
    }
    return(
        <div>
            <h1>Instructor classes: </h1>
            <Link to="/Instructor/CreateClass"> <button>Create Class</button> </Link>
            <button>Delete Class</button>\
            <button onClick={signOut}>Sign out</button>
            {classes.map((item,key)=>(
                <div key={item.id}>
               <Card style={{ width: '18rem', margin:' 0 auto', background: 'rgba(97, 136, 207, 0.534)'}}>
               <Card.Body>
                   <Card.Title>Name: {item.name }</Card.Title>
                        <ListGroup> Location: {item.location}</ListGroup>
                        <ListGroup> Type: {item.type}</ListGroup>
                        <ListGroup> Intensity Level: {item.intensityLevel}</ListGroup>
                        <ListGroup> Start Time: {item.startTime}</ListGroup>
                        <ListGroup> Duration: {item.duration}</ListGroup>
                        <ListGroup> Max Class Size: {item.maxClassSize}</ListGroup>
                        <ListGroup> Attendees: {item.attendees}</ListGroup>
                        <Button>Click for more information</Button>
               </Card.Body>
           </Card>
           </div>
            ))}
        </div>
    )
}
Example #20
Source File: MonitoreeFlow.js    From SaraAlert with Apache License 2.0 5 votes vote down vote up
render() {
    return (
      <React.Fragment>
        <Card className="card-square text-center">
          <Card.Header as="h5" className="text-left">
            Monitoree Flow Over Time
          </Card.Header>
          <Card.Body className="card-body">
            <Row className="mx-md-5 mx-lg-0">
              {/* Any height: 0px <tr>s are to ensure proper Bootstrap striping. */}
              <Table striped borderless>
                <thead>
                  <tr>
                    <th className="py-0"></th>
                    <th className="py-0"> Last 24 Hours </th>
                    <th className="py-0"> Last 14 Days </th>
                    <th className="py-0"> Total </th>
                  </tr>
                </thead>
                <tbody>
                  <tr style={{ height: '0px' }}></tr>
                  <tr>
                    <td className="py-1 font-weight-bold text-left">
                      <u>INCOMING</u>{' '}
                    </td>
                  </tr>
                  <tr>
                    <td className="text-right">NEW ENROLLMENTS</td>
                    <td>{this.data_last_24_hours.new_enrollments}</td>
                    <td>{this.data_last_14_days.new_enrollments}</td>
                    <td>{this.data_total.new_enrollments}</td>
                  </tr>
                  <tr>
                    <td className="text-right">TRANSFERRED IN</td>
                    <td>{this.data_last_24_hours.transferred_in}</td>
                    <td>{this.data_last_14_days.transferred_in}</td>
                    <td>{this.data_total.transferred_in}</td>
                  </tr>
                  <tr style={{ height: '0px' }}></tr>
                  <tr>
                    <td className="py-1 font-weight-bold text-left">
                      <u>OUTGOING</u>{' '}
                    </td>
                  </tr>
                  <tr className="pt-5">
                    <td className="text-right">CLOSED</td>
                    <td>{this.data_last_24_hours.closed}</td>
                    <td>{this.data_last_14_days.closed}</td>
                    <td>{this.data_total.closed}</td>
                  </tr>
                  <tr>
                    <td className="text-right">TRANSFERRED OUT</td>
                    <td>{this.data_last_24_hours.transferred_out}</td>
                    <td>{this.data_last_14_days.transferred_out}</td>
                    <td>{this.data_total.transferred_out}</td>
                  </tr>
                </tbody>
              </Table>
            </Row>
          </Card.Body>
        </Card>
      </React.Fragment>
    );
  }
Example #21
Source File: Login.js    From create-sas-app with Apache License 2.0 5 votes vote down vote up
render() {
		return (
			<div className="login">
				<div className="flex justify-content-center align-items-center">
					<Card className={'w100 mb0'}>
						<Row className="loginForm">
							<Col md={12}>
								<Form noValidate validated={this.state.validated}>
									<h1>Login</h1>
									<p className="text-muted">Sign In to your account</p>
									<FormGroup>
										<InputGroup>
											<InputGroup.Prepend><i className={'fas fa-user'}/></InputGroup.Prepend>
											<Form.Control
												name={'username'}
												className={`textInput`}
												placeholder={'Username'}
												value={this.state.username}
												onChange={this.onInputChange}
												required
											/>
										</InputGroup>
									</FormGroup>
									<FormGroup>
										<InputGroup>
											<InputGroup.Prepend><i className={'fas fa-lock'}/></InputGroup.Prepend>
											<Form.Control
												name={'password'}
												placeholder={'Password'}
												type={'password'}
												value={this.state.password}
												onChange={this.onInputChange}
												required
											/>
										</InputGroup>
									</FormGroup>
									<Row>
										<Col md={12}>
											<Button
												onClick={this.login}
												bsstyle={'primary'}
												disabled={this.validateEmail() === 'error' || this.validatePassword() === 'error' || !this.state.username || !this.state.password}
												className={'pull-right'}
											>Login</Button>
											{this.state.error && <div className={'text-danger'}>{this.state.error}</div>}
										</Col>
									</Row>
								</Form>
							</Col>
						</Row>
					</Card>
				</div>
			</div>
		);
	}
Example #22
Source File: NoticeTraningmore.js    From GB-GCGC with MIT License 5 votes vote down vote up
render() {
    return (
      <div className="container">
        <Card>
          <Card.Body>
            <Card.Title>
              <h5
                align="center"
                style={{ fontSize: "20px", fontFamily: "Segoe UI" }}
              >
                Notice Board-Training
              </h5>
            </Card.Title>
            &nbsp;
            <Card.Text>
              <div>
                <Table size="sm" responsive striped>
                  <thead className="p-3" style={{backgroundColor:'#2A324B',color:'white',fontSize:'24px'}}>
                    <tr>
                      <th>From</th>
                      <th>To</th>
                      <th>Name of the Programme</th>
                      <th>Status</th>
                    </tr>
                  </thead>
                  <tbody>
                    {this.state.dash.map((item =>
                      <tr>
                        <td>{item.from_date}</td>
                        <td>{item.to_date}</td>
                        <td>{item.name_of_the_program}</td>
                        <td>{item.status}</td>
                      </tr>
                        ))}
                  </tbody>
                </Table>
              </div>
            </Card.Text>
          </Card.Body>
        </Card>
      </div>
    );
  }
Example #23
Source File: show.js    From RC4Community with Apache License 2.0 5 votes vote down vote up
function RCform({ formId, fw }) {
  const { form, isLoading, isError } = getFormData(formId);

  if (isLoading) return <Spinner />;
  if (isError) return <Error />;

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("form submitted", e);
  };

  return (
    <Card style={{ width: fw }} className={styles.showCard}>
      <Card.Title className={styles.showTitle}>{form.title}</Card.Title>
      <Card.Body>
        <Form onSubmit={handleSubmit}>
          {form.data?.attributes.formQs.map((ele, i) => (
            <Form.Group key={i} className="mb-3" controlId="formBasicEmail">
              <Form.Label>{ele.value}</Form.Label>
              {ele.type == "number" ? (
                <>
                  <Form.Control
                    key={i}
                    type={ele.type}
                    min={ele.min}
                    max={ele.max}
                    placeholder=""
                    required={ele.required}
                  />
                  <Form.Text className="text-muted">
                    * Value must be in range {ele.min} - {ele.max}
                  </Form.Text>
                </>
              ) : (
                <Form.Control
                  key={i}
                  type={ele.type}
                  placeholder=""
                  required={ele.required}
                />
              )}

              {ele.type == "number"}
            </Form.Group>
          ))}
          <Button variant="primary" o type="submit">
            Submit
          </Button>
        </Form>
      </Card.Body>
    </Card>
  );
}
Example #24
Source File: SeasonMenu.js    From Anime-Tracker-Web-App with MIT License 5 votes vote down vote up
SeasonMenu = () => {
  // React-Router-Dom's hook which can send data into the router's pipeline
  // towards the desired routed component
  let history = useHistory();

  const [seasonArchiveArray, setSeasonArchiveArray] = useState([]);

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

  const callApi = async () => {
    const data = await apiDataSeasonArchive();
    setSeasonArchiveArray(data);
  };

  return (
    <div>
      <h1>Season Archive</h1>
      <div className={styles.container}>
        {/*if array is empty do nothing (using conditional rendering) */}
        {seasonArchiveArray === []
          ? null
          : seasonArchiveArray.map(({ seasons, year }, key) => {
              return (
                <div className={styles.card} key={key}>
                  <Card
                    className={styles.cardCont}
                    // style={{
                    //   width: "22rem",
                    //   backgroundColor: "black",
                    //     boxShadow: "5px 10px #888888",
                    //   //backgroundColor: "RGB(242, 242, 242)"
                    // }}
                  >
                    <Card.Body>
                      <Card.Title className={styles.title}>{year}</Card.Title>
                      {seasons.map((season, key) => (
                        <Card.Link
                          className={styles.season}
                          href="#"
                          key={key}
                          onClick={(event) => {
                            event.preventDefault();
                            // sending the data into the router's pipeline (history stack)
                            // towards the desired route
                            history.push({
                              pathname: `/anime/season/${year}/${season}`,
                              state: {
                                year: year,
                                season: season,
                              },
                            });
                            window.location.href = `/anime/season/${year}/${season}`;
                          }}
                        >
                          {season}
                        </Card.Link>
                      ))}
                    </Card.Body>
                  </Card>
                </div>
              );
            })}
      </div>
    </div>
  );
}
Example #25
Source File: index.js    From LearningJAMStack_Gatsby with MIT License 5 votes vote down vote up
IndexPage = ({ data }) => (
  <Layout>
    <SEO title="Home" />
    <Row style={{maxWidth:`960px`}}> 
        <img src={homeImg} style={{width:`100%`,marginBottom:`2rem`}} />
    </Row>
    <Row>
      <Col xs={12} md={6} style={{maxWidth:`480px`}}>
        <Row>
          <Col style={{backgroundColor:`cornflowerblue`,color:`white`,padding:`0.5rem`}}>インフォメーション</Col>
        </Row>
        {data.allMarkdownRemark.edges.map(({ node }) => (
          <Row>
            <Col style={{padding:`0.5rem`}}>
              <Link to={`/${node.fields.slug}`}>
              {node.frontmatter.date}記事{` `}{node.frontmatter.title}
              </Link>
            </Col>
          </Row>
        ))}
      </Col>
      <Col xs={12} md={6} style={{maxWidth:`480px`}}>
        <Row>
          <Col style={{backgroundColor:`cornflowerblue`,color:`white`,padding:`0.5rem`}}>IR情報</Col>
        </Row>
        <Row>
          <Col style={{padding:`0.5rem`}}>決算報告</Col>
        </Row>
        <Row>
          <Col style={{padding:`0.5rem`}}>社長挨拶(動画)</Col>
        </Row>
        <Row>
          <Col style={{padding:`0.5rem`}}>広告スペース</Col>
        </Row>
        <Row>
          <Col style={{padding:`0.5rem`}}>広告スペース</Col>
        </Row>
      </Col>
    </Row>
    <Row>
      <Col style={{backgroundColor:`cornflowerblue`,color:`white`,padding:`0.5rem`,maxWidth:`960px`,marginTop:`2rem`}}>事業内容</Col>
    </Row>
    <Row>
      <Col style={{maxWidth:`960px`}}>
        <Row>
          <Col xs={6} md={4}>
            <Card style={{marginTop:`1rem`}}>
              <Card.Img variant="top" src={jigyo1Img} alt={`軌道上デブリ除去`} />
              <Card.Body>
                <Card.Title style={{fontSize:`1rem`}}>軌道上デブリ除去</Card.Title>
              </Card.Body>
            </Card>
          </Col>
          <Col xs={6} md={4}>
            <Card style={{marginTop:`1rem`}}>
              <Card.Img variant="top" src={jigyo2Img} alt={`テレポーテーションゲート開設`} />
              <Card.Body>
                <Card.Title style={{fontSize:`1rem`}}>テレポーテーションゲート開設</Card.Title>
              </Card.Body>
            </Card>
          </Col>
          <Col xs={6} md={4}>
            <Card style={{marginTop:`1rem`}}>
              <Card.Img variant="top" src={jigyo3Img} alt={`業子力学による量子コントロール`} />
              <Card.Body>
                <Card.Title style={{fontSize:`1rem`}}>業子力学による量子コントロール</Card.Title>
              </Card.Body>
            </Card>
          </Col>
        </Row>
      </Col>
    </Row>
    <Row>
      <Col style={{maxWidth:`960px`, paddingTop:`3rem`}}></Col>
    </Row>
  </Layout>
)
Example #26
Source File: jigyo.js    From LearningJAMStack_microCMS_template with MIT License 5 votes vote down vote up
JigyoPage = () => (
  <Layout>
    <SEO title="事業内容" />
    <Row>
      <Col className="space"></Col>
    </Row>
    <Row>
      <Col className="title-obi">
        <h1 className="h1-font">事業内容</h1>
      </Col>
    </Row>
    <Row>
      <Col className="space"></Col>
    </Row>
    <Row>
          <Col md={6}>
            <Card style={{marginTop:`1rem`}}>
              <Card.Img variant="top" src={jigyo1Img} />
              <Card.Body>
                <Card.Title>軌道上デブリ除去</Card.Title>
                <Card.Text>
                    軌道上または航行導線上のデブリを安全除去します。弊社が開発した「次元蒸発粉砕除去法」により、物質空間にデブリの残骸を残しません。
                </Card.Text>
              </Card.Body>
            </Card>
          </Col>
          <Col xs={12} md={6}>
            <Card style={{marginTop:`1rem`}}>
              <Card.Img variant="top" src={jigyo2Img} />
              <Card.Body>
                <Card.Title>テレポーテーションゲート開設</Card.Title>
                <Card.Text>
                    テレポーテーション用のトンネルゲート開設業務を承ります。管轄当局への手続き全般もすべて弊社にお任せください。
                </Card.Text>
              </Card.Body>
            </Card>
          </Col>
          <Col xs={12} md={6}>
            <Card style={{marginTop:`1rem`}}>
              <Card.Img variant="top" src={jigyo3Img} />
              <Card.Body>
                <Card.Title>業子力学による量子コントロール</Card.Title>
                <Card.Text>
                    弊社ラボでは業子力学による量子コントロール実験を科学庁からの委託され、実績をあげております。
                </Card.Text>
              </Card.Body>
            </Card>
          </Col>
    </Row>
    <Row>
      <Col className="space"></Col>
    </Row>
  </Layout>
)
Example #27
Source File: About.js    From masakhane-web with MIT License 5 votes vote down vote up
export default function About() {
    return(
        <div>
            <Container className="my-4">
                <Card style={{ width: '100%' }}>
                    <Card.Body>
                        <Card.Title>About</Card.Title>
                        <Card.Subtitle className="mb-2 text-muted">Masakhane Web</Card.Subtitle>
                        <div>
                            <Card.Text style={{ fontSize: 16, color: 'black' }}>
                            <b>Masakhane Web</b> is an open source online machine translation service for solely African languages.  
                            This project is in line with the works of the <a id='link' href='https://www.masakhane.io/'>Masakhane community</a> .<b> Masakhane</b> meaning ‘we build together’, 
                            is a research effort whose mission is to strengthen and spur NLP research for African languages which is open source and online. 
                            So far, the community has trained translation models for over 38 African languages. As such, this platform aims at hosting the already trained machine translation models from the Masakhane community and allows contributions 
                            from users to create new data for retraining and improving the models. <br/>
                            </Card.Text>
                        </div>
                        <div>
                            <Card.Text style={{ fontSize: 16, color: 'black' }}>
                            <br />
                            The Masakhane Web project is led by <a id='link' href='https://dsfsi.github.io/'>Data Science for Social Impact</a> research group at the <a id = 'link' href = 'https://cs.up.ac.za/'>Department of Computer Science</a>, University of Pretoria, South Africa. 
                            </Card.Text>
                            </div>
                            <br/>
                        <div>
                        <Card.Text style={{ fontSize: 16, color: 'black' }}>
                            The feedback mechanism of this project has been approved by the University of Pretoria Faculty of Engineering, <a id='link' href = 'https://www.up.ac.za/faculty-of-engineering-built-environment-it/article/15815/faculty-committee-for-research-ethics-integrity' >Built Environment and Information Technology(EBIT) Research Ethics Committee</a>. 
                            </Card.Text>
                        </div>
                    
                        <br />
                        <div>
                            <Card.Text style={{ fontSize: 16, color: 'black' }}>
                                If you would like to contribute to this project, train a model in your language or want to collaborate and work with Masakhane, find out how in <a id='link' href = 'https://github.com/dsfsi/masakhane-web'>https://github.com/dsfsi/masakhane-web</a> or reach out to any of the Masakhane Web contributors in the following ways:
                             </Card.Text>
                        </div>
                        <div>
                            <Card.Text style={{ fontSize: 16, color: 'gray' }}>
                            <br />
                            <br />
                            <span><b>Dr. Vukosi Marivate</b></span>
                            <br />
                            <span><i>[email protected]</i></span>
                            <br />
                            <a id='link' href= 'https://twitter.com/vukosi'>@vukosi</a>
                            <br />
                            <br />
                            <span><b>Abiodun Modupe</b></span>
                            <br />
                            <span><i>[email protected] </i></span>
                            <br />
                            <br />
                            <span><b>Salomon Kabongo</b></span>
                            <br />
                            <span><i>[email protected]</i></span>
                            <br />
                            <a id='link' href= 'https://twitter.com/SalomonKabongo'>@SalomonKabongo</a>
                            <br />
                            <br />
                            <span><b>Catherine Gitau</b></span>
                            <br />
                            <span><i>[email protected]</i></span>
                            <br />
                            <a id='link' href= 'https://twitter.com/categitau_'>@categitau_</a>
                            <br />


                            </Card.Text>
                        </div>
                        <br />
                    </Card.Body>
                </Card>
            </Container>
        </div>
    )
}
Example #28
Source File: FooterAccordion.js    From flotiq-blog with MIT License 5 votes vote down vote up
FooterAccordion = ({ data }) => (
    <Accordion>
        <Card>
            <Card.Header>
                <ContextAwareToggle eventKey="0">
                    {data.footer_1_column_header}
                </ContextAwareToggle>
            </Card.Header>
            <Accordion.Collapse eventKey="0">
                <Card.Body>
                    <ul className="main-footer-list">
                        {data.footer_1_column.map((item) => (
                            <li key={item.text}>
                                <a target="_blank" href={item.url} rel="noreferrer">{item.text}</a>
                            </li>
                        ))}
                    </ul>
                </Card.Body>
            </Accordion.Collapse>
        </Card>
        <Card>
            <Card.Header>
                <ContextAwareToggle eventKey="1">
                    {data.footer_2_column_header}
                </ContextAwareToggle>
            </Card.Header>
            <Accordion.Collapse eventKey="1">
                <Card.Body>
                    <ul className="main-footer-list">
                        {data.footer_2_column.map((item) => (
                            <li key={item.text}>
                                <a target="_blank" href={item.url} rel="noreferrer">{item.text}</a>
                            </li>
                        ))}
                    </ul>
                </Card.Body>
            </Accordion.Collapse>
        </Card>
        <Card>
            <Card.Header>
                <ContextAwareToggle eventKey="2">
                    {data.footer_3_column_header}
                </ContextAwareToggle>
            </Card.Header>
            <Accordion.Collapse eventKey="2">
                <Card.Body>
                    <ul className="main-footer-list">
                        {data.footer_3_column.map((item) => (
                            <li key={item.text}>
                                <a target="_blank" href={item.url} rel="noreferrer">{item.text}</a>
                            </li>
                        ))}
                    </ul>
                </Card.Body>
            </Accordion.Collapse>
        </Card>
        <Card>
            <Card.Header>
                <ContextAwareToggle eventKey="3">Subscribe</ContextAwareToggle>
            </Card.Header>
            <Accordion.Collapse eventKey="3">
                <Card.Body>
                    <ul className="main-footer-list">
                        <SubscriptionForm />
                    </ul>
                </Card.Body>
            </Accordion.Collapse>
        </Card>
    </Accordion>
)
Example #29
Source File: index.js    From bootstrap-dsp with MIT License 5 votes vote down vote up
function HomePage() {
  return (
    <>
      <h1>React Bootstrap DSP for Adobe XD VSCode Extension</h1>
      <h4>Example heading <Badge variant="secondary">New</Badge></h4>
      <Button variant="primary">Primary Button</Button>
      <Card style={{ width: '18rem' }}>
        <Card.Img variant="top" src="holder.js/100px180" />
        <Card.Body>
          <Card.Title>Card Title</Card.Title>
          <Card.Text>
            Some quick example text to build on the card title and make up the bulk of
            the card's content.
          </Card.Text>
          <Button variant="primary">Go somewhere</Button>
        </Card.Body>
      </Card>
      <Form>
        <Form.Group controlId="exampleForm.ControlInput1">
          <Form.Label>Email address</Form.Label>
          <Form.Control type="email" placeholder="[email protected]" />
        </Form.Group>
      </Form>
      <Table striped bordered hover>
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <td>3</td>
            <td colSpan="2">Larry the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </Table>
    </>
  );
}