Widgets

// components/widgets/site-widgets/MyWidget.tsx
type MyWidgetProps = {
  data: any;
  content?: any;
  searchParams?: any;
};
 
const MyWidget = ({ data, content }: MyWidgetProps) => {
  // All widget content lives in data.parameters
  const { title, description } = data?.parameters || {};
 
  return (
    <div className="my-widget">
      <h2>{title}</h2>
      <p>{description}</p>
    </div>
  );
};
 
export default MyWidget;
 
// Export widget metadata — Visor Studio uses this to register the widget
export const widgetJsonConfiguration = {
  collection: 'my_widget',
  id: 'my_widget',
  item: {
    id: 'my_widget',
    name: 'My Widget',
    icon: 'widgets',
    widget_definition: { name: 'my_widget' },
    parameters: { title: '', description: '' },
  },
};

// components/widgets/site-widgets/client/ClientMyWidget.tsx
"use client";
 
import { useState } from "react";
import FormConfigurationProvider from "@/components/form-configuration/FormConfigurationProvider";
 
type MyWidgetProps = {
  data: any;
  draftMode: boolean;
};
 
export default function ClientMyWidget({ data, draftMode }: MyWidgetProps) {
  // ✅ Use ?? for each field individually — handles falsy values like "", 0, false correctly
  const [formValue, setFormValue] = useState({
    ...data.parameters,
    title: data.parameters?.title ?? "",
    description: data.parameters?.description ?? "",
  });
 
  return (
    <FormConfigurationProvider data={data} draftMode={draftMode}>
      <div className="my-widget">
        <h2>{formValue.title}</h2>
        <p>{formValue.description}</p>
      </div>
    </FormConfigurationProvider>
  );
}