wip(org): Work on design page

packages/freesewing.org/components/design.js

@@ -1,5 +1,27 @@
+import { useState, useEffect } from 'react'
 import { useTranslation } from 'next-i18next'
 import { configs } from 'shared/designs/index.js'
+import DesignIcon from 'shared/components/icons/design.js'
+import Worm from 'shared/components/worm.js'
+import { strapiHost } from 'shared/config/freesewing.mjs'
+import Link from 'next/link'
+
+const colors = {
+  1: 'bg-pink-300',
+  2: 'bg-green-400',
+  3: 'bg-yellow-400',
+  4: 'bg-orange-400',
+  5: 'bg-red-400'
+}
+const Difficulty = ({ score=1 }) => {
+  const icons = []
+  for (let i=0;i<score;i++) {
+    icons.push(<DesignIcon className={`w-8 h-8 -ml-3 text-gray-900`} />)
+  }
+
+  return icons
+}
+
 
 const Design = ({ design }) => {
   const { t } = useTranslation(['patterns'])
@@ -8,32 +30,78 @@ const Design = ({ design }) => {
     difficulty=3,
   } = configs[design]
   const designer = configs[design].design || "Anonymous"
+  const people = new Set()
+  for (const contrib of ['design', 'code']) {
+    if (Array.isArray(configs[design][contrib])) {
+      for (const person of configs[design][contrib]) people.add(person)
+    } else people.add(configs[design][contrib])
+  }
+
+  const [examples, setExamples] = useState([])
+
+  useEffect(async () => {
+    // Strapi filtering syntax
+    const url = `${strapiHost}/showcaseposts?_locale=en&_sort=date:DESC` +
+      `&_where[_or][0][design1_eq]=${design}` +
+      `&_where[_or][1][design2_eq]=${design}` +
+      `&_where[_or][2][design3_eq]=${design}` +
+      `&_limit=6`
+    await fetch(url)
+      .then(response => response.json())
+      .then(data => setExamples(data.map(post => ({
+        slug: `/showcase/${post.slug}`,
+        img: `${strapiHost}${post.image.formats.thumbnail.url}`,
+        title: post.title
+      }))))
+      .catch(err => console.log(err))
+  }, [ design ])
 
   return (
     <div className={`
       my-8
-      w-96 h-96
-      shadow
-      p-8
+      aspect-[9/16]
+      w-96
+      shadow-lg
+      border
       rounded-lg
+      flex flex-col
+      text-center
+      overflow-clip
+      relative
       `} style={{
-      backgroundImage: `url(/img/designs/${design}.png`,
-      backgroundSize: 'cover',
+      backgroundImage: `url('/img/designs/${design}.png')`,
+      backgroundSize: 'contain',
       backgroundPosition: '50% 50%',
+      backgroundRepeat: 'no-repeat',
     }}>
-      <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'
-        }}>
+      {/* Link over the entire card */}
+      <Link href={`/designs/${design}`}>
+        <a className="absolute top-0 right-0 w-full h-full" title={t(`${design}.t`)} />
+      </Link>
+      {/* Slanted corner ribbon with the difficulty */}
+      <div className="absolute top-0 right-0">
+        <div className={`w-96 -mr-36 mt-8 pl-2 flex flex-row justify-center ${colors[difficulty]}`}
+          style={{ transform: "rotate(45deg)" }}
+        >
+          <Difficulty score={difficulty} />
         </div>
-        <h4>{t(`${design}.t`)}</h4>
-      <p>{t(`${design}.d`)}</p>
-      <p>{designer}</p>
-      <p>{code}</p>
-      <p>{difficulty}</p>
+      </div>
+      {/* People who did the Design/Code */}
+      <div className="flex flex-row items-center justify-start max-w-2/3 pt-2 pl-1">
+        <span className="text-base-content font-sm talic ml-2 p-2 bg-base-100 rounded-lg bg-opacity-60 p-0 m-0 px-1">
+          {[...people].map(person => person).join(' / ')}
+        </span>
+      </div>
+      <div className="grow"></div>
+      <div className="bg-neutral bg-opacity-50 p-4 text-neutral-content" style={{
+        textShadow: "1px 1px 2px black",
+        color: 'white'
+      }}>
+        <h2 className="text-neutral-content m-0 p-0">{t(`${design}.t`)}</h2>
+        <div className="text-neutral-content m-0 p-0 font-bold text-lg">{t(`${design}.d`)}</div>
+      </div>
+      <div className="my-4 z-10">
+        <Worm list={examples} fixed/>
       </div>
     </div>
   )