138 lines
4.1 KiB
JavaScript
138 lines
4.1 KiB
JavaScript
import React from 'react'
|
|
import { capitalize } from 'shared/utils.js'
|
|
import Link from 'next/link'
|
|
import { getConfig } from 'shared/designs/index.js'
|
|
import Popout from 'shared/components/popout.js'
|
|
import { useTranslation } from 'next-i18next'
|
|
import DesignTeaser from 'site/components/designs/teaser.js'
|
|
//import PatternOptions from './pattern-options'
|
|
//import PatternMeasurements from './pattern-measurements'
|
|
|
|
const PatternDocs = ({ pattern=false }) => {
|
|
const { t } = useTranslation(['docs'])
|
|
|
|
if (!pattern) return <p>Please specify a pattern prop when using the PatternDocs component</p>
|
|
|
|
const config = getConfig(pattern)
|
|
console.log({pattern, config})
|
|
|
|
return (
|
|
<>
|
|
{config.deprecated && (
|
|
<Popout note>
|
|
<h5>{t('thingIsDeprecated', { thing: capitalize(pattern)})}</h5>
|
|
<p>
|
|
{t('weRecommendThingInstead', { thing: capitalize(config.deprecated)})}
|
|
</p>
|
|
<DesignTeaser design={pattern} />
|
|
</Popout>
|
|
)}
|
|
<pre>{JSON.stringify(config, null ,2)}</pre>
|
|
</>
|
|
)
|
|
|
|
return (
|
|
<>
|
|
{config.deprecated && (
|
|
<Popout note>
|
|
<h5>{capitalize(pattern)} is deprecated</h5>
|
|
<p>
|
|
We recommend{' '}
|
|
<Link to={`/designs/${info[props.pattern].deprecated}/`}>
|
|
{capitalize(info[props.pattern].deprecated)}
|
|
</Link>{' '}
|
|
instead.
|
|
</p>
|
|
</Popout>
|
|
)}
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
justifyContent: 'space-between',
|
|
marginTop: '1rem',
|
|
}}
|
|
>
|
|
<p>
|
|
<FormattedMessage id={'patterns.' + props.pattern + '.description'} />
|
|
</p>
|
|
<div>
|
|
<Button
|
|
style={{ marginRight: '1rem' }}
|
|
color="primary"
|
|
variant="contained"
|
|
size="large"
|
|
href={'/create/' + props.pattern + '/'}
|
|
>
|
|
<PlayIcon style={{ marginRight: '1rem' }} />
|
|
<FormattedMessage
|
|
id="app.newThing"
|
|
values={{
|
|
thing: [capitalize(props.pattern), ' ', <FormattedMessage id={`app.pattern`} />],
|
|
}}
|
|
/>
|
|
</Button>
|
|
<p>
|
|
<Hashtag
|
|
tag={`FreeSewing${capitalize(props.pattern)}`}
|
|
title={`${capitalize(props.pattern)} Hashtag`}
|
|
/>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<h2>
|
|
<FormattedMessage id="app.patternInstructions" />
|
|
</h2>
|
|
<ul className="links">
|
|
<li>
|
|
<Link to={'/docs/patterns/' + props.pattern + '/cutting/'}>
|
|
{capitalize(props.pattern)} » <FormattedMessage id="app.cutting" />
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link to={'/docs/patterns/' + props.pattern + '/fabric/'}>
|
|
{capitalize(props.pattern)} » <FormattedMessage id="app.fabricOptions" />
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link to={'/docs/patterns/' + props.pattern + '/instructions/'}>
|
|
{capitalize(props.pattern)} » <FormattedMessage id="app.instructions" />
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link to={'/docs/patterns/' + props.pattern + '/needs/'}>
|
|
{capitalize(props.pattern)} » <FormattedMessage id="app.whatYouNeed" />
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
<h2>
|
|
<FormattedMessage id="app.patternOptions" />
|
|
</h2>
|
|
<PatternOptions pattern={props.pattern} />
|
|
{measurements[props.pattern].length > 0 ? (
|
|
<>
|
|
<h2>
|
|
<FormattedMessage id="app.requiredMeasurements" />
|
|
</h2>
|
|
<PatternMeasurements pattern={props.pattern} app={props.app} />
|
|
</>
|
|
) : null}
|
|
<h2>
|
|
<FormattedMessage id="app.examples" />
|
|
</h2>
|
|
<p>
|
|
<FormattedMessage id="intro.txt-showcase" />:
|
|
</p>
|
|
<ul className="links">
|
|
<li>
|
|
<Link to={'/showcase/designs/' + props.pattern}>
|
|
<FormattedMessage id="app.showcase" /> / {capitalize(props.pattern)}
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default PatternDocs
|