Skip to content

Commit

Permalink
Support nested grids and refactor code
Browse files Browse the repository at this point in the history
  • Loading branch information
@DiegoAndai
DiegoAndai committed Jun 13, 2024
1 parent ea310e0 commit f24e8b1
Show file tree
Hide file tree
Showing 5 changed files with 425 additions and 165 deletions.
301 changes: 285 additions & 16 deletions apps/pigment-css-vite-app/src/pages/grid.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,303 @@
import * as React from 'react';
import Box from '@pigment-css/react/Box';
import Grid from '@pigment-css/react/Grid';
import { styled } from '@pigment-css/react';

const Card = styled.div`
const Item = styled.div`
background-color: #fff;
border: 1px solid #ced7e0;
padding: 8px;
border-radius: 4px;
text-align: center;
`;

const items = [
{ id: '1', size: 2},
{ id: '2', size: 2},
]
function GridDemo1() {
return (
<Grid container spacing={2}>
<Grid size={8}>
<Item>size=8</Item>
</Grid>
<Grid size={4}>
<Item>size=4</Item>
</Grid>
<Grid size={4}>
<Item>size=4</Item>
</Grid>
<Grid size={8}>
<Item>size=8</Item>
</Grid>
</Grid>
)
}

export default function InteractiveGrid() {
function GridDemo2() {
return (
<Grid container spacing={2}>
<Grid size={{ xs: 6, md: 8 }}>
<Item>xs=6 md=8</Item>
</Grid>
<Grid size={{ xs: 6, md: 4 }}>
<Item>xs=6 md=4</Item>
</Grid>
<Grid size={{ xs: 6, md: 4 }}>
<Item>xs=6 md=4</Item>
</Grid>
<Grid size={{ xs: 6, md: 8 }}>
<Item>xs=6 md=8</Item>
</Grid>
</Grid>
)
}

function GridDemo3() {
const [spacing, setSpacing] = React.useState(2);
return (
<div sx={{ p: 2}}>
<Grid
container
spacing={{ xs: 2, md: 3 }}
columns={12}
sx={{ width: '100%' }}
>
{items.map(({ id, size, offset, extraText}) => (
<Grid key={id} size={size} offset={offset}><Card>Item {id}{extraText}</Card></Grid>
<div sx={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
<Grid container spacing={spacing} sx={{ justifyContent: 'center' }}>
{[0, 1, 2].map((value) => (
<Grid key={value}>
<Item
sx={{
height: 140,
width: 100,
}}
/>
</Grid>
))}
</Grid>
<Grid container spacing={1} sx={{ justifyContent: 'center' }} >
<Grid size={'auto'}>Spacing:</Grid>
{[0, 0.5, 1, 2, 3, 4, 8, 12].map((value) => (
<Grid key={value} size={'auto'}>
<label>
<input type="radio" name="radio" value={value} checked={value === spacing} onChange={(e) => setSpacing(parseFloat(e.target.value))} />
{value}
</label>
</Grid>
))}
</Grid>
</div>
)
}

function GridDemo4() {
return (
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
<Grid size={6}>
<Item>1</Item>
</Grid>
<Grid size={6}>
<Item>2</Item>
</Grid>
<Grid size={6}>
<Item>3</Item>
</Grid>
<Grid size={6}>
<Item>4</Item>
</Grid>
</Grid>
)
}

function GridDemo5() {
return (
<Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
{Array.from(Array(6)).map((_, index) => (
<Grid size={{ xs: 2, sm: 4 }} key={index}>
<Item>{index + 1}</Item>
</Grid>
))}
</Grid>
)
}

function GridDemo6() {
return (
<Grid container spacing={3}>
<Grid size="grow">
<Item>grow</Item>
</Grid>
<Grid size={6}>
<Item>size=6</Item>
</Grid>
<Grid size="grow">
<Item>grow</Item>
</Grid>
</div>
</Grid>
)
}

function GridDemo7() {
return (
<Grid container spacing={3}>
<Grid size="auto">
<Item>Variable width item</Item>
</Grid>
<Grid size={6}>
<Item>size=6</Item>
</Grid>
<Grid size="grow">
<Item>grow</Item>
</Grid>
</Grid>
)
}

function GridDemo8() {
return (
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={2}>
<Grid size={{ xs: 12, md: 5, lg: 4 }}>
<Item>Email subscribe section</Item>
</Grid>
<Grid container size={{ xs: 12, md: 7, lg: 8 }} spacing={4}>
<Grid size={{ xs: 6, lg: 3 }}>
<Item>
<Box
id="category-a"
sx={{ fontSize: '12px', textTransform: 'uppercase' }}
>
Category A
</Box>
<Box component="ul" aria-labelledby="category-a" sx={{ pl: 2 }}>
<li>Link 1.1</li>
<li>Link 1.2</li>
<li>Link 1.3</li>
</Box>
</Item>
</Grid>
<Grid size={{ xs: 6, lg: 3 }}>
<Item>
<Box
id="category-b"
sx={{ fontSize: '12px', textTransform: 'uppercase' }}
>
Category B
</Box>
<Box component="ul" aria-labelledby="category-b" sx={{ pl: 2 }}>
<li>Link 2.1</li>
<li>Link 2.2</li>
<li>Link 2.3</li>
</Box>
</Item>
</Grid>
<Grid size={{ xs: 6, lg: 3 }}>
<Item>
<Box
id="category-c"
sx={{ fontSize: '12px', textTransform: 'uppercase' }}
>
Category C
</Box>
<Box component="ul" aria-labelledby="category-c" sx={{ pl: 2 }}>
<li>Link 3.1</li>
<li>Link 3.2</li>
<li>Link 3.3</li>
</Box>
</Item>
</Grid>
<Grid size={{ xs: 6, lg: 3 }}>
<Item>
<Box
id="category-d"
sx={{ fontSize: '12px', textTransform: 'uppercase' }}
>
Category D
</Box>
<Box component="ul" aria-labelledby="category-d" sx={{ pl: 2 }}>
<li>Link 4.1</li>
<li>Link 4.2</li>
<li>Link 4.3</li>
</Box>
</Item>
</Grid>
</Grid>
<Grid
size={12}
container
direction={{ xs: 'column', sm: 'row' }}
sx={{ fontSize: '12px', justifyContent: 'space-between', alignItems: 'center'}}
>
<Grid sx={{ order: { xs: 2, sm: 1 } }}>
<Item>© Copyright</Item>
</Grid>
<Grid container columnSpacing={1} sx={{ order: { xs: 1, sm: 2 } }}>
<Grid>
<Item>Link A</Item>
</Grid>
<Grid>
<Item>Link B</Item>
</Grid>
<Grid>
<Item>Link C</Item>
</Grid>
</Grid>
</Grid>
</Grid>
</Box>
)
}

function GridDemo9() {
return (
<Grid container spacing={2} columns={16}>
<Grid size={{xs: 8}}>
<Item>size=8</Item>
</Grid>
<Grid size={{xs: 8}}>
<Item>size=8</Item>
</Grid>
</Grid>
)
}

function GridDemo10() {
return (
<Grid container spacing={3} sx={{ flexGrow: 1 }}>
<Grid size={{ xs: 6, md: 2 }} offset={{ xs: 3, md: 0 }}>
<Item>1</Item>
</Grid>
<Grid size={{ xs: 4, md: 2 }} offset={{ md: "auto" }}>
<Item>2</Item>
</Grid>
<Grid size={{ xs: 4, md: 2 }} offset={{ xs: 4, md: 0 }} >
<Item>3</Item>
</Grid>
<Grid size={{ xs: 'grow', md: 6 }} offset={{ md: 2 }}>
<Item>4</Item>
</Grid>
</Grid>
)
}

const demos = [
{ id: '1', component: GridDemo1 },
{ id: '2', component: GridDemo2 },
{ id: '3', component: GridDemo3 },
{ id: '4', component: GridDemo4 },
{ id: '5', component: GridDemo5 },
{ id: '6', component: GridDemo6 },
{ id: '7', component: GridDemo7 },
{ id: '8', component: GridDemo8 },
{ id: '9', component: GridDemo9 },
{ id: '10', component: GridDemo10 },
]

export default function InteractiveGrid() {

return (
<div sx={{ p: 2, mb: 16, display: 'flex', flexDirection: 'column', gap: 2}}>
<a href="https://mui.com/system/react-grid">Benchmark v5</a>
<a href="https://next.mui.com/system/react-grid">Benchmark next</a>
{demos.map(demo => {
const Demo = demo.component;
return (
<div key={demo.id} sx={{ flex: '1 1 0', pb: 4, borderBottom: '1px solid gray' }}>
<h3>Grid Demo {demo.id}</h3>
<Demo />
</div>
);
})}
</div>
);
}
14 changes: 8 additions & 6 deletions packages/pigment-css-react/src/Grid.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,15 @@ import { PolymorphicComponent } from './Box';
type CssProperty<T> = T | Array<T> | Partial<Record<Breakpoint, T>>;

type GridBaseProps = {
display?: CssProperty<'flex' | 'inline-flex'>;
spacing?: CssProperty<number | string>;
direction?: CssProperty<CSS.StandardLonghandProperties['flexDirection']>;
justifyContent?: CssProperty<CSS.StandardLonghandProperties['justifyContent']>;
alignItems?: CssProperty<CSS.StandardLonghandProperties['alignItems']>;
divider?: React.ReactNode;
className?: string;
columns?: CssProperty<number>;
columnSpacing?: CssProperty<number | string>;
container?: boolean;
direction?: CssProperty<CSS.StandardLonghandProperties['flexDirection']>;
offset?: CssProperty<number | 'auto'>;
rowSpacing?: CssProperty<number | string>;
size?: CssProperty<number | 'grow' | 'auto'>;
spacing?: CssProperty<number | string>;
};

declare const Grid: PolymorphicComponent<GridBaseProps>;
Expand Down
Loading

0 comments on commit f24e8b1

Please sign in to comment.