Drag and drop bookmark settings

src/pages/homepage/components/Bookmarks/Bookmarks.tsx

@@ -50,22 +50,24 @@ function Links({ contentType }: any) {
 								gridTemplateRows: 'auto',
 							}}
 						>
-							{groups.map((category: any) => {
-								if (
-									contentType.includes(category.filterName) ||
-									contentType.includes('All')
-								) {
-									return (
-										<LinkGroups
-											key={category.categoryName}
-											category={category.categoryName}
-											links={bookmarkData.filter(
-												(bookmark: any) => bookmark.category === category.categoryName,
-											)}
-										/>
-									);
-								}
-							})}
+							{groups
+								.sort((a: any, b: any) => (a.categoryIndex > b.categoryIndex ? 1 : -1))
+								.map((category: any) => {
+									if (
+										contentType.includes(category.filterName) ||
+										contentType.includes('All')
+									) {
+										return (
+											<LinkGroups
+												key={category.categoryName}
+												category={category.categoryName}
+												links={bookmarkData.filter(
+													(bookmark: any) => bookmark.category === category.categoryName,
+												)}
+											/>
+										);
+									}
+								})}
 						</Stack>
 					</Stack>
 				)}

src/pages/homepage/components/Bookmarks/LinkGroups.tsx

@@ -15,9 +15,11 @@ function LinkGroups({ links, category }: any) {
 			<Text className={textClasses.linkCategory} classNames={textClasses}>
 				{category}
 			</Text>
-			{links?.map((link: any) => (
-				<LinkItem key={link.name} link={link} />
-			))}
+			{links
+				?.sort((a: any, b: any) => (a.index > b.index ? 1 : -1))
+				.map((link: any) => (
+					<LinkItem key={link.name} link={link} />
+				))}
 		</Stack>
 	);
 }