Skip to content

Commit dab4e61

Browse files
PleitersonPleiterson
committed
Aula dois da imersaoReactJS. Criado as paginas de Categoria e Novo Video e Carousel de videos na Home.
1 parent 4252415 commit dab4e61

File tree

10 files changed

+198
-67
lines changed

10 files changed

+198
-67
lines changed

‎package-lock.json

Lines changed: 133 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@
88
"@testing-library/user-event": "^7.2.1",
99
"react": "^16.13.1",
1010
"react-dom": "^16.13.1",
11+
"react-router-dom": "^5.2.0",
1112
"react-scripts": "3.4.1",
13+
"react-slick": "^0.27.3",
1214
"styled-components": "^5.1.1"
1315
},
1416
"scripts": {

‎public/index.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@
1616
-->
1717
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
1818
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
19+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css">
20+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css">
1921
<!--
2022
Notice the use of %PUBLIC_URL% in the tags above.
2123
It will be replaced with the URL of the `public` folder during the build.
@@ -25,7 +27,7 @@
2527
work correctly both with client-side routing and a non-root public URL.
2628
Learn how to configure a non-root public URL by running `npm run build`.
2729
-->
28-
<title>React App</title>
30+
<title>PleiFlix</title>
2931
</head>
3032
<body>
3133
<noscript>You need to enable JavaScript to run this app.</noscript>

‎src/App.js

Lines changed: 0 additions & 49 deletions
This file was deleted.

‎src/components/Button/index.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import styled from "styled-components";
2+
//import { Link } from 'react-router-dom';
23

4+
//const Button = styled(Link)`
35
const Button = styled.button`
46
color: var(--white);
57
border: 1px solid var(--white);
@@ -21,4 +23,4 @@ const Button = styled.button`
2123
}
2224
`;
2325

24-
export default Button
26+
export default Button;

‎src/components/Carousel/index.js

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React from 'react';
2-
import { VideoCardGroupContainer, VideoCardList, Title, ExtraLink } from './styles';
2+
import { VideoCardGroupContainer, Title, ExtraLink } from './styles';
33
import VideoCard from './components/VideoCard';
4+
import Slider,{ SliderItem } from './components/Slider';
45

5-
function VideoCardGroup({
6+
function Carousel({
67
ignoreFirstVideo,
78
category,
89
}) {
@@ -24,25 +25,25 @@ function VideoCardGroup({
2425
}
2526
</>
2627
)}
27-
<VideoCardList>
28+
<Slider>
2829
{videos.map((video, index) => {
2930
if (ignoreFirstVideo && index === 0) {
3031
return null;
3132
}
3233

3334
return (
34-
<li key={video.titulo}>
35+
<SliderItem key={video.titulo}>
3536
<VideoCard
3637
videoTitle={video.titulo}
3738
videoURL={video.url}
3839
categoryColor={categoryColor}
3940
/>
40-
</li>
41+
</SliderItem>
4142
);
4243
})}
43-
</VideoCardList>
44+
</Slider>
4445
</VideoCardGroupContainer>
4546
);
4647
}
4748

48-
export default VideoCardGroup;
49+
export default Carousel;

‎src/components/Menu/components/ButtonLink/index.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import PropTypes from 'prop-types';
23

34
function ButtonLink(props) {
45
//props => { className: "o que alguém passar", href="/" }
@@ -7,7 +8,21 @@ function ButtonLink(props) {
78
<a href={props.href} className={props.className}>
89
Novo Vídeo
910
</a>
11+
/*<a className={className} href={href}>
12+
{children}
13+
</a>*/
1014
);
1115
}
1216

17+
ButtonLink.defaultProps = {
18+
href: '/',
19+
className: '',
20+
};
21+
22+
ButtonLink.propTypes = {
23+
className: PropTypes.string,
24+
href: PropTypes.string,
25+
children: PropTypes.node.isRequired,
26+
};
27+
1328
export default ButtonLink;

0 commit comments

Comments
 (0)