code.tsx

/// <reference types="@figma/widget-typings" />

const { widget } = figma;
const { useSyncedState, usePropertyMenu, AutoLayout, Text: WidgetText } = widget;

// Role presets
const rolePresets = {
  'design': {
    text: 'Design',
    color: '#8b5cf6'
  },
  'copywriting': {
    text: 'Copywriting',
    color: '#06b6d4'
  }
} as const;

// Status presets with enhanced colors and styling
const statusPresets = {
  'in-progress': {
    text: '🚧  In Progress',
    backgroundColor: '#FFC700',
    textColor: '#642000',
    borderColor: '#e4b404'
  },
  'review': {
    text: '🔍  Ready for Review',
    backgroundColor: '#0060D0',
    textColor: '#ffffff',
    borderColor: '#2e6dd2'
  },
  'approved': {
    text: '✅  Approved',
    backgroundColor: '#437C16',
    textColor: '#ffffff',
    borderColor: '#396c12'
  },
  'not-started': {
    text: 'Not Started',
    backgroundColor: '#C2C1BB',
    textColor: '#000000',
    borderColor: '#a5aab2'
  }
} as const;

type RoleKey = keyof typeof rolePresets;
type StatusKey = keyof typeof statusPresets;

function DesignStatusChip() {
  // Synced state for the current role and status
  const [currentRole, setCurrentRole] = useSyncedState('currentRole', 'design' as RoleKey);
  const [currentStatus, setCurrentStatus] = useSyncedState('currentStatus', 'in-progress' as StatusKey);
  
  // Property menu for changing role and status
  usePropertyMenu(
    [
      {
        itemType: 'dropdown',
        propertyName: 'role',
        tooltip: 'Change role',
        selectedOption: currentRole,
        options: [
          { option: 'design', label: 'Design' },
          { option: 'copywriting', label: 'Copywriting' }
        ]
      },
      {
        itemType: 'separator'
      },
      {
        itemType: 'dropdown',
        propertyName: 'status',
        tooltip: 'Change status',
        selectedOption: currentStatus,
        options: [
          { option: 'not-started', label: 'Not Started' },
          { option: 'in-progress', label: 'In Progress' },
          { option: 'review', label: 'Ready for Review' },
          { option: 'approved', label: 'Approved' }
        ]
      }
    ],
    (event) => {
      if (event.propertyName === 'role') {
        setCurrentRole(event.propertyValue as RoleKey);
      } else if (event.propertyName === 'status') {
        setCurrentStatus(event.propertyValue as StatusKey);
      }
    }
  );
  
  // Get current presets
  const rolePreset = rolePresets[currentRole];
  const statusPreset = statusPresets[currentStatus];
  
  return (
    <AutoLayout
      direction="horizontal"
      horizontalAlignItems="center"
      verticalAlignItems="center"
      padding={0}
      cornerRadius={20}
      fill={statusPreset.backgroundColor}
      stroke={statusPreset.borderColor}
      strokeWidth={1}
      spacing={0}
      width="hug-contents"
      height={36}
      effect={[
        {
          type: 'drop-shadow',
          color: '#00000015',
          offset: { x: 0, y: 2 },
          blur: 8,
          spread: 0
        },
        {
          type: 'drop-shadow',
          color: '#00000008',
          offset: { x: 0, y: 1 },
          blur: 3,
          spread: 0
        }
      ]}
    >
      {/* Left Half - Role */}
      <AutoLayout
        direction="horizontal"
        horizontalAlignItems="center"
        verticalAlignItems="center"
        padding={{ left: 16, right: 12, bottom:10, top: 10 }}
        cornerRadius={{ topLeft: 20, topRight: 0, bottomLeft: 20, bottomRight: 0 }}
        fill={{
          type: 'solid',
          color: { r: 1, g: 1, b: 1, a: 0.2 }
        }}
        spacing={0}
        width="hug-contents"
        height="fill-parent"
      >
        <WidgetText
          fontSize={13}
          fontWeight={600}
          fill={statusPreset.textColor}
          fontFamily="Inter"
        >
          {rolePreset.text}
        </WidgetText>
      </AutoLayout>
      
      {/* Right Half - Status */}
      <AutoLayout
        direction="horizontal"
        horizontalAlignItems="center"
        verticalAlignItems="center"
        padding={{ left: 12, right: 16, bottom:10, top: 10 }}
        cornerRadius={{ topLeft: 0, topRight: 20, bottomLeft: 0, bottomRight: 20 }}
        fill={{
          type: 'solid',
          color: { r: 0, g: 0, b: 0, a: 0 }
        }}
        spacing={0}
        width="hug-contents"
        height="fill-parent"
      >
        <WidgetText
          fontSize={13}
          fontWeight={600}
          fill={statusPreset.textColor}
          fontFamily="Inter"
        >
          {statusPreset.text}
        </WidgetText>
      </AutoLayout>
    </AutoLayout>
  );
}

widget.register(DesignStatusChip);