mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-12 00:54:45 +02:00
Code Issues Releases Wiki Activity

Merge pull request #13 from phuoc-ng/button-with-icon

Browse Source 
Button with icon
This commit is contained in:
phuoc-ng
2019-11-17 10:53:15 +07:00
committed by GitHub
parent f43797f4e9 ea2790f07e
commit 3b615d2aef
22 changed files with 225 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
client/App.jsx
View File

@@ -2,15 +2,16 @@ import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home'; import Home from './Home';
import Badge from './layouts/Badge'; import Badge from './layouts/badge/Details';
import Centering from './layouts/Centering'; import ButtonWithIcon from './layouts/button-with-icon/Details';
import HolyGrail from './layouts/HolyGrail'; import Centering from './layouts/centering/Details';
import InputAddon from './layouts/InputAddon'; import HolyGrail from './layouts/holy-grail/Details';
import MediaObject from './layouts/MediaObject'; import InputAddon from './layouts/input-add-on/Details';
import Sidebar from './layouts/Sidebar'; import MediaObject from './layouts/media-object/Details';
import StepperInput from './layouts/StepperInput'; import Sidebar from './layouts/sidebar/Details';
import StickyFooter from './layouts/StickyFooter'; import StepperInput from './layouts/stepper-input/Details';
import StickyHeader from './layouts/StickyHeader'; import StickyFooter from './layouts/sticky-footer/Details';
import StickyHeader from './layouts/sticky-header/Details';
const App = () => { const App = () => {
return ( return (
@@ -18,6 +19,7 @@ const App = () => {
<Switch> <Switch>
<Route exact={true} path='/'><Home /></Route> <Route exact={true} path='/'><Home /></Route>
<Route exact={true} path='/badge'><Badge /></Route> <Route exact={true} path='/badge'><Badge /></Route>
<Route exact={true} path='/button-with-icon'><ButtonWithIcon /></Route>
<Route exact={true} path='/centering'><Centering /></Route> <Route exact={true} path='/centering'><Centering /></Route>
<Route exact={true} path='/holy-grail'><HolyGrail /></Route> <Route exact={true} path='/holy-grail'><HolyGrail /></Route>
<Route exact={true} path='/input-add-on'><InputAddon /></Route> <Route exact={true} path='/input-add-on'><InputAddon /></Route>

71
client/Home.jsx
View File

@@ -1,15 +1,16 @@
import React from 'react'; import React from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import BadgeCover from './covers/BadgeCover'; import BadgeCover from './layouts/badge/Cover';
import CenterCover from './covers/CenterCover'; import ButtonWithIconCover from './layouts/button-with-icon/Cover';
import HolyGrailCover from './covers/HolyGrailCover'; import CenterCover from './layouts/centering/Cover';
import InputAddonCover from './covers/InputAddonCover'; import HolyGrailCover from './layouts/holy-grail/Cover';
import MediaObjectCover from './covers/MediaObjectCover'; import InputAddonCover from './layouts/input-add-on/Cover';
import SidebarCover from './covers/SidebarCover'; import MediaObjectCover from './layouts/media-object/Cover';
import StickyFooterCover from './covers/StickyFooterCover'; import SidebarCover from './layouts/sidebar/Cover';
import StickyHeaderCover from './covers/StickyHeaderCover'; import StepperInputCover from './layouts/stepper-input/Cover';
import StepperInputCover from './covers/StepperInputCover'; import StickyFooterCover from './layouts/sticky-footer/Cover';
import StickyHeaderCover from './layouts/sticky-header/Cover';
import Layout from './Layout'; import Layout from './Layout';
import useDocumentTitle from './useDocumentTitle'; import useDocumentTitle from './useDocumentTitle';
@@ -35,62 +36,68 @@ const Home = () => {
<div className="mw8 center pb4"> <div className="mw8 center pb4">
<h2 className="f2 lh-copy">Layouts</h2> <h2 className="f2 lh-copy">Layouts</h2>
<div className="flex flex-wrap"> <div className="flex flex-wrap items-start">
<div className="pa2 w-20"> <div className="pa1 w-20">
<Link to="/holy-grail" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4"> <Link to="/holy-grail" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
<HolyGrailCover /> <HolyGrailCover />
<h4 className="f4 mv0 pt3">Holy grail</h4> <h4 className="f4 mv0 pt3">Holy grail</h4>
</Link> </Link>
</div> </div>
<div className="pa2 w-20"> <div className="pa1 w-20">
<Link to="/sidebar" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4"> <Link to="/sidebar" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
<SidebarCover /> <SidebarCover />
<h4 className="f4 mv0 pt3">Sidebar</h4> <h4 className="f4 mv0 pt3">Sidebar</h4>
</Link> </Link>
</div> </div>
<div className="pa2 w-20"> <div className="pa1 w-20">
<Link to="/sticky-footer" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4"> <Link to="/sticky-footer" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
<StickyFooterCover /> <StickyFooterCover />
<h4 className="f4 mv0 pt3">Sticky footer</h4> <h4 className="f4 mv0 pt3">Sticky footer</h4>
</Link> </Link>
</div> </div>
<div className="pa2 w-20"> <div className="pa1 w-20">
<Link to="/sticky-header" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4"> <Link to="/sticky-header" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
<StickyHeaderCover /> <StickyHeaderCover />
<h4 className="f4 mv0 pt3">Sticky header</h4> <h4 className="f4 mv0 pt3">Sticky header</h4>
</Link> </Link>
</div> </div>
</div> </div>
<h2 className="f2 lh-copy">Patterns</h2> <h2 className="f2 lh-copy">Patterns</h2>
<div className="flex flex-wrap"> <div className="flex flex-wrap items-start">
<div className="pa2 w-20"> <div className="pa1 w-20">
<Link to="/badge" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4"> <Link to="/badge" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
<BadgeCover /> <BadgeCover />
<h4 className="f4 mv0 pt3">Badge</h4> <h4 className="f4 mv0 pt3">Badge</h4>
</Link> </Link>
</div> </div>
<div className="pa2 w-20"> <div className="pa1 w-20">
<Link to="/centering" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4"> <Link to="/button-with-icon" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
<ButtonWithIconCover />
<h4 className="f4 mv0 pt3">Button with icon</h4>
</Link>
</div>
<div className="pa1 w-20">
<Link to="/centering" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
<CenterCover /> <CenterCover />
<h4 className="f4 mv0 pt3">Centering</h4> <h4 className="f4 mv0 pt3">Centering</h4>
</Link> </Link>
</div> </div>
<div className="pa2 w-20"> <div className="pa1 w-20">
<Link to="/input-add-on" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4"> <Link to="/input-add-on" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
<InputAddonCover /> <InputAddonCover />
<h4 className="f4 mv0 pt3">Input addon</h4> <h4 className="f4 mv0 pt3">Input addon</h4>
</Link> </Link>
</div> </div>
<div className="pa2 w-20"> <div className="pa1 w-20">
<Link to="/media-object" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4"> <Link to="/media-object" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
<MediaObjectCover /> <MediaObjectCover />
<h4 className="f4 mv0 pt3">Media object</h4> <h4 className="f4 mv0 pt3">Media object</h4>
</Link> </Link>
</div> </div>
<div className="pa2 w-20"> <div className="pa1 w-20">
<Link to="/stepper-input" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4"> <Link to="/stepper-input" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
<StepperInputCover /> <StepperInputCover />
<h4 className="f4 mv0 pt3">Stepper input</h4> <h4 className="f4 mv0 pt3">Stepper input</h4>
</Link> </Link>

6
client/covers/BadgeCover.jsx → client/layouts/badge/Cover.jsx
View File

@@ -1,8 +1,8 @@
import React from 'react'; import React from 'react';
import Frame from '../placeholders/Frame'; import Frame from '../../placeholders/Frame';
const BadgeCover = () => { const Cover = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex flex-column items-center justify-center"> <div className="h-100 flex flex-column items-center justify-center">
@@ -14,4 +14,4 @@ const BadgeCover = () => {
); );
}; };
export default BadgeCover; export default Cover;

12
client/layouts/Badge.jsx → client/layouts/badge/Details.jsx
View File

@@ -1,11 +1,11 @@
import React from 'react'; import React from 'react';
import DetailsLayout from '../DetailsLayout'; import DetailsLayout from '../../DetailsLayout';
import BrowserFrame from '../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import SampleCode from '../SampleCode'; import SampleCode from '../../SampleCode';
import useDocumentTitle from '../useDocumentTitle'; import useDocumentTitle from '../../useDocumentTitle';
const Badge = () => { const Details = () => {
useDocumentTitle('CSS Layout ∙ Badge'); useDocumentTitle('CSS Layout ∙ Badge');
return ( return (
@@ -48,4 +48,4 @@ code={`
); );
}; };
export default Badge; export default Details;

20
client/layouts/button-with-icon/Cover.jsx Normal file
View File

@@ -0,0 +1,20 @@
import React from 'react';
import Dot from '../../placeholders/Dot';
import Frame from '../../placeholders/Frame';
import Rectangle from '../../placeholders/Rectangle';
const Cover = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center pa2">
<div className="w-100 h2 flex flex-row items-center ba b--black-30 br2 ph1">
<div className="mr1"><Dot /></div>
<Rectangle />
</div>
</div>
</Frame>
);
};
export default Cover;

52
client/layouts/button-with-icon/Details.jsx Normal file
View File

@@ -0,0 +1,52 @@
import React from 'react';
import DetailsLayout from '../../DetailsLayout';
import Dot from '../../placeholders/Dot';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
import SampleCode from '../../SampleCode';
import useDocumentTitle from '../../useDocumentTitle';
const Details = () => {
useDocumentTitle('CSS Layout ∙ Button with icon');
return (
<DetailsLayout>
<h1 className="f1 tc">Button with icon</h1>
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="w5">
<button className="w-100 h3 flex flex-row items-center ba b--black-30 br2 ph2">
<div className="mr2"><Dot size={32} /></div>
<Rectangle />
</button>
</div>
</div>
}
source={
<SampleCode
lang="html"
code={`
<button style="
/* Content is centered */
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
">
<!-- Icon -->
...
<!-- Label -->
...
</div>
`}
/>
}
/>
</DetailsLayout>
);
};
export default Details;

10
client/covers/CenterCover.jsx → client/layouts/centering/Cover.jsx
View File

@@ -1,10 +1,10 @@
import React from 'react'; import React from 'react';
import Dot from '../placeholders/Dot'; import Dot from '../../placeholders/Dot';
import Frame from '../placeholders/Frame'; import Frame from '../../placeholders/Frame';
import Line from '../placeholders/Line'; import Line from '../../placeholders/Line';
const CenterCover = () => { const Cover = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex flex-column items-center justify-center"> <div className="h-100 flex flex-column items-center justify-center">
@@ -20,4 +20,4 @@ const CenterCover = () => {
); );
}; };
export default CenterCover; export default Cover;

16
client/layouts/Centering.jsx → client/layouts/centering/Details.jsx
View File

@@ -1,13 +1,13 @@
import React from 'react'; import React from 'react';
import DetailsLayout from '../DetailsLayout'; import DetailsLayout from '../../DetailsLayout';
import BrowserFrame from '../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Dot from '../placeholders/Dot'; import Dot from '../../placeholders/Dot';
import Rectangle from '../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
import SampleCode from '../SampleCode'; import SampleCode from '../../SampleCode';
import useDocumentTitle from '../useDocumentTitle'; import useDocumentTitle from '../../useDocumentTitle';
const Centering = () => { const Details = () => {
useDocumentTitle('CSS Layout ∙ Centering'); useDocumentTitle('CSS Layout ∙ Centering');
return ( return (
@@ -41,4 +41,4 @@ code={`
); );
}; };
export default Centering; export default Details;

8
client/covers/HolyGrailCover.jsx → client/layouts/holy-grail/Cover.jsx
View File

@@ -1,9 +1,9 @@
import React from 'react'; import React from 'react';
import Frame from '../placeholders/Frame'; import Frame from '../../placeholders/Frame';
import Line from '../placeholders/Line'; import Line from '../../placeholders/Line';
const HolyGrailCover = () => { const Cover = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex flex-column"> <div className="h-100 flex flex-column">
@@ -45,4 +45,4 @@ const HolyGrailCover = () => {
); );
}; };
export default HolyGrailCover; export default Cover;

16
client/layouts/HolyGrail.jsx → client/layouts/holy-grail/Details.jsx
View File

@@ -1,13 +1,13 @@
import React from 'react'; import React from 'react';
import DetailsLayout from '../DetailsLayout'; import DetailsLayout from '../../DetailsLayout';
import Block from '../placeholders/Block'; import Block from '../../placeholders/Block';
import BrowserFrame from '../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
import SampleCode from '../SampleCode'; import SampleCode from '../../SampleCode';
import useDocumentTitle from '../useDocumentTitle'; import useDocumentTitle from '../../useDocumentTitle';
const HolyGrail = () => { const Details = () => {
useDocumentTitle('CSS Layout ∙ Holy grail'); useDocumentTitle('CSS Layout ∙ Holy grail');
return ( return (
@@ -84,4 +84,4 @@ code={`
); );
}; };
export default HolyGrail; export default Details;

8
client/covers/InputAddonCover.jsx → client/layouts/input-add-on/Cover.jsx
View File

@@ -1,9 +1,9 @@
import React from 'react'; import React from 'react';
import Frame from '../placeholders/Frame'; import Frame from '../../placeholders/Frame';
import Line from '../placeholders/Line'; import Line from '../../placeholders/Line';
const InputAddonCover = () => { const Cover = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex items-center justify-center pa2"> <div className="h-100 flex items-center justify-center pa2">
@@ -20,4 +20,4 @@ const InputAddonCover = () => {
); );
}; };
export default InputAddonCover; export default Cover;

14
client/layouts/InputAddon.jsx → client/layouts/input-add-on/Details.jsx
View File

@@ -1,12 +1,12 @@
import React from 'react'; import React from 'react';
import DetailsLayout from '../DetailsLayout'; import DetailsLayout from '../../DetailsLayout';
import BrowserFrame from '../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
import SampleCode from '../SampleCode'; import SampleCode from '../../SampleCode';
import useDocumentTitle from '../useDocumentTitle'; import useDocumentTitle from '../../useDocumentTitle';
const InputAddon = () => { const Details = () => {
useDocumentTitle('CSS Layout ∙ Input add-on'); useDocumentTitle('CSS Layout ∙ Input add-on');
return ( return (
@@ -133,4 +133,4 @@ code={`
); );
}; };
export default InputAddon; export default Details;

10
client/covers/MediaObjectCover.jsx → client/layouts/media-object/Cover.jsx
View File

@@ -1,10 +1,10 @@
import React from 'react'; import React from 'react';
import Frame from '../placeholders/Frame'; import Frame from '../../placeholders/Frame';
import Line from '../placeholders/Line'; import Line from '../../placeholders/Line';
import Square from '../placeholders/Square'; import Square from '../../placeholders/Square';
const MediaObjectCover = () => { const Cover = () => {
return ( return (
<Frame> <Frame>
<div className="flex h-100 items-start pa2 w-100"> <div className="flex h-100 items-start pa2 w-100">
@@ -29,4 +29,4 @@ const MediaObjectCover = () => {
); );
}; };
export default MediaObjectCover; export default Cover;

18
client/layouts/MediaObject.jsx → client/layouts/media-object/Details.jsx
View File

@@ -1,14 +1,14 @@
import React from 'react'; import React from 'react';
import DetailsLayout from '../DetailsLayout'; import DetailsLayout from '../../DetailsLayout';
import Block from '../placeholders/Block'; import Block from '../../placeholders/Block';
import BrowserFrame from '../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
import Square from '../placeholders/Square'; import Square from '../../placeholders/Square';
import SampleCode from '../SampleCode'; import SampleCode from '../../SampleCode';
import useDocumentTitle from '../useDocumentTitle'; import useDocumentTitle from '../../useDocumentTitle';
const MediaObject = () => { const Details = () => {
useDocumentTitle('CSS Layout ∙ Media object'); useDocumentTitle('CSS Layout ∙ Media object');
return ( return (
@@ -64,4 +64,4 @@ code={`
); );
}; };
export default MediaObject; export default Details;

8
client/covers/SidebarCover.jsx → client/layouts/sidebar/Cover.jsx
View File

@@ -1,9 +1,9 @@
import React from 'react'; import React from 'react';
import Frame from '../placeholders/Frame'; import Frame from '../../placeholders/Frame';
import Line from '../placeholders/Line'; import Line from '../../placeholders/Line';
const SidebarCover = () => { const Cover = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex"> <div className="h-100 flex">
@@ -22,4 +22,4 @@ const SidebarCover = () => {
); );
}; };
export default SidebarCover; export default Cover;

14
client/layouts/Sidebar.jsx → client/layouts/sidebar/Details.jsx
View File

@@ -1,12 +1,12 @@
import React from 'react'; import React from 'react';
import DetailsLayout from '../DetailsLayout'; import DetailsLayout from '../../DetailsLayout';
import BrowserFrame from '../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Block from '../placeholders/Block'; import Block from '../../placeholders/Block';
import SampleCode from '../SampleCode'; import SampleCode from '../../SampleCode';
import useDocumentTitle from '../useDocumentTitle'; import useDocumentTitle from '../../useDocumentTitle';
const Sidebar = () => { const Details = () => {
useDocumentTitle('CSS Layout ∙ Sidebar'); useDocumentTitle('CSS Layout ∙ Sidebar');
return ( return (
@@ -55,4 +55,4 @@ code={`
); );
}; };
export default Sidebar; export default Details;

6
client/covers/StepperInputCover.jsx → client/layouts/stepper-input/Cover.jsx
View File

@@ -1,8 +1,8 @@
import React from 'react'; import React from 'react';
import Frame from '../placeholders/Frame'; import Frame from '../../placeholders/Frame';
const StepperInputCover = () => { const Cover = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex items-center justify-center pa2"> <div className="h-100 flex items-center justify-center pa2">
@@ -16,4 +16,4 @@ const StepperInputCover = () => {
); );
}; };
export default StepperInputCover; export default Cover;

12
client/layouts/StepperInput.jsx → client/layouts/stepper-input/Details.jsx
View File

@@ -1,12 +1,12 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import DetailsLayout from '../DetailsLayout'; import DetailsLayout from '../../DetailsLayout';
import BrowserFrame from '../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import SampleCode from '../SampleCode'; import SampleCode from '../../SampleCode';
import useDocumentTitle from '../useDocumentTitle'; import useDocumentTitle from '../../useDocumentTitle';
const StepperInput = () => { const Details = () => {
useDocumentTitle('CSS Layout ∙ Stepper input'); useDocumentTitle('CSS Layout ∙ Stepper input');
const [value, setValue] = useState(0); const [value, setValue] = useState(0);
const decrease = () => setValue(value - 1); const decrease = () => setValue(value - 1);
@@ -84,4 +84,4 @@ code={`
); );
}; };
export default StepperInput; export default Details;

8
client/covers/StickyFooterCover.jsx → client/layouts/sticky-footer/Cover.jsx
View File

@@ -1,9 +1,9 @@
import React from 'react'; import React from 'react';
import Frame from '../placeholders/Frame'; import Frame from '../../placeholders/Frame';
import Line from '../placeholders/Line'; import Line from '../../placeholders/Line';
const StickyFooterCover = () => { const Cover = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex flex-column"> <div className="h-100 flex flex-column">
@@ -35,4 +35,4 @@ const StickyFooterCover = () => {
); );
}; };
export default StickyFooterCover; export default Cover;

16
client/layouts/StickyFooter.jsx → client/layouts/sticky-footer/Details.jsx
View File

@@ -1,13 +1,13 @@
import React from 'react'; import React from 'react';
import DetailsLayout from '../DetailsLayout'; import DetailsLayout from '../../DetailsLayout';
import Block from '../placeholders/Block'; import Block from '../../placeholders/Block';
import BrowserFrame from '../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
import SampleCode from '../SampleCode'; import SampleCode from '../../SampleCode';
import useDocumentTitle from '../useDocumentTitle'; import useDocumentTitle from '../../useDocumentTitle';
const StickyFooter = () => { const Details = () => {
useDocumentTitle('CSS Layout ∙ Sticky footer'); useDocumentTitle('CSS Layout ∙ Sticky footer');
return ( return (
@@ -57,4 +57,4 @@ code={`
); );
}; };
export default StickyFooter; export default Details;

8
client/covers/StickyHeaderCover.jsx → client/layouts/sticky-header/Cover.jsx
View File

@@ -1,9 +1,9 @@
import React from 'react'; import React from 'react';
import Frame from '../placeholders/Frame'; import Frame from '../../placeholders/Frame';
import Line from '../placeholders/Line'; import Line from '../../placeholders/Line';
const StickyHeaderCover = () => { const Cover = () => {
return ( return (
<Frame> <Frame>
<div className="h-100 flex flex-column"> <div className="h-100 flex flex-column">
@@ -27,4 +27,4 @@ const StickyHeaderCover = () => {
); );
}; };
export default StickyHeaderCover; export default Cover;

16
client/layouts/StickyHeader.jsx → client/layouts/sticky-header/Details.jsx
View File

@@ -1,13 +1,13 @@
import React from 'react'; import React from 'react';
import DetailsLayout from '../DetailsLayout'; import DetailsLayout from '../../DetailsLayout';
import Block from '../placeholders/Block'; import Block from '../../placeholders/Block';
import BrowserFrame from '../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
import SampleCode from '../SampleCode'; import SampleCode from '../../SampleCode';
import useDocumentTitle from '../useDocumentTitle'; import useDocumentTitle from '../../useDocumentTitle';
const StickyHeader = () => { const Details = () => {
useDocumentTitle('CSS Layout ∙ Sticky header'); useDocumentTitle('CSS Layout ∙ Sticky header');
return ( return (
@@ -50,4 +50,4 @@ code={`
); );
}; };
export default StickyHeader; export default Details;