import React from 'react';
import { SubTitle, PrimaryButton, useModals } from 'react-components';
import { c } from 'ttag';

import CalendarsTable from './CalendarsTable';
import CalendarModal from '../CalendarModal';

const CalendarsSection = () => {
    const { createModal } = useModals();
    const handleCreate = () => createModal(<CalendarModal />);

    return (
        <>
            <SubTitle>{c('Title').t`Calendars`}</SubTitle>
            <div className="mb1">
                <PrimaryButton onClick={handleCreate}>{c('Action').t`Add calendar`}</PrimaryButton>
            </div>
            <CalendarsTable />
        </>
    );
};

export default CalendarsSection;

@@ -63,16 +63,25 @@
 seModals
+, Tooltip
  %7D from 
@@ -309,28 +309,119 @@
 nst 
-handleCreate = () =%3E
+notReady = true;%0A    const handleCreate = () =%3E %7B%0A        if (notReady) %7B%0A            return;%0A        %7D%0A       
  cre
@@ -448,16 +448,23 @@
 dal /%3E);
+%0A    %7D;
 %0A%0A    re
@@ -591,29 +591,116 @@
        %3C
-PrimaryButton
+Tooltip title=%7Bc('Info').t%60Feature coming soon%60%7D%3E%0A                    %3CPrimaryButton disabled=%7Btrue%7D
  onClick
@@ -761,16 +761,43 @@
 Button%3E%0A
+                %3C/Tooltip%3E%0A
         

Fix #68 - Disable button and add tooltip on "Add calendar" (#70)