1
0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-06 06:07:33 +02:00

Add center cover

This commit is contained in:
Phuoc Nguyen
2019-11-15 14:11:54 +07:00
parent 1f437af408
commit 53e799baf4
4 changed files with 70 additions and 1 deletions

View File

@@ -1,8 +1,15 @@
import React from 'react'; import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
const App = () => { const App = () => {
return ( return (
<div>Test</div> <Router>
<Switch>
<Route exact={true} path='/'><Home /></Route>
</Switch>
</Router>
); );
}; };

24
client/Home.jsx Normal file
View File

@@ -0,0 +1,24 @@
import React from 'react';
import { Link } from 'react-router-dom';
import CenterCover from './covers/CenterCover';
import Layout from './Layout';
const Home = () => {
return (
<Layout>
<h2 className="f2 lh-copy">Pattern</h2>
<div className="flex flex-wrap justify-between">
<div className="w-30">
<Link to="/center" className="link flex flex-column items-center justify-center bg-black-05 br2 pa3">
<CenterCover />
<h4 className="f4 mv0 pv3">Center</h4>
</Link>
</div>
</div>
</Layout>
);
};
export default Home;

15
client/Layout.jsx Normal file
View File

@@ -0,0 +1,15 @@
import React, { useEffect } from 'react';
const Layout = ({ children }) => {
useEffect(() => {
window.scrollTo(0, 0);
}, []);
return (
<div className="mw8 center">
{children}
</div>
);
};
export default Layout;

View File

@@ -0,0 +1,23 @@
import React from 'react';
import Dot from '../placeholders/Dot';
import Frame from '../placeholders/Frame';
import Line from '../placeholders/Line';
const CenterCover = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center">
<Dot />
<div className="w-50 mv1">
<Line />
</div>
<div className="w-40 mv1">
<Line />
</div>
</div>
</Frame>
);
};
export default CenterCover;