Merge pull request 'Edited container - wideclass condition has been added' (#116) from fix/container-component-and/or-tailwind-class into develop
Reviewed-on: http://85.143.176.51:3000/free-land/front-end/pulls/116
This commit is contained in:
commit
ada0f450f5
@ -5,19 +5,24 @@ type Props = {
|
|||||||
* Content of component
|
* Content of component
|
||||||
*/
|
*/
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
|
/**
|
||||||
|
* Display variants of container
|
||||||
|
*/
|
||||||
|
variant?: "straight" | "wide";
|
||||||
/**
|
/**
|
||||||
* Component styling
|
* Component styling
|
||||||
*/
|
*/
|
||||||
className?: string;
|
className?: string;
|
||||||
} & Omit<React.ComponentPropsWithoutRef<"div">, "">
|
};
|
||||||
/**
|
/**
|
||||||
* Main container to handle page content max-width on
|
* Main container to handle page content max-width on
|
||||||
* different screen sizes
|
* different screen sizes
|
||||||
*/
|
*/
|
||||||
export default function Container({children, className}: Props) {
|
export default function Container({ children, variant, className }: Props) {
|
||||||
|
const wideClass = variant == "straight" ? "container" : "container-wide";
|
||||||
return (
|
return (
|
||||||
<div className={ classNames('container mx-auto', className) }>
|
<div className={classNames("mx-auto", wideClass, className)}>
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user