wip: Started working on new development environment

packages/freesewing.shared/components/language-picker.js

@@ -0,0 +1,29 @@
+import themes from 'shared/themes/index.js'
+import LanguageIcon from 'shared/components/icons/i18n.js'
+import { languages } from 'pkgs/i18n'
+
+const LanguagePicker = ({ app }) => {
+  return (
+      <div className="dropdown">
+        <div tabIndex="0" className={`
+          m-0 btn btn-neutral flex flex-row gap-2
+          sm:btn-ghost
+          hover:bg-neutral hover:border-neutral-content
+        `}>
+          <LanguageIcon />
+          <span>{languages[app.language]}</span>
+        </div>
+        <ul tabIndex="0" className="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52">
+          {Object.keys(languages).map(language => (
+            <li key={language}>
+              <button onClick={() => app.changeLanguage(language)} className="btn btn-ghost text-base-content hover:bg-base-200">
+                {languages[language]}
+              </button>
+            </li>
+          ))}
+        </ul>
+      </div>
+  )
+}
+
+export default LanguagePicker