880f738973
Also includes fixes for darkmode. Reviewed-on: https://codeberg.org/freesewing/freesewing/pulls/198
35 lines
1.1 KiB
JavaScript
35 lines
1.1 KiB
JavaScript
import React from 'react'
|
|
import { examples } from '@site/design-examples.mjs'
|
|
import { cloudflareImageUrl } from '@freesewing/utils'
|
|
import Link from '@docusaurus/Link'
|
|
import { Popout } from '@freesewing/react/components/Popout'
|
|
|
|
function DesignExamples({ design }) {
|
|
if (!design || !examples[design] || examples[design].length < 1)
|
|
return (
|
|
<Popout note>
|
|
Unfortunately, we do not have examples for this design yet. Hopefully, someone will post one
|
|
soon.
|
|
</Popout>
|
|
)
|
|
|
|
return (
|
|
<div className="tw-grid tw-grid-cols-2 tw-gap-2 md:tw-grid-cols-3 2xl:tw-grid-cols-4">
|
|
{examples[design].map((example) => (
|
|
<Link
|
|
key={example.id}
|
|
href={`/showcase/${example.id}/`}
|
|
title={example.title}
|
|
className="tw-w-full tw-aspect-square tw-rounded-lg tw-shadow"
|
|
style={{
|
|
backgroundImage: `url(${cloudflareImageUrl({ id: 'showcase-' + example.id })})`,
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center center',
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default DesignExamples
|