feat(org); Saving of patterns and patterns views

sites/shared/components/pattern/preview.mjs

@@ -1,8 +1,13 @@
 import { useDesign } from 'shared/hooks/use-design.mjs'
 import { Popout } from 'shared/components/popout/index.mjs'
 import { themePlugin } from '@freesewing/plugin-theme'
+import { PanZoomPattern as ShowPattern } from 'shared/components/workbench/pan-zoom-pattern.mjs'
+import { Pattern as ReactPattern } from 'pkgs/react-components/src/index.mjs'
+import { useTranslation } from 'next-i18next'
 
-export const PatternPreview = ({ design, settings }) => {
+export const ns = ['account', 'patterns', 'status']
+
+export const PatternSvgPreview = ({ design, settings }) => {
   const Pattern = useDesign(design)
   if (!Pattern) return <Popout warning>not a valid pattern constructor for {design}</Popout>
 
@@ -17,3 +22,25 @@ export const PatternPreview = ({ design, settings }) => {
 
   return <figure dangerouslySetInnerHTML={{ __html: svg }} />
 }
+
+export const PatternReactPreview = ({ design, settings }) => {
+  const { t } = useTranslation([design])
+  const Pattern = useDesign(design)
+  if (!Pattern) return <Popout warning>not a valid pattern constructor for {design}</Popout>
+
+  let draft, renderProps
+  try {
+    draft = new Pattern({ ...settings, embed: true }).draft()
+    renderProps = draft.getRenderProps()
+  } catch (err) {
+    console.log(err)
+  }
+
+  return (
+    <ReactPattern
+      t={t}
+      renderProps={renderProps}
+      className="freesewing pattern p-4 shadow border border-solid text-base-content bg-base-100 w-full"
+    />
+  )
+}