added more i18n strings

src/components/cmdk.tsx

@@ -22,6 +22,7 @@ import { Tools } from "@/config/tools";
 import { useUpdateEffect } from "@/hooks/use-update-effect";
 import { cn } from "@/utils/helpers";
 
+import { useTranslations } from "next-intl";
 import { ChevronRightLinearIcon } from "./icons/chevron-right";
 import { HashBoldIcon } from "./icons/hash";
 
@@ -377,7 +378,7 @@ export const Cmdk: FC<{}> = () => {
   );
 
   const shouldOpen = !hideOnPaths.some((path) => pathname.includes(path));
-
+  const t = useTranslations();
   return (
     <Modal
       hideCloseButton
@@ -438,14 +439,14 @@ export const Cmdk: FC<{}> = () => {
               <Command.Empty>
                 <div className={slots.emptyWrapper()}>
                   <div>
-                    <p>No results for &quot;{query}&quot;</p>
+                    <p>{t("search.no_result", { query: query })}</p>
                     {query.length === 1 ? (
                       <p className="text-default-400">
-                        Try adding more characters to your search term.
+                        {t("search.try_add_more_term")}
                       </p>
                     ) : (
                       <p className="text-default-400">
-                        Try searching for something else.
+                        {t("search.try_something_else")}
                       </p>
                     )}
                   </div>
@@ -456,7 +457,9 @@ export const Cmdk: FC<{}> = () => {
             {isEmpty(query) &&
               (isEmpty(recentSearches) ? (
                 <div className={slots.emptyWrapper()}>
-                  <p className="text-default-400">No recent searches</p>
+                  <p className="text-default-400">
+                    {t("search.no_recent_results")}
+                  </p>
                 </div>
               ) : (
                 recentSearches &&

src/components/navbar/index.tsx

@@ -48,7 +48,7 @@ export const Navbar: FC<HeaderProps> = ({ routes, slug, tag }) => {
     if (isMenuOpen) {
       setIsMenuOpen(false);
     }
-  }, [pathname]);
+  }, [isMenuOpen, pathname]);
 
   return (
     <NextUINavbar

src/components/navbar/profile-menu.tsx

@@ -10,11 +10,13 @@ import {
   ModalHeader,
   useDisclosure,
 } from "@nextui-org/react";
+import { useTranslations } from "next-intl";
 import { ProfileAvatar } from "./profile-avatar";
 import Settings from "./settings-model";
 
 function ProfileMenu() {
   const { isOpen, onOpen, onClose } = useDisclosure();
+  const t = useTranslations();
 
   return (
     <>
@@ -28,7 +30,9 @@ function ProfileMenu() {
             <div className="flex gap-5 items-center">
               <div className="">{ProfileAvatar}</div>
               <div className="">
-                <p className="font-semibold text-default-500">Signed in as</p>
+                <p className="font-semibold text-default-500">
+                  {t("settings.auth.signed_in_as")}
+                </p>
                 <p className="font-semibold">Guest</p>
               </div>
             </div>
@@ -94,9 +98,9 @@ function ProfileMenu() {
           {(onClose) => (
             <>
               <ModalHeader className="flex flex-col gap-1">
-                <h1>Settings</h1>
+                <h1>{t("settings.settings")}</h1>
                 <p className="text-small text-default-400">
-                  Manage theme, account settings and more...
+                  {t("settings.manage_settings")}
                 </p>
               </ModalHeader>
               <ModalBody>

src/components/navbar/search-btn.tsx

@@ -1,11 +1,13 @@
 import { Button, Kbd, Link } from "@nextui-org/react";
 import { isAppleDevice } from "@react-aria/utils";
+import { useTranslations } from "next-intl";
 import { useEffect, useState } from "react";
 import { useCmdkStore } from "../cmdk";
 
 function SearchButton({ isSearchFullWidth }: { isSearchFullWidth: boolean }) {
   const [commandKey, setCommandKey] = useState<"ctrl" | "command">("ctrl");
   const cmdkStore = useCmdkStore();
+  const t = useTranslations();
 
   useEffect(() => {
     setCommandKey(isAppleDevice() ? "command" : "ctrl");
@@ -28,7 +30,7 @@ function SearchButton({ isSearchFullWidth }: { isSearchFullWidth: boolean }) {
       }
       onPress={handleOpenCmdk}
     >
-      Quick Search...
+      {t("search.quick_search")}
     </Button>
   ) : (
     <Link

src/components/navbar/settings-model.tsx

@@ -10,15 +10,15 @@ import {
   Tab,
   Tabs,
 } from "@nextui-org/react";
-import { useLocale } from "next-intl";
+import { useLocale, useTranslations } from "next-intl";
 import ThemeSwitchPills from "./theme-switch-pills";
 
 function Settings() {
   const isMobile = useIsMobile();
   const router = useRouter();
   const pathname = usePathname();
   const locale = useLocale();
-
+  const t = useTranslations();
   const handleLocaleChange = (value: any) => {
     router.push(pathname, { locale: value });
     router.refresh();
@@ -33,17 +33,19 @@ function Settings() {
           <div className="flex items-center space-x-2">
             <span className="icon-[solar--paint-roller-bold-duotone] size-6"></span>
 
-            <span>Appearence</span>
+            <span>{t("settings.appearance")}</span>
           </div>
         }
       >
         <Card shadow="none">
           <CardBody className="gap-4">
-            <h1 className="text-2xl font-semibold">Appearence</h1>
+            <h1 className="text-2xl font-semibold">
+              {t("settings.appearance")}
+            </h1>
             <Divider />
 
             <div className="flex justify-between flex-wrap gap-2">
-              <h1 className="font-medium text-lg">Theme Mode</h1>
+              <h1 className="font-medium text-lg">{t("settings.themMode")}</h1>
 
               <ThemeSwitchPills />
             </div>
@@ -57,20 +59,21 @@ function Settings() {
           <div className="flex items-center space-x-2">
             <span className="icon-[fa6-solid--language] size-6"></span>
 
-            <span>Language</span>
+            <span>{t("settings.language")}</span>
           </div>
         }
       >
         <Card shadow="none">
           <CardBody className="gap-4">
-            <h1 className="text-2xl font-semibold">Language</h1>
+            <h1 className="text-2xl font-semibold">{t("settings.language")}</h1>
             <Divider />
 
             <div className="flex justify-between flex-wrap gap-2">
-              <h1 className="font-medium text-lg">Choose your language</h1>
+              <h1 className="font-medium text-lg">
+                {t("settings.chooseLanguage")}
+              </h1>
               <Select
                 variant={"flat"}
-                // label="Select an animal"
                 className="max-w-xs"
                 defaultSelectedKeys={[locale]}
                 onSelectionChange={(key) =>
@@ -87,17 +90,6 @@ function Settings() {
                   </SelectItem>
                 ))}
               </Select>
-              {/* <select
-                defaultValue={locale}
-                onChange={handleChange}
-                className="border border-gray-300 font-medium focus:outline-none focus-visible:ring"
-              >
-                {AppConfig.locales.map((elt) => (
-                  <option key={elt} value={elt}>
-                    {getLocaleInWords(elt)}
-                  </option>
-                ))}
-              </select> */}
             </div>
           </CardBody>
         </Card>

src/components/navbar/theme-switch-pills.tsx

@@ -1,10 +1,11 @@
 import { useIsMounted } from "@/hooks/use-is-mounted";
 import { Button } from "@nextui-org/react";
+import { useTranslations } from "next-intl";
 import { useTheme } from "next-themes";
 
 function ThemeSwitchPills() {
   const { theme, setTheme } = useTheme();
-
+  const t = useTranslations();
   const isMounted = useIsMounted();
   const isSelected = theme === "dark" && isMounted;
 
@@ -19,7 +20,7 @@ function ThemeSwitchPills() {
         variant={isSelected ? "ghost" : "solid"}
         onPress={() => setTheme("light")}
       >
-        Light
+        {t("theme.light")}
       </Button>
       <Button
         radius="full"
@@ -30,7 +31,7 @@ function ThemeSwitchPills() {
         color="success"
         variant={isSelected ? "solid" : "ghost"}
       >
-        Dark
+        {t("theme.dark")}
       </Button>
     </div>
   );

src/libs/previews.ts

@@ -1,3 +1,4 @@
+import { getFileTypeIcon } from "@/utils/helpers";
 import * as PDFJSWorker from "pdfjs-dist/build/pdf.worker";
 import { pdfjs } from "react-pdf";
 
@@ -28,7 +29,7 @@ export interface OPreviewProps {
 export async function getPDFPreview(
   props: IPreviewProps
 ): Promise<OPreviewProps> {
-  var preview = "";
+  var preview = getFileTypeIcon(props.file);
   var fullPreview = preview;
   var width = 0,
     height = 0;
@@ -85,7 +86,7 @@ export async function getPDFPreview(
 export async function getImagePreview(
   props: IPreviewProps
 ): Promise<OPreviewProps> {
-  var preview = "";
+  var preview = getFileTypeIcon(props.file);
   var fullPreview = preview;
   var width = 0,
     height = 0;

src/locales/en.json

@@ -9,7 +9,30 @@
     "roadmap": "Roadmap",
     "source_code": "Source Code"
   },
+  "theme": {
+    "light": "Light",
+    "dark": "Dark"
+  },
+
+  "search": {
+    "quick_search": "Quick search...",
+    "no_result": "No results for \"{query}\"",
+    "no_recent_results": "No recent searches",
+    "try_something_else": "Try searching for something else.",
+    "try_add_more_term": "Try adding more characters to your search term."
+  },
 
+  "settings": {
+    "manage_settings": "Manage theme, account settings and more...",
+    "settings": "Settings",
+    "appearance": "Appearance",
+    "language": "Language",
+    "themMode": "Theme Mode",
+    "chooseLanguage": "Choose your language",
+    "auth": {
+      "signed_in_as": "Signed in as"
+    }
+  },
   "unsupported_file_error": {
     "unsupported_file_type": "Unsupported File Type",
     "unsupported_file_type_message": "The file <bold>{filename}</bold> is not supported.",