import React, {useEffect, useState,useCallback} from 'react';
import { useDispatch, connect} from 'react-redux'
import * as Common from './common'
import * as Antd from 'antd'
import './LeftHeader.scss'
import {SlackOutlined} from '@ant-design/icons'

const Title = (props:{className?:string}) => {
    const {className} = props
    return <Common.DivWithClassName className=''>
        <span className='TitleContainer'>Structure</span>
    </Common.DivWithClassName>
}

export const LeftHeader = (props: {}) => {
    return <Common.DivWithClassName className='LeftHeaderContainer rowFlexBox alignItemsCenter'>
        <Common.DivWithClassName className='paddingLeft10px columnFlexBox'>
            <Title/>
        </Common.DivWithClassName>
        <a  target="_blank" href='https://join.slack.com/t/structuresupport/shared_invite/zt-ddx04ho4-_q43i5o3zQ9jv00qx~dx8A' className='slackBackground whiteBorder padding5px floatRight font4 colorGrey1 textAlignRight marginRight10px' >
            Need Help or have a feature request? <br/> Join the <SlackOutlined /> Slack
            channel
        </a>
    </Common.DivWithClassName>
}
const LeftMenu = (props:{}) => {
    return null;
}

const mapPropsForLeftMenu = (currentState, ownProps) => {
    return {}
}
export var StateLeftMenu = connect(mapPropsForLeftMenu, null)(LeftMenu)