import React from 'react'
import { Breadcrumbs } from '@freesewing/react/components/Breadcrumbs'
import { Link as DefaultLink } from '@freesewing/react/components/Link'
/**
* This is the default layout, including title and breadcrumbs
*
* @component
* @param {object} props - All component props
* @param {function} [props.Link = false] - An optional framework specific Link component
* @param {JSX.Element} [props.children = []] - The component children to render inside the layout
* @param {array} [props.crumbs = []] - Data for the breadcrumbs, see Breadcrumbs
* @param {string} props.title - The page title
* @returns {JSX.Element}
*/
export const Layout = ({ children = [], crumbs = [], Link = false, title }) => {
if (!Link) Link = DefaultLink
return (
)
}
/**
* This is the base layout
*
* @component
* @param {object} props - All component props
* @param {JSX.Element} [props.children = []] - The component children to render inside the layout
* @returns {JSX.Element}
*/
export const BaseLayout = ({ children }) => (
{children}
)
/**
* The left column of the base layout
*
* @component
* @param {object} props - All component props
* @param {JSX.Element} [props.children = []] - The component children to render inside the layout
* @returns {JSX.Element}
*/
export const BaseLayoutLeft = ({ children = [] }) => (
{children}
)
/**
* The right column of the base layout
*
* @component
* @param {object} props - All component props
* @param {JSX.Element} [props.children = []] - The component children to render inside the layout
* @returns {JSX.Element}
*/
export const BaseLayoutRight = ({ children = [] }) => (
{children}
)
/**
* The main column for prose (text like docs and so on)
*
* @component
* @param {object} props - All component props
* @param {JSX.Element} [props.children = []] - The component children to render inside the layout
* @param {boolean} [props.wide false] - Set this to true to render a full-width prose layout
* @returns {JSX.Element}
*/
export const BaseLayoutProse = ({ children = [], wide = false }) => (
{children}
)
/**
* The central column for wide content (no max-width)
*
* @component
* @param {object} props - All component props
* @param {JSX.Element} [props.children = []] - The component children to render inside the layout
* @returns {JSX.Element}
*/
export const BaseLayoutWide = ({ children = [] }) => (
{children}
)
/**
* A layout for pages that do their own title/layout, like the sign in page
*
* @component
* @param {object} props - All component props
* @param {JSX.Element} [props.children = []] - The component children to render inside the layout
* @returns {JSX.Element}
*/
export const NoTitleLayout = ({ children }) => {
return (
)
}