Implement Site Builder with Puck and Booking Widget

2025-12-10 23:54:10 -05:00
parent 384fe0fd86
commit 76c0d71aa0
25 changed files with 1103 additions and 1 deletions
--- a/frontend/src/puckConfig.tsx
+++ b/frontend/src/puckConfig.tsx
@@ -0,0 +1,87 @@
+import React from "react";
+import type { Config } from "@measured/puck";
+import BookingWidget from "./components/booking/BookingWidget";
+
+type Props = {
+  Hero: { title: string; subtitle: string; align: "left" | "center" | "right"; backgroundColor: string; textColor: string };
+  TextSection: { heading: string; body: string; backgroundColor: string };
+  Booking: { headline: string; subheading: string; accentColor: string; buttonLabel: string };
+};
+
+export const config: Config<Props> = {
+  components: {
+    Hero: {
+      fields: {
+        title: { type: "text" },
+        subtitle: { type: "text" },
+        align: {
+          type: "radio",
+          options: [
+            { label: "Left", value: "left" },
+            { label: "Center", value: "center" },
+            { label: "Right", value: "right" },
+          ],
+        },
+        backgroundColor: { type: "text" }, // Puck doesn't have color picker by default? Or use "custom"?
+        textColor: { type: "text" },
+      },
+      defaultProps: {
+        title: "Welcome to our site",
+        subtitle: "We provide great services",
+        align: "center",
+        backgroundColor: "#ffffff",
+        textColor: "#000000",
+      },
+      render: ({ title, subtitle, align, backgroundColor, textColor }) => (
+        <div style={{ backgroundColor, color: textColor, padding: "4rem 2rem", textAlign: align }}>
+          <h1 style={{ fontSize: "3rem", fontWeight: "bold", marginBottom: "1rem" }}>{title}</h1>
+          <p style={{ fontSize: "1.5rem" }}>{subtitle}</p>
+        </div>
+      ),
+    },
+    TextSection: {
+      fields: {
+        heading: { type: "text" },
+        body: { type: "textarea" },
+        backgroundColor: { type: "text" },
+      },
+      defaultProps: {
+        heading: "About Us",
+        body: "Enter your text here...",
+        backgroundColor: "#f9fafb",
+      },
+      render: ({ heading, body, backgroundColor }) => (
+        <div style={{ backgroundColor, padding: "3rem 2rem" }}>
+          <div style={{ maxWidth: "800px", margin: "0 auto" }}>
+            <h2 style={{ fontSize: "2rem", marginBottom: "1rem" }}>{heading}</h2>
+            <div style={{ whiteSpace: "pre-wrap" }}>{body}</div>
+          </div>
+        </div>
+      ),
+    },
+    Booking: {
+      fields: {
+        headline: { type: "text" },
+        subheading: { type: "text" },
+        accentColor: { type: "text" },
+        buttonLabel: { type: "text" },
+      },
+      defaultProps: {
+        headline: "Book an Appointment",
+        subheading: "Select a service below",
+        accentColor: "#2563eb",
+        buttonLabel: "Book Now",
+      },
+      render: ({ headline, subheading, accentColor, buttonLabel }) => (
+        <div style={{ padding: "3rem 2rem", textAlign: "center" }}>
+          <BookingWidget 
+             headline={headline} 
+             subheading={subheading} 
+             accentColor={accentColor} 
+             buttonLabel={buttonLabel} 
+           />
+        </div>
+      ),
+    },
+  },
+};