added internationalization to pages [WIP]

pages/collections/index.tsx

@@ -8,8 +8,11 @@ import { Sort } from "@/types/global";
 import useSort from "@/hooks/useSort";
 import NewCollectionModal from "@/components/ModalContent/NewCollectionModal";
 import PageHeader from "@/components/PageHeader";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+import { useTranslation } from "next-i18next";
 
 export default function Collections() {
+  const { t } = useTranslation();
   const { collections } = useCollectionStore();
   const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
   const [sortedCollections, setSortedCollections] = useState(collections);
@@ -26,13 +29,13 @@ export default function Collections() {
         <div className="flex justify-between">
           <PageHeader
             icon={"bi-folder"}
-            title={"Collections"}
-            description={"Collections you own"}
+            title={t("collections")}
+            description={t("collections_you_own")}
           />
 
           <div className="flex gap-3 justify-end">
             <div className="relative mt-2">
-              <SortDropdown sortBy={sortBy} setSort={setSortBy} />
+              <SortDropdown sortBy={sortBy} setSort={setSortBy} t={t} />
             </div>
           </div>
         </div>
@@ -48,7 +51,9 @@ export default function Collections() {
             className="card card-compact shadow-md hover:shadow-none duration-200 border border-neutral-content p-5 bg-base-200 self-stretch min-h-[12rem] rounded-2xl cursor-pointer flex flex-col gap-4 justify-center items-center group btn"
             onClick={() => setNewCollectionModal(true)}
           >
-            <p className="group-hover:opacity-0 duration-100">New Collection</p>
+            <p className="group-hover:opacity-0 duration-100">
+              {t("new_collection")}
+            </p>
             <i className="bi-plus-lg text-5xl group-hover:text-7xl group-hover:-mt-6 text-primary drop-shadow duration-100"></i>
           </div>
         </div>
@@ -57,8 +62,8 @@ export default function Collections() {
           <>
             <PageHeader
               icon={"bi-folder"}
-              title={"Other Collections"}
-              description={"Shared collections you're a member of"}
+              title={t("other_collections")}
+              description={t("other_collections_desc")}
             />
 
             <div className="grid min-[1900px]:grid-cols-4 2xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
@@ -77,3 +82,5 @@ export default function Collections() {
     </MainLayout>
   );
 }
+
+export { getServerSideProps };