Merge pull request #1007 from PlanB-Network/fix-tutorial-translate

fix: order tutorials and fix translation issue
PlanB-Network · Dec 30, 2024 · b473dff · b473dff
2 parents 0a5f7c2 + 267d684
commit b473dff
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/apps/web/src/routes/_content/tutorials/$category/index.tsx b/apps/web/src/routes/_content/tutorials/$category/index.tsx
@@ -107,7 +107,10 @@ function TutorialCategory() {
           <div className="flex w-full items-center gap-5">
             <CategoryIcon src={tutorialCategory!.image} className="size-16" />
             <h1 className="text-black capitalize desktop desktop-h4 lg:display-large">
-              {tutorialCategory!.name}
+              {t([
+                `tutorials.${tutorialCategory!.name}.title`,
+                tutorialCategory!.name,
+              ])}
             </h1>
           </div>
           <hr className="mb-5 lg:mb-8"></hr>
@@ -157,11 +160,12 @@ function TutorialCategory() {
                         </div>
                       )} */}
                         <div className="flex flex-wrap gap-4 md:gap-x-0 md:gap-y-6 justify-center">
-                          {tutorials
+                          {[...tutorials]
                             .filter(
                               (tutorial) =>
                                 tutorial.subcategory === subCategory,
                             )
+                            .sort((a, b) => a.title.localeCompare(b.title))
                             .map((tutorial) => (
                               <TutorialCard
                                 key={tutorial.id}

diff --git a/apps/web/src/routes/_content/tutorials/-components/tutorial-layout.tsx b/apps/web/src/routes/_content/tutorials/-components/tutorial-layout.tsx
@@ -67,7 +67,7 @@ export const TutorialLayout = ({
                         )}
                       >
                         {t([
-                          `tutorials.${tutorialCategory.name}.name`,
+                          `tutorials.${tutorialCategory.name}.title`,
                           tutorialCategory.name,
                         ])}
                       </Link>
@@ -105,13 +105,16 @@ export const TutorialLayout = ({
 
                               <CollapsibleContent className="pl-7">
                                 <ul className="flex flex-col">
-                                  {allTutorials
+                                  {[...allTutorials]
                                     .filter(
                                       (tutorial) =>
                                         tutorial.category ===
                                           tutorialCategory.name &&
                                         tutorial.subcategory === subCategory,
                                     )
+                                    .sort((a, b) =>
+                                      a.title.localeCompare(b.title),
+                                    )
                                     .map((tutorial) => (
                                       <li
                                         key={tutorial.id}