first commit

src/components/FurnitureShape.tsx

@@ -0,0 +1,42 @@
+import { Group, Rect } from "react-konva";
+import type { FurnitureType } from "../types";
+
+export type Outline = "normal" | "valid" | "invalid";
+
+const STROKE: Record<Outline, string> = {
+  normal: "#3b3b3b",
+  valid: "#2f9e44",
+  invalid: "#e03131",
+};
+
+interface Props {
+  type: FurnitureType;
+  width: number; // meters
+  height: number;
+  pxPerM: number;
+  outline: Outline;
+  opacity?: number;
+}
+
+/** Top-down shape drawn at local (0,0). Position is set by the parent Group. */
+export function FurnitureShape({ type, width, height, pxPerM, outline, opacity = 1 }: Props) {
+  const w = width * pxPerM;
+  const h = height * pxPerM;
+  const stroke = STROKE[outline];
+  const strokeWidth = outline === "normal" ? 1.5 : 3;
+
+  if (type === "table") {
+    return (
+      <Group opacity={opacity}>
+        <Rect width={w} height={h} fill="#d9b382" stroke={stroke} strokeWidth={strokeWidth} cornerRadius={3} />
+      </Group>
+    );
+  }
+  const bar = Math.max(4, h * 0.2);
+  return (
+    <Group opacity={opacity}>
+      <Rect width={w} height={h} fill="#8fb4d9" stroke={stroke} strokeWidth={strokeWidth} cornerRadius={3} />
+      <Rect width={w} height={bar} fill="#4a6f96" cornerRadius={[3, 3, 0, 0]} listening={false} />
+    </Group>
+  );
+}