kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
42 wiersze
1.3 KiB
TypeScript
42 wiersze
1.3 KiB
TypeScript
import clsx from 'clsx';
|
|
import React from 'react';
|
|
import { defineMessages, useIntl } from 'react-intl';
|
|
|
|
import { openModal } from 'soapbox/actions/modals';
|
|
import { Icon } from 'soapbox/components/ui';
|
|
import { useAppDispatch } from 'soapbox/hooks';
|
|
|
|
const messages = defineMessages({
|
|
publish: { id: 'compose_form.publish', defaultMessage: 'Publish' },
|
|
});
|
|
|
|
interface IFloatingActionButton {
|
|
}
|
|
|
|
/** FloatingActionButton (aka FAB), a composer button that floats in the corner on mobile. */
|
|
const FloatingActionButton: React.FC<IFloatingActionButton> = () => {
|
|
const intl = useIntl();
|
|
const dispatch = useAppDispatch();
|
|
|
|
const handleOpenComposeModal = () => {
|
|
dispatch(openModal('COMPOSE'));
|
|
};
|
|
|
|
return (
|
|
<button
|
|
onClick={handleOpenComposeModal}
|
|
className={clsx(
|
|
'p-4 inline-flex items-center border font-medium rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 appearance-none transition-all',
|
|
'border-transparent bg-secondary-500 hover:bg-secondary-400 focus:bg-secondary-500 text-gray-100 focus:ring-secondary-300',
|
|
)}
|
|
aria-label={intl.formatMessage(messages.publish)}
|
|
>
|
|
<Icon
|
|
src={require('@tabler/icons/pencil-plus.svg')}
|
|
className='w-6 h-6'
|
|
/>
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default FloatingActionButton; |