69 lines
3.0 KiB
TypeScript
69 lines
3.0 KiB
TypeScript
import { useRender } from 'src/components/IdeWrapper/useRender'
|
|
|
|
const Customizer = () => {
|
|
const [open, setOpen] = React.useState(true)
|
|
const ref = React.useRef()
|
|
const jsCadCustomizerElement = ref.current
|
|
React.useEffect(() => {
|
|
console.log(jsCadCustomizerElement)
|
|
if (jsCadCustomizerElement) {
|
|
jsCadCustomizerElement.innerHTML = `<div>hi there</div>`
|
|
}
|
|
}, [jsCadCustomizerElement])
|
|
const handleRender = useRender()
|
|
return (
|
|
<div className={`absolute inset-x-0 bottom-0 bg-ch-gray-600 bg-opacity-60 text-ch-gray-300 text-lg font-fira-sans ${open ? 'h-2/3' : ''}`}>
|
|
<div className="flex justify-between px-6 py-2 items-center">
|
|
<div className="flex gap-6 items-center">
|
|
<button className="px-2" onClick={() => setOpen(!open)}>{open ? '⬇' : '⬆'}</button>
|
|
<div>Parameters</div>
|
|
</div>
|
|
<button className="px-4 py-1 rounded bg-ch-gray-300 text-ch-gray-800" onClick={handleRender}>Update</button>
|
|
</div>
|
|
<div className={`${open ? 'h-full' : 'h-0'} overflow-y-auto py-3 px-12`}>
|
|
<div id="jscad-customizer-block" ref={ref}>
|
|
<p>lots of lines should cause scroll</p>
|
|
<p>lots of lines should cause scroll</p>
|
|
<p>lots of lines should cause scroll</p>
|
|
<p>lots of lines should cause scroll</p>
|
|
<p>lots of lines should cause scroll</p>
|
|
<p>lots of lines should cause scroll</p>
|
|
<p>lots of lines should cause scroll</p>
|
|
<p>lots of lines should cause scroll</p>
|
|
<p>lots of lines should cause scroll</p>
|
|
<p>lots of lines should cause scroll</p>
|
|
<p>lots of lines should cause scroll</p>
|
|
<p>lots of lines should cause scroll</p>
|
|
<p>lots of lines should cause scroll</p>
|
|
<p>lots of lines should cause scroll</p>
|
|
<p>lots of lines should cause scroll</p>
|
|
<p>lots of lines should cause scroll</p>
|
|
<p>lots of lines should cause scroll</p>
|
|
<p>lots of lines should cause scroll</p>
|
|
<p>lots of lines should cause scroll</p>
|
|
<p>lots of lines should cause scroll</p>
|
|
<p>lots of lines should cause scroll</p>
|
|
<p>lots of lines should cause scroll</p>
|
|
<p>lots of lines should cause scroll</p>
|
|
<p>lots of lines should cause scroll</p>
|
|
<p>lots of lines should cause scroll</p>
|
|
<p>lots of lines should cause scroll</p>
|
|
<p>lots of lines should cause scroll</p>
|
|
<p>lots of lines should cause scroll</p>
|
|
<p>lots of lines should cause scroll</p>
|
|
<p>lots of lines should cause scroll</p>
|
|
<p>lots of lines should cause scroll</p>
|
|
<p>lots of lines should cause scroll</p>
|
|
<p>lots of lines should cause scroll</p>
|
|
<p>lots of lines should cause scroll</p>
|
|
<p>lots of lines should cause scroll</p>
|
|
<p>lots of lines should cause scroll</p>
|
|
<p>lots of lines should cause scroll</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Customizer
|