86a83cadd3
* Remove unused `telemetryLoader` * Remove onboarding redirect behavior * Allow subRoute to be passed to navigateToProject * Replace warning dialog routes with toasts * Wire up new utilities and toasts to UI components * Add home sidebar buttons for tutorial flow * Rename menu item * Add flex-1 so home-layout fills available space * Remove onboarding avatar tests, they are becoming irrelevant * Consolidate onboarding tests to one longer one and update it to not use pixel color checks, and use fixtures. * Shorten warning toast button text * tsc, lint, and circular deps * Update circular dep file * Fix mistakes made in circular update tweaking * One more dumb created circular dep * Update src/routes/Onboarding/utils.tsx Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com> * Fix narrow screen home layout breaking * fix: kevin, navigation routes fixed * fix: filename parsing is correct now for onboarding with the last file sep * Fix e2e test state checks that are diff on Linux * Create onboarding project entirely through systemIOMachine * Fix Windows path construction * Make utility to verify a string is an onboarding value * Little biome formatting suggestion fix * Units onboarding step was not using OnboardingButtons * Add type checking of next and previous status, fix useNextClick * Thanks Graphite Diamond, I should use that new util * Remove TODO comment * Fix botched merge because IS_PLAYWRIGHT moved or something --------- Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com> Co-authored-by: Kevin Nadro <kevin@zoo.dev>
81 lines
2.9 KiB
TypeScript
81 lines
2.9 KiB
TypeScript
import { bracketThicknessCalculationLine } from '@src/lib/exampleKcl'
|
|
import { isDesktop } from '@src/lib/isDesktop'
|
|
import { Themes, getSystemTheme } from '@src/lib/theme'
|
|
import { useSettings } from '@src/lib/singletons'
|
|
import { OnboardingButtons, useDemoCode } from '@src/routes/Onboarding/utils'
|
|
import { ONBOARDING_SUBPATHS } from '@src/lib/onboardingPaths'
|
|
|
|
export default function OnboardingParametricModeling() {
|
|
useDemoCode()
|
|
const {
|
|
app: {
|
|
theme: { current: theme },
|
|
},
|
|
} = useSettings()
|
|
const getImageTheme = () =>
|
|
theme === Themes.Light ||
|
|
(theme === Themes.System && getSystemTheme() === Themes.Light)
|
|
? '-dark'
|
|
: ''
|
|
|
|
return (
|
|
<div className="fixed grid justify-end items-center inset-0 z-50 pointer-events-none">
|
|
<div
|
|
className={
|
|
'relative pointer-events-auto z-10 max-w-xl border border-chalkboard-50 dark:border-chalkboard-80 shadow-lg h-[75vh] flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded'
|
|
}
|
|
>
|
|
<section className="flex-1 overflow-y-auto mb-6">
|
|
<h2 className="text-3xl font-bold">Parametric modeling with kcl</h2>
|
|
<p className="my-4">
|
|
This example script shows how a code representation of your design
|
|
makes easy work of tedious tasks in traditional CAD software, such
|
|
as calculating a safety factor.
|
|
</p>
|
|
|
|
<p className="my-4">
|
|
We've received this sketch from a designer highlighting an{' '}
|
|
<em>
|
|
<strong>aluminum bracket</strong>
|
|
</em>{' '}
|
|
they need for this shelf:
|
|
</p>
|
|
<figure className="my-4 w-2/3 mx-auto">
|
|
<img
|
|
src={`${
|
|
isDesktop() ? '.' : ''
|
|
}/onboarding-bracket${getImageTheme()}.png`}
|
|
alt="Bracket"
|
|
/>
|
|
<figcaption className="text-small italic text-center">
|
|
A simplified shelf bracket
|
|
</figcaption>
|
|
</figure>
|
|
<p className="my-4">
|
|
We are able to easily calculate the thickness of the material based
|
|
on the width of the bracket to meet a set safety factor on{' '}
|
|
<em>
|
|
<strong>line {bracketThicknessCalculationLine}</strong>
|
|
</em>
|
|
.
|
|
</p>
|
|
<figure className="my-4 w-2/3 mx-auto">
|
|
<img
|
|
src={`${
|
|
isDesktop() ? '.' : ''
|
|
}/onboarding-bracket-dimensions${getImageTheme()}.png`}
|
|
alt="Bracket Dimensions"
|
|
/>
|
|
<figcaption className="text-small italic text-center">
|
|
Bracket Dimensions
|
|
</figcaption>
|
|
</figure>
|
|
</section>
|
|
<OnboardingButtons
|
|
currentSlug={ONBOARDING_SUBPATHS.PARAMETRIC_MODELING}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|