@coinmeca/ui
Version:
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
45 lines • 2.1 kB
JSX
"use client";
import { Fragment, useEffect, useState } from "react";
import { createGlobalStyle } from "styled-components";
import Style, { Grid } from "./GridContainer.styled";
import GridContent from "./GridContent";
import { GridArea as Area } from "./GridContent.styled";
export default function GridContainer(props) {
const gap = props?.gap || 0;
const scroll = typeof props?.scroll === "boolean" ? props?.scroll : true;
const [grid, setGrid] = useState();
useEffect(() => {
setGrid(Math.random().toString(16).substring(2));
}, []);
return (<Style $fullsize={props?.fullsize || false} $scroll={scroll}>
{grid && (<Grid data-area={grid} $area={props?.area} $direction={props?.direction} $gap={gap} $width={props?.width} $height={props?.height} $responsive={props?.responsive} style={props?.style}>
{props?.contents && props?.contents?.length > 0
? props?.contents?.map((v, k) => (<Fragment key={k}>
<GridContent format={props?.format} {...v}/>
<GridArea {...{
$parent: grid,
$id: k,
$area: v?.area,
$responsive: v?.responsive,
}}/>
</Fragment>))
: props?.children && props.children?.length > 0
? props?.children?.map((v, k) => (<Fragment key={k}>
<Fragment>{v}</Fragment>
<GridArea {...{
$parent: grid,
$id: k,
$area: v?.area,
$responsive: v?.responsive,
}}/>
</Fragment>))
: props?.children}
</Grid>)}
</Style>);
}
const GridArea = createGlobalStyle `
[data-area="${({ $parent }) => $parent}"] > *:nth-child(${({ $id }) => `${$id + 1}`}){
${Area};
}
`;
//# sourceMappingURL=GridContainer.jsx.map