Merge pull request #6080 from freesewing/setname

feat: Add name to curated sets, using flexbox

sites/shared/components/curated-sets.mjs

@@ -50,7 +50,14 @@ import {
 
 export const ns = ['account', 'patterns', 'status', 'measurements', 'sets', inputNs]
 
-const SetLineup = ({ sets = [], href = false, onClick = false }) => (
+const SetNameWrapper = ({ name, children }) => (
+  <div className="flex flex-col items-center">
+    {children}
+    <b>{name}</b>
+  </div>
+)
+
+const SetLineup = ({ sets = [], lang, href = false, onClick = false }) => (
   <div
     className={`w-full flex flex-row ${
       sets.length > 1 ? 'justify-start px-8' : 'justify-center'
@@ -76,9 +83,15 @@ const SetLineup = ({ sets = [], href = false, onClick = false }) => (
       if (onClick) props.onClick = () => onClick(set)
       else if (typeof href === 'function') props.href = href(set.id)
 
-      if (onClick) return <button {...props} key={set.id}></button>
+      let img = <div {...props} key={set.id}></div>
-      else if (href) return <Link {...props} key={set.id}></Link>
+      if (onClick) img = <button {...props} key={set.id}></button>
-      else return <div {...props} key={set.id}></div>
+      else if (href) img = <Link {...props} key={set.id}></Link>
+
+      return (
+        <SetNameWrapper key={set.id} name={set[`name${capitalize(lang)}`]}>
+          {img}
+        </SetNameWrapper>
+      )
     })}
   </div>
 )
@@ -95,7 +108,7 @@ const ShowCuratedSet = ({ cset }) => {
     <>
       <h2>{cset[`name${capitalize(lang)}`]}</h2>
       <div className="w-full">
-        <SetLineup sets={[cset]} />
+        <SetLineup sets={[cset]} lang={lang} />
       </div>
 
       <div className="flex flex-wrap flex-row gap-2 w-full mt-4 items-center justify-end">
@@ -206,6 +219,8 @@ export const CuratedSets = ({ href = false, clickHandler = false, published = tr
   // Hooks
   const backend = useBackend()
   const { setLoadingStatus } = useContext(LoadingStatusContext)
+  const { i18n } = useTranslation(ns)
+  const lang = i18n.language
 
   // State
   const [sets, setSets] = useState([])
@@ -236,7 +251,7 @@ export const CuratedSets = ({ href = false, clickHandler = false, published = tr
 
   return (
     <div className="max-w-7xl xl:pl-4">
-      <SetLineup {...lineupProps} />
+      <SetLineup {...lineupProps} lang={lang} />
       {selected && <ShowCuratedSet cset={sets[selected]} />}
     </div>
   )
@@ -245,7 +260,8 @@ export const CuratedSets = ({ href = false, clickHandler = false, published = tr
 // Component for the maintaining the list of curated-sets
 export const CuratedSetsList = ({ href = false }) => {
   // Hooks
-  const { t } = useTranslation(ns)
+  const { t, i18n } = useTranslation(ns)
+  const lang = i18n.language
   const backend = useBackend()
   const { setLoadingStatus, LoadingProgress } = useContext(LoadingStatusContext)
   const [refresh, setRefresh] = useState(0)
@@ -371,7 +387,7 @@ export const CuratedSetsList = ({ href = false }) => {
           ))}
         </tbody>
       </table>
-      <SetLineup {...lineupProps} />
+      <SetLineup {...lineupProps} lang={lang} />
     </div>
   )
 }