first commit

common/resources/client/admin/appearance/section-list.tsx

@@ -0,0 +1,36 @@
+import {NavLink} from 'react-router-dom';
+import {AppearanceButton} from './appearance-button';
+import {useAppearanceStore} from './appearance-store';
+import {Trans} from '../../i18n/trans';
+import {Fragment, useMemo} from 'react';
+
+export function SectionList() {
+  const sections = useAppearanceStore(s => s.config?.sections);
+  const sortedSection = useMemo(() => {
+    if (!sections) return [];
+    return Object.entries(sections || [])
+      .map(([key, value]) => {
+        return {
+          ...value,
+          key,
+        };
+      })
+      .sort((a, b) => (a?.position || 1) - (b?.position || 1));
+  }, [sections]);
+
+  return (
+    <Fragment>
+      {sortedSection.map(section => {
+        return (
+          <AppearanceButton
+            key={section.key}
+            to={section.key}
+            elementType={NavLink}
+          >
+            <Trans {...section.label} />
+          </AppearanceButton>
+        );
+      })}
+    </Fragment>
+  );
+}