mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-09 23:57:08 +02:00
Lazy load pattern cover
This commit is contained in:
Phuoc Nguyen
21
client/CoverCard.jsx
Normal file
21
client/CoverCard.jsx
Normal file
@@ -0,0 +1,21 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import CoverLoader from './CoverLoader';
|
||||
import slug from './helpers/slug';
|
||||
|
||||
const CoverCard = ({ pattern }) => {
|
||||
return (
|
||||
<div className="pa1 w-20">
|
||||
<Link
|
||||
to={`/${slug(pattern)}`}
|
||||
className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3"
|
||||
>
|
||||
<CoverLoader pattern={pattern} />
|
||||
<h4 className="f5 mv0 pt3">{pattern}</h4>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CoverCard;
|
||||
@@ -1,6 +1,7 @@
|
||||
import loadable from '@loadable/component';
|
||||
|
||||
import slug from './helpers/slug';
|
||||
//import slug from './helpers/slug';
|
||||
const slug = item => item.toLowerCase().split(' ').join('-');
|
||||
|
||||
const CoverLoader = loadable(props => import(`./layouts/${slug(props.pattern)}/Cover`));
|
||||
|
||||
|
||||
261
client/Home.jsx
261
client/Home.jsx
@@ -1,41 +1,8 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
//import CoverLoader from './CoverLoader';
|
||||
import BadgeCover from './layouts/badge/Cover';
|
||||
import BreadcrumbCover from './layouts/breadcrumb/Cover';
|
||||
import ButtonWithIconCover from './layouts/button-with-icon/Cover';
|
||||
import CardCover from './layouts/card/Cover';
|
||||
import CenterCover from './layouts/centering/Cover';
|
||||
import DotNavigationCover from './layouts/dot-navigation/Cover';
|
||||
import FeatureListCover from './layouts/feature-list/Cover';
|
||||
import FixedAtCornerCover from './layouts/fixed-at-corner/Cover';
|
||||
import HolyGrailCover from './layouts/holy-grail/Cover';
|
||||
import InputAddonCover from './layouts/input-add-on/Cover';
|
||||
import MediaObjectCover from './layouts/media-object/Cover';
|
||||
import MenuCover from './layouts/menu/Cover';
|
||||
import ModalCover from './layouts/modal/Cover';
|
||||
import NotificationCover from './layouts/notification/Cover';
|
||||
import PaginationCover from './layouts/pagination/Cover';
|
||||
import PreviousNextButtonCover from './layouts/previous-next-buttons/Cover';
|
||||
import PricingTableCover from './layouts/pricing-table/Cover';
|
||||
import ProgressBarCover from './layouts/progress-bar/Cover';
|
||||
import SameHeightColumnsCover from './layouts/same-height-columns/Cover';
|
||||
import SearchBoxCover from './layouts/search-box/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 CoverCard from './CoverCard';
|
||||
import useDocumentTitle from './hooks/useDocumentTitle';
|
||||
import Layout from './Layout';
|
||||
|
||||
const Home = () => {
|
||||
useDocumentTitle('CSS Layout');
|
||||
@@ -78,36 +45,11 @@ const Home = () => {
|
||||
<h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0" style={{ transform: 'translate(0, -50%)' }}>Layouts</h3>
|
||||
|
||||
<div className="flex flex-wrap items-start pa4">
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/holy-grail" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<HolyGrailCover />
|
||||
<h4 className="f5 mv0 pt3">Holy grail</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/sidebar" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<SidebarCover />
|
||||
<h4 className="f5 mv0 pt3">Sidebar</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/split-screen" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<SplitScreenCover />
|
||||
<h4 className="f5 mv0 pt3">Split screen</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/sticky-footer" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<StickyFooterCover />
|
||||
<h4 className="f5 mv0 pt3">Sticky footer</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/sticky-header" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<StickyHeaderCover />
|
||||
<h4 className="f5 mv0 pt3">Sticky header</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<CoverCard pattern="Holy grail" />
|
||||
<CoverCard pattern="Sidebar" />
|
||||
<CoverCard pattern="Split screen" />
|
||||
<CoverCard pattern="Sticky footer" />
|
||||
<CoverCard pattern="Sticky header" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -115,168 +57,33 @@ const Home = () => {
|
||||
<h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0" style={{ transform: 'translate(0, -50%)' }}>Patterns</h3>
|
||||
|
||||
<div className="flex flex-wrap items-start pa4">
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/badge" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<BadgeCover pattern="Badge" />
|
||||
<h4 className="f5 mv0 pt3">Badge</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/breadcrumb" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<BreadcrumbCover />
|
||||
<h4 className="f5 mv0 pt3">Breadcrumb</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/button-with-icon" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<ButtonWithIconCover />
|
||||
<h4 className="f5 mv0 pt3">Button with icon</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/card" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<CardCover />
|
||||
<h4 className="f5 mv0 pt3">Card</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 />
|
||||
<h4 className="f5 mv0 pt3">Centering</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/dot-navigation" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<DotNavigationCover />
|
||||
<h4 className="f5 mv0 pt3">Dot navigation</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/feature-list" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<FeatureListCover />
|
||||
<h4 className="f5 mv0 pt3">Feature list</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/fixed-at-corner" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<FixedAtCornerCover />
|
||||
<h4 className="f5 mv0 pt3">Fixed at corner</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/input-add-on" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<InputAddonCover />
|
||||
<h4 className="f5 mv0 pt3">Input addon</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/media-object" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<MediaObjectCover />
|
||||
<h4 className="f5 mv0 pt3">Media object</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/menu" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<MenuCover />
|
||||
<h4 className="f5 mv0 pt3">Menu</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/modal" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<ModalCover />
|
||||
<h4 className="f5 mv0 pt3">Modal</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/notification" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<NotificationCover />
|
||||
<h4 className="f5 mv0 pt3">Notification</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/pagination" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<PaginationCover />
|
||||
<h4 className="f5 mv0 pt3">Pagination</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/previous-next-buttons" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<PreviousNextButtonCover />
|
||||
<h4 className="f5 mv0 pt3">Previous next buttons</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/pricing-table" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<PricingTableCover />
|
||||
<h4 className="f5 mv0 pt3">Pricing table</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/progress-bar" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<ProgressBarCover />
|
||||
<h4 className="f5 mv0 pt3">Progress bar</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/same-height-columns" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<SameHeightColumnsCover />
|
||||
<h4 className="f5 mv0 pt3">Same height columns</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/search-box" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<SearchBoxCover />
|
||||
<h4 className="f5 mv0 pt3">Search box</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/separator" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<SeparatorCover />
|
||||
<h4 className="f5 mv0 pt3">Separator</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/simple-grid" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<SimpleGridCover />
|
||||
<h4 className="f5 mv0 pt3">Simple grid</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/slider" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<SliderCover />
|
||||
<h4 className="f5 mv0 pt3">Slider</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/split-navigation" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<SplitNavigationCover />
|
||||
<h4 className="f5 mv0 pt3">Split navigation</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/stepper-input" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<StepperInputCover />
|
||||
<h4 className="f5 mv0 pt3">Stepper input</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/switch" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<SwitchCover />
|
||||
<h4 className="f5 mv0 pt3">Switch</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/tab" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<TabCover />
|
||||
<h4 className="f5 mv0 pt3">Tab</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pa1 w-20">
|
||||
<Link to="/wizard" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
|
||||
<WizardCover />
|
||||
<h4 className="f5 mv0 pt3">Wizard</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<CoverCard pattern="Badge" />
|
||||
<CoverCard pattern="Breadcrumb" />
|
||||
<CoverCard pattern="Button with icon" />
|
||||
<CoverCard pattern="Card" />
|
||||
<CoverCard pattern="Centering" />
|
||||
<CoverCard pattern="Dot navigation" />
|
||||
<CoverCard pattern="Feature list" />
|
||||
<CoverCard pattern="Fixed at corner" />
|
||||
<CoverCard pattern="Input add-on" />
|
||||
<CoverCard pattern="Media object" />
|
||||
<CoverCard pattern="Menu" />
|
||||
<CoverCard pattern="Modal" />
|
||||
<CoverCard pattern="Notification" />
|
||||
<CoverCard pattern="Pagination" />
|
||||
<CoverCard pattern="Previous next buttons" />
|
||||
<CoverCard pattern="Pricing table" />
|
||||
<CoverCard pattern="Progress bar" />
|
||||
<CoverCard pattern="Same height columns" />
|
||||
<CoverCard pattern="Search box" />
|
||||
<CoverCard pattern="Separator" />
|
||||
<CoverCard pattern="Simple grid" />
|
||||
<CoverCard pattern="Slider" />
|
||||
<CoverCard pattern="Split navigation" />
|
||||
<CoverCard pattern="Stepper input" />
|
||||
<CoverCard pattern="Switch" />
|
||||
<CoverCard pattern="Tab" />
|
||||
<CoverCard pattern="Wizard" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user