43 lines
1 KiB
JavaScript
43 lines
1 KiB
JavaScript
|
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
|