CommunityRule/community-rule
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

xsmall home header breakpoint

Browse Source
This commit is contained in:
adilallo
2025-08-06 08:53:15 -06:00
parent 37caada856
commit 73615e31a7
9 changed files with 222 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Button.js
+1 -1
View File
@@ -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 = {
app/components/HeaderTab.js
+15
View File
@@ -0,0 +1,15 @@
export default function HeaderTab({ children, className = "", ...props }) {
return (
<div
className={`relative bg-[var(--color-surface-default-brand-primary)] rounded-t-[16px] pl-[var(--spacing-measures-spacing-012)] h-[40px] ${className}`}
{...props}
>
{children}
<img
src="/assets/Union.svg"
alt="Union"
className="absolute bottom-[0px] -right-[55px] w-[61px] h-[24px]"
/>
</div>
);
}
app/components/HomeHeader.js
+174
View File
@@ -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) => (
<MenuBarItem
key={index}
href={item.href}
size={item.extraPadding && size === "xsmall" ? "xsmallUseCases" : size}
variant={size === "xsmall" ? "home" : "default"}
>
{item.text}
</MenuBarItem>
));
};
const renderAvatarGroup = (containerSize, avatarSize) => {
return (
<AvatarContainer size={containerSize}>
{avatarImages.map((avatar, index) => (
<Avatar
key={index}
src={avatar.src}
alt={avatar.alt}
size={avatarSize}
/>
))}
</AvatarContainer>
);
};
const renderLoginButton = (size, marginRight) => {
return (
<MenuBarItem
href="#"
size={size}
variant={size === "xsmall" ? "home" : "default"}
className={marginRight}
>
Log in
</MenuBarItem>
);
};
const renderCreateRuleButton = (
buttonSize,
containerSize,
avatarSize,
marginLeft
) => {
return (
<Button size={buttonSize} className={marginLeft} variant="secondary">
{renderAvatarGroup(containerSize, avatarSize)}
<span>Create rule</span>
</Button>
);
};
const renderLogo = (size, showText) => {
return <Logo size={size} showText={showText} />;
};
return (
<header className="w-full bg-transparent">
<div className="relative flex items-center justify-between mx-auto max-w-[1920px] h-[50px] lg:h-[84px] xl:h-[88px] px-[var(--spacing-scale-008)] pr-[var(--spacing-scale-016)] pt-[var(--spacing-scale-010)] lg:px-[var(--spacing-measures-spacing-64,64px)] lg:py-[var(--spacing-measures-spacing-016,16px)]">
<HeaderTab className="flex items-center self-end">
<div>
{logoConfig.map((config, index) => (
<div key={index} className={config.breakpoint}>
{renderLogo(config.size, config.showText)}
</div>
))}
</div>
<div className="flex items-center">
<div className="block sm:hidden -me-[2px]">
<MenuBar size="xsmall">
{renderNavigationItems("xsmall")}
{renderLoginButton("xsmall")}
</MenuBar>
</div>
<div className="hidden sm:block md:hidden absolute left-1/2 transform -translate-x-1/2">
<MenuBar className="gap-[var(--spacing-scale-001)]">
{renderNavigationItems("xsmall")}
{renderLoginButton("xsmall")}
</MenuBar>
</div>
<div className="hidden md:block lg:hidden absolute left-1/2 transform -translate-x-1/2 ml-[var(--spacing-scale-024)]">
<MenuBar className="gap-[var(--spacing-scale-001)]">
{renderNavigationItems("xsmall")}
</MenuBar>
</div>
<div className="hidden lg:block xl:hidden absolute left-1/2 transform -translate-x-1/2 -ml-[var(--spacing-scale-024)]">
<MenuBar size="large">{renderNavigationItems("large")}</MenuBar>
</div>
<div className="hidden xl:block absolute left-1/2 transform -translate-x-1/2 ml-[var(--spacing-scale-032)]">
<MenuBar size="large">{renderNavigationItems("xlarge")}</MenuBar>
</div>
<div className="hidden md:block lg:hidden absolute right-[var(--spacing-measures-spacing-016)]">
<div className="flex items-center">
{renderLoginButton("xsmall", "mr-[var(--spacing-scale-010)]")}
</div>
</div>
<div className="hidden lg:flex xl:hidden items-center">
{renderLoginButton("large", "mr-[var(--spacing-scale-012)]")}
</div>
<div className="hidden xl:flex items-center">
{renderLoginButton("xlarge", "mr-[var(--spacing-scale-012)]")}
</div>
</div>
</HeaderTab>
{/* Create rule button positioned outside HeaderTab */}
<div className="block md:hidden">
{renderCreateRuleButton("xsmall", "small", "small")}
</div>
<div className="hidden md:block lg:hidden absolute right-[var(--spacing-measures-spacing-016)]">
{renderCreateRuleButton("xsmall", "medium", "medium")}
</div>
<div className="hidden lg:flex xl:hidden items-center">
{renderCreateRuleButton("large", "xlarge", "xlarge")}
</div>
<div className="hidden xl:flex items-center">
{renderCreateRuleButton("xlarge", "xlarge", "xlarge")}
</div>
</div>
</header>
);
}
app/components/Logo.js
+18 -3
View File
@@ -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 && (
<div
className={`font-['Bricolage_Grotesque'] text-[var(--color-content-default-primary)] ${config.textSize} ${config.lineHeight} font-normal tracking-[0px]`}
className={`font-['Bricolage_Grotesque'] ${
size === "homeHeaderXsmall"
? "text-[var(--color-content-inverse-primary)]"
: "text-[var(--color-content-default-primary)]"
} ${config.textSize} ${config.lineHeight} font-normal tracking-[0px]`}
>
CommunityRule
</div>
@@ -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" : ""
}`}
/>
</div>
);
app/components/MenuBar.js
+2
View File
@@ -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:
app/components/MenuBarItem.js
+1
View File
@@ -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 = {
app/layout.js
-2
View File
@@ -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 }) {
<html lang="en">
<body className={`${inter.variable} ${bricolageGrotesque.variable}`}>
<div className="min-h-screen flex flex-col">
<Header />
<main className="flex-1">{children}</main>
<Footer />
</div>
app/page.js
+8 -1
View File
@@ -1,3 +1,10 @@
import HomeHeader from "./components/HomeHeader";
export default function Page() {
return <></>;
return (
<>
<HomeHeader />
<main>{/* Your home page content will go here */}</main>
</>
);
}