107 lines
3.1 KiB
YAML
107 lines
3.1 KiB
YAML
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
|