45 lines
4.2 KiB
JavaScript
45 lines
4.2 KiB
JavaScript
const ColumnClipButton = ({ onClick, label = 'Прикрепить файл' }) => {
|
|
return (
|
|
<button
|
|
onClick={onClick}
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '8px',
|
|
padding: '10px 16px',
|
|
border: '1px solid #ddd',
|
|
borderRadius: '6px',
|
|
background: 'white',
|
|
cursor: 'pointer',
|
|
fontSize: '14px',
|
|
fontWeight: '500',
|
|
transition: 'all 0.2s ease',
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
e.target.style.background = '#f5f5f5';
|
|
e.target.style.borderColor = '#007bff';
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
e.target.style.background = 'white';
|
|
e.target.style.borderColor = '#ddd';
|
|
}}
|
|
>
|
|
{/* Иконка колонки */}
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
|
|
<rect x="2" y="4" width="3" height="12" rx="1" />
|
|
<rect x="8" y="2" width="3" height="16" rx="1" />
|
|
<rect x="14" y="6" width="3" height="10" rx="1" />
|
|
</svg>
|
|
|
|
{/* Иконка скрепки */}
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
|
|
<path d="M10.5 5.5L8.5 7.5L7.5 6.5L9.5 4.5C9.9 4.1 10.6 4.1 11 4.5C11.4 4.9 11.4 5.6 11 6L7 10C6.6 10.4 6.3 10.4 6 10C5.7 9.6 5.7 9.3 6 9L9 6L8 5L5 8C4.3 8.7 4.3 9.9 5 10.6C5.7 11.3 6.9 11.3 7.6 10.6L11.6 6.6C12.5 5.7 12.5 4.3 11.6 3.4C10.7 2.5 9.3 2.5 8.4 3.4L5.4 6.4L4.3 5.3L7.3 2.3C8.7 0.9 10.9 0.9 12.3 2.3C13.7 3.7 13.7 5.9 12.3 7.3L8.3 11.3C6.9 12.7 4.7 12.7 3.3 11.3C1.9 9.9 1.9 7.7 3.3 6.3L6.3 3.3L5.2 2.2L2.2 5.2C0.4 7 0.4 9.9 2.2 11.7C4 13.5 6.9 13.5 8.7 11.7L12.7 7.7C14.1 6.3 14.1 4.1 12.7 2.7C11.3 1.3 9.1 1.3 7.7 2.7L4.7 5.7L5.8 6.8L8.8 3.8C9.8 2.8 11.2 2.8 12.2 3.8C13.2 4.8 13.2 6.2 12.2 7.2L8.2 11.2C7.2 12.2 5.8 12.2 4.8 11.2C3.8 10.2 3.8 8.8 4.8 7.8L7.8 4.8L6.7 3.7L3.7 6.7C2.3 8.1 2.3 10.3 3.7 11.7C5.1 13.1 7.3 13.1 8.7 11.7L12.7 7.7C13.5 6.9 13.5 5.5 12.7 4.7C11.9 3.9 10.5 3.9 9.7 4.7L6.7 7.7L7.8 8.8L10.8 5.8C11.2 5.4 11.2 4.8 10.8 4.4C10.4 4 9.8 4 9.4 4.4L6.4 7.4L5.3 6.3L8.3 3.3C9.3 2.3 10.7 2.3 11.7 3.3C12.7 4.3 12.7 5.7 11.7 6.7L7.7 10.7C6.7 11.7 5.3 11.7 4.3 10.7C3.3 9.7 3.3 8.3 4.3 7.3L7.3 4.3L6.2 3.2L3.2 6.2C1.8 7.6 1.8 9.8 3.2 11.2C4.6 12.6 6.8 12.6 8.2 11.2L12.2 7.2C13.2 6.2 13.2 4.8 12.2 3.8C11.2 2.8 9.8 2.8 8.8 3.8L5.8 6.8L6.9 7.9L9.9 4.9C10.7 4.1 10.7 2.9 9.9 2.1C9.1 1.3 7.9 1.3 7.1 2.1L4.1 5.1L3 4L6 1C7.4 -0.4 9.6 -0.4 11 1C12.4 2.4 12.4 4.6 11 6L7 10C6.2 10.8 5 10.8 4.2 10C3.4 9.2 3.4 8 4.2 7.2L7.2 4.2L6.1 3.1L3.1 6.1C1.3 7.9 1.3 10.8 3.1 12.6C4.9 14.4 7.8 14.4 9.6 12.6L13.6 8.6C14.8 7.4 14.8 5.4 13.6 4.2C12.4 3 10.4 3 9.2 4.2L6.2 7.2L7.3 8.3L10.3 5.3C10.7 4.9 10.7 4.3 10.3 3.9C9.9 3.5 9.3 3.5 8.9 3.9L5.9 6.9L4.8 5.8L7.8 2.8C8.8 1.8 10.2 1.8 11.2 2.8C12.2 3.8 12.2 5.2 11.2 6.2L7.2 10.2C6.2 11.2 4.8 11.2 3.8 10.2C2.8 9.2 2.8 7.8 3.8 6.8L6.8 3.8L5.7 2.7L2.7 5.7C1.3 7.1 1.3 9.3 2.7 10.7C4.1 12.1 6.3 12.1 7.7 10.7L11.7 6.7C12.5 5.9 12.5 4.7 11.7 3.9C10.9 3.1 9.7 3.1 8.9 3.9L5.9 6.9L4.8 5.8L7.8 2.8C9 1.6 10.8 1.6 12 2.8C13.2 4 13.2 5.8 12 7L8 11C7.2 11.8 6 11.8 5.2 11C4.4 10.2 4.4 9 5.2 8.2L8.2 5.2L7.1 4.1L4.1 7.1C2.5 8.7 2.5 11.3 4.1 12.9C5.7 14.5 8.3 14.5 9.9 12.9L13.9 8.9C15.1 7.7 15.1 5.7 13.9 4.5C12.7 3.3 10.7 3.3 9.5 4.5L6.5 7.5L7.6 8.6L10.6 5.6C11 5.2 11 4.6 10.6 4.2C10.2 3.8 9.6 3.8 9.2 4.2L6.2 7.2L5.1 6.1L8.1 3.1C9.1 2.1 10.5 2.1 11.5 3.1C12.5 4.1 12.5 5.5 11.5 6.5L7.5 10.5C6.5 11.5 5.1 11.5 4.1 10.5C3.1 9.5 3.1 8.1 4.1 7.1L7.1 4.1L6 3L3 6C1.6 7.4 1.6 9.6 3 11C4.4 12.4 6.6 12.4 8 11L12 7C12.8 6.2 12.8 5 12 4.2C11.2 3.4 10 3.4 9.2 4.2L6.2 7.2L7.3 8.3L10.3 5.3C10.7 4.9 10.7 4.3 10.3 3.9C9.9 3.5 9.3 3.5 8.9 3.9L5.9 6.9L4.8 5.8L7.8 2.8C8.8 1.8 10.2 1.8 11.2 2.8C12.2 3.8 12.2 5.2 11.2 6.2L7.2 10.2C6.2 11.2 4.8 11.2 3.8 10.2C2.8 9.2 2.8 7.8 3.8 6.8L6.8 3.8L5.7 2.7L2.7 5.7C1.3 7.1 1.3 9.3 2.7 10.7C4.1 12.1 6.3 12.1 7.7 10.7L11.7 6.7C12.5 5.9 12.5 4.7 11.7 3.9C10.9 3.1 9.7 3.1 8.9 3.9L5.9 6.9L4.8 5.8L7.8 2.8C9 1.6 10.8 1.6 12 2.8C13.2 4 13.2 5.8 12 7L8 11C7.2 11.8 6 11.8 5.2 11C4.4 10.2 4.4 9 5.2 8.2L8.2 5.2L7.1 4.1L4.1 7.1C2.5 8.7 2.5 11.3 4.1 12.9C5.7 14.5 8.3 14.5 9.9 12.9L13.9 8.9C15.1 7.7 15.1 5.7 13.9 4.5C12.7 3.3 10.7 3.3 9.5 4.5L6.5 7.5L7.6 8.6L10.5 5.5Z" />
|
|
</svg>
|
|
|
|
{label}
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default ColumnClipButton;
|