File size: 2,635 Bytes
4114d85 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
import PropTypes from 'prop-types'
import { useNavigate } from 'react-router-dom'
// material-ui
import { useTheme } from '@mui/material/styles'
import { Avatar, Box, ButtonBase, Typography, Stack } from '@mui/material'
import { StyledButton } from 'ui-component/button/StyledButton'
// icons
import { IconCopy, IconChevronLeft } from '@tabler/icons'
// ==============================|| CANVAS HEADER ||============================== //
const MarketplaceCanvasHeader = ({ flowName, flowData, onChatflowCopy }) => {
const theme = useTheme()
const navigate = useNavigate()
return (
<>
<Box>
<ButtonBase title='Back' sx={{ borderRadius: '50%' }}>
<Avatar
variant='rounded'
sx={{
...theme.typography.commonAvatar,
...theme.typography.mediumAvatar,
transition: 'all .2s ease-in-out',
background: theme.palette.secondary.light,
color: theme.palette.secondary.dark,
'&:hover': {
background: theme.palette.secondary.dark,
color: theme.palette.secondary.light
}
}}
color='inherit'
onClick={() => navigate(-1)}
>
<IconChevronLeft stroke={1.5} size='1.3rem' />
</Avatar>
</ButtonBase>
</Box>
<Box sx={{ flexGrow: 1 }}>
<Stack flexDirection='row'>
<Typography
sx={{
fontSize: '1.5rem',
fontWeight: 600,
ml: 2
}}
>
{flowName}
</Typography>
</Stack>
</Box>
<Box>
<StyledButton
color='secondary'
variant='contained'
title='Use Chatflow'
onClick={() => onChatflowCopy(flowData)}
startIcon={<IconCopy />}
>
Use Template
</StyledButton>
</Box>
</>
)
}
MarketplaceCanvasHeader.propTypes = {
flowName: PropTypes.string,
flowData: PropTypes.object,
onChatflowCopy: PropTypes.func
}
export default MarketplaceCanvasHeader
|