diff --git a/client/App.jsx b/client/App.jsx index 8bd9b9c..d946fe7 100644 --- a/client/App.jsx +++ b/client/App.jsx @@ -22,12 +22,16 @@ 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 SplitNavigation from './layouts/split-navigation/Details'; import SplitScreen from './layouts/split-screen/Details'; import StepperInput from './layouts/stepper-input/Details'; import StickyFooter from './layouts/sticky-footer/Details'; import StickyHeader from './layouts/sticky-header/Details'; import Switch from './layouts/switch/Details'; +import Tab from './layouts/tab/Details'; +import Wizard from './layouts/wizard/Details'; const App = () => { return ( @@ -54,12 +58,16 @@ const App = () => { + + + + ); diff --git a/client/Home.jsx b/client/Home.jsx index 5a22326..7ba61d7 100644 --- a/client/Home.jsx +++ b/client/Home.jsx @@ -21,12 +21,16 @@ 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 SplitNavigationCover from './layouts/split-navigation/Cover'; import SplitScreenCover from './layouts/split-screen/Cover'; import StepperInputCover from './layouts/stepper-input/Cover'; import StickyFooterCover from './layouts/sticky-footer/Cover'; import StickyHeaderCover from './layouts/sticky-header/Cover'; import SwitchCover from './layouts/switch/Cover'; +import TabCover from './layouts/tab/Cover'; +import WizardCover from './layouts/wizard/Cover'; import Layout from './Layout'; import useDocumentTitle from './hooks/useDocumentTitle'; @@ -216,12 +220,24 @@ const Home = () => {

Separator

+
+ + +

Simple grid

+ +

Slider

+
+ + +

Split navigation

+ +
@@ -234,6 +250,18 @@ const Home = () => {

Switch

+
+ + +

Tab

+ +
+
+ + +

Wizard

+ +
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; diff --git a/client/layouts/split-navigation/Cover.jsx b/client/layouts/split-navigation/Cover.jsx new file mode 100644 index 0000000..c5fdf44 --- /dev/null +++ b/client/layouts/split-navigation/Cover.jsx @@ -0,0 +1,20 @@ +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/split-navigation/Details.jsx b/client/layouts/split-navigation/Details.jsx new file mode 100644 index 0000000..d60a1c3 --- /dev/null +++ b/client/layouts/split-navigation/Details.jsx @@ -0,0 +1,56 @@ +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={ + + +
  • + ... +
    • + + +
  • + ... +
    • + +`} +/> + } + /> +     + ); +}; + +export default Details; diff --git a/client/layouts/tab/Cover.jsx b/client/layouts/tab/Cover.jsx new file mode 100644 index 0000000..3a9c7d8 --- /dev/null +++ b/client/layouts/tab/Cover.jsx @@ -0,0 +1,20 @@ +import React from 'react'; + +import Circle from '../../placeholders/Circle'; +import Frame from '../../placeholders/Frame'; + +const Cover = () => { + return ( + +
    +
    +
    +
    +
    +
    +
    + + ); +}; + +export default Cover; diff --git a/client/layouts/tab/Details.jsx b/client/layouts/tab/Details.jsx new file mode 100644 index 0000000..52563c4 --- /dev/null +++ b/client/layouts/tab/Details.jsx @@ -0,0 +1,91 @@ +import React, { useState } from 'react'; + +import DetailsLayout from '../../DetailsLayout'; +import BrowserFrame from '../../placeholders/BrowserFrame'; +import Rectangle from '../../placeholders/Rectangle'; +import SampleCode from '../../SampleCode'; + +const Details = () => { + const [activeTab, setActiveTab] = useState(0); + + const Tab = ({ tabIndex, children }) => { + const isActive = tabIndex === activeTab; + const click = () => setActiveTab(tabIndex); + return ( +
    + {children} +
    + ); + }; + + return ( + + +
    + +
    + +
    +     + +
    + +
    +     + +
    + +
    +     +
    + + } + source={ + + +
    + ... +
    + + +
    + ... +
    + +`} +/> + } + /> +     + ); +}; + +export default Details; diff --git a/client/layouts/wizard/Cover.jsx b/client/layouts/wizard/Cover.jsx new file mode 100644 index 0000000..4b18390 --- /dev/null +++ b/client/layouts/wizard/Cover.jsx @@ -0,0 +1,32 @@ +import React from 'react'; + +import Frame from '../../placeholders/Frame'; +import Line from '../../placeholders/Line'; + +const Cover = () => { + return ( + +
    +
    +
    +
    +
    1
    +
    +
    +
    +
    +
    2
    +
    +
    +
    +
    +
    3
    +
    +
    +
    +
    + + ); +}; + +export default Cover; diff --git a/client/layouts/wizard/Details.jsx b/client/layouts/wizard/Details.jsx new file mode 100644 index 0000000..b6b3f4b --- /dev/null +++ b/client/layouts/wizard/Details.jsx @@ -0,0 +1,119 @@ +import React from 'react'; + +import DetailsLayout from '../../DetailsLayout'; +import Block from '../../placeholders/Block'; +import BrowserFrame from '../../placeholders/BrowserFrame'; +import Circle from '../../placeholders/Circle'; +import Line from '../../placeholders/Line'; +import SampleCode from '../../SampleCode'; + +const Details = () => { + return ( + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + } + source={ + + +
    +
    + +
    + + +
    + ... +
    + + +
    +
    + + + ... +
    +
    +`} +/> + } + /> + + ); +}; + +export default Details; diff --git a/client/placeholders/Block.jsx b/client/placeholders/Block.jsx index 56f54e2..d113436 100644 --- a/client/placeholders/Block.jsx +++ b/client/placeholders/Block.jsx @@ -1,11 +1,10 @@ import React from 'react'; import random from '../helpers/random'; -import Rectangle from './Rectangle'; -const Block = ({ numberOfBlocks }) => { +const Block = ({ justify = 'start', numberOfBlocks }) => { return ( -
    +
    { Array(numberOfBlocks).fill(0).map((_, i) => { const s = random(1, 5);