Sort socials option in form

web/src/components/Social/SocialForm/SocialForm.tsx

@@ -16,7 +16,7 @@ import type { EditSocialById, UpdateSocialInput } from 'types/graphql'
 import type { RWGqlError } from '@redwoodjs/forms'
 import { Form, FieldError, Label, TextField, Submit } from '@redwoodjs/forms'
 
-import { baseUrls, getLogoComponent } from 'src/lib/handle'
+import { baseUrls, getLogoComponent, sortOrder } from 'src/lib/handle'
 
 type FormSocial = NonNullable<EditSocialById['social']>
 
@@ -233,19 +233,21 @@ const SocialForm = (props: SocialFormProps) => {
             tabIndex={0}
             className="menu dropdown-content z-10 mt-2 grid w-72 grid-cols-5 grid-rows-2 gap-2 rounded-box bg-base-100 shadow-xl"
           >
-            {types.map((type, i) => (
+            {types
-              <li key={i}>
+              .sort((a, b) => sortOrder.indexOf(a) - sortOrder.indexOf(b))
-                <button
+              .map((type, i) => (
-                  className="btn btn-square btn-ghost"
+                <li key={i}>
-                  onClick={() => {
+                  <button
-                    setType(type)
+                    className="btn btn-square btn-ghost"
-                    setTypesDropdownOpen(false)
+                    onClick={() => {
-                  }}
+                      setType(type)
-                >
+                      setTypesDropdownOpen(false)
-                  {getLogoComponent(type)}
+                    }}
-                </button>
+                  >
-              </li>
+                    {getLogoComponent(type)}
-            ))}
+                  </button>
+                </li>
+              ))}
           </ul>
         )}
       </div>