From df0aa307ad1ff967caf5234bb169bc9becd9ba19 Mon Sep 17 00:00:00 2001
From: pranalidhanavade <pranali.dhanavade@ayanworks.com>
Date: Mon, 11 Mar 2024 20:29:03 +0530
Subject: [PATCH] feat: custom component for logo file and platform name

Signed-off-by: pranalidhanavade <pranali.dhanavade@ayanworks.com>
---
 src/app/NavBarSidebar.astro              | 12 ++----------
 src/app/NavBarStacked.astro              | 12 ++----------
 src/commonComponents/LogoFile.tsx        | 20 ++++++++++++++++++++
 src/commonComponents/PublicNavbar.astro  | 12 ++----------
 src/components/Authentication/NavBar.tsx | 12 ++----------
 src/components/SignUpForm.tsx            |  6 ++----
 src/pages/user/[user].astro              | 12 ++----------
 7 files changed, 32 insertions(+), 54 deletions(-)
 create mode 100644 src/commonComponents/LogoFile.tsx

diff --git a/src/app/NavBarSidebar.astro b/src/app/NavBarSidebar.astro
index 01ecfa762..1c80d5ee3 100644
--- 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
index 44f9f6da0..35903f0b4 100644
--- 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
new file mode 100644
index 000000000..5860577b4
--- /dev/null
+++ 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;
\ No newline at end of file
diff --git a/src/commonComponents/PublicNavbar.astro b/src/commonComponents/PublicNavbar.astro
index 0f0823593..9a638f460 100644
--- 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
index 4ea99cfaf..6a3c01723 100644
--- 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
index 538fb62b3..9787eff43 100644
--- 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
index d4e0db439..09108b37d 100644
--- 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>