Glance/src/widgets/WIDGET_TEMPLATE.tsx

// Template for creating new widgets
// Copy this file and customize it for your needs

import { Component, createSignal, onMount } from 'solid-js';
import type { WidgetSettings, WidgetSchema } from '../types/widget';

// Define your widget's props interface
interface MyWidgetProps {
  settings: WidgetSettings;
}

// Create your widget component
export const MyWidget: Component<MyWidgetProps> = (props) => {
  // Add any state or signals you need
  const [data, setData] = createSignal<string>('');

  // Initialize your widget
  onMount(() => {
    // Fetch data, set up intervals, etc.
    // Access settings via props.settings.yourSettingName
  });

  return (
    <div style={{
      border: '1px solid var(--border)',
      padding: '1rem',
      'min-width': '200px'
    }}>
      {/* Your widget content here */}
      <div style={{ 'font-weight': 'bold' }}>
        {props.settings.title as string}
      </div>
      <div>
        {data()}
      </div>
    </div>
  );
};

// Define your widget's schema
export const myWidgetSchema: WidgetSchema = {
  name: 'My Widget',
  description: 'Description of what this widget does',
  settingsSchema: {
    // Define all configurable settings here
    title: {
      type: 'string',
      label: 'Widget Title',
      default: 'My Widget',
      required: true
    },
    refreshInterval: {
      type: 'number',
      label: 'Refresh Interval (ms)',
      default: 60000
    },
    enabled: {
      type: 'boolean',
      label: 'Enabled',
      default: true
    },
    mode: {
      type: 'select',
      label: 'Display Mode',
      default: 'compact',
      options: ['compact', 'detailed', 'minimal']
    }
  }
};

// Don't forget to:
// 1. Save this file in src/widgets/
// 2. Register it in src/widgets/registry.ts
// 3. Import it: import { MyWidget, myWidgetSchema } from './MyWidget';
// 4. Add to registry: 'my-widget': { schema: myWidgetSchema, Component: MyWidget }