import { Global, css } from '@emotion/react';
import React from 'react';
import {
ContextMenuItem,
ContextMenuTrigger,
} from '@/components/contextMenu/ContextMenu';
import { PlusIcon } from '@/icons';
import { ActionButton } from './ActionButton';
// Custom upload icon
const CustomUploadIcon = () => (
);
// Custom record icon
const RecordIcon = () => (
);
const contextMenuStyles = css`
/* Target the VisibleWrapper with high specificity */
div[data-context-menu] > div {
background-color: #252020 !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
/* Target by class name pattern for additional coverage */
[class*='VisibleWrapper'] {
background-color: #252020 !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
`;
interface ActionButtonMenuProps {
onUpload: () => void;
onRecord: () => void;
}
export const ActionButtonMenu: React.FC = ({
onUpload,
onRecord,
}) => {
return (
<>
}
ContentsComponent={({ onClose }: { onClose: () => void }) => (
<>
{
onRecord();
onClose();
}}
icon={}
>
Record audio
{
onUpload();
onClose();
}}
icon={}
>
Upload file
)}
/>
);
};