Files
cadhub/app/web/src/components/IdeWrapper/IdeWrapper.tsx
2021-07-07 19:54:45 +10:00

52 lines
1.7 KiB
TypeScript

import { useState } from 'react'
import IdeContainer from 'src/components/IdeContainer/IdeContainer'
import { useRender } from './useRender'
import OutBound from 'src/components/OutBound/OutBound'
import IdeSideBar from 'src/components/IdeSideBar/IdeSideBar'
import IdeHeader from 'src/components/IdeHeader/IdeHeader'
import Svg from 'src/components/Svg/Svg'
import { useIdeInit } from 'src/components/EncodedUrl/helpers'
const IdeToolbarNew = ({ cadPackage }) => {
const [shouldShowConstructionMessage, setShouldShowConstructionMessage] =
useState(true)
const handleRender = useRender()
useIdeInit(cadPackage)
return (
<div className="h-full flex">
<div className="w-16 bg-ch-gray-700 flex-shrink-0">
<IdeSideBar />
</div>
<div className="h-full flex flex-grow flex-col">
<nav className="flex">
<IdeHeader handleRender={handleRender} />
</nav>
{shouldShowConstructionMessage && (
<div className="py-1 md:py-2 bg-pink-200 flex">
<div className="flex-grow text-center text-xs md:text-base">
We're still working on this. Since you're here, have a look what{' '}
<OutBound
className="text-pink-700"
to="https://github.com/Irev-Dev/cadhub/discussions/212"
>
we've got planned
</OutBound>
.
</div>
<button
className="flex mr-3"
onClick={() => setShouldShowConstructionMessage(false)}
>
<Svg className="h-4 w-6 text-gray-500 items-center" name="x" />
</button>
</div>
)}
<IdeContainer />
</div>
</div>
)
}
export default IdeToolbarNew