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

Header #3

Merged
an.di merged 16 commits from adilallo/Header into main 2025-08-07 22:58:34 +00:00
Conversation 0 Commits 16 Files Changed 26
+121 -146
7 changed files with 121 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 8d50130718 - Show all commits
app/components/Avatar.js
+1 -1
View File
@@ -6,7 +6,7 @@ export default function Avatar({
...props
}) {
const sizeStyles = {
small: "w-5 h-5",
small: "w-[16px] h-[16px]",
medium: "w-[18px] h-[18px]",
xlarge: "w-[32px] h-[32px]",
};
app/components/AvatarContainer.js
+1 -1
View File
@@ -6,7 +6,7 @@ export default function AvatarContainer({
}) {
const sizeStyles = {
small: "flex -space-x-2",
medium: "flex -space-x-[var(--spacing-scale-009)]",
medium: "flex -space-x-[9px]",
xlarge: "flex -space-x-[13px]",
};
app/components/Button.js
+2 -2
View File
@@ -32,12 +32,12 @@ export default function Button({
const variantStyles = {
default:
"bg-[var(--color-surface-inverse-primary)] text-[var(--color-content-inverse-primary)] border-2 border-transparent hover:bg-[var(--color-surface-inverse-primary)] hover:text-[var(--color-content-inverse-brand-primary)] hover:border-[var(--border-color-default-brandprimary)] active:bg-[var(--color-surface-inverse-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:border-[var(--border-color-default-brandprimary)] focus:bg-[var(--color-surface-inverse-primary)] focus:text-[var(--color-content-inverse-primary)] focus:shadow-[0_0_10px_#FFFDD2] focus:outline-none disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:cursor-not-allowed disabled:opacity-50",
"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-1 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-[1.5px] active:outline-[var(--border-color-default-brandprimary)] active:outline-offset-1 focus:bg-[var(--color-surface-inverse-primary)] focus:text-[var(--color-content-inverse-primary)] focus:shadow-[0_0_10px_#FFFDD2] focus:outline-none 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)] focus:bg-[var(--color-surface-default-primary)] focus:text-[var(--color-content-default-primary)] focus:shadow-[0_0_10px_#FFFDD2] focus:outline-none 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 baseStyles = `inline-flex items-center justify-start ${sizeStyles[size]} rounded-[var(--radius-measures-radius-full)] ${fontStyles[size]} transition-all duration-200 cursor-pointer ${variantStyles[variant]}`;
const baseStyles = `inline-flex items-center justify-start box-border ${sizeStyles[size]} rounded-[var(--radius-measures-radius-full)] ${fontStyles[size]} transition-all duration-200 cursor-pointer ${variantStyles[variant]}`;
let finalVariant = variant;
if (disabled) {
app/components/Header.js
+101 -132
View File
@@ -6,163 +6,132 @@ import AvatarContainer from "./AvatarContainer";
import Avatar from "./Avatar";
export default function Header() {
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: "header", 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", size: "headerLg", showText: true },
];
const renderNavigationItems = (size) => {
return navigationItems.map((item, index) => (
<MenuBarItem
key={index}
href={item.href}
size={item.extraPadding && size === "xsmall" ? "xsmallUseCases" : size}
>
{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} className={marginRight}>
Log in
</MenuBarItem>
);
};
const renderCreateRuleButton = (
buttonSize,
containerSize,
avatarSize,
marginLeft
) => {
return (
<Button size={buttonSize} className={marginLeft}>
{renderAvatarGroup(containerSize, avatarSize)}
<span>Create rule</span>
</Button>
);
};
const renderLogo = (size, showText) => {
return <Logo size={size} showText={showText} />;
};
return (
<header className="bg-[var(--color-surface-default-primary)] w-full border-b border-[var(--border-color-default-tertiary)]">
<div className="flex items-center justify-between mx-auto max-w-[1920px] h-[40px] lg:h-[84px] px-[var(--spacing-measures-spacing-016)] py-[var(--spacing-measures-spacing-008)] lg:px-[var(--spacing-measures-spacing-64,64px)] lg:py-[var(--spacing-measures-spacing-016,16px)]">
<div>
<div className="block sm:hidden">
<Logo size="header" showText={false} />
</div>
<div className="hidden sm:block md:hidden">
<Logo size="header" showText={true} />
</div>
<div className="hidden md:block lg:hidden">
<Logo size="headerMd" showText={true} />
</div>
<div className="hidden lg:block">
<Logo size="headerLg" showText={true} />
</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 md:hidden">
<div className="block sm:hidden">
<MenuBar className="gap-[var(--spacing-scale-001)]">
<MenuBarItem
href="#"
size="xsmall"
className="px-[var(--spacing-scale-002)] py-[var(--spacing-scale-002)]"
>
Use cases
</MenuBarItem>
<MenuBarItem href="#" size="xsmall">
Learn
</MenuBarItem>
<MenuBarItem href="#" size="xsmall">
About
</MenuBarItem>
<MenuBarItem href="#" size="xsmall">
Log in
</MenuBarItem>
{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)]">
<MenuBarItem
href="#"
size="xsmall"
className="px-[var(--spacing-scale-002)] py-[var(--spacing-scale-002)]"
>
Use cases
</MenuBarItem>
<MenuBarItem href="#" size="xsmall">
Learn
</MenuBarItem>
<MenuBarItem href="#" size="xsmall">
About
</MenuBarItem>
{renderNavigationItems("xsmall")}
</MenuBar>
</div>
<div className="hidden lg:block absolute left-1/2 transform -translate-x-1/2 -ml-[var(--spacing-scale-024)]">
<MenuBar size="large">
<MenuBarItem
href="#"
size="large"
className="px-[var(--spacing-scale-002)] py-[var(--spacing-scale-002)]"
>
Use cases
</MenuBarItem>
<MenuBarItem href="#" size="large">
Learn
</MenuBarItem>
<MenuBarItem href="#" size="large">
About
</MenuBarItem>
</MenuBar>
<MenuBar size="large">{renderNavigationItems("large")}</MenuBar>
</div>
<div className="hidden md:block lg:hidden">
<MenuBarItem
href="#"
size="xsmall"
className="mr-[var(--spacing-scale-010)]"
>
Log in
</MenuBarItem>
<Button size="xsmall">
<AvatarContainer size="medium">
<Avatar
src="/assets/Avatar_1.png"
alt="Avatar 1"
size="medium"
/>
<Avatar
src="/assets/Avatar_2.png"
alt="Avatar 2"
size="medium"
/>
<Avatar
src="/assets/Avatar_3.png"
alt="Avatar 3"
size="medium"
/>
</AvatarContainer>
<span>Create rule</span>
</Button>
<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)]")}
{renderCreateRuleButton("xsmall", "medium", "medium")}
</div>
</div>
<div className="hidden lg:flex items-center">
<MenuBarItem
href="#"
size="large"
className="mr-[var(--spacing-scale-012)]"
>
Log in
</MenuBarItem>
<Button size="large">
<AvatarContainer size="xlarge">
<Avatar
src="/assets/Avatar_1.png"
alt="Avatar 1"
size="xlarge"
/>
<Avatar
src="/assets/Avatar_2.png"
alt="Avatar 2"
size="xlarge"
/>
<Avatar
src="/assets/Avatar_3.png"
alt="Avatar 3"
size="xlarge"
/>
</AvatarContainer>
<span>Create rule</span>
</Button>
{renderLoginButton("large", "mr-[var(--spacing-scale-012)]")}
{renderCreateRuleButton("large", "xlarge", "xlarge")}
</div>
<div className="block md:hidden">
<Button size="xsmall" className="ml-[var(--spacing-scale-006)]">
<AvatarContainer size="small">
<Avatar
src="/assets/Avatar_1.png"
alt="Avatar 1"
size="small"
/>
<Avatar
src="/assets/Avatar_2.png"
alt="Avatar 2"
size="small"
/>
<Avatar
src="/assets/Avatar_3.png"
alt="Avatar 3"
size="small"
/>
</AvatarContainer>
<span>Create rule</span>
</Button>
{renderCreateRuleButton("xsmall", "small", "small")}
</div>
</div>
</div>
app/components/Logo.js
+3 -1
View File
@@ -10,7 +10,7 @@ export default function Logo({ size = "default", showText = true }) {
},
header: {
containerHeight: "h-[20.85px]",
gap: "gap-[2.11px]",
gap: "gap-[4.21px]",
textSize: "text-[11.57px]",
lineHeight: "leading-[14.24px]",
iconSize: "w-[14.24px] h-[14.24px]",
@@ -48,6 +48,8 @@ export default function Logo({ size = "default", showText = true }) {
const config =
size === "header"
? sizes.header
: size === "headerMd"
? sizes.headerMd
: size === "headerLg"
? sizes.headerLg
: size === "footer"
app/components/MenuBarItem.js
+12 -7
View File
@@ -9,7 +9,7 @@ export default function MenuBarItem({
}) {
const variantStyles = {
default:
"bg-transparent text-[var(--color-content-default-brand-primary)] border border-transparent 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)] active:border-[var(--color-content-default-brand-primary)] disabled:bg-[var(--color-surface-default-tertiary)] disabled:text-[var(--color-content-default-tertiary)] disabled:border-[var(--color-content-default-tertiary)] disabled:opacity-50 disabled:cursor-not-allowed",
"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)] active:outline-1 active:outline-[var(--color-content-default-brand-primary)] active:outline-offset-1 disabled:bg-[var(--color-surface-default-tertiary)] disabled:text-[var(--color-content-default-tertiary)] disabled:opacity-50 disabled:cursor-not-allowed",
};
const sizeStyles = {
@@ -17,17 +17,22 @@ export default function MenuBarItem({
"px-[var(--spacing-measures-spacing-016)] py-[var(--spacing-measures-spacing-016)] gap-[var(--spacing-scale-004)]",
xsmall:
"px-[var(--spacing-scale-004)] py-[var(--spacing-scale-002)] gap-[var(--spacing-scale-004)]",
xsmallUseCases:
"px-[var(--spacing-scale-002)] py-[var(--spacing-scale-002)] gap-[var(--spacing-scale-004)]",
large:
"px-[var(--spacing-scale-012)] py-[var(--spacing-scale-012)] gap-[var(--spacing-scale-004)]",
};
const smallTextStyle =
"font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]";
const largeTextStyle =
"font-['Inter'] text-[16px] leading-[20px] font-medium tracking-[0%]";
const textStyles = {
default:
"font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]",
xsmall:
"font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]",
large:
"font-['Inter'] text-[16px] leading-[20px] font-medium tracking-[0%]",
default: smallTextStyle,
xsmall: smallTextStyle,
xsmallUseCases: smallTextStyle,
large: largeTextStyle,
};
const baseStyles = `inline-flex items-center ${sizeStyles[size]} rounded-[var(--radius-measures-radius-full)] ${textStyles[size]} transition-all duration-200 cursor-pointer`;
app/tailwind.css
+1 -2
View File
@@ -11,8 +11,7 @@
--breakpoint-sm: 430px;
--breakpoint-md: 640px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;
--breakpoint-2xl: 1536px;
--breakpoint-xl: 1440px;
/* Reset default Tailwind configuration */
--color-*: initial;