malva-II/Personal_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
import * as React from "react"
import { motion } from "framer-motion"
import { addPropertyControls, ControlType } from "framer"

interface GridHoverImageProps {
    photos: string[]
    gap: number
    columns: number
    rows: number
    transition: number
    hoverSize: number
}

export function GridHoverImage({
    photos = [],
    gap = 10,
    columns = 3,
    rows = 3,
    transition = 0.3,
    hoverSize = 2,
}: GridHoverImageProps) {
    const [hovered, setHovered] = React.useState<number | null>(null)

    return (
        <div
            style={{
                display: "grid",
                gridTemplateColumns: `repeat(${columns}, 1fr)`,
                gridTemplateRows: `repeat(${rows}, 200px)`,
                gap: gap,
                width: "100%",
                height: "100%",
            }}
        >
            {photos.map((src, i) => {
                const isHovered = hovered === i

                return (
                    <motion.div
                        key={i}
                        onHoverStart={() => setHovered(i)}
                        onHoverEnd={() => setHovered(null)}
                        animate={{
                            gridColumn: isHovered
                                ? `span ${hoverSize}`
                                : "span 1",
                            gridRow: isHovered ? `span ${hoverSize}` : "span 1",
                        }}
                        transition={{ duration: transition }}
                        style={{
                            width: "100%",
                            height: "100%",
                            overflow: "hidden",
                            borderRadius: 4,
                            cursor: "pointer",
                        }}
                    >
                        <img
                            src={src}
                            style={{
                                width: "100%",
                                height: "100%",
                                objectFit: "cover",
                                display: "block",
                            }}
                        />
                    </motion.div>
                )
            })}
        </div>
    )
}

addPropertyControls(GridHoverImage, {
    photos: {
        type: ControlType.Array,
        propertyControl: { type: ControlType.Image },
        title: "photos",
    },
    gap: { type: ControlType.Number, defaultValue: 10 },
    columns: { type: ControlType.Number, defaultValue: 3 },
    rows: { type: ControlType.Number, defaultValue: 3 },
    transition: {
        type: ControlType.Number,
        defaultValue: 0.3,
        title: "Grid transition",
    },
    hoverSize: {
        type: ControlType.Number,
        defaultValue: 2,
        title: "Hover Grid size",
    },
})