Can you add some sample blocks?

[sujit-baniya]

Can you add some sample blocks? I followed the example

I copied the components to local as

import {useRef, useEffect} from 'react'
import {Seatmap} from "~/packages/seatmap";

export const SeatMap = () => {
    const seatmapRef = useRef()
    const config = {
        legend: true,
        style: {
            seat: {
                hover: '#8fe100',
                color: '#f0f7fa',
                selected: '#8fe100',
                check_icon_color: '#fff',
                not_salable: '#0088d3',
                focus: '#8fe100',
            },
            legend: {
                font_color: '#3b3b3b',
                show: false
            },
            block: {
                title_color: '#fff'
            }
        }
    }

    let blocks = [
        {
            "id": 1,
            "title": "Test Block 1",
            "color": "#2c2828",
            "labels": [
                {
                    "title": "A",
                    "x": -30,
                    "y": 0
                },
                {
                    "title": "B",
                    "x": 120,
                    "y": 30
                }
            ],
            "seats": [
                {
                    "id": 1,
                    "x": 0,
                    "y": 0,
                    "salable": true,
                    "note": "note test",
                    "title": "49"
                },
                {
                    "id": 2,
                    "x": 30,
                    "y": 0,
                    "salable": true,
                    "note": "note test",
                    "title": "47"
                }
            ]
        }
    ]

    const seatClick = (seat) => {
        if (!seat.isSelected() && seat.item.salable === true) {
            seat.select()   // Set select seat
        } else {
            seat.unSelect() // Unselect seat
        }
    }

    return (
        <>
            <Seatmap
                className="w-full flex-1 h-full"
                ref={seatmapRef}
                seatClick={seatClick}
                blocks={blocks}
                config={config}>
            </Seatmap>
        </>
    )
}

Getting weird page.

[alisaitteke]

Hi @sujit-baniya. You can look at the https://github.com/alisaitteke/seatmap-canvas documents.