From a9f65f43ccf712d188fbfccb4bd65a20d49fe19c Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Fri, 22 Nov 2019 11:08:05 +0700 Subject: [PATCH] Add simple grid --- client/App.jsx | 2 + client/Home.jsx | 7 ++ client/layouts/simple-grid/Cover.jsx | 31 +++++++ client/layouts/simple-grid/Details.jsx | 121 +++++++++++++++++++++++++ 4 files changed, 161 insertions(+) create mode 100644 client/layouts/simple-grid/Cover.jsx create mode 100644 client/layouts/simple-grid/Details.jsx diff --git a/client/App.jsx b/client/App.jsx index 89de98c..739f299 100644 --- a/client/App.jsx +++ b/client/App.jsx @@ -22,6 +22,7 @@ import ProgressBar from './layouts/progress-bar/Details'; import SameHeightColumns from './layouts/same-height-columns/Details'; import Separator from './layouts/separator/Details'; import Sidebar from './layouts/sidebar/Details'; +import SimpleGrid from './layouts/simple-grid/Details'; import Slider from './layouts/slider/Details'; import SplitScreen from './layouts/split-screen/Details'; import StepperInput from './layouts/stepper-input/Details'; @@ -55,6 +56,7 @@ const App = () => { + diff --git a/client/Home.jsx b/client/Home.jsx index 0245be3..fbe9124 100644 --- a/client/Home.jsx +++ b/client/Home.jsx @@ -21,6 +21,7 @@ import ProgressBarCover from './layouts/progress-bar/Cover'; import SameHeightColumnsCover from './layouts/same-height-columns/Cover'; import SeparatorCover from './layouts/separator/Cover'; import SidebarCover from './layouts/sidebar/Cover'; +import SimpleGridCover from './layouts/simple-grid/Cover'; import SliderCover from './layouts/slider/Cover'; import SplitScreenCover from './layouts/split-screen/Cover'; import StepperInputCover from './layouts/stepper-input/Cover'; @@ -217,6 +218,12 @@ const Home = () => {

Separator

+
+ + +

Simple grid

+ +
diff --git a/client/layouts/simple-grid/Cover.jsx b/client/layouts/simple-grid/Cover.jsx new file mode 100644 index 0000000..3789dfe --- /dev/null +++ b/client/layouts/simple-grid/Cover.jsx @@ -0,0 +1,31 @@ +import React from 'react'; + +import Frame from '../../placeholders/Frame'; +import Rectangle from '../../placeholders/Rectangle'; + +const Cover = () => { + return ( + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + ); +}; + +export default Cover; diff --git a/client/layouts/simple-grid/Details.jsx b/client/layouts/simple-grid/Details.jsx new file mode 100644 index 0000000..1c15283 --- /dev/null +++ b/client/layouts/simple-grid/Details.jsx @@ -0,0 +1,121 @@ +import React from 'react'; + +import DetailsLayout from '../../DetailsLayout'; +import BrowserFrame from '../../placeholders/BrowserFrame'; +import Rectangle from '../../placeholders/Rectangle'; +import SampleCode from '../../SampleCode'; + +const Details = () => { + return ( + + +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ } + source={ + +
+ +
25%
+ + +
+ ... +
+
+`} +/> + } + /> + + ); +}; + +export default Details;