feat(chat): add navigation items

DashHub-ai · Nov 10, 2024 · c6f0a86 · c6f0a86
1 parent 267b67b
commit c6f0a86
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 2 deletions.
diff --git a/apps/chat/src/i18n/packs/i18n-lang-en.ts b/apps/chat/src/i18n/packs/i18n-lang-en.ts
@@ -14,6 +14,15 @@ export const I18N_PACK_EN = deepmerge(I18N_FORWARDED_EN_PACK, {
     loggedIn: {
       logout: 'Logout',
     },
+    search: {
+      placeholder: 'Search...',
+      button: 'Search',
+    },
+    notifications: {
+      title: 'Notifications',
+      empty: 'No new notifications',
+    },
+    github: 'View on GitHub',
   },
   breadcrumbs: {
     routes: {

diff --git a/apps/chat/src/i18n/packs/i18n-lang-pl.ts b/apps/chat/src/i18n/packs/i18n-lang-pl.ts
@@ -16,6 +16,15 @@ export const I18N_PACK_PL: I18nLangPack = deepmerge(I18N_FORWARDED_PL_PACK, {
     loggedIn: {
       logout: 'Wyloguj się',
     },
+    search: {
+      placeholder: 'Szukaj...',
+      button: 'Szukaj',
+    },
+    notifications: {
+      title: 'Powiadomienia',
+      empty: 'Brak nowych powiadomień',
+    },
+    github: 'Zobacz na GitHub',
   },
   breadcrumbs: {
     routes: {

diff --git a/apps/chat/src/layouts/navigation/navigation.tsx b/apps/chat/src/layouts/navigation/navigation.tsx
@@ -1,3 +1,4 @@
+import { UkIcon } from '@llm/ui';
 import { useI18n } from '~/i18n';
 import { useSitemap } from '~/routes';
 
@@ -16,7 +17,7 @@ export function Navigation() {
           <div className="flex flex-1 items-center gap-10">
             <span className="font-semibold text-lg">DashHub</span>
 
-            <ul className="flex items-center gap-4">
+            <ul className="flex items-center gap-4 ml-5">
               <NavigationItem path={sitemap.home} icon="message-square-text">
                 {t.links.home}
               </NavigationItem>
@@ -41,7 +42,40 @@ export function Navigation() {
 
           {/* Right side items */}
           <div className="flex items-center gap-4">
+            <div className="relative group">
+              <input
+                type="text"
+                placeholder={t.search.placeholder}
+                className="focus:border-gray-200 bg-gray-100/80 focus:bg-white py-2 pr-4 pl-10 border border-transparent rounded-full focus:ring-0 w-44 focus:w-64 text-gray-800 text-sm transition-all duration-200 placeholder-gray-500 focus:outline-none"
+              />
+              <UkIcon
+                icon="search"
+                size={18}
+                className="top-1/2 left-3 absolute text-gray-500 -translate-y-1/2"
+              />
+            </div>
+
+            <button
+              type="button"
+              className="relative hover:bg-gray-100/80 p-3 rounded-full text-gray-800 hover:text-gray-900"
+              title={t.notifications.title}
+            >
+              <UkIcon icon="bell" size={20} className="relative top-[1px]" />
+              <span className="top-2 right-2 absolute bg-red-500 rounded-full w-2.5 h-2.5" />
+            </button>
+
+            <a
+              href="https://github.com/DashHub-ai/DashHub"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="hover:bg-gray-100/80 p-3 rounded-full text-gray-800 hover:text-gray-900"
+              title={t.github}
+            >
+              <UkIcon icon="github" size={20} className="relative top-[1px]" />
+            </a>
+
             <ChooseLanguageItem />
+
             <LoggedInUserItem />
           </div>
         </nav>

diff --git a/packages/ui/src/icons/uk-icon.tsx b/packages/ui/src/icons/uk-icon.tsx
@@ -2,13 +2,16 @@
 type Props = {
   className?: string;
   icon: string;
+  size?: number;
 };
 
-export function UkIcon({ className, icon }: Props) {
+export function UkIcon({ className, icon, size = 16 }: Props) {
   return (
     <uk-icon
       class={className}
       icon={icon}
+      width={size}
+      height={size}
     />
   );
 }
@@ -19,6 +22,8 @@ declare global {
       'uk-icon': {
         icon: string;
         class?: string;
+        width?: number;
+        height?: number;
       };
     }
   }