PHP Classes

File: src/components/layout/Layout.tsx

Recommend this page to a friend!
  Classes of Maniruzzaman Akash   WordPress React Plugin Kit   src/components/layout/Layout.tsx   Download  
File: src/components/layout/Layout.tsx
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: WordPress React Plugin Kit
Environment to develop new WordPress plugins
Author: By
Last change:
Date: 1 year ago
Size: 3,280 bytes
 

Contents

Class file image Download
/** * External dependencies */ import { faChevronLeft } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Link } from 'react-router-dom'; export interface ILayout { // Page Heading Section: Required title: JSX.Element; slug: string; headingCustomClass?: string; // Back buttons hasBackButton?: boolean; backButtonTitle?: string; backButtonLink?: string; // Page Right Side Contents hasRightSideContent?: boolean; rightSideContent?: JSX.Element; children: React.ReactNode; } /** * Generate Default Props for Layout component. */ const LayoutDefaultProps = { title: <></>, slug: '', headingCustomClass: '', hasBackButton: false, backButtonTitle: '', backButtonLink: '', hasRightSideContent: false, rightSideContent: <></>, }; /** * Layout Component. * * Handles all of the page scaffolding. * * @param props * @return {JSX.Element} JSX element */ const Layout = (props: ILayout) => { const { title, slug, headingCustomClass, hasBackButton, backButtonTitle, backButtonLink, hasRightSideContent, rightSideContent, children, } = props; const getClassNames = () => { let leftSideClassNames = 'flex-1'; const rightSideClassNames = 'flex-1 text-right'; // For overview/dashboard page, remove right side flex for mobile devices. if ('overview' === slug || 'email-template-create' === slug) { leftSideClassNames = 'flex-none'; } return { leftSideClassNames, rightSideClassNames, }; }; return ( <div className={`cp-${slug}-page`}> {hasBackButton && ( <div className="w-full mb-2"> <Link to={ typeof backButtonLink !== 'undefined' ? backButtonLink : '' } className="focus:shadow-none focus:outline-none" > <span className="text-gray-dark text-sm"> <FontAwesomeIcon icon={faChevronLeft} className="mr-3" /> {backButtonTitle} </span> </Link> </div> )} {/* Page Heading Section */} <div className={`flex mb-5 mx-8 ${headingCustomClass}`}> <div className={getClassNames().leftSideClassNames}> {title} </div> {/* Page Right Side Section */} {hasRightSideContent && ( <div className={getClassNames().rightSideClassNames}> {rightSideContent} </div> )} </div> {/* Page Content Section */} <div className="cp-content-area mx-8">{children}</div> </div> ); }; Layout.defaultProps = LayoutDefaultProps; export default Layout;