mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-06 22:26:33 +02:00
Add center cover
This commit is contained in:
@@ -1,8 +1,15 @@
|
||||
import React from 'react';
|
||||
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
|
||||
|
||||
import Home from './Home';
|
||||
|
||||
const App = () => {
|
||||
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