feat: custom component for logo file and platform name

Signed-off-by: pranalidhanavade <[email protected]>
credebl · Mar 11, 2024 · df0aa30 · df0aa30
1 parent fab1491
commit df0aa30
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 54 deletions.
diff --git a/src/app/NavBarSidebar.astro b/src/app/NavBarSidebar.astro
@@ -11,7 +11,7 @@ import SignOutButton from '../components/SignOutButton/index';
 import AgentHealth from '../commonComponents/AgentHealth';
 import { getFromCookies } from '../api/Auth';
 import { RolePermissions } from '../config/permissions';
-import { envConfig } from '../config/envConfig';
+import LogoFile from '../commonComponents/LogoFile.jsx';
 
 const { hideOrgAgent } = Astro.props;
 
@@ -70,15 +70,7 @@ const permittedPages = RolePermissions.find(
 						pathRoutes.users.dashboard}
 					class="flex ml-2 md:mr-24"
 				>
-					<img
-						src={envConfig.PLATFORM_DATA.logo}
-						class="h-8 mr-3"
-						alt={`${envConfig.PLATFORM_DATA.name} logo`}
-					/>
-					<span
-						class="self-center text-xl font-semibold sm:text-2xl whitespace-nowrap dark:text-white"
-						>{envConfig.PLATFORM_DATA.name}</span
-					>
+					<LogoFile />
 				</a>
 			</div>
 			<div class="flex items-center">

diff --git a/src/app/NavBarStacked.astro b/src/app/NavBarStacked.astro
@@ -1,5 +1,5 @@
 ---
-import { envConfig } from "../config/envConfig";
+import LogoFile from "../commonComponents/LogoFile";
 ---
 
 <nav
@@ -10,15 +10,7 @@ import { envConfig } from "../config/envConfig";
 		<div class="flex items-center justify-between">
 			<div class="flex items-center justify-start">
 				<a class="flex ml-2 md:mr-24" href="/">
-					<img
-						src={envConfig.PLATFORM_DATA.logo}
-						class="h-8 mr-3"
-						alt={`${envConfig.PLATFORM_DATA.name} Logo`}
-					/>
-					<span
-						class="ml-2 self-center text-2xl font-semibold whitespace-nowrap text-black"
-						>{envConfig.PLATFORM_DATA.name}</span
-					>
+					<LogoFile />
 				</a>			
 
 			</div>

diff --git a/src/commonComponents/LogoFile.tsx b/src/commonComponents/LogoFile.tsx
@@ -0,0 +1,20 @@
+
+import { envConfig } from '../config/envConfig';
+
+const LogoFile = () => {
+    return (
+		<>
+		<img
+		src={envConfig.PLATFORM_DATA.logo}
+		className="h-8 mr-3"
+		alt={`${envConfig.PLATFORM_DATA.name} logo`}
+	/>
+	<span
+		className="self-center text-xl font-semibold sm:text-2xl whitespace-nowrap dark:text-white"
+		>{envConfig.PLATFORM_DATA.name}</span>
+		</>
+
+    )
+}
+
+export default LogoFile;
diff --git a/src/commonComponents/PublicNavbar.astro b/src/commonComponents/PublicNavbar.astro
@@ -2,6 +2,7 @@
 import { pathRoutes } from '../config/pathRoutes';
 import ColorModeSwitcher from '../components/ColorModeSwitcher.astro';
 import { envConfig } from '../config/envConfig';
+import LogoFile from './LogoFile';
 
 const { limitedWidth } = Astro.props;
 
@@ -54,16 +55,7 @@ const navbarClass = `bg-white dark:bg-gray-900 w-full z-20 top-0 left-0 border-g
 				</svg>
 			</button>
 			<a href="/" class="flex items-center">
-				<img
-					src={envConfig.PLATFORM_DATA.logo}
-					class="h-8 mr-3"
-					alt={`${envConfig.PLATFORM_DATA.name} logo`}
-				/>
-				<span
-					class="hidden md:block self-center text-2xl font-semibold whitespace-nowrap dark:text-white"
-				>
-				{envConfig.PLATFORM_DATA.name}
-				</span>
+				<LogoFile />
 			</a>
 			<div class="hidden lg:block ml-2">
 				<a

diff --git a/src/components/Authentication/NavBar.tsx b/src/components/Authentication/NavBar.tsx
@@ -1,5 +1,4 @@
-import React from 'react'
-import { envConfig } from '../../config/envConfig';
+import LogoFile from '../../commonComponents/LogoFile';
 
 const NavBar = () => {
     return (
@@ -9,14 +8,7 @@ const NavBar = () => {
             <div className="flex items-center justify-between">
                 <div className="flex items-center justify-start">
                 <a className="flex ml-2 md:mr-24" href="/">
-                        <img
-                            src={envConfig.PLATFORM_DATA.logo}
-                            className="h-8 mr-3"
-                            alt={`${envConfig.PLATFORM_DATA.name} Logo`}
-                        />
-                        <span
-                            className="ml-2 self-center text-2xl font-semibold whitespace-nowrap text-black dark:text-white"
-                        >{envConfig.PLATFORM_DATA.name}</span>
+                        <LogoFile />
 
                     </a>
                 </div>

diff --git a/src/components/SignUpForm.tsx b/src/components/SignUpForm.tsx
@@ -1,8 +1,7 @@
 'use client';
 
 import { Button, Checkbox, Label, TextInput } from 'flowbite-react';
-import { asset } from '../lib/data.js';
-import { envConfig } from '../config/envConfig.js';
+import LogoFile from '../commonComponents/LogoFile'
 
 export default function ShadowInputs() {
 
@@ -18,8 +17,7 @@ export default function ShadowInputs() {
                 href="#"
                 className="flex items-center justify-center mb-8 text-2xl font-semibold lg:mb-10 dark:text-white"
             >
-                <img src={asset(`${envConfig.PLATFORM_DATA.logo}`)} alt={`${envConfig.PLATFORM_DATA.name} logo`} className="mr-4 h-11" />
-                <span>{envConfig.PLATFORM_DATA.name}</span>
+                <LogoFile />
             </a>
             <div
                 className="w-full max-w-xl p-6 space-y-8 sm:p-8 bg-white rounded-lg shadow dark:bg-gray-800"

diff --git a/src/pages/user/[user].astro b/src/pages/user/[user].astro
@@ -1,6 +1,6 @@
 ---
+import LogoFile from '../../commonComponents/LogoFile';
 import CustomAvatar from '../../components/Avatar';
-import { envConfig } from '../../config/envConfig';
 import { pathRoutes } from '../../config/pathRoutes';
 
 const { user } = Astro.params;
@@ -17,15 +17,7 @@ const userData = data?.data;
 				<div class="flex px-3 py-2 justify-start">
 					<div class="flex items-center justify-start">
 						<a href={pathRoutes.users.dashboard} class="flex ml-2 md:mr-24">
-							<img
-								src={envConfig.PLATFORM_DATA.logo}
-								class="h-8 mr-3"
-								alt={`${envConfig.PLATFORM_DATA.name} Logo`}
-							/>
-							<span
-								class="self-center text-xl font-semibold sm:text-2xl whitespace-nowrap dark:text-white"
-								>{envConfig.PLATFORM_DATA.name}</span
-							>
+							<LogoFile />
 						</a>
 					</div>
 				</div>