From 73615e31a77f45ca2db9f671915514ec613dd506 Mon Sep 17 00:00:00 2001 From: adilallo <39313955+adilallo@users.noreply.github.com> Date: Wed, 6 Aug 2025 08:53:15 -0600 Subject: [PATCH] xsmall home header breakpoint --- app/components/Button.js | 2 +- app/components/HeaderTab.js | 15 +++ app/components/HomeHeader.js | 174 ++++++++++++++++++++++++++++++++++ app/components/Logo.js | 21 +++- app/components/MenuBar.js | 2 + app/components/MenuBarItem.js | 1 + app/layout.js | 2 - app/page.js | 9 +- public/assets/Union.svg | 3 + 9 files changed, 222 insertions(+), 7 deletions(-) create mode 100644 app/components/HeaderTab.js create mode 100644 app/components/HomeHeader.js create mode 100644 public/assets/Union.svg diff --git a/app/components/Button.js b/app/components/Button.js index 026d6af..99f562e 100644 --- a/app/components/Button.js +++ b/app/components/Button.js @@ -38,7 +38,7 @@ export default function Button({ default: "bg-[var(--color-surface-inverse-primary)] text-[var(--color-content-inverse-primary)] hover:bg-[var(--color-surface-inverse-primary)] hover:text-[var(--color-content-inverse-brand-primary)] hover:outline-[var(--border-color-default-brandprimary)] hover:outline-inset active:bg-[var(--color-surface-inverse-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:outline-[var(--border-color-default-brandprimary)] active:outline-offset-1 disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:cursor-not-allowed disabled:opacity-50", secondary: - "bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] border-2 border-[var(--border-color-default-primary)] hover:bg-[var(--color-surface-default-secondary)] hover:text-[var(--color-content-default-primary)] hover:border-[var(--border-color-default-primary)] active:bg-[var(--color-surface-default-tertiary)] active:text-[var(--color-content-default-primary)] active:border-[var(--border-color-default-primary)] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-default-tertiary)] disabled:border-[var(--color-content-default-tertiary)] disabled:cursor-not-allowed disabled:opacity-50", + "bg-transparent text-[var(--color-content-default-brand-primary)] hover:bg-[var(--color-surface-default-secondary)] hover:text-[var(--color-content-default-primary)] hover:border-[var(--border-color-default-primary)] active:bg-[var(--color-surface-default-tertiary)] active:text-[var(--color-content-default-primary)] active:border-[var(--border-color-default-primary)] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-default-tertiary)] disabled:border-[var(--color-content-default-tertiary)] disabled:cursor-not-allowed disabled:opacity-50", }; const hoverOutlineStyles = { diff --git a/app/components/HeaderTab.js b/app/components/HeaderTab.js new file mode 100644 index 0000000..6d13923 --- /dev/null +++ b/app/components/HeaderTab.js @@ -0,0 +1,15 @@ +export default function HeaderTab({ children, className = "", ...props }) { + return ( +
+ {children} + Union +
+ ); +} diff --git a/app/components/HomeHeader.js b/app/components/HomeHeader.js new file mode 100644 index 0000000..7ae15cb --- /dev/null +++ b/app/components/HomeHeader.js @@ -0,0 +1,174 @@ +import Logo from "./Logo"; +import MenuBar from "./MenuBar"; +import MenuBarItem from "./MenuBarItem"; +import Button from "./Button"; +import AvatarContainer from "./AvatarContainer"; +import Avatar from "./Avatar"; +import HeaderTab from "./HeaderTab"; + +export default function HomeHeader() { + const navigationItems = [ + { href: "#", text: "Use cases", extraPadding: true }, + { href: "#", text: "Learn" }, + { href: "#", text: "About" }, + ]; + + const avatarImages = [ + { src: "/assets/Avatar_1.png", alt: "Avatar 1" }, + { src: "/assets/Avatar_2.png", alt: "Avatar 2" }, + { src: "/assets/Avatar_3.png", alt: "Avatar 3" }, + ]; + + const logoConfig = [ + { + breakpoint: "block sm:hidden", + size: "homeHeaderXsmall", + showText: false, + }, + { breakpoint: "hidden sm:block md:hidden", size: "header", showText: true }, + { + breakpoint: "hidden md:block lg:hidden", + size: "headerMd", + showText: true, + }, + { + breakpoint: "hidden lg:block xl:hidden", + size: "headerLg", + showText: true, + }, + { breakpoint: "hidden xl:block", size: "headerXl", showText: true }, + ]; + + const renderNavigationItems = (size) => { + return navigationItems.map((item, index) => ( + + {item.text} + + )); + }; + + const renderAvatarGroup = (containerSize, avatarSize) => { + return ( + + {avatarImages.map((avatar, index) => ( + + ))} + + ); + }; + + const renderLoginButton = (size, marginRight) => { + return ( + + Log in + + ); + }; + + const renderCreateRuleButton = ( + buttonSize, + containerSize, + avatarSize, + marginLeft + ) => { + return ( + + ); + }; + + const renderLogo = (size, showText) => { + return ; + }; + + return ( +
+
+ +
+ {logoConfig.map((config, index) => ( +
+ {renderLogo(config.size, config.showText)} +
+ ))} +
+ +
+
+ + {renderNavigationItems("xsmall")} + {renderLoginButton("xsmall")} + +
+ +
+ + {renderNavigationItems("xsmall")} + {renderLoginButton("xsmall")} + +
+ +
+ + {renderNavigationItems("xsmall")} + +
+ +
+ {renderNavigationItems("large")} +
+ +
+ {renderNavigationItems("xlarge")} +
+ +
+
+ {renderLoginButton("xsmall", "mr-[var(--spacing-scale-010)]")} +
+
+ +
+ {renderLoginButton("large", "mr-[var(--spacing-scale-012)]")} +
+ +
+ {renderLoginButton("xlarge", "mr-[var(--spacing-scale-012)]")} +
+
+ + + {/* Create rule button positioned outside HeaderTab */} +
+ {renderCreateRuleButton("xsmall", "small", "small")} +
+
+ {renderCreateRuleButton("xsmall", "medium", "medium")} +
+
+ {renderCreateRuleButton("large", "xlarge", "xlarge")} +
+
+ {renderCreateRuleButton("xlarge", "xlarge", "xlarge")} +
+
+
+ ); +} diff --git a/app/components/Logo.js b/app/components/Logo.js index c105307..7f77f63 100644 --- a/app/components/Logo.js +++ b/app/components/Logo.js @@ -8,6 +8,13 @@ export default function Logo({ size = "default", showText = true }) { lineHeight: "leading-[27.05px]", iconSize: "w-[27.05px] h-[27.05px]", }, + homeHeaderXsmall: { + containerHeight: "h-[14.11px]", + gap: "gap-[4.21px]", + textSize: "text-[11.57px]", + lineHeight: "leading-[14.24px]", + iconSize: "w-[14.11px] h-[14.11px]", + }, header: { containerHeight: "h-[20.85px]", gap: "gap-[4.21px]", @@ -53,7 +60,9 @@ export default function Logo({ size = "default", showText = true }) { }; const config = - size === "header" + size === "homeHeaderXsmall" + ? sizes.homeHeaderXsmall + : size === "header" ? sizes.header : size === "headerMd" ? sizes.headerMd @@ -76,7 +85,11 @@ export default function Logo({ size = "default", showText = true }) { {/* Logo Text - only show if showText is true */} {showText && (
CommunityRule
@@ -88,7 +101,9 @@ export default function Logo({ size = "default", showText = true }) { alt="CommunityRule Logo Icon" width={27.05} height={27.05} - className={`flex-shrink-0 ${config.iconSize}`} + className={`flex-shrink-0 ${config.iconSize} ${ + size === "homeHeaderXsmall" ? "filter brightness-0" : "" + }`} /> ); diff --git a/app/components/MenuBar.js b/app/components/MenuBar.js index 484a279..ff52961 100644 --- a/app/components/MenuBar.js +++ b/app/components/MenuBar.js @@ -5,6 +5,8 @@ export default function MenuBar({ ...props }) { const sizeStyles = { + xsmall: + "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-001)] rounded-[4px]", default: "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-001)]", large: diff --git a/app/components/MenuBarItem.js b/app/components/MenuBarItem.js index 2eb8613..7b8d715 100644 --- a/app/components/MenuBarItem.js +++ b/app/components/MenuBarItem.js @@ -10,6 +10,7 @@ export default function MenuBarItem({ const variantStyles = { default: "bg-transparent text-[var(--color-content-default-brand-primary)] hover:bg-[var(--color-surface-default-tertiary)] hover:text-[var(--color-content-default-brand-primary)] active:bg-transparent active:text-[var(--color-content-default-brand-primary)] disabled:bg-[var(--color-surface-default-tertiary)] disabled:text-[var(--color-content-default-tertiary)] disabled:opacity-50 disabled:cursor-not-allowed", + home: "bg-transparent text-[var(--color-content-inverse-primary)] hover:bg-[var(--color-surface-default-tertiary)] hover:text-[var(--color-content-inverse-primary)] active:bg-transparent active:text-[var(--color-content-inverse-primary)] disabled:bg-[var(--color-surface-default-tertiary)] disabled:text-[var(--color-content-default-tertiary)] disabled:opacity-50 disabled:cursor-not-allowed", }; const activeOutlineStyles = { diff --git a/app/layout.js b/app/layout.js index 20c7983..ec36243 100644 --- a/app/layout.js +++ b/app/layout.js @@ -1,6 +1,5 @@ import { Inter, Bricolage_Grotesque } from "next/font/google"; import "./globals.css"; -import Header from "./components/Header"; import Footer from "./components/Footer"; const inter = Inter({ @@ -20,7 +19,6 @@ export default function RootLayout({ children }) {
-
{children}
diff --git a/app/page.js b/app/page.js index 7d1e0b7..dd37d17 100644 --- a/app/page.js +++ b/app/page.js @@ -1,3 +1,10 @@ +import HomeHeader from "./components/HomeHeader"; + export default function Page() { - return <>; + return ( + <> + +
{/* Your home page content will go here */}
+ + ); } diff --git a/public/assets/Union.svg b/public/assets/Union.svg new file mode 100644 index 0000000..3d996ec --- /dev/null +++ b/public/assets/Union.svg @@ -0,0 +1,3 @@ + + +