feat(shared): Ported account/bio to new inputs

markdown/org/docs/site/account/bio/en.md

@@ -0,0 +1,9 @@
+---
+title: Bio
+---
+
+Your account **bio** is the place where you can tell a little bit about yourself.
+
+Other FreeSewing users can see your bio, so this is a way to find like-minded people or promote your own content.
+
+This field supports Markdown, so you can add links and even images.

sites/shared/components/account/bio.mjs

@@ -11,6 +11,9 @@ import { Icons, welcomeSteps, BackToAccountButton } from './shared.mjs'
 import { Popout } from 'shared/components/popout/index.mjs'
 import { SaveSettingsButton } from 'shared/components/buttons/save-settings-button.mjs'
 import { ContinueButton } from 'shared/components/buttons/continue-button.mjs'
+import { MarkdownInput } from 'shared/components/inputs.mjs'
+import { DynamicOrgDocs } from 'shared/components/dynamic-docs/org.mjs'
+import { TipIcon } from 'shared/components/icons.mjs'
 
 export const ns = ['account', 'status']
 
@@ -28,7 +31,7 @@ export const BioSettings = ({ title = false, welcome = false }) => {
   // Hooks
   const { account, setAccount } = useAccount()
   const backend = useBackend()
-  const { t } = useTranslation(ns)
+  const { t, i18n } = useTranslation(ns)
   const { setLoadingStatus, LoadingStatus } = useLoadingStatus()
 
   // State
@@ -57,31 +60,21 @@ export const BioSettings = ({ title = false, welcome = false }) => {
   return (
     <div className="max-w-xl xl:pl-4">
       <LoadingStatus />
-      {title ? <h1 className="text-4xl">{t('bioTitle')}</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)}
-            value={bio}
-          />
-        ) : (
-          <div className="text-left px-4 border w-full">
-            <Markdown>{bio}</Markdown>
-          </div>
-        )}
-      </div>
+      <MarkdownInput
+        label={t('bioTitle')}
+        update={setBio}
+        current={bio}
+        placeholder={t('bioTitle')}
+        docs={<DynamicOrgDocs language={i18n.language} path={`site/account/bio`} />}
+        labelBL={
+          <span className="flex flex-row items-center gap-1">
+            <TipIcon className="w-6 h-6 text-success" />
+            {t('mdSupport')}
+          </span>
+        }
+      />
       <SaveSettingsButton btnProps={{ onClick: save }} welcome={welcome} />
       {!welcome && <BackToAccountButton />}
-      <Popout tip compact>
-        {t('mdSupport')}
-      </Popout>
 
       {welcome ? (
         <>

sites/shared/components/inputs.mjs

@@ -417,11 +417,13 @@ export const MarkdownInput = ({
   placeholder, // The placeholder content
   docs = false, // Docs to load, if any
   id = '', // An id to tie the input to the label
+  labelBL = false, // Bottom-Left label
+  labelBR = false, // Bottom-Right label
 }) => {
   const [activeTab, setActiveTab] = useState('edit')
 
   return (
-    <FormControl label={label} docs={docs} forId={id}>
+    <FormControl {...{ label, labelBL, labelBR, docs }} forId={id}>
       <div className="tabs w-full">
         {['edit', 'preview'].map((tab) => (
           <Tab id={tab} key={tab} label={tab} {...{ activeTab, setActiveTab }} />