Skip to content
Snippets Groups Projects
Commit 8a5d8628 authored by Chif Gergő's avatar Chif Gergő
Browse files

Add NewsContainer and NewsPage

parent 0d463e0f
No related branches found
No related tags found
2 merge requests!7update master to dev,!6Demo
...@@ -15,5 +15,6 @@ module.exports = { ...@@ -15,5 +15,6 @@ module.exports = {
rules: { rules: {
'react/prop-types': 0, 'react/prop-types': 0,
'@typescript-eslint/explicit-function-return-type': 2, '@typescript-eslint/explicit-function-return-type': 2,
'object-curly-newline': 0,
}, },
}; };
import { Grid, Typography } from '@material-ui/core';
import React from 'react';
interface NewsProps {
title: string;
content: string;
author: string;
}
const News: React.FC<NewsProps> = ({ title, content, author }) => (
<Grid container direction="column">
<Grid item>
<Typography variant="h6">{title}</Typography>
</Grid>
<Grid item>
<p>{content}</p>
</Grid>
<Grid item container justify="flex-end">
<Typography>{author}</Typography>
</Grid>
</Grid>
);
export default News;
import { Grid, makeStyles, Typography } from '@material-ui/core';
import React from 'react';
interface NewsProps {
title: string;
content: string;
author: string;
createDate: string;
}
const useStyles = makeStyles((theme) => ({
container: {
borderRadius: '8px',
backgroundColor: '#E5E5E5',
margin: theme.spacing(2),
padding: theme.spacing(1),
},
}));
const News: React.FC<NewsProps> = ({ title, content, author, createDate }) => {
const classes = useStyles();
return (
<Grid className={classes.container} container direction="column">
<Grid item>
<Typography variant="h6">{title}</Typography>
</Grid>
<Grid item>
<Typography variant="body1">{content}</Typography>
</Grid>
<Grid item container justify="flex-end">
<Grid item>
<Typography variant="subtitle2">
<i>{author}</i>
</Typography>
<Typography variant="subtitle2">
<i>{createDate}</i>
</Typography>
</Grid>
</Grid>
</Grid>
);
};
export default News;
import { Grid } from '@material-ui/core';
import React from 'react';
import News from './News';
interface Props {}
const NewsContainer: React.FC = () => {
const lorem = `
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae ullamcorper ligula. Praesent pretium ultrices pretium. Morbi purus lorem, elementum ut tempor quis, condimentum et nisl. Maecenas quis justo ac nibh dapibus porttitor. Nam felis mauris, ornare ut imperdiet eget, ultricies at leo. Integer in risus iaculis libero efficitur mollis. Quisque eget congue lorem, nec tincidunt tellus. Etiam auctor fermentum quam, non consequat tellus tempor at. Vivamus tellus orci, eleifend vel erat sed, viverra luctus sem.
Fusce viverra vehicula purus a elementum. Duis non orci mattis, tincidunt lorem ac, hendrerit lacus. Cras id feugiat nulla. Aenean mi quam, vulputate sit amet volutpat posuere, aliquet nec dolor. Nulla facilisi. Donec quis ullamcorper neque, in eleifend lorem. Quisque id nisl justo. Donec tristique a risus vitae consequat. Vestibulum quis velit magna. Aenean ultrices sapien vel justo varius finibus sit amet a turpis. Cras efficitur, ante at elementum sodales, elit enim fringilla mi, nec consectetur lacus lacus a nunc. Praesent condimentum porta accumsan. Phasellus sed dapibus nisl, eget tempor felis.
`;
return (
<Grid container spacing={2}>
<News
title="Az eső hír"
author="Anonymus"
content={lorem}
createDate={new Date().toLocaleDateString()}
/>
<News
title="Második"
author="Anonymus"
content={lorem}
createDate={new Date().toLocaleDateString()}
/>
</Grid>
);
};
export default NewsContainer;
import { Container } from '@material-ui/core';
import React from 'react';
import NewsContainer from './NewsContainer';
const NewsPage: React.FC = () => (
<Container>
<NewsContainer />
</Container>
);
export default NewsPage;
import React from 'react'; import React from 'react';
import { Route, Switch } from 'react-router'; import { Route, Switch } from 'react-router';
import NewsPage from '../../components/NewsPage';
const Main = () => ( const Main: React.FC = () => (
<Switch> <Switch>
<Route path="/" exact> <Route path="/" exact>
Hello Hello
</Route> </Route>
<Route path="/news">News</Route> <Route path="/news">
<NewsPage />
</Route>
</Switch> </Switch>
); );
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment