110 lines
3 KiB
JavaScript
110 lines
3 KiB
JavaScript
import { useState, useEffect } from 'react'
|
|
import { useTranslation } from 'next-i18next'
|
|
import { configs } from 'shared/designs/index.js'
|
|
import { DesignIcon } from 'shared/components/icons.mjs'
|
|
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 loadDesign = async (design, setExamples) => {
|
|
// 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=5`
|
|
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))
|
|
}
|
|
|
|
const Design = ({ design }) => {
|
|
const { t } = useTranslation(['patterns'])
|
|
const { difficulty = 3 } = configs[design]
|
|
|
|
const [examples, setExamples] = useState([])
|
|
|
|
useEffect(() => {
|
|
loadDesign(design, setExamples)
|
|
}, [design, setExamples])
|
|
|
|
return (
|
|
<div
|
|
className={`
|
|
my-8
|
|
w-full sm:w-96
|
|
shadow-lg
|
|
border
|
|
rounded-lg
|
|
flex flex-col
|
|
text-center
|
|
overflow-clip
|
|
relative
|
|
`}
|
|
>
|
|
{/* Link over the entire card */}
|
|
<Link
|
|
href={`/designs/${design}`}
|
|
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>
|
|
</div>
|
|
<h6 className="text-base-content m-0 pt-4 pl-4 text-left capitalize">{design}</h6>
|
|
<div
|
|
className={`grow aspect-[9/16] -mt-4
|
|
`}
|
|
style={{
|
|
backgroundImage: `url('/img/designs/${design}.png')`,
|
|
backgroundSize: 'contain',
|
|
backgroundPosition: '50% 50%',
|
|
backgroundRepeat: 'no-repeat',
|
|
}}
|
|
></div>
|
|
<div className="px-4 text-base-content">
|
|
<h2 className="text-base-content m-0 p-0 z-30">{t(`${design}.t`)}</h2>
|
|
<div className="text-base-content m-0 p-0 font-bold text-base">{t(`${design}.d`)}</div>
|
|
</div>
|
|
<div className="py-4 z-10">
|
|
<Worm list={examples} fixed />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Design
|