wip(org): Work on icons and bio page
This commit is contained in:
Joost De Cock
parent
24a16a0673
commit
95c0ec05a4
19 changed files with 496 additions and 171 deletions
13
sites/org/components/account/bio/bio.en.yaml
Normal file
13
sites/org/components/account/bio/bio.en.yaml
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
title: Tell people a little bit about yourself
|
||||
placeholder: "|
|
||||
I make clothes and shoes. I design sewing patterns. I write code. I run [FreeSewing](http://freesewing.org)
|
||||
|
||||
我也在学中文
|
||||
|
||||
Also: Introvert 🙊
|
||||
|
||||
(he/him) or (they/them)"
|
||||
mdSupport: The bio field supports markdown
|
||||
bioPreview: Bio Preview
|
||||
save: Save
|
||||
continue: Continue
|
||||
96
sites/org/components/account/bio/index.js
Normal file
96
sites/org/components/account/bio/index.js
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
import { useState } from 'react'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import useBackend from 'site/hooks/useBackend.js'
|
||||
import Link from 'next/link'
|
||||
import { Choice, Icons, welcomeSteps } from '../shared.js'
|
||||
import Popout from 'shared/components/popout.js'
|
||||
import Markdown from 'react-markdown'
|
||||
|
||||
export const namespaces = ['bio']
|
||||
|
||||
const Tab = ({ id, activeTab, setActiveTab, t }) => (
|
||||
<button
|
||||
className={`text-xl font-bold capitalize tab tab-bordered grow
|
||||
${activeTab === id ? 'tab-active' : ''}`}
|
||||
onClick={() => setActiveTab(id)}
|
||||
>
|
||||
{t(id)}
|
||||
</button>
|
||||
)
|
||||
|
||||
const UsernameSettings = ({ app, title = false, welcome = false }) => {
|
||||
const backend = useBackend(app)
|
||||
const { t } = useTranslation(namespaces)
|
||||
const [bio, setBio] = useState(app.account.bio)
|
||||
const [activeTab, setActiveTab] = useState('edit')
|
||||
|
||||
const save = async () => {
|
||||
const result = await backend.updateAccount({ bio })
|
||||
}
|
||||
|
||||
const nextHref =
|
||||
welcomeSteps[app.account.control].length > 5
|
||||
? '/welcome/' + welcomeSteps[app.account.control][6]
|
||||
: '/docs/guide'
|
||||
|
||||
const tabProps = { activeTab, setActiveTab, t }
|
||||
|
||||
return (
|
||||
<>
|
||||
{title ? <h1 className="text-4xl">{t('title')}</h1> : null}
|
||||
<div className="tabs w-full">
|
||||
<Tab id="edit" {...tabProps} />
|
||||
<Tab id="preview" {...tabProps} />
|
||||
</div>
|
||||
<div className="flex flex-row items-center mt-4">
|
||||
{activeTab === 'edit' ? (
|
||||
<textarea
|
||||
rows="5"
|
||||
className="textarea textarea-bordered textarea-lg w-full"
|
||||
placeholder={t('placeholder')}
|
||||
onChange={(evt) => setBio(evt.target.value)}
|
||||
>
|
||||
{app.account.bio}
|
||||
</textarea>
|
||||
) : (
|
||||
<div className="text-left px-4 border w-full">
|
||||
<Markdown>{bio}</Markdown>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<button className={`btn btn-secondary mt-4 w-64`} onClick={save}>
|
||||
{t('save')}
|
||||
</button>
|
||||
<Popout tip compact>
|
||||
{t('mdSupport')}
|
||||
</Popout>
|
||||
|
||||
{welcome ? (
|
||||
<>
|
||||
<Link href={nextHref} className="btn btn-primary w-full mt-12">
|
||||
{t('continue')}
|
||||
</Link>
|
||||
{welcomeSteps[app.account.control].length > 0 ? (
|
||||
<>
|
||||
<progress
|
||||
className="progress progress-primary w-full mt-12"
|
||||
value={600 / welcomeSteps[app.account.control].length}
|
||||
max="100"
|
||||
></progress>
|
||||
<span className="pt-4 text-sm font-bold opacity-50">
|
||||
6 / {welcomeSteps[app.account.control].length}
|
||||
</span>
|
||||
<Icons
|
||||
done={welcomeSteps[app.account.control].slice(0, 5)}
|
||||
todo={welcomeSteps[app.account.control].slice(6)}
|
||||
current="bio"
|
||||
/>
|
||||
</>
|
||||
) : null}
|
||||
</>
|
||||
) : null}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default UsernameSettings
|
||||
|
|
@ -2,33 +2,10 @@ import { useState } from 'react'
|
|||
import { useTranslation } from 'next-i18next'
|
||||
import useBackend from 'site/hooks/useBackend.js'
|
||||
import Link from 'next/link'
|
||||
import { Choice } from '../shared.js'
|
||||
import { Choice, Icons, welcomeSteps } from '../shared.js'
|
||||
|
||||
export const namespaces = ['compare']
|
||||
|
||||
const welcomeSteps = {
|
||||
1: {
|
||||
href: '/docs/guide',
|
||||
steps: 0,
|
||||
},
|
||||
2: {
|
||||
href: '/docs/guide',
|
||||
steps: 3,
|
||||
},
|
||||
3: {
|
||||
href: '/welcome/username',
|
||||
steps: 5,
|
||||
},
|
||||
4: {
|
||||
href: '/welcome/username',
|
||||
steps: 7,
|
||||
},
|
||||
5: {
|
||||
href: '/',
|
||||
steps: 0,
|
||||
},
|
||||
}
|
||||
|
||||
export const CompareSettings = ({ app, title = false, welcome = false }) => {
|
||||
const backend = useBackend(app)
|
||||
const { t } = useTranslation(namespaces)
|
||||
|
|
@ -41,6 +18,11 @@ export const CompareSettings = ({ app, title = false, welcome = false }) => {
|
|||
}
|
||||
}
|
||||
|
||||
const nextHref =
|
||||
welcomeSteps[app.account.control].length > 3
|
||||
? '/welcome/' + welcomeSteps[app.account.control][4]
|
||||
: '/docs/guide'
|
||||
|
||||
return (
|
||||
<>
|
||||
{title ? <h1 className="text-4xl">{t('title')}</h1> : null}
|
||||
|
|
@ -54,22 +36,24 @@ export const CompareSettings = ({ app, title = false, welcome = false }) => {
|
|||
))}
|
||||
{welcome ? (
|
||||
<>
|
||||
<Link
|
||||
href={welcomeSteps[app.account.control].href}
|
||||
className="btn btn-primary w-full mt-12"
|
||||
>
|
||||
<Link href={nextHref} className="btn btn-primary w-full mt-12">
|
||||
{t('continue')}
|
||||
</Link>
|
||||
{welcomeSteps[app.account.control].steps ? (
|
||||
{welcomeSteps[app.account.control].length > 0 ? (
|
||||
<>
|
||||
<progress
|
||||
className="progress progress-primary w-full mt-12"
|
||||
value={400 / welcomeSteps[app.account.control].steps}
|
||||
value={400 / welcomeSteps[app.account.control].length}
|
||||
max="100"
|
||||
></progress>
|
||||
<span className="pt-4 text-sm font-bold opacity-50">
|
||||
4 / {welcomeSteps[app.account.control].steps}
|
||||
4 / {welcomeSteps[app.account.control].length}
|
||||
</span>
|
||||
<Icons
|
||||
done={welcomeSteps[app.account.control].slice(0, 3)}
|
||||
todo={welcomeSteps[app.account.control].slice(4)}
|
||||
current="compare"
|
||||
/>
|
||||
</>
|
||||
) : null}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -2,33 +2,10 @@ import { useState } from 'react'
|
|||
import { useTranslation } from 'next-i18next'
|
||||
import useBackend from 'site/hooks/useBackend.js'
|
||||
import Link from 'next/link'
|
||||
import { Choice, Icons } from '../shared.js'
|
||||
import { Choice, Icons, welcomeSteps } from '../shared.js'
|
||||
|
||||
export const namespaces = ['control']
|
||||
|
||||
const welcomeSteps = {
|
||||
1: {
|
||||
href: '/docs/guide/',
|
||||
steps: 0,
|
||||
},
|
||||
2: {
|
||||
href: '/welcome/newsletter',
|
||||
steps: 3,
|
||||
},
|
||||
3: {
|
||||
href: '/welcome/newsletter',
|
||||
steps: 5,
|
||||
},
|
||||
4: {
|
||||
href: '/welcome/newsletter',
|
||||
steps: 7,
|
||||
},
|
||||
5: {
|
||||
href: '/',
|
||||
steps: 0,
|
||||
},
|
||||
}
|
||||
|
||||
export const ControlSettings = ({ app, title = false, welcome = false }) => {
|
||||
const backend = useBackend(app)
|
||||
const { t } = useTranslation(namespaces)
|
||||
|
|
@ -41,6 +18,9 @@ export const ControlSettings = ({ app, title = false, welcome = false }) => {
|
|||
}
|
||||
}
|
||||
|
||||
const nextHref =
|
||||
welcomeSteps[selection].length > 1 ? '/welcome/' + welcomeSteps[selection][1] : '/docs/guide'
|
||||
|
||||
return (
|
||||
<>
|
||||
{title ? <h1 className="text-4xl">{t('title')}</h1> : null}
|
||||
|
|
@ -63,20 +43,20 @@ export const ControlSettings = ({ app, title = false, welcome = false }) => {
|
|||
})}
|
||||
{welcome ? (
|
||||
<>
|
||||
<Link href={welcomeSteps[selection].href} className="btn btn-primary w-full mt-12">
|
||||
<Link href={nextHref} className="btn btn-primary w-full mt-12">
|
||||
{t('continue')}
|
||||
</Link>
|
||||
{welcomeSteps[selection].steps ? (
|
||||
{welcomeSteps[selection].length > 1 ? (
|
||||
<>
|
||||
<progress
|
||||
className="progress progress-primary w-full mt-12"
|
||||
value={100 / welcomeSteps[selection].steps}
|
||||
value={100 / welcomeSteps[selection].length}
|
||||
max="100"
|
||||
></progress>
|
||||
<span className="pt-4 text-sm font-bold opacity-50">
|
||||
1 / {welcomeSteps[selection].steps}
|
||||
1 / {welcomeSteps[selection].length}
|
||||
</span>
|
||||
<Icons done={[]} todo={[welcomeSteps[selection].href]} />
|
||||
<Icons done={[]} todo={welcomeSteps[selection].slice(1)} current="" />
|
||||
</>
|
||||
) : null}
|
||||
</>
|
||||
|
|
|
|||
4
sites/org/components/account/img/img.en.yaml
Normal file
4
sites/org/components/account/img/img.en.yaml
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
title: How about a picture too?
|
||||
bioPreview: Bio Preview
|
||||
save: Save
|
||||
continue: Continue
|
||||
66
sites/org/components/account/img/index.js
Normal file
66
sites/org/components/account/img/index.js
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
import { useState } from 'react'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import useBackend from 'site/hooks/useBackend.js'
|
||||
import Link from 'next/link'
|
||||
import { Choice, Icons, welcomeSteps } from '../shared.js'
|
||||
|
||||
export const namespaces = ['img']
|
||||
|
||||
const Tab = ({ id, activeTab, setActiveTab, t }) => (
|
||||
<button
|
||||
className={`text-xl font-bold capitalize tab tab-bordered grow
|
||||
${activeTab === id ? 'tab-active' : ''}`}
|
||||
onClick={() => setActiveTab(id)}
|
||||
>
|
||||
{t(id)}
|
||||
</button>
|
||||
)
|
||||
|
||||
const UsernameSettings = ({ app, title = false, welcome = false }) => {
|
||||
const backend = useBackend(app)
|
||||
const { t } = useTranslation(namespaces)
|
||||
const [bio, setBio] = useState(app.account.bio)
|
||||
|
||||
const save = async () => {
|
||||
const result = await backend.updateAccount({ bio })
|
||||
}
|
||||
|
||||
const nextHref = '/docs/guide'
|
||||
|
||||
return (
|
||||
<>
|
||||
{title ? <h1 className="text-4xl">{t('title')}</h1> : null}
|
||||
<div className="flex flex-row items-center mt-4">fixme</div>
|
||||
<button className={`btn btn-secondary mt-4 w-64`} onClick={save}>
|
||||
{t('upload')}
|
||||
</button>
|
||||
|
||||
{welcome ? (
|
||||
<>
|
||||
<Link href={nextHref} className="btn btn-primary w-full mt-12">
|
||||
{t('continue')}
|
||||
</Link>
|
||||
{welcomeSteps[app.account.control].length > 0 ? (
|
||||
<>
|
||||
<progress
|
||||
className="progress progress-primary w-full mt-12"
|
||||
value={700 / welcomeSteps[app.account.control].length}
|
||||
max="100"
|
||||
></progress>
|
||||
<span className="pt-4 text-sm font-bold opacity-50">
|
||||
7 / {welcomeSteps[app.account.control].length}
|
||||
</span>
|
||||
<Icons
|
||||
done={welcomeSteps[app.account.control].slice(0, 6)}
|
||||
todo={welcomeSteps[app.account.control].slice(7)}
|
||||
current="img"
|
||||
/>
|
||||
</>
|
||||
) : null}
|
||||
</>
|
||||
) : null}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default UsernameSettings
|
||||
|
|
@ -2,33 +2,10 @@ import { useState } from 'react'
|
|||
import { useTranslation } from 'next-i18next'
|
||||
import useBackend from 'site/hooks/useBackend.js'
|
||||
import Link from 'next/link'
|
||||
import { Choice } from '../shared.js'
|
||||
import { Choice, Icons, welcomeSteps } from '../shared.js'
|
||||
|
||||
export const namespaces = ['newsletter']
|
||||
|
||||
const welcomeSteps = {
|
||||
1: {
|
||||
href: '/docs/guide/',
|
||||
steps: 0,
|
||||
},
|
||||
2: {
|
||||
href: '/welcome/units',
|
||||
steps: 3,
|
||||
},
|
||||
3: {
|
||||
href: '/welcome/units',
|
||||
steps: 5,
|
||||
},
|
||||
4: {
|
||||
href: '/welcome/units',
|
||||
steps: 7,
|
||||
},
|
||||
5: {
|
||||
href: '/',
|
||||
steps: 0,
|
||||
},
|
||||
}
|
||||
|
||||
export const NewsletterSettings = ({ app, title = false, welcome = false }) => {
|
||||
const backend = useBackend(app)
|
||||
const { t } = useTranslation(namespaces)
|
||||
|
|
@ -41,6 +18,11 @@ export const NewsletterSettings = ({ app, title = false, welcome = false }) => {
|
|||
}
|
||||
}
|
||||
|
||||
const nextHref =
|
||||
welcomeSteps[app.account.control].length > 2
|
||||
? '/welcome/' + welcomeSteps[app.account.control][2]
|
||||
: '/docs/guide'
|
||||
|
||||
return (
|
||||
<>
|
||||
{title ? <h1 className="text-4xl">{t('title')}</h1> : null}
|
||||
|
|
@ -54,22 +36,24 @@ export const NewsletterSettings = ({ app, title = false, welcome = false }) => {
|
|||
))}
|
||||
{welcome ? (
|
||||
<>
|
||||
<Link
|
||||
href={welcomeSteps[app.account.control].href}
|
||||
className="btn btn-primary w-full mt-12"
|
||||
>
|
||||
<Link href={nextHref} className="btn btn-primary w-full mt-12">
|
||||
{t('continue')}
|
||||
</Link>
|
||||
{welcomeSteps[app.account.control].steps ? (
|
||||
{welcomeSteps[app.account.control].length > 0 ? (
|
||||
<>
|
||||
<progress
|
||||
className="progress progress-primary w-full mt-12"
|
||||
value={200 / welcomeSteps[app.account.control].steps}
|
||||
value={200 / welcomeSteps[app.account.control].length}
|
||||
max="100"
|
||||
></progress>
|
||||
<span className="pt-4 text-sm font-bold opacity-50">
|
||||
2 / {welcomeSteps[app.account.control].steps}
|
||||
2 / {welcomeSteps[app.account.control].length}
|
||||
</span>
|
||||
<Icons
|
||||
done={welcomeSteps[app.account.control].slice(0, 1)}
|
||||
todo={welcomeSteps[app.account.control].slice(2)}
|
||||
current="newsletter"
|
||||
/>
|
||||
</>
|
||||
) : null}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,14 @@
|
|||
import Link from 'next/link'
|
||||
import OkIcon from 'shared/components/icons/ok.js'
|
||||
import NoIcon from 'shared/components/icons/no.js'
|
||||
import CogIcon from 'shared/components/icons/cog.js'
|
||||
import ControlIcon from 'shared/components/icons/control.js'
|
||||
import NewsletterIcon from 'shared/components/icons/newsletter.js'
|
||||
import UnitsIcon from 'shared/components/icons/units.js'
|
||||
import CompareIcon from 'shared/components/icons/compare.js'
|
||||
import LabelIcon from 'shared/components/icons/label.js'
|
||||
import BioIcon from 'shared/components/icons/bio.js'
|
||||
import UserIcon from 'shared/components/icons/user.js'
|
||||
|
||||
const btnClasses = {
|
||||
dflt:
|
||||
|
|
@ -31,32 +39,54 @@ export const Choice = ({ val, update, t, current, children, bool = false }) => {
|
|||
}
|
||||
|
||||
export const DoneIcon = ({ href }) => (
|
||||
<div className="bg-warning">
|
||||
<Link href={href} className="bg-warning">
|
||||
<OkIcon />
|
||||
</Link>
|
||||
</div>
|
||||
<Link href={`/welcome/${href}`} className="text-success hover:text-secondary">
|
||||
<TopicIcon href={href} />
|
||||
</Link>
|
||||
)
|
||||
export const TodoIcon = ({ href }) => (
|
||||
<Link href={`/welcome/${href}`} className="text-secondary w-6 h-6 opacity-50 hover:opacity-100">
|
||||
<TopicIcon href={href} />
|
||||
</Link>
|
||||
)
|
||||
|
||||
const TodoIcon = () => <CogIcon className="w-6 h-6 text-primary opacity-50" />
|
||||
const DoingIcon = () => <CogIcon className="w-6 h-6 text-secondary" />
|
||||
const TopicIcon = (props) => {
|
||||
const Icon =
|
||||
props.href === '' || props.href === 'control'
|
||||
? ControlIcon
|
||||
: icons[props.href]
|
||||
? icons[props.href]
|
||||
: CogIcon
|
||||
|
||||
export const Icons = ({ done = [], todo = [] }) => (
|
||||
return <Icon {...props} />
|
||||
}
|
||||
|
||||
const DoingIcon = ({ href }) => <TopicIcon href={href} className="w-6 h-6 text-base-content" />
|
||||
|
||||
export const Icons = ({ done = [], todo = [], current = '' }) => (
|
||||
<div className="m-auto flex flex-row items-center justify-center gap-2">
|
||||
{done.map((href) => (
|
||||
<DoneIcon href={href} key={href} />
|
||||
))}
|
||||
<DoingIcon />
|
||||
<DoingIcon href={current} />
|
||||
{todo.map((href) => (
|
||||
<TodoIcon href={href} key={href} />
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
|
||||
export const welcomeSteps = {
|
||||
1: [],
|
||||
2: ['newsletter', 'units'],
|
||||
3: ['newsletter', 'units', 'compare', 'username'],
|
||||
3: ['newsletter', 'units', 'compare', 'username', 'bio', 'pic'],
|
||||
5: [],
|
||||
const icons = {
|
||||
newsletter: NewsletterIcon,
|
||||
units: UnitsIcon,
|
||||
compare: CompareIcon,
|
||||
username: LabelIcon,
|
||||
bio: BioIcon,
|
||||
img: UserIcon,
|
||||
}
|
||||
|
||||
export const welcomeSteps = {
|
||||
1: [''],
|
||||
2: ['', 'newsletter', 'units'],
|
||||
3: ['', 'newsletter', 'units', 'compare', 'username'],
|
||||
4: ['', 'newsletter', 'units', 'compare', 'username', 'bio', 'img'],
|
||||
5: [''],
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,33 +2,10 @@ import { useState } from 'react'
|
|||
import { useTranslation } from 'next-i18next'
|
||||
import useBackend from 'site/hooks/useBackend.js'
|
||||
import Link from 'next/link'
|
||||
import { Choice } from '../shared.js'
|
||||
import { Choice, Icons, welcomeSteps } from '../shared.js'
|
||||
|
||||
export const namespaces = ['units']
|
||||
|
||||
const welcomeSteps = {
|
||||
1: {
|
||||
href: '/docs/guide/',
|
||||
steps: 0,
|
||||
},
|
||||
2: {
|
||||
href: '/docs/guide/',
|
||||
steps: 3,
|
||||
},
|
||||
3: {
|
||||
href: '/welcome/compare',
|
||||
steps: 5,
|
||||
},
|
||||
4: {
|
||||
href: '/welcome/compare',
|
||||
steps: 7,
|
||||
},
|
||||
5: {
|
||||
href: '/',
|
||||
steps: 0,
|
||||
},
|
||||
}
|
||||
|
||||
const UnitsSettings = ({ app, title = false, welcome = false }) => {
|
||||
const backend = useBackend(app)
|
||||
const { t } = useTranslation(namespaces)
|
||||
|
|
@ -41,6 +18,11 @@ const UnitsSettings = ({ app, title = false, welcome = false }) => {
|
|||
}
|
||||
}
|
||||
|
||||
const nextHref =
|
||||
welcomeSteps[app.account.control].length > 3
|
||||
? '/welcome/' + welcomeSteps[app.account.control][3]
|
||||
: '/docs/guide'
|
||||
|
||||
return (
|
||||
<>
|
||||
{title ? <h1 className="text-4xl">{t('title')}</h1> : null}
|
||||
|
|
@ -54,22 +36,24 @@ const UnitsSettings = ({ app, title = false, welcome = false }) => {
|
|||
))}
|
||||
{welcome ? (
|
||||
<>
|
||||
<Link
|
||||
href={welcomeSteps[app.account.control].href}
|
||||
className="btn btn-primary w-full mt-12"
|
||||
>
|
||||
<Link href={nextHref} className="btn btn-primary w-full mt-12">
|
||||
{t('continue')}
|
||||
</Link>
|
||||
{welcomeSteps[app.account.control].steps ? (
|
||||
{welcomeSteps[app.account.control].length > 0 ? (
|
||||
<>
|
||||
<progress
|
||||
className="progress progress-primary w-full mt-12"
|
||||
value={300 / welcomeSteps[app.account.control].steps}
|
||||
value={300 / welcomeSteps[app.account.control].length}
|
||||
max="100"
|
||||
></progress>
|
||||
<span className="pt-4 text-sm font-bold opacity-50">
|
||||
3 / {welcomeSteps[app.account.control].steps}
|
||||
3 / {welcomeSteps[app.account.control].length}
|
||||
</span>
|
||||
<Icons
|
||||
done={welcomeSteps[app.account.control].slice(0, 2)}
|
||||
todo={welcomeSteps[app.account.control].slice(3)}
|
||||
current="units"
|
||||
/>
|
||||
</>
|
||||
) : null}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -2,35 +2,12 @@ import { useState } from 'react'
|
|||
import { useTranslation } from 'next-i18next'
|
||||
import useBackend from 'site/hooks/useBackend.js'
|
||||
import Link from 'next/link'
|
||||
import { Choice } from '../shared.js'
|
||||
import { Choice, Icons, welcomeSteps } from '../shared.js'
|
||||
import OkIcon from 'shared/components/icons/ok.js'
|
||||
import NoIcon from 'shared/components/icons/no.js'
|
||||
|
||||
export const namespaces = ['username']
|
||||
|
||||
const welcomeSteps = {
|
||||
1: {
|
||||
href: '/docs/guide',
|
||||
steps: 0,
|
||||
},
|
||||
2: {
|
||||
href: '/docs/guide',
|
||||
steps: 3,
|
||||
},
|
||||
3: {
|
||||
href: '/docs/guide',
|
||||
steps: 5,
|
||||
},
|
||||
4: {
|
||||
href: '/welcome/bio',
|
||||
steps: 7,
|
||||
},
|
||||
5: {
|
||||
href: '/',
|
||||
steps: 0,
|
||||
},
|
||||
}
|
||||
|
||||
const UsernameSettings = ({ app, title = false, welcome = false }) => {
|
||||
const backend = useBackend(app)
|
||||
const { t } = useTranslation(namespaces)
|
||||
|
|
@ -53,6 +30,11 @@ const UsernameSettings = ({ app, title = false, welcome = false }) => {
|
|||
const result = await backend.updateAccount({ username })
|
||||
}
|
||||
|
||||
const nextHref =
|
||||
welcomeSteps[app.account.control].length > 4
|
||||
? '/welcome/' + welcomeSteps[app.account.control][5]
|
||||
: '/docs/guide'
|
||||
|
||||
return (
|
||||
<>
|
||||
{title ? <h1 className="text-4xl">{t('title')}</h1> : null}
|
||||
|
|
@ -81,22 +63,24 @@ const UsernameSettings = ({ app, title = false, welcome = false }) => {
|
|||
|
||||
{welcome ? (
|
||||
<>
|
||||
<Link
|
||||
href={welcomeSteps[app.account.control].href}
|
||||
className="btn btn-primary w-full mt-12"
|
||||
>
|
||||
<Link href={nextHref} className="btn btn-primary w-full mt-12">
|
||||
{t('continue')}
|
||||
</Link>
|
||||
{welcomeSteps[app.account.control].steps ? (
|
||||
{welcomeSteps[app.account.control].length > 0 ? (
|
||||
<>
|
||||
<progress
|
||||
className="progress progress-primary w-full mt-12"
|
||||
value={500 / welcomeSteps[app.account.control].steps}
|
||||
value={500 / welcomeSteps[app.account.control].length}
|
||||
max="100"
|
||||
></progress>
|
||||
<span className="pt-4 text-sm font-bold opacity-50">
|
||||
5 / {welcomeSteps[app.account.control].steps}
|
||||
5 / {welcomeSteps[app.account.control].length}
|
||||
</span>
|
||||
<Icons
|
||||
done={welcomeSteps[app.account.control].slice(0, 4)}
|
||||
todo={welcomeSteps[app.account.control].slice(5)}
|
||||
current="username"
|
||||
/>
|
||||
</>
|
||||
) : null}
|
||||
</>
|
||||
|
|
|
|||
40
sites/org/pages/welcome/bio.js
Normal file
40
sites/org/pages/welcome/bio.js
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
import Page from 'site/components/wrappers/page.js'
|
||||
import useApp from 'site/hooks/useApp.js'
|
||||
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import Layout from 'site/components/layouts/bare'
|
||||
import Link from 'next/link'
|
||||
import { useState } from 'react'
|
||||
import AuthWrapper, { namespaces as authNs } from 'site/components/wrappers/auth/index.js'
|
||||
import Spinner from 'shared/components/icons/spinner.js'
|
||||
import BioSettings, { namespaces as bioNs } from 'site/components/account/bio/index.js'
|
||||
|
||||
// Translation namespaces used on this page
|
||||
const namespaces = [...bioNs, ...authNs]
|
||||
|
||||
const BioPage = (props) => {
|
||||
const app = useApp(props)
|
||||
const { t } = useTranslation(namespaces)
|
||||
|
||||
const loadingClasses = app.loading ? 'opacity-50' : ''
|
||||
|
||||
return (
|
||||
<Page app={app} title={t('title')} layout={Layout} footer={false}>
|
||||
<AuthWrapper app={app}>
|
||||
<div className="m-auto max-w-lg text-center lg:mt-12 p-8">
|
||||
<BioSettings app={app} title welcome />
|
||||
</div>
|
||||
</AuthWrapper>
|
||||
</Page>
|
||||
)
|
||||
}
|
||||
|
||||
export default BioPage
|
||||
|
||||
export async function getStaticProps({ locale }) {
|
||||
return {
|
||||
props: {
|
||||
...(await serverSideTranslations(locale)),
|
||||
},
|
||||
}
|
||||
}
|
||||
40
sites/org/pages/welcome/img.js
Normal file
40
sites/org/pages/welcome/img.js
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
import Page from 'site/components/wrappers/page.js'
|
||||
import useApp from 'site/hooks/useApp.js'
|
||||
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import Layout from 'site/components/layouts/bare'
|
||||
import Link from 'next/link'
|
||||
import { useState } from 'react'
|
||||
import AuthWrapper, { namespaces as authNs } from 'site/components/wrappers/auth/index.js'
|
||||
import Spinner from 'shared/components/icons/spinner.js'
|
||||
import ImgSettings, { namespaces as imgNs } from 'site/components/account/img/index.js'
|
||||
|
||||
// Translation namespaces used on this page
|
||||
const namespaces = [...imgNs, ...authNs]
|
||||
|
||||
const ImgPage = (props) => {
|
||||
const app = useApp(props)
|
||||
const { t } = useTranslation(namespaces)
|
||||
|
||||
const loadingClasses = app.loading ? 'opacity-50' : ''
|
||||
|
||||
return (
|
||||
<Page app={app} title={t('title')} layout={Layout} footer={false}>
|
||||
<AuthWrapper app={app}>
|
||||
<div className="m-auto max-w-lg text-center lg:mt-12 p-8">
|
||||
<ImgSettings app={app} title welcome />
|
||||
</div>
|
||||
</AuthWrapper>
|
||||
</Page>
|
||||
)
|
||||
}
|
||||
|
||||
export default ImgPage
|
||||
|
||||
export async function getStaticProps({ locale }) {
|
||||
return {
|
||||
props: {
|
||||
...(await serverSideTranslations(locale)),
|
||||
},
|
||||
}
|
||||
}
|
||||
18
sites/shared/components/icons/bio.js
Normal file
18
sites/shared/components/icons/bio.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
const BioIcon = ({ className = 'w-6 h-6', stroke = 2 }) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={stroke}
|
||||
stroke="currentColor"
|
||||
className={className}
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default BioIcon
|
||||
|
|
@ -1,6 +1,17 @@
|
|||
const CogIcon = ({ className='h-6 m-6' }) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||
const CogIcon = ({ className = 'h-6 w-6' }) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
|
||||
/>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
)
|
||||
|
|
|
|||
18
sites/shared/components/icons/compare.js
Normal file
18
sites/shared/components/icons/compare.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
const CompareIcon = ({ className = 'w-6 h-6', stroke = 2 }) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={stroke}
|
||||
stroke="currentColor"
|
||||
className={className}
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 01-1.125-1.125v-3.75zM14.25 8.625c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-8.25zM3.75 16.125c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-2.25z"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default CompareIcon
|
||||
18
sites/shared/components/icons/control.js
Normal file
18
sites/shared/components/icons/control.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
const ControlIcon = ({ className = 'w-6 h-6', stroke = 2 }) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={stroke}
|
||||
stroke="currentColor"
|
||||
className={className}
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M12 3v17.25m0 0c-1.472 0-2.882.265-4.185.75M12 20.25c1.472 0 2.882.265 4.185.75M18.75 4.97A48.416 48.416 0 0012 4.5c-2.291 0-4.545.16-6.75.47m13.5 0c1.01.143 2.01.317 3 .52m-3-.52l2.62 10.726c.122.499-.106 1.028-.589 1.202a5.988 5.988 0 01-2.031.352 5.988 5.988 0 01-2.031-.352c-.483-.174-.711-.703-.59-1.202L18.75 4.971zm-16.5.52c.99-.203 1.99-.377 3-.52m0 0l2.62 10.726c.122.499-.106 1.028-.589 1.202a5.989 5.989 0 01-2.031.352 5.989 5.989 0 01-2.031-.352c-.483-.174-.711-.703-.59-1.202L5.25 4.971z"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default ControlIcon
|
||||
19
sites/shared/components/icons/label.js
Normal file
19
sites/shared/components/icons/label.js
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
const LabelIcon = ({ className = 'w-6 h-6', stroke = 2 }) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={stroke}
|
||||
stroke="currentColor"
|
||||
className={className}
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z"
|
||||
/>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M6 6h.008v.008H6V6z" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default LabelIcon
|
||||
18
sites/shared/components/icons/newsletter.js
Normal file
18
sites/shared/components/icons/newsletter.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
const NewsletterIcon = ({ className = 'h-6 w-6', stroke = 2 }) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={stroke}
|
||||
stroke="currentColor"
|
||||
className={className}
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 01-2.25 2.25M16.5 7.5V18a2.25 2.25 0 002.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 002.25 2.25h13.5M6 7.5h3v3H6v-3z"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default NewsletterIcon
|
||||
18
sites/shared/components/icons/units.js
Normal file
18
sites/shared/components/icons/units.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
const UnitsIcon = ({ className = 'w-6 h-6', stroke = 2 }) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={stroke}
|
||||
stroke="currentColor"
|
||||
className={className}
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 01-1.125-1.125M3.375 19.5h1.5C5.496 19.5 6 18.996 6 18.375m-3.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-1.5A1.125 1.125 0 0118 18.375M20.625 4.5H3.375m17.25 0c.621 0 1.125.504 1.125 1.125M20.625 4.5h-1.5C18.504 4.5 18 5.004 18 5.625m3.75 0v1.5c0 .621-.504 1.125-1.125 1.125M3.375 4.5c-.621 0-1.125.504-1.125 1.125M3.375 4.5h1.5C5.496 4.5 6 5.004 6 5.625m-3.75 0v1.5c0 .621.504 1.125 1.125 1.125m0 0h1.5m-1.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125m1.5-3.75C5.496 8.25 6 7.746 6 7.125v-1.5M4.875 8.25C5.496 8.25 6 8.754 6 9.375v1.5m0-5.25v5.25m0-5.25C6 5.004 6.504 4.5 7.125 4.5h9.75c.621 0 1.125.504 1.125 1.125m1.125 2.625h1.5m-1.5 0A1.125 1.125 0 0118 7.125v-1.5m1.125 2.625c-.621 0-1.125.504-1.125 1.125v1.5m2.625-2.625c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125M18 5.625v5.25M7.125 12h9.75m-9.75 0A1.125 1.125 0 016 10.875M7.125 12C6.504 12 6 12.504 6 13.125m0-2.25C6 11.496 5.496 12 4.875 12M18 10.875c0 .621-.504 1.125-1.125 1.125M18 10.875c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125m-12 5.25v-5.25m0 5.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125m-12 0v-1.5c0-.621-.504-1.125-1.125-1.125M18 18.375v-5.25m0 5.25v-1.5c0-.621.504-1.125 1.125-1.125M18 13.125v1.5c0 .621.504 1.125 1.125 1.125M18 13.125c0-.621.504-1.125 1.125-1.125M6 13.125v1.5c0 .621-.504 1.125-1.125 1.125M6 13.125C6 12.504 5.496 12 4.875 12m-1.5 0h1.5m-1.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125M19.125 12h1.5m0 0c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h1.5m14.25 0h1.5"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default UnitsIcon
|
||||
Loading…
Add table
Add a link
Reference in a new issue