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,7 +233,9 @@ 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
+              .sort((a, b) => sortOrder.indexOf(a) - sortOrder.indexOf(b))
+              .map((type, i) => (
                 <li key={i}>
                   <button
                     className="btn btn-square btn-ghost"