🪑 Seat Editor

An interactive seat layout editor built with React (or your stack). Create, customize, and arrange seating layouts visually — ideal for theaters, events, restaurants, and more.
!Preview
---

✨ Features

- 🎨 Drag-and-drop interface for adding and moving seats
- 🪑 Support for various seat shapes: square, circle, table with seats
- 🔤 Editable text labels
- 🔁 Rotate, resize, and duplicate components
- 🧠 Smart snap alignment (optional)
- 💾 Save & Load layout data
- 🔍 Zoom and pan the canvas
- 🧰 Modular component-based structure

---

``tsx
"use client";
import { useState } from "react";
import { SeatEditor } from "seat-editor";

export default function Home() {
const [componentProps, setComponentProps] = useState([]);
const [extraComponentProps, setExtraComponentProps] = useState([]);

const handleCurrentStateChange = (currentState: any) => {
console.log("Current state changed:", currentState);
};

const handleSelectComponent = (selectedComponent: any) => {
console.log("Selected component:", selectedComponent);
};

return (



);
}
`

For only View

`tsx
"use client"
import LayerView from "@/features/view/index";
import { dataDummy, dummyImage } from "./constant";
const OnlyView = () => {
return (
<>


);
};
export default OnlyView;

`




🔧 Props

| Prop | Type | Description |
|-----------------------|-------------------------------------------|------------------------------------------------------------------------------|
| componentProps | any[] | List of main components (e.g., tables, chairs) to render. |
| extraComponentProps | any[] | List of extra components (e.g., backgrounds, decorations) to render. |
| onCurrentStateChange| (state: any) => void | Callback triggered when component state updates. |
| onSelectComponent | (component: any) => void | Callback triggered when a component is selected (clicked). |
| mappingKey | string | Key name used to map nested shape data from component. |
| selectedTableColor | string | Color value for highlighting selected components. |
| colorMatchKey | { color: string, key: string }[] | Array to match status keys with specific colors. |
| statusKey | string | Key name used from each component to determine its current status. |
| action | File | You can put logic to this props|
| mappingProps | any` | responseMapping?: {
status: string;
message: string;
data: string;
src: string;
};|

add tailwind prefix node add-tailwind-prefix.js --prefix=my-
remove prefix tailwind node remove-tailwind-prefix.js --prefix=my-