import React, { useState } from 'react'; import { Schedule } from '@/api/server/schedules/getServerSchedules'; import TaskDetailsModal from '@/components/server/schedules/TaskDetailsModal'; import Button from '@/components/elements/Button'; import tw from 'twin.macro'; interface Props { schedule: Schedule; } export default ({ schedule }: Props) => { const [ visible, setVisible ] = useState(false); return ( <> {visible && <TaskDetailsModal schedule={schedule} onDismissed={() => setVisible(false)} /> } <Button onClick={() => setVisible(true)} css={tw`flex-1`}> New Task </Button> </> ); };