mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-06 14:16:50 +02:00
Add center cover
This commit is contained in:
@@ -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
24
client/Home.jsx
Normal 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
15
client/Layout.jsx
Normal 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;
|
23
client/covers/CenterCover.jsx
Normal file
23
client/covers/CenterCover.jsx
Normal 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;
|
Reference in New Issue
Block a user