From 64a26ca1646261e30735434719084b7c0d6ffe51 Mon Sep 17 00:00:00 2001 From: Chloe Date: Mon, 15 Apr 2024 16:27:47 +0700 Subject: [PATCH] feat: implemen top banner to display business hours and tel Signed-off-by: Chloe --- app/layout.tsx | 6 +++++- components/banner.tsx | 24 +++++++++++++++++++++ components/tooltip.tsx | 14 +++++++++++++ lib/utils.ts | 6 ++++++ package.json | 4 +++- pnpm-lock.yaml | 47 ++++++++++++++++++++++++++++++++++++++++-- 6 files changed, 97 insertions(+), 4 deletions(-) create mode 100644 components/banner.tsx create mode 100644 components/tooltip.tsx diff --git a/app/layout.tsx b/app/layout.tsx index 58f5a9708..1cf721bb1 100644 --- 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 ( - +
+ + +
{children}
 diff --git a/components/banner.tsx b/components/banner.tsx new file mode 100644 index 000000000..cacbacad7 --- /dev/null +++ b/components/banner.tsx @@ -0,0 +1,24 @@ +import { ChevronDownIcon } from '@heroicons/react/16/solid'; +import Tooltip from './tooltip'; + +function Banner() { + return ( +
+ + Speak to a Specialist Now:{' '} + + (888) 242-2605 + + +
+ Business Hours +
+ +

Monday - Friday: 9:00am - 8:00pm EST

+

Saturday 11:00am - 4:00pm EST

+ +
+ ); +} + +export default Banner; diff --git a/components/tooltip.tsx b/components/tooltip.tsx new file mode 100644 index 000000000..adea2636a --- /dev/null +++ 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 ( + + {children} + + ); +}; + +export default Tooltip; diff --git a/lib/utils.ts b/lib/utils.ts index 69b76d29b..539815a4a 100644 --- 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)); +} diff --git a/package.json b/package.json index a8c4bb2ba..b0faf5da2 100644 --- 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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f38def222..1954facb9 100644 --- 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'}