25. Grid

This is an example of how you can use the map() function to generate rows and columns.

Code component

const rows = [0, 1]
const cols = [0, 1]
const size = 70
const padding = 10

export function CC25Grid() {
    return (
        <Frame
            width={size * cols.length + padding * (cols.length - 1)}
            height={size * rows.length + padding * (rows.length - 1)}
            backgroundColor="transparent"
            center
        >
            {rows.map(rowIndex => {
                return cols.map(colIndex => {
                    return (
                        <Frame
                            // Visual & layout
                            size={size}
                            radius={20}
                            backgroundColor="#fff"
                            top={(size + padding) * rowIndex}
                            left={(size + padding) * colIndex}
                            // Animation
                            whileHover={{ scale: 0.8, opacity: 0.5 }}
                            // Required by React
                            key={`${rowIndex} : ${colIndex}`}
                        />
                    )
                })
            })}
        </Frame>
    )
}

Framer Motion

When working with regular divs instead of frames, we might as well use a CSS Grid.

const rows = [0, 1]
const cols = [0, 1]
const size = 70
const padding = 10

export function FM25Grid() {
    return (
        <Center>
            <div
                style={{
                    display: "grid",
                    gridTemplateColumns: "auto auto",
                    gridGap: padding,
                }}
            >
                {rows.map(rowIndex => {
                    return cols.map(colIndex => {
                        return (
                            <motion.div
                                style={{
                                    width: size,
                                    height: size,
                                    borderRadius: 20,
                                    backgroundColor: "#fff",
                                }}
                                whileHover={{ scale: 0.8, opacity: 0.5 }}
                                key={`${rowIndex} : ${colIndex}`}
                            />
                        )
                    })
                })}
            </div>
        </Center>
    )
}

Override

export function Grid(): Override {
    return {
        whileHover: { scale: 0.8, opacity: 0.5 },
    }
}