77 lines
2.8 KiB
TypeScript
77 lines
2.8 KiB
TypeScript
import React from 'react';
|
|
|
|
interface QuickEditToolbarProps {
|
|
draft: string;
|
|
isPreviewing: boolean;
|
|
}
|
|
|
|
const QuickEditToolbar: React.FC<QuickEditToolbarProps> = ({ draft, isPreviewing }) => {
|
|
if (!draft || isPreviewing) return null;
|
|
|
|
return (
|
|
<div style={{
|
|
display: 'flex',
|
|
gap: 8,
|
|
padding: '10px 16px',
|
|
borderBottom: '1px solid #eee',
|
|
background: '#fafafa'
|
|
}}>
|
|
<span style={{ fontSize: 12, color: '#666', alignSelf: 'center' }}>
|
|
Quick edits (preview):
|
|
</span>
|
|
<button
|
|
onClick={() => {
|
|
const lines = draft.split('\n');
|
|
if (lines.length > 0) {
|
|
const first = lines[0].trim();
|
|
lines[0] = first.replace(/^(.*?)([\.!?])?$/, '👉 $1$2');
|
|
}
|
|
const target = lines.join('\n');
|
|
window.dispatchEvent(new CustomEvent('linkedinwriter:applyEdit', { detail: { target } }));
|
|
}}
|
|
style={{ padding: '6px 10px', border: '1px solid #ddd', borderRadius: 6, background: '#fff', cursor: 'pointer' }}
|
|
>
|
|
Tighten Hook
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
const target = draft + '\n\nWhat are your thoughts on this? Share your experience in the comments below!';
|
|
window.dispatchEvent(new CustomEvent('linkedinwriter:applyEdit', { detail: { target } }));
|
|
}}
|
|
style={{ padding: '6px 10px', border: '1px solid #ddd', borderRadius: 6, background: '#fff', cursor: 'pointer' }}
|
|
>
|
|
Add CTA
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
const target = draft.length > 200 ? draft.substring(0, 200) + '...' : draft;
|
|
window.dispatchEvent(new CustomEvent('linkedinwriter:applyEdit', { detail: { target } }));
|
|
}}
|
|
style={{ padding: '6px 10px', border: '1px solid #ddd', borderRadius: 6, background: '#fff', cursor: 'pointer' }}
|
|
>
|
|
Shorten
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
const target = draft + '\n\nThis approach has shown strong results. The key is to maintain consistency while adapting to changing conditions.';
|
|
window.dispatchEvent(new CustomEvent('linkedinwriter:applyEdit', { detail: { target } }));
|
|
}}
|
|
style={{ padding: '6px 10px', border: '1px solid #ddd', borderRadius: 6, background: '#fff', cursor: 'pointer' }}
|
|
>
|
|
Lengthen
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
const target = `[Professionalized]` + '\n\n' + draft;
|
|
window.dispatchEvent(new CustomEvent('linkedinwriter:applyEdit', { detail: { target } }));
|
|
}}
|
|
style={{ padding: '6px 10px', border: '1px solid #ddd', borderRadius: 6, background: '#fff', cursor: 'pointer' }}
|
|
>
|
|
Professionalize
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default QuickEditToolbar;
|