wip: Implemented welcome pages

packages/react/components/Account/shared.mjs

@@ -1,4 +1,18 @@
 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
@@ -19,3 +33,50 @@ export const welcomeSteps = {
   4: ['', 'newsletter', 'units', 'compare', 'username', 'bio', 'img'],
   5: [''],
 }
+
+export const WelcomeDoneIcon = ({ href }) => (
+  <Link href={`/welcome/${href}`} className="text-success hover:text-secondary">
+    <WelcomeTopicIcon href={href} />
+  </Link>
+)
+export const WelcomeTodoIcon = ({ href }) => (
+  <Link href={`/welcome/${href}`} className="text-secondary w-6 h-6 opacity-50 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="w-6 h-6 text-base-content" />
+)
+
+export const WelcomeIcons = ({ done = [], todo = [], current = '' }) => (
+  <div className="m-auto flex flex-row items-center justify-center 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,
+}