task_id: task_create_component_share_modal
entity_id: component_share_modal
generated_at: '2025-12-18T18:15:12.917022'
workflow_version: v004
target:
  type: component
  definition:
    id: component_share_modal
    name: ShareModal
    description: Modal displaying share options and social buttons
    file_path: components/ShareModal.tsx
    props:
    - name: isOpen
      type: boolean
      required: true
      description: Controls modal visibility
    - name: onClose
      type: () => void
      required: true
      description: Callback to close modal
    - name: shareUrl
      type: string
      required: true
      description: The share URL to display and copy
    - name: title
      type: string
      required: true
      description: Title of content being shared
    - name: type
      type: '''song'' | ''playlist'' | ''album'''
      required: true
      description: Type of content for display context
    state:
    - name: copied
      type: boolean
      description: Shows copied confirmation after clipboard copy
    events:
    - name: onCopy
      payload: null
      description: Fired when user copies link to clipboard
    uses_components:
    - component_social_share_buttons
    uses_apis: []
    styling:
    - Centered modal with backdrop
    - Copy to clipboard button with icon
    - Success message after copy
    - Close button
    - Responsive design for mobile
related:
  models: []
  apis: []
  components:
  - id: component_social_share_buttons
    definition: &id001
      id: component_social_share_buttons
      name: SocialShareButtons
      description: Social media share buttons for Twitter and Facebook
      file_path: components/SocialShareButtons.tsx
      props:
      - name: url
        type: string
        required: true
        description: URL to share
      - name: title
        type: string
        required: true
        description: Title/text to include in share
      - name: type
        type: '''song'' | ''playlist'' | ''album'''
        required: false
        description: Type of content for customized share text
      events:
      - name: onPlatformShare
        payload: '{ platform: string }'
        description: Fired when user clicks a social share button
      uses_components: []
      uses_apis: []
      business_logic:
      - Twitter button opens Twitter intent URL with pre-filled text
      - Facebook button opens Facebook sharer dialog
      - Generate share text based on content type
      - URL encode parameters properly
      styling:
      - Buttons with platform brand colors
      - Platform icons (Twitter bird, Facebook f)
      - Hover and focus states
      - Responsive layout (stack on mobile)
dependencies:
  entity_ids:
  - component_social_share_buttons
  definitions:
  - id: component_social_share_buttons
    type: component
    definition: *id001
files:
  to_create:
  - app/components/ShareModal.tsx
  reference: []
acceptance:
- criterion: Component renders without errors
  verification: Import and render in test
- criterion: Props are typed correctly
  verification: TypeScript compilation
- criterion: Events fire correctly
  verification: Test event handlers