feat: implemen top banner to display business hours and tel

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
2025-05-12 12:47:50 +00:00 · 2024-04-15 16:27:47 +07:00 · 2024-04-15 16:27:47 +07:00 · 64a26ca164
commit 64a26ca164
parent 746a0fcd03
6 changed files with 97 additions and 4 deletions
--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -1,3 +1,4 @@
+import Banner from 'components/banner';
 import Navbar from 'components/layout/navbar';
 import { GeistSans } from 'geist/font';
 import { ensureStartsWith } from 'lib/utils';
@ -35,7 +36,10 @@ export default async function RootLayout({ children }: { children: ReactNode })
  return (
    <html lang="en" className={GeistSans.variable}>
      <body className="bg-neutral-50 text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text-white dark:selection:bg-pink-500 dark:selection:text-white">
-        <Navbar />
+        <header>
+          <Banner />
+          <Navbar />
+        </header>
        <Suspense>
          <main>{children}</main>
        </Suspense>
--- a/components/banner.tsx
+++ b/components/banner.tsx
@ -0,0 +1,24 @@
+import { ChevronDownIcon } from '@heroicons/react/16/solid';
+import Tooltip from './tooltip';
+
+function Banner() {
+  return (
+    <div className="flex h-10 w-full items-center justify-center gap-x-8 bg-[#17E4BB] text-sm font-medium text-[#08312B]">
+      <span>
+        Speak to a Specialist Now:{' '}
+        <a href={`tel:${8882422605}`} className="ml-1">
+          (888) 242-2605
+        </a>
+      </span>
+      <div data-tooltip-id="work-hours-tooltip" className="flex items-center">
+        Business Hours <ChevronDownIcon className="h-5 w-5" />
+      </div>
+      <Tooltip id="work-hours-tooltip">
+        <p>Monday - Friday: 9:00am - 8:00pm EST</p>
+        <p>Saturday 11:00am - 4:00pm EST</p>
+      </Tooltip>
+    </div>
+  );
+}
+
+export default Banner;
--- a/components/tooltip.tsx
+++ b/components/tooltip.tsx
@ -0,0 +1,14 @@
+'use client';
+
+import { cn } from 'lib/utils';
+import { ITooltip, Tooltip as ReactTooltip } from 'react-tooltip';
+
+const Tooltip = ({ id, children, className }: ITooltip) => {
+  return (
+    <ReactTooltip id={id} className={cn('z-10', className)}>
+      {children}
+    </ReactTooltip>
+  );
+};
+
+export default Tooltip;
--- a/lib/utils.ts
+++ b/lib/utils.ts
@ -1,4 +1,6 @@
+import clsx, { ClassValue } from 'clsx';
 import { ReadonlyURLSearchParams } from 'next/navigation';
+import { twMerge } from 'tailwind-merge';

 export const createUrl = (pathname: string, params: URLSearchParams | ReadonlyURLSearchParams) => {
  const paramsString = params.toString();
@ -37,3 +39,7 @@ export const validateEnvironmentVariables = () => {
    );
  }
 };
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
--- a/package.json
+++ b/package.json
@ -28,7 +28,9 @@
    "geist": "^1.3.0",
    "next": "14.1.4",
    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "react-tooltip": "^5.26.3",
+    "tailwind-merge": "^2.2.2"
  },
  "devDependencies": {
    "@tailwindcss/container-queries": "^0.1.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -26,6 +26,12 @@ dependencies:
  react-dom:
    specifier: 18.2.0
    version: 18.2.0(react@18.2.0)
+  react-tooltip:
+    specifier: ^5.26.3
+    version: 5.26.3(react-dom@18.2.0)(react@18.2.0)
+  tailwind-merge:
+    specifier: ^2.2.2
+    version: 2.2.2

 devDependencies:
  '@tailwindcss/container-queries':
@ -120,7 +126,6 @@ packages:
    engines: {node: '>=6.9.0'}
    dependencies:
      regenerator-runtime: 0.14.1
-    dev: true

  /@eslint-community/eslint-utils@4.4.0(eslint@8.57.0):
    resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
@ -159,6 +164,23 @@ packages:
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    dev: true

+  /@floating-ui/core@1.6.0:
+    resolution: {integrity: sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==}
+    dependencies:
+      '@floating-ui/utils': 0.2.1
+    dev: false
+
+  /@floating-ui/dom@1.6.3:
+    resolution: {integrity: sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==}
+    dependencies:
+      '@floating-ui/core': 1.6.0
+      '@floating-ui/utils': 0.2.1
+    dev: false
+
+  /@floating-ui/utils@0.2.1:
+    resolution: {integrity: sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==}
+    dev: false
+
  /@headlessui/react@1.7.18(react-dom@18.2.0)(react@18.2.0):
    resolution: {integrity: sha512-4i5DOrzwN4qSgNsL4Si61VMkUcWbcSKueUV7sFhpHzQcSShdlHENE5+QBntMSRvHt8NyoFO2AGG8si9lq+w4zQ==}
    engines: {node: '>=10'}
@ -851,6 +873,10 @@ packages:
    engines: {node: '>=8'}
    dev: true

+  /classnames@2.5.1:
+    resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==}
+    dev: false
+
  /clean-regexp@1.0.0:
    resolution: {integrity: sha512-GfisEZEJvzKrmGWkvfhgzcz/BllN1USeqD2V6tg14OAOgaCD2Z/PUEuxnAZ/nPvmaHRG7a8y77p1T/IRQ4D1Hw==}
    engines: {node: '>=4'}
@ -2870,6 +2896,18 @@ packages:
    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
    dev: true

+  /react-tooltip@5.26.3(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-MpYAws8CEHUd/RC4GaDCdoceph/T4KHM5vS5Dbk8FOmLMvvIht2ymP2htWdrke7K6lqPO8rz8+bnwWUIXeDlzg==}
+    peerDependencies:
+      react: '>=16.14.0'
+      react-dom: '>=16.14.0'
+    dependencies:
+      '@floating-ui/dom': 1.6.3
+      classnames: 2.5.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
  /react@18.2.0:
    resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
    engines: {node: '>=0.10.0'}
@ -2924,7 +2962,6 @@ packages:

  /regenerator-runtime@0.14.1:
    resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
-    dev: true

  /regexp-tree@0.1.27:
    resolution: {integrity: sha512-iETxpjK6YoRWJG5o6hXLwvjYAoW+FEZn9os0PD/b6AP6xQwsa/Y7lCVgIixBbUPMfhu+i2LtdeAqVTgGlQarfA==}
@ -3316,6 +3353,12 @@ packages:
    engines: {node: '>= 0.4'}
    dev: true

+  /tailwind-merge@2.2.2:
+    resolution: {integrity: sha512-tWANXsnmJzgw6mQ07nE3aCDkCK4QdT3ThPMCzawoYA2Pws7vSTCvz3Vrjg61jVUGfFZPJzxEP+NimbcW+EdaDw==}
+    dependencies:
+      '@babel/runtime': 7.24.1
+    dev: false
+
  /tailwindcss@3.4.1:
    resolution: {integrity: sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==}
    engines: {node: '>=14.0.0'}