From 0cef18f696c74188d79cffa86bf7a2f6923c3391 Mon Sep 17 00:00:00 2001 From: RizqiSyahrendra Date: Sun, 27 Apr 2025 11:01:54 +0700 Subject: [PATCH] feat: new header styyling --- package.json | 4 +- public/css/style.css | 21 +- src/app/(main)/globals.css | 4 + src/components/layouts/Header.tsx | 357 +++++++++++------- src/components/layouts/HeaderDropdown.tsx | 76 ++++ .../layouts/HeaderFeaturedHomes.tsx | 34 ++ src/utils/general.ts | 7 + src/utils/style.ts | 6 + yarn.lock | 9 + 9 files changed, 379 insertions(+), 139 deletions(-) create mode 100644 src/components/layouts/HeaderDropdown.tsx create mode 100644 src/components/layouts/HeaderFeaturedHomes.tsx create mode 100644 src/utils/style.ts diff --git a/package.json b/package.json index d6e273d..c5dba84 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@payloadcms/plugin-form-builder": "^3.35.1", "@payloadcms/richtext-lexical": "^3.35.1", "@payloadcms/storage-s3": "^3.35.1", + "clsx": "^2.1.1", "country-state-city": "^3.2.1", "dayjs": "^1.11.13", "graphql": "^16.8.1", @@ -29,7 +30,8 @@ "react-hook-form": "^7.56.1", "react-select": "^5.10.1", "react-toastify": "^11.0.5", - "swiper": "^11.2.6" + "swiper": "^11.2.6", + "tailwind-merge": "^3.2.0" }, "devDependencies": { "@eslint/eslintrc": "^3", diff --git a/public/css/style.css b/public/css/style.css index b223537..ac840f3 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -3744,13 +3744,13 @@ html .page .divider-secondary::after { } .button-primary, .button-primary:focus { - color: #ffffff; - background-color: #bc986b; - border-color: #bc986b; + color: var(--color-colorBtnPrimaryText); + background-color: var(--color-colorBtnPrimary); + border-color: var(--color-colorBtnPrimary); } .button-primary:hover, .button-primary:active { - color: #151515; + color: var(--color-colorBtnPrimaryText); opacity: 0.8; } @@ -3759,15 +3759,14 @@ html .page .divider-secondary::after { } .button-secondary, .button-secondary:focus { - color: #151515; - background-color: #fdde52; - border-color: #fdde52; + color: var(--color-colorBtnSecondaryText); + background-color: var(--color-colorBtnSecondary); + border-color: var(--color-colorBtnSecondary); } .button-secondary:hover, .button-secondary:active { - color: #ffffff; - background-color: #bc986b; - border-color: #bc986b; + color: var(--color-colorBtnSecondaryText); + opacity: 0.8; } .button-secondary.button-ujarak::before { @@ -11699,7 +11698,7 @@ html.tablet .ui-to-top { } .rd-navbar-static .rd-menu { - z-index: 15; + z-index: 30; position: absolute; display: block; visibility: hidden; diff --git a/src/app/(main)/globals.css b/src/app/(main)/globals.css index f7699f9..7768b0a 100644 --- a/src/app/(main)/globals.css +++ b/src/app/(main)/globals.css @@ -35,6 +35,10 @@ --color-colorText2: var(--color-colorExt20); --color-colorLoaderBackground: var(--color-colorExt20); --color-colorPriceTag: var(--color-colorExt30); + --color-colorBtnPrimary: var(--color-colorext40); + --color-colorBtnPrimaryText: var(--color-colorExt20); + --color-colorBtnSecondary: var(--color-colorExt50); + --color-colorBtnSecondaryText: var(--color-colorExt20); } @layer components { diff --git a/src/components/layouts/Header.tsx b/src/components/layouts/Header.tsx index fc8378f..1b3e0ac 100644 --- a/src/components/layouts/Header.tsx +++ b/src/components/layouts/Header.tsx @@ -1,4 +1,6 @@ import { headers } from "next/headers"; +import HeaderFeaturedHomes from "./HeaderFeaturedHomes"; +import { HeaderDropdown, HeaderDropdownGroup, HeaderDropdownMenu } from "./HeaderDropdown"; export default async function Header() { const headerList = await headers(); @@ -103,46 +105,134 @@ export default async function Header() { srcSet="images/logo2.png 2x" /> - {/*

- Dynamic Realty -

*/}
-
- - BOOK APPOINTMENT - -
diff --git a/src/components/layouts/HeaderDropdown.tsx b/src/components/layouts/HeaderDropdown.tsx new file mode 100644 index 0000000..e29d103 --- /dev/null +++ b/src/components/layouts/HeaderDropdown.tsx @@ -0,0 +1,76 @@ +import { createSlug } from "@/utils/general"; +import { cn } from "@/utils/style"; +import { FC, Fragment, PropsWithChildren } from "react"; + +export const HeaderDropdown: FC = ({ children }) => { + return ; +}; + +type HeaderDropdownGroupProps = { + title?: string; + className?: string; +}; + +export const HeaderDropdownGroup: FC> = ({ + children, + title, + className, +}) => { + return ( +
  • + {!!title &&
    {title}
    } + {children} +
    • + ); +}; + +type HeaderDropdownMenuItem = { title: string; href: string }; +type HeaderDropdownMenuItemWithChild = { title: string; child: HeaderDropdownMenuItem[] }; + +type HeaderDropdownMenuProps = { + list?: (HeaderDropdownMenuItem | HeaderDropdownMenuItemWithChild)[]; +}; + +export const HeaderDropdownMenu: FC = ({ list = [] }) => { + return ( +
      + {list.map((item, idx) => { + const collapseId = createSlug(`collapse-${item.title}-${idx}`); + const hasChild = "child" in item; + + return ( + + {hasChild && ( +
    • + +
      + {item.child.map((itemChild, itemChildIdx) => ( + + - {itemChild.title} + + ))} +
      +
      • + )} + + {!hasChild && ( +
    • + + {item.title} + +
      • + )} +       + ); + })} +
    + ); +}; diff --git a/src/components/layouts/HeaderFeaturedHomes.tsx b/src/components/layouts/HeaderFeaturedHomes.tsx new file mode 100644 index 0000000..f789f95 --- /dev/null +++ b/src/components/layouts/HeaderFeaturedHomes.tsx @@ -0,0 +1,34 @@ +"use client"; + +import Image from "next/image"; + +export default function HeaderFeaturedHomes() { + const images = [ + "/images/featured-properties-17-480x287.jpg", + "/images/featured-properties-17-480x287.jpg", + "/images/featured-properties-17-480x287.jpg", + "/images/featured-properties-17-480x287.jpg", + "/images/featured-properties-17-480x287.jpg", + "/images/featured-properties-17-480x287.jpg", + ]; + + return ( +
    +
    + {images.map((src, index) => ( +
    + {`Gallery +
    + ))} +
    +
    + ); +} diff --git a/src/utils/general.ts b/src/utils/general.ts index 5e09779..39dc83f 100644 --- a/src/utils/general.ts +++ b/src/utils/general.ts @@ -24,3 +24,10 @@ export function formatCurrency(num: number): string { //maximumFractionDigits: 0, // Causes 2500.99 to be printed as $2,501 }).format(num); } + +export function createSlug(val: string) { + return val + .replace(/ /g, "-") + .replace(/[^\w-/]+/g, "") + .toLowerCase(); +} diff --git a/src/utils/style.ts b/src/utils/style.ts new file mode 100644 index 0000000..a5ef193 --- /dev/null +++ b/src/utils/style.ts @@ -0,0 +1,6 @@ +import { clsx, type ClassValue } from "clsx"; +import { twMerge } from "tailwind-merge"; + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)); +} diff --git a/yarn.lock b/yarn.lock index 96966cb..7b20ee9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5044,6 +5044,7 @@ __metadata: "@types/node": "npm:^20" "@types/react": "npm:^19" "@types/react-dom": "npm:^19" + clsx: "npm:^2.1.1" country-state-city: "npm:^3.2.1" dayjs: "npm:^1.11.13" eslint: "npm:^9" @@ -5061,6 +5062,7 @@ __metadata: react-select: "npm:^5.10.1" react-toastify: "npm:^11.0.5" swiper: "npm:^11.2.6" + tailwind-merge: "npm:^3.2.0" tailwindcss: "npm:^4" typescript: "npm:^5" languageName: unknown @@ -9759,6 +9761,13 @@ __metadata: languageName: node linkType: hard +"tailwind-merge@npm:^3.2.0": + version: 3.2.0 + resolution: "tailwind-merge@npm:3.2.0" + checksum: 10c0/294f6c2db0df74405bff126107107426c3126a70a1717d78e8d6811db65546c9bb3d61282bdb8d9fbded23f6bc8ec3e8e61031a4f53265f90b7f3dba558f88f4 + languageName: node + linkType: hard + "tailwindcss@npm:4.1.4, tailwindcss@npm:^4": version: 4.1.4 resolution: "tailwindcss@npm:4.1.4"