44e04a4cef
Also fixes #251 Reviewed-on: https://codeberg.org/freesewing/freesewing/pulls/263 Co-authored-by: joostdecock <joost@joost.at> Co-committed-by: joostdecock <joost@joost.at>
87 lines
2.2 KiB
JavaScript
87 lines
2.2 KiB
JavaScript
import React from 'react'
|
|
import { Link } from '@freesewing/react/components/Link'
|
|
import {
|
|
SettingsIcon,
|
|
ControlIcon,
|
|
NewsletterIcon,
|
|
UnitsIcon,
|
|
CompareIcon,
|
|
DocsIcon,
|
|
UserIcon,
|
|
LeftIcon,
|
|
OkIcon,
|
|
NoIcon,
|
|
ShowcaseIcon,
|
|
} from '@freesewing/react/components/Icon'
|
|
|
|
/*
|
|
* A component to display a row of data
|
|
*/
|
|
export const DisplayRow = ({ title, children, keyWidth = 'tw:w-24' }) => (
|
|
<div className="tw:flex tw:flex-row tw:flex-wrap tw:items-center tw:lg:gap-4 tw:my-2 tw:w-full">
|
|
<div
|
|
className={`${keyWidth} tw:text-left tw:md:text-right tw:block tw:md:inline tw:font-bold tw:pr-4 tw:shrink-0`}
|
|
>
|
|
{title}
|
|
</div>
|
|
<div className="tw:grow">{children}</div>
|
|
</div>
|
|
)
|
|
|
|
export const welcomeSteps = {
|
|
1: [''],
|
|
2: ['', 'newsletter', 'units'],
|
|
3: ['', 'newsletter', 'units', 'compare', 'username'],
|
|
4: ['', 'newsletter', 'units', 'compare', 'username', 'bio', 'img'],
|
|
5: [''],
|
|
}
|
|
|
|
export const WelcomeDoneIcon = ({ href }) => (
|
|
<Link href={`/welcome/${href}`} className="tw:text-success tw:hover:text-secondary">
|
|
<WelcomeTopicIcon href={href} />
|
|
</Link>
|
|
)
|
|
export const WelcomeTodoIcon = ({ href }) => (
|
|
<Link
|
|
href={`/welcome/${href}`}
|
|
className="tw:text-secondary tw:w-6 tw:h-6 tw:opacity-50 tw:hover:opacity-100"
|
|
>
|
|
<WelcomeTopicIcon href={href} />
|
|
</Link>
|
|
)
|
|
|
|
const WelcomeTopicIcon = (props) => {
|
|
const Icon =
|
|
props.href === '' || props.href === 'control'
|
|
? ControlIcon
|
|
: icons[props.href]
|
|
? icons[props.href]
|
|
: SettingsIcon
|
|
|
|
return <Icon {...props} />
|
|
}
|
|
|
|
const WelcomeDoingIcon = ({ href }) => (
|
|
<WelcomeTopicIcon href={href} className="tw:w-6 tw:h-6 tw:text-base-content" />
|
|
)
|
|
|
|
export const WelcomeIcons = ({ done = [], todo = [], current = '' }) => (
|
|
<div className="tw:m-auto tw:flex tw:flex-row tw:items-center tw:justify-center tw:gap-2">
|
|
{done.map((href) => (
|
|
<WelcomeDoneIcon href={href} key={href} />
|
|
))}
|
|
<WelcomeDoingIcon href={current} />
|
|
{todo.map((href) => (
|
|
<WelcomeTodoIcon href={href} key={href} />
|
|
))}
|
|
</div>
|
|
)
|
|
|
|
const icons = {
|
|
newsletter: NewsletterIcon,
|
|
units: UnitsIcon,
|
|
compare: CompareIcon,
|
|
username: UserIcon,
|
|
bio: DocsIcon,
|
|
img: ShowcaseIcon,
|
|
}
|