malva-II/Fluid_Grid.tsx at main · malopezo/malva-II · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
import * as React from "react"
import { motion } from "framer-motion"
import { addPropertyControls, ControlType } from "framer"

type Props = {
    photos: string[]
    gap: number
    columns: number
    rows: number
    gridTransition: number
    hoverGridSize: number
}

export function GridHoverImage({
    photos = [],
    gap = 0.1,
    columns = 3,
    rows = 3,
    gridTransition = 0.7,
    hoverGridSize = 1.6,
}: Props) {
    // limit number of images to the grid size
    const maxImages = columns * rows
    const images = photos.slice(0, maxImages)

    return (
        <div
            style={{
                display: "grid",
                gridTemplateColumns: `repeat(${columns}, 1fr)`,
                gridTemplateRows: `repeat(${rows}, 1fr)`,
                gap: `${gap}rem`,
                width: "100%",
                height: "100%",
            }}
        >
            {images.map((src, i) => (
                <div
                    key={i}
                    style={{
                        position: "relative",
                        overflow: "hidden",
                        borderRadius: 6,
                    }}
                >
                    <motion.img
                        src={src}
                        alt={`grid-img-${i}`}
                        style={{
                            width: "100%",
                            height: "100%",
                            objectFit: "cover",
                        }}
                        initial={{ scale: 1 }}
                        whileHover={{ scale: hoverGridSize }}
                        transition={{
                            duration: gridTransition,
                            ease: "easeInOut",
                        }}
                    />
                </div>
            ))}
        </div>
    )
}

addPropertyControls(GridHoverImage, {
    photos: {
        type: ControlType.Array,
        title: "photos",
        propertyControl: { type: ControlType.Image },
    },
    gap: {
        type: ControlType.Number,
        title: "Gap",
        defaultValue: 0.1,
        min: 0,
        max: 5,
        step: 0.1,
    },
    columns: {
        type: ControlType.Number,
        title: "Collumns",
        defaultValue: 3,
        min: 1,
        max: 12,
        step: 1,
    },
    rows: {
        type: ControlType.Number,
        title: "Rows",
        defaultValue: 3,
        min: 1,
        max: 12,
        step: 1,
    },
    gridTransition: {
        type: ControlType.Number,
        title: "Grid transition",
        defaultValue: 0.7,
        min: 0.1,
        max: 3,
        step: 0.1,
    },
    hoverGridSize: {
        type: ControlType.Number,
        title: "Hover Grid size",
        defaultValue: 1.6,
        min: 1,
        max: 3,
        step: 0.1,
    },
})