3ae5393dd7
* Tweak toaster look and feel * Add icons, tweak plus icon names * Rename commandBarMeta to commandBarConfig * Refactor command bar, add support for icons * Create a tailwind plugin for aria-pressed button state * Remove overlay from behind command bar * Clean up toolbar * Button and other style tweaks * Icon tweaks follow-up: make old icons work with new sizing * Delete unused static icons * More CSS tweaks * Small CSS tweak to project sidebar * Add command bar E2E test * fumpt * A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu) * fix typo in a comment * Fix icon padding (built version only) * Update onboarding and warning banner icons padding * Misc minor style fixes --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
67 lines
2.6 KiB
TypeScript
67 lines
2.6 KiB
TypeScript
import { OnboardingButtons, onboardingPaths, useDismiss, useNextClick } from '.'
|
|
import { useStore } from '../../useStore'
|
|
import { useBackdropHighlight } from 'hooks/useBackdropHighlight'
|
|
|
|
export default function CodeEditor() {
|
|
const { buttonDownInStream } = useStore((s) => ({
|
|
buttonDownInStream: s.buttonDownInStream,
|
|
}))
|
|
const dismiss = useDismiss()
|
|
const next = useNextClick(onboardingPaths.PARAMETRIC_MODELING)
|
|
|
|
return (
|
|
<div className="fixed grid justify-end items-center inset-0 z-50 pointer-events-none">
|
|
<div
|
|
className="fixed inset-0 bg-black opacity-50 pointer-events-none"
|
|
style={{ clipPath: useBackdropHighlight('code-pane') }}
|
|
></div>
|
|
<div
|
|
className={
|
|
'z-10 max-w-xl h-3/4 flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
|
|
(buttonDownInStream ? '' : ' pointer-events-auto')
|
|
}
|
|
>
|
|
<section className="flex-1">
|
|
<h2 className="text-2xl">
|
|
Editing code with <code>kcl</code>
|
|
</h2>
|
|
<p className="my-4">
|
|
The left pane is where you write your code. It's a code editor with
|
|
syntax highlighting and autocompletion. We've decided to take the
|
|
difficult route of writing our own language—called <code>kcl</code>
|
|
—for describing geometry, because don't want to inherit all the
|
|
other functionality from existing languages. We have a lot of ideas
|
|
about how <code>kcl</code> will evolve, and we want to hear your
|
|
thoughts on it.
|
|
</p>
|
|
<p className="my-4">
|
|
We've built a language server for <code>kcl</code> that provides
|
|
documentation and autocompletion automatically generated from our
|
|
compiler code. You can try it out by hovering over some of the
|
|
function names in the pane now. If you like using VSCode, you can
|
|
try out our{' '}
|
|
<a
|
|
href="https://marketplace.visualstudio.com/items?itemName=KittyCAD.kcl-language-server"
|
|
rel="noreferrer noopener"
|
|
target="_blank"
|
|
>
|
|
VSCode extension
|
|
</a>
|
|
.
|
|
</p>
|
|
<p className="my-4">
|
|
You can resize the pane by dragging the handle on the right, and you
|
|
can collapse it by clicking the title bar or pressing{' '}
|
|
<kbd>Shift</kbd> + <kbd>C</kbd>.
|
|
</p>
|
|
</section>
|
|
<OnboardingButtons
|
|
dismiss={dismiss}
|
|
next={next}
|
|
nextText="Next: Parametric Modeling"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|