feat: add custom theme guide

Author: carlhong

README.md

@@ -12,6 +12,37 @@ A demo of the application is available at [https://essentials-stg.vercel.app/](h
 * Responsive design for use on desktop and mobile devices.
 * Comprehensive testing suite using Jest and React Testing Library.
 
+## Custom Theme Guide
+
+### Network Logo
+
+Network logos should be placed in the `/public/images/network/` directory with the following specifications:
+
+* File Format: PNG format (transparent background recommended)
+* File Naming: Should match the network identifier (e.g., `assethub-westend.png`, `paseo.png`)
+* Design Style: Both circular or square logos are acceptable, but visual clarity should be ensured
+
+Currently available network logos:
+
+* `assethub-westend.png`
+* `paseo.png`
+
+### Network Banner Images
+
+Network banner images should be placed in:
+
+* Path: `/public/images/banner/`
+* File Format: PNG or JPG
+* Banner images will be displayed at the top of network pages
+* Design Style: Should reflect the network's characteristics and may include the network name, logo, and related visual elements
+
+### Adding New Network Images
+
+1. Prepare image files according to the specifications above
+2. Add the network logo to `/public/images/network/[network-id].png`
+3. Update the network banner to `/public/images/banner/navbar.png`
+4. The application will automatically detect and display the corresponding images based on the network identifier
+
 ## Getting Started
 
 ### Prerequisites
@@ -21,20 +52,25 @@ A demo of the application is available at [https://essentials-stg.vercel.app/](h
 
 ### Installation
 
-1.  Clone the repository:
-    ```bash
-    git clone https://github.com/itering/subscan-essentials-ui-react.git
-    ```
-2.  Navigate to the project directory:
-    ```bash
-    cd subscan-essentials-ui-react
-    ```
-3.  Install dependencies:
-    ```bash
-    npm install
-    # or
-    yarn install
-    ```
+1. Clone the repository:
+
+   ```bash
+   git clone https://github.com/itering/subscan-essentials-ui-react.git
+   ```
+
+1. Navigate to the project directory:
+
+   ```bash
+   cd subscan-essentials-ui-react
+   ```
+
+1. Install dependencies:
+
+   ```bash
+   npm install
+   # or
+   yarn install
+   ```
 
 ### Running the Development Server
 

public/images/navbar.png public/images/banner/navbar.pngpublic/images/navbar.png renamed to public/images/banner/navbar.png

@@ -14,12 +14,12 @@ import {
   DropdownTrigger,
   Link,
   Input,
-  Image,
   Select,
   SelectItem,
   Divider,
 } from '@heroui/react'
 import { useData } from '@/context'
+import Image from 'next/image'
 import _ from 'lodash'
 
 interface Props extends BareProps {
@@ -173,7 +173,7 @@ const Component: React.FC<Props> = ({ children, className }) => {
     <div
       className="bg-no-repeat bg-cover bg-center"
       style={{
-        backgroundImage: 'url(/images/navbar.png)',
+        backgroundImage: 'url(/images/banner/navbar.png)',
         backgroundSize: 'cover',
       }}>
       <Navbar
@@ -363,6 +363,18 @@ const Component: React.FC<Props> = ({ children, className }) => {
               </NavbarItem>
             </>
           )}
+          <NavbarItem>
+            <div className='bg-white rounded-lg px-2.5 py-0.5'>
+              <Image
+                width={0}
+                height={0}
+                sizes="100vw"
+                className="hidden md:block h-[30px] w-auto"
+                src={`/images/network/${metadata?.networkNode}.png`} 
+                alt={metadata?.networkNode || 'Network Name'}
+              />
+            </div>
+          </NavbarItem>
         </NavbarContent>
       </Navbar>
       <div className="w-full px-4 pb-6 flex justify-center">
@@ -380,7 +392,7 @@ const Component: React.FC<Props> = ({ children, className }) => {
             placeholder="Search"
             size="md"
             startContent={
-              <div className='flex h-5 items-center'>
+              <div className="flex h-5 items-center">
                 <Select
                   className=""
                   classNames={{
@@ -401,10 +413,10 @@ const Component: React.FC<Props> = ({ children, className }) => {
                     <SelectItem key={item.value}>{item.name}</SelectItem>
                   ))}
                 </Select>
-                <Divider orientation="vertical" className='mx-4'/>
+                <Divider orientation="vertical" className="mx-4" />
               </div>
             }
-            endContent={<SearchIcon fill="none" size={24} onClick={handleRedirect} className="mr-3 cursor-pointer"/>}
+            endContent={<SearchIcon fill="none" size={24} onClick={handleRedirect} className="mr-3 cursor-pointer" />}
           />
         </div>
       </div>