default projects asc

app/[lang]/about/page.tsx

@@ -2,6 +2,7 @@ import React from "react"
 import Image from "next/image"
 
 import { Accordion } from "@/components/ui/accordion"
+import { AppContent } from "@/components/ui/app-content"
 import { useTranslation } from "@/app/i18n"
 
 interface PrincipleContentProps {
@@ -64,19 +65,21 @@ export default async function AboutPage({ params: { lang } }: any) {
   return (
     <div className="bg-anakiwa-200">
       <div className="bg-second-gradient">
-        <div className="container mx-auto grid grid-cols-1 gap-16 py-10 lg:grid-cols-[1fr_300px] lg:gap-2 lg:py-20">
-          <div className="flex flex-col gap-8 lg:w-4/5">
-            <h6 className="break-words font-display text-4xl font-bold text-tuatara-950 md:py-4 md:text-5xl">
-              {t("title")}
-            </h6>
-            <span className="font-sans text-base font-normal leading-[27px] text-tuatara-950">
-              {t("description")}
-            </span>
+        <AppContent>
+          <div className="mx-auto grid grid-cols-1 gap-16 py-10 lg:grid-cols-[1fr_300px] lg:gap-2 lg:py-20">
+            <div className="flex flex-col gap-8 lg:w-4/5">
+              <h6 className="break-words font-display text-4xl font-bold text-tuatara-950 md:py-4 md:text-5xl">
+                {t("title")}
+              </h6>
+              <span className="font-sans text-base font-normal leading-[27px] text-tuatara-950">
+                {t("description")}
+              </span>
+            </div>
           </div>
-        </div>
+        </AppContent>
       </div>
 
-      <div className="flex flex-col gap-4 px-8 py-16 md:px-32 md:py-24">
+      <AppContent className="flex flex-col gap-4 py-16 md:py-24">
         <div className="mx-auto pb-4">
           <Image
             width={280}
@@ -114,7 +117,7 @@ export default async function AboutPage({ params: { lang } }: any) {
             }),
           ]}
         />
-      </div>
+      </AppContent>
     </div>
   )
 }

components/project/project-card.tsx

@@ -5,7 +5,6 @@ import Image from "next/image"
 import { useRouter } from "next/navigation"
 import { VariantProps, cva } from "class-variance-authority"
 
-import { LangProps } from "@/types/common"
 import { ProjectInterface, ProjectLinkWebsite } from "@/lib/types"
 import { cn } from "@/lib/utils"
 import { LocaleTypes } from "@/app/i18n/settings"
@@ -67,7 +66,7 @@ export default function ProjectCard({
           alt={`${name} banner`}
           width={1200}
           height={630}
-          className="w-full rounded-t-lg object-cover min-h-[160px]"
+          className="min-h-[160px] w-full rounded-t-lg object-cover"
         />
       )}
       <div className="flex h-full flex-col justify-between gap-5 rounded-b-lg bg-white p-5">

components/project/project-result-bar.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import {
+  DEFAULT_PROJECT_SORT_BY,
   ProjectFilter,
   ProjectSortBy,
   useProjectFiltersState,
@@ -30,6 +31,7 @@ export const ProjectResultBar = ({ lang }: LangProps["params"]) => {
     }
   )
 
+
   const projectSortItems: { label: string; value: ProjectSortBy }[] = [
     { label: t("filterOptions.random"), value: "random" },
     { label: t("filterOptions.asc"), value: "asc" },
@@ -47,7 +49,7 @@ export const ProjectResultBar = ({ lang }: LangProps["params"]) => {
         <span className={labelClass}>{resultLabel}</span>
         <Dropdown
           label={activeSortOption}
-          defaultItem="random"
+          defaultItem={DEFAULT_PROJECT_SORT_BY}
           items={projectSortItems}
           onChange={(sortBy) => sortProjectBy(sortBy as ProjectSortBy)}
           disabled={!projects?.length}

state/useProjectFiltersState.ts

@@ -10,7 +10,7 @@ import { LocaleTypes, fallbackLng } from "@/app/i18n/settings"
 export type ProjectSortBy = "random" | "asc" | "desc" | "relevance"
 export type ProjectFilter = "keywords" | "builtWith" | "themes"
 export type FiltersProps = Record<ProjectFilter, string[]>
-
+export const DEFAULT_PROJECT_SORT_BY: ProjectSortBy = "asc"
 interface ProjectInterfaceScore extends ProjectInterface {
   score: number
 }
@@ -30,7 +30,7 @@ export const FilterLabelMapping = (
 ): Record<ProjectFilter, string> => {
   const t = i18next.getFixedT(lang ?? fallbackLng, "common")
   return {
-    keywords: t("filterLabels.keyword"),
+    keywords: t("filterLabels.keywords"),
     builtWith: t("filterLabels.builtWith"),
     themes: t("filterLabels.themes"),
   }
@@ -192,8 +192,8 @@ const sortProjectByFn = (
 export const useProjectFiltersState = create<
   ProjectStateProps & ProjectActionsProps
 >()((set) => ({
-  sortBy: "random",
-  projects,
+  sortBy: DEFAULT_PROJECT_SORT_BY,
+  projects: sortProjectByFn(projects, DEFAULT_PROJECT_SORT_BY),
   queryString: "",
   filters: getProjectFilters(), // list of filters with all possible values from projects
   activeFilters: {}, // list of filters active in the current view by the user