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