1
0
Fork 0
freesewing/packages/react/components/New/NewLinks.mjs
Joost De Cock 51dc1d9732
[breaking]: FreeSewing v4 (#7297)
Refer to the CHANGELOG for all info.

---------

Co-authored-by: Wouter van Wageningen <wouter.vdub@yahoo.com>
Co-authored-by: Josh Munic <jpmunic@gmail.com>
Co-authored-by: Jonathan Haas <haasjona@gmail.com>
2025-04-01 16:15:20 +02:00

92 lines
2.7 KiB
JavaScript

// Hooks
import React, { useState, useEffect } from 'react'
import { useAccount } from '@freesewing/react/hooks/useAccount'
import { useBackend } from '@freesewing/react/hooks/useBackend'
// Components
import { Link as DefaultLink } from '@freesewing/react/components/Link'
import {
NewMeasurementsSetIcon,
NewPatternIcon,
ShowcaseIcon,
KioskIcon,
} from '@freesewing/react/components/Icon'
const NewLink = ({ title, Icon, description, href, Link }) => {
if (!Link) Link = DefaultLink
const linkProps = {
href,
className:
'tw-p-8 tw--ml-4 tw--mr-4 md:tw-m-0 tw-rounded-none md:tw-rounded-xl ' +
'md:tw-shadow hover:tw-bg-secondary tw-bg-base-200 hover:tw-bg-opacity-10 ' +
'tw-w-full tw-max-w-lg hover:tw-no-underline',
}
const inner = (
<>
<h4 className="tw-flex tw-flex-row tw-items-start tw-justify-between tw-w-full tw-m-0 tw-p-0 tw-text-inherit">
<span>{title}</span>
<Icon className="tw-w-12 tw-h-12 tw--mt-2" stroke={1.5} />
</h4>
<div
className={`tw-normal-case tw-text-base tw-font-medium tw-text-left tw-pt-2 tw-text-inherit`}
>
{description}
</div>
</>
)
return <a {...linkProps}>{inner}</a>
return <Link {...linkProps}>{inner}</Link>
}
const newLinks = {
pattern: {
href: '/editor/',
Icon: NewPatternIcon,
title: 'Generate a new pattern',
description:
'Pick a design, add your measurements set, and we will generate a bespoke sewing pattern for you.',
},
set: {
Icon: NewMeasurementsSetIcon,
title: 'Create new measurements set',
description:
'Create a new set of measurements which you can then use to generate patterns for.',
},
showcase: {
Icon: ShowcaseIcon,
title: 'Create a new showcase post',
description:
'Made something from a FreeSewing pattern? Please share the results here to inspire others.',
},
img: {
Icon: KioskIcon,
title: 'Generate a social media image',
description:
'Share the FreeSewing love on social media, supports wide, square, and tall formats.',
},
}
/**
* The NewLinks component shows all of the links to create something new
*
* @param {object} props - All the React props
* @param {function} Link - A custom Link component, typically the Docusaurus one, but it's optional
*/
export const NewLinks = ({ Link = false }) => {
// Use custom Link component if available
if (!Link) Link = DefaultLink
// Hooks
const { account } = useAccount()
return (
<div className="tw-w-full tw-max-w-7xl">
<div className="tw-grid tw-grid-cols-1 xl:tw-grid-cols-2 tw-gap-4 tw-mb-8">
{Object.entries(newLinks).map(([href, link]) => (
<NewLink key={href} href={href} {...link} />
))}
</div>
</div>
)
}