Página da disciplina de pos (Programação Orientada a Serviços) do curso técnico integrado de Informática para Internet.
// src/components/AppNavBar.js
import React from "react";
const AppNavBar = (props) => <div>{props.title}</div>;
export default AppNavBar;
// src/components/AppBulletList.js
import React from "react";
const AppBulletList = (props) => (
<div>
<h4>{props.title}</h4>
<p>lista de bullets</p>
</div>
);
export default AppBulletList;
yarn add react-bootstrap@next bootstrap@5.1.1
src/pages/_app.js
$ yarn add react-bootstrap@next bootstrap@5.1.1
$ yarn run dev
// src/pages/_app.js
import "bootstrap/dist/css/bootstrap.min.css";
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default MyApp;
// src/components/AppNavBar.js
import React from "react";
import { Container, Navbar } from "react-bootstrap";
const AppNavBar = (props) => (
<Container>
<Navbar expand="lg" variant="dark" bg="dark">
<Container>
<Navbar.Brand href="#">{props.title}</Navbar.Brand>
</Container>
</Navbar>
</Container>
);
export default AppNavBar;
// src/components/AppBulletList.js
import React from "react";
import { Card, Container } from "react-bootstrap";
const AppBulletList = (props) => (
<Container>
<Card border="primary">
<Card.Body>
<Card.Title>{props.title}</Card.Title>
</Card.Body>
<Card.Text>Lista de bullets</Card.Text>
</Card>
</Container>
);
export default AppBulletList;
yarn remove react-bootstrap bootstrap
yarn add @mui/material @mui/icons-material @fontsource/roboto @emotion/styled @emotion/react
src/pages/_app.js
$ yarn remove react-bootstrap bootstrap
$ yarn add @mui/material @mui/icons-material @fontsource/roboto @emotion/styled @emotion/react
$ yarn run dev
// src/pages/_app.js
import "@fontsource/roboto/300.css";
import "@fontsource/roboto/400.css";
import "@fontsource/roboto/500.css";
import "@fontsource/roboto/700.css";
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default MyApp;
// src/components/AppNavBar.js
import React from "react";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import IconButton from "@mui/material/IconButton";
import MenuIcon from "@mui/icons-material/Menu";
const AppNavBar = (props) => (
<Box sx=>
<AppBar position="static">
<Toolbar variant="dense">
<IconButton
edge="start"
color="inherit"
aria-label="menu"
sx=
>
<MenuIcon />
</IconButton>
<Typography variant="h6" color="inherit" component="div">
{props.title}
</Typography>
</Toolbar>
</AppBar>
</Box>
);
export default AppNavBar;
// src/components/AppBulletList.js
import React from "react";
import { Card, CardContent, Typography } from "@mui/material/";
const AppBulletList = (props) => (
<Card>
<CardContent>
<Typography variant="h4">{props.title}</Typography>
<Typography variant="body2">bullets</Typography>
</CardContent>
</Card>
);
export default AppBulletList;
yarn remove @mui/material @mui/icons-material @fontsource/roboto @emotion/styled @emotion/react
yarn add bulma
src/pages/_app.js
$ yarn remove @mui/material @mui/icons-material @fontsource/roboto @emotion/styled @emotion/react
$ yarn add bulma
$ yarn run dev
// src/pages/_app.js
import "bulma/css/bulma.min.css";
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default MyApp;
// src/components/AppNavBar.js
import React from "react";
const AppNavBar = (props) => (
<nav className="navbar" role="navigation" aria-label="main navigation">
<div id="navbarBasicExample" className="navbar-menu">
<div className="navbar-start">
<a className="navbar-item">{props.title}</a>
<a className="navbar-item">Documentation</a>
<div className="navbar-item has-dropdown is-hoverable">
<a className="navbar-link">More</a>
<div className="navbar-dropdown">
<a className="navbar-item">About</a>
<a className="navbar-item">Jobs</a>
<a className="navbar-item">Contact</a>
<hr className="navbar-divider" />
<a className="navbar-item">Report an issue</a>
</div>
</div>
</div>
<div className="navbar-end">
<div className="navbar-item">
<div className="buttons">
<a className="button is-primary">
<strong>Sign up</strong>
</a>
<a className="button is-light">Log in</a>
</div>
</div>
</div>
</div>
</nav>
);
export default AppNavBar;
// src/components/AppBulletList.js
import React from "react";
const AppBulletList = (props) => (
<div className="card">
<div className="card-content">
<p className="title">{props.title}</p>
</div>
<footer className="card-footer">
<p className="card-footer-item">
<span>
View on
<a href="https://twitter.com/codinghorror/status/506010907021828096">
Twitter
</a>
</span>
</p>
<p className="card-footer-item">
<span>
Share on <a href="#">Facebook</a>
</span>
</p>
</footer>
</div>
);
export default AppBulletList;