Untitled

import React from "react";
import { Stage, Layer, Rect, Text } from "react-konva";

const KitchenFloorPlan = () => {
  return (
    <Stage width={800} height={600}>
      <Layer>
        {/* Kitchen Outline (20m x 30m) */}
        <Rect x={50} y={50} width={600} height={400} stroke="black" strokeWidth={2} />
        <Text x={280} y={30} text="Kitchen Floor Plan (20m x 30m)" fontSize={16} />

        {/* Kitchen Island (2.4m x 1.2m) */}
        <Rect x={250} y={200} width={72} height={36} fill="lightgray" stroke="black" strokeWidth={1} />
        <Text x={260} y={210} text="Island" fontSize={12} />

        {/* Bar Stools (0.45m x 0.45m each) */}
        {[0, 1, 2, 3, 4].map((i) => (
          <Rect key={i} x={250 + i * 15} y={240} width={13.5} height={13.5} fill="brown" stroke="black" strokeWidth={1} />
        ))}

        {/* Back Counter (3m x 0.6m) */}
        <Rect x={100} y={100} width={90} height={18} fill="lightblue" stroke="black" strokeWidth={1} />
        <Text x={110} y={110} text="Back Counter" fontSize={12} />

        {/* Built-in Oven Unit (0.6m x 0.6m) */}
        <Rect x={500} y={100} width={18} height={18} fill="gray" stroke="black" strokeWidth={1} />
        <Text x={505} y={105} text="Oven" fontSize={10} />

        {/* Wall-mounted Shelves (1.5m x 0.3m) */}
        <Rect x={120} y={70} width={45} height={9} fill="lightgreen" stroke="black" strokeWidth={1} />
        <Text x={125} y={75} text="Shelves" fontSize={10} />
      </Layer>
    </Stage>
  );
};

export default KitchenFloorPlan;