wip(org): Working on design component

packages/freesewing.org/components/design.js

@@ -0,0 +1,42 @@
+import { useTranslation } from 'next-i18next'
+import { configs } from 'shared/designs/index.js'
+
+const Design = ({ design }) => {
+  const { t } = useTranslation(['patterns'])
+  const {
+    code="Anonymous",
+    difficulty=3,
+  } = configs[design]
+  const designer = configs[design].design || "Anonymous"
+
+  return (
+    <div className={`
+      my-8
+      w-96 h-96
+      shadow
+      p-8
+      rounded-lg
+      `} style={{
+      backgroundImage: `url(/img/designs/${design}.png`,
+      backgroundSize: 'cover',
+      backgroundPosition: '50% 50%',
+    }}>
+      <div className="flex flex-row w-full h-full">
+        <div className="h-40 w-20" style={{
+          backgroundImage: `url(/img/designs/${design}.jpg`,
+          backgroundSize: 'cover',
+          backgroundPosition: '50% 50%',
+          backgroundColor: 'red'
+        }}>
+        </div>
+        <h4>{t(`${design}.t`)}</h4>
+      <p>{t(`${design}.d`)}</p>
+      <p>{designer}</p>
+      <p>{code}</p>
+      <p>{difficulty}</p>
+      </div>
+    </div>
+  )
+}
+
+export default Design

packages/freesewing.org/components/designs/teaser.js

@@ -1,10 +0,0 @@
-const DesignTeaser = ({ design=false }) => {
-
-  return (
-    <div>
-      <p>Tease {design} here</p>
-    </div>
-  )
-}
-
-export default DesignTeaser

packages/freesewing.org/components/mdx/pattern-docs.js

@@ -4,7 +4,7 @@ import Link from 'next/link'
 import { getConfig } from 'shared/designs/index.js'
 import Popout from 'shared/components/popout.js'
 import { useTranslation } from 'next-i18next'
-import DesignTeaser from 'site/components/designs/teaser.js'
+import Design from 'site/components/design.js'
 import PatternOptions from './pattern-options'
 import PatternMeasurements from './pattern-measurements'
 import DocsLink from 'shared/components/docs-link'
@@ -25,7 +25,7 @@ const PatternDocs = ({ pattern=false }) => {
           <p>
             {t('weRecommendThingInstead', { thing: capitalize(config.deprecated)})}
           </p>
-          <DesignTeaser design={pattern} />
+          <Design design={pattern} />
         </Popout>
       )}
 

packages/freesewing.org/pages/designs/index.js

@@ -0,0 +1,37 @@
+import Page from 'site/components/wrappers/page.js'
+import useApp from 'site/hooks/useApp.js'
+import Popout from 'shared/components/popout.js'
+import Link from 'next/link'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { useTranslation } from 'next-i18next'
+import designs from 'shared/config/designs.json'
+import Design from 'site/components/design.js'
+
+// Don't bother with utilities
+delete designs.utilities
+
+const DesignsPage = (props) => {
+  const app = useApp()
+  const { t } = useTranslation()
+
+  return (
+    <Page app={app} title={t('designs')}>
+      {Object.keys(designs).map(type => (
+        <div key={type}>
+          {designs[type].map(design => <Design key={design} design={design} />)}
+        </div>
+      ))}
+    </Page>
+  )
+}
+
+export default DesignsPage
+
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale)),
+    }
+  }
+}
+