Large header breakpoint
This commit is contained in:
adilallo
@@ -5,10 +5,10 @@ export default function Avatar({
|
||||
className = "",
|
||||
...props
|
||||
}) {
|
||||
// Size styles - avatars scale to fit inside the 60px container
|
||||
const sizeStyles = {
|
||||
small: "w-4 h-4", // 16px x 16px to fit in 60px container
|
||||
// Add more sizes as needed: medium, large, xlarge
|
||||
small: "w-5 h-5",
|
||||
medium: "w-[18px] h-[18px]",
|
||||
xlarge: "w-[32px] h-[32px]",
|
||||
};
|
||||
|
||||
const baseStyles = `rounded-[var(--radius-measures-radius-full)] object-cover ${sizeStyles[size]} ${className}`;
|
||||
|
||||
@@ -4,10 +4,10 @@ export default function AvatarContainer({
|
||||
className = "",
|
||||
...props
|
||||
}) {
|
||||
// Size styles - container sizes to fit content, not fixed dimensions
|
||||
const sizeStyles = {
|
||||
small: "flex -space-x-2", // Just flex with -8px spacing, no fixed width/height
|
||||
// Add more sizes as needed: medium, large, xlarge
|
||||
small: "flex -space-x-2",
|
||||
medium: "flex -space-x-[var(--spacing-scale-009)]",
|
||||
xlarge: "flex -space-x-[13px]",
|
||||
};
|
||||
|
||||
const baseStyles = `items-center ${sizeStyles[size]} ${className}`;
|
||||
|
||||
+11
-16
@@ -12,56 +12,52 @@ export default function Button({
|
||||
ariaLabel,
|
||||
...props
|
||||
}) {
|
||||
// Size styles
|
||||
const sizeStyles = {
|
||||
xsmall:
|
||||
"px-[var(--spacing-scale-006)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-001)]",
|
||||
small:
|
||||
"px-[var(--spacing-measures-spacing-008)] py-[var(--spacing-measures-spacing-008)] gap-[var(--spacing-scale-004)]",
|
||||
// Add more sizes as needed: medium, large, xlarge
|
||||
large:
|
||||
"px-[var(--spacing-scale-012)] py-[var(--spacing-scale-010)] gap-[var(--spacing-scale-004)]",
|
||||
};
|
||||
|
||||
// Font styles based on size
|
||||
const fontStyles = {
|
||||
xsmall:
|
||||
"font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]",
|
||||
small:
|
||||
"font-['Inter'] text-[10px] leading-[12.5px] font-medium tracking-[0%]",
|
||||
large:
|
||||
"font-['Inter'] text-[16px] leading-[20px] font-medium tracking-[0%]",
|
||||
};
|
||||
|
||||
// Variant styles
|
||||
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",
|
||||
secondary:
|
||||
"bg-transparent text-[var(--color-content-default-primary)] border-2 border-[var(--color-content-default-primary)] hover:bg-[var(--color-surface-default-tertiary)] hover:text-[var(--color-content-default-primary)] active:bg-[var(--color-surface-default-secondary)] active:text-[var(--color-content-default-primary)] focus:bg-transparent focus:text-[var(--color-content-default-primary)] focus:shadow-[0_0_10px_#FFFDD2] focus:outline-none disabled:bg-[var(--color-surface-default-tertiary)] disabled:text-[var(--color-content-default-tertiary)] disabled:border-[var(--color-content-default-tertiary)] disabled:cursor-not-allowed disabled:opacity-50",
|
||||
"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`;
|
||||
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]}`;
|
||||
|
||||
// Determine which variant to use
|
||||
let finalVariant = variant;
|
||||
if (disabled) {
|
||||
finalVariant = "default"; // The disabled state is handled by disabled: utilities
|
||||
finalVariant = "default";
|
||||
}
|
||||
|
||||
const combinedStyles = `${baseStyles} ${variantStyles[finalVariant]} ${className}`;
|
||||
const combinedStyles = `${baseStyles} ${className}`;
|
||||
|
||||
// Accessibility attributes
|
||||
const accessibilityProps = {
|
||||
...(ariaLabel && { "aria-label": ariaLabel }),
|
||||
...(disabled && { "aria-disabled": true }),
|
||||
...(onClick && { role: "button", tabIndex: 0 }),
|
||||
...(target && { target }),
|
||||
...(rel && { rel }),
|
||||
};
|
||||
|
||||
// If href is provided, render as anchor tag
|
||||
if (href && !disabled) {
|
||||
return (
|
||||
<a
|
||||
href={href}
|
||||
target={target}
|
||||
rel={rel}
|
||||
className={combinedStyles}
|
||||
onClick={onClick}
|
||||
{...accessibilityProps}
|
||||
{...props}
|
||||
>
|
||||
@@ -70,7 +66,6 @@ export default function Button({
|
||||
);
|
||||
}
|
||||
|
||||
// Render as button
|
||||
return (
|
||||
<button
|
||||
type={type}
|
||||
|
||||
@@ -8,7 +8,7 @@ import Avatar from "./Avatar";
|
||||
export default function Header() {
|
||||
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] px-[var(--spacing-measures-spacing-016)] py-[var(--spacing-measures-spacing-008)] lg:px-[var(--spacing-measures-spacing-120,120px)] lg:py-[var(--spacing-measures-spacing-016,16px)]">
|
||||
<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} />
|
||||
@@ -16,9 +16,12 @@ export default function Header() {
|
||||
<div className="hidden sm:block md:hidden">
|
||||
<Logo size="header" showText={true} />
|
||||
</div>
|
||||
<div className="hidden md:block">
|
||||
<div className="hidden md:block lg:hidden">
|
||||
<Logo size="headerMd" showText={true} />
|
||||
</div>
|
||||
<div className="hidden lg:block">
|
||||
<Logo size="headerLg" showText={true} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
@@ -43,7 +46,7 @@ export default function Header() {
|
||||
</MenuBar>
|
||||
</div>
|
||||
|
||||
<div className="hidden md:block absolute left-1/2 transform -translate-x-1/2 ml-[var(--spacing-scale-024)]">
|
||||
<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="#"
|
||||
@@ -61,30 +64,78 @@ export default function Header() {
|
||||
</MenuBar>
|
||||
</div>
|
||||
|
||||
<div className="hidden md:flex items-center">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div className="hidden md:block lg:hidden">
|
||||
<MenuBarItem
|
||||
href="#"
|
||||
size="xsmall"
|
||||
className="mr-[var(--spacing-scale-006)]"
|
||||
className="mr-[var(--spacing-scale-010)]"
|
||||
>
|
||||
Log in
|
||||
</MenuBarItem>
|
||||
<Button size="xsmall">
|
||||
<AvatarContainer size="small">
|
||||
<AvatarContainer size="medium">
|
||||
<Avatar
|
||||
src="/assets/Avatar_1.png"
|
||||
alt="Avatar 1"
|
||||
size="small"
|
||||
size="medium"
|
||||
/>
|
||||
<Avatar
|
||||
src="/assets/Avatar_2.png"
|
||||
alt="Avatar 2"
|
||||
size="small"
|
||||
size="medium"
|
||||
/>
|
||||
<Avatar
|
||||
src="/assets/Avatar_3.png"
|
||||
alt="Avatar 3"
|
||||
size="small"
|
||||
size="medium"
|
||||
/>
|
||||
</AvatarContainer>
|
||||
<span>Create rule</span>
|
||||
</Button>
|
||||
</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>
|
||||
|
||||
@@ -23,11 +23,11 @@ export default function Logo({ size = "default", showText = true }) {
|
||||
iconSize: "w-[22.02px] h-[22.02px]",
|
||||
},
|
||||
headerLg: {
|
||||
containerHeight: "h-[36px]",
|
||||
gap: "gap-[7px]",
|
||||
textSize: "text-[20px]",
|
||||
lineHeight: "leading-[24px]",
|
||||
iconSize: "w-[24px] h-[24px]",
|
||||
containerHeight: "h-[27.05px]",
|
||||
gap: "gap-[6.55px]",
|
||||
textSize: "text-[21.97px]",
|
||||
lineHeight: "leading-[27.05px]",
|
||||
iconSize: "w-[27.05px] h-[27.05px]",
|
||||
},
|
||||
footer: {
|
||||
containerHeight: "h-[calc(40px*1.37)]",
|
||||
|
||||
@@ -1,5 +1,17 @@
|
||||
export default function MenuBar({ children, className = "", ...props }) {
|
||||
const baseStyles = `flex items-center px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-001)] ${className}`;
|
||||
export default function MenuBar({
|
||||
children,
|
||||
className = "",
|
||||
size = "default",
|
||||
...props
|
||||
}) {
|
||||
const sizeStyles = {
|
||||
default:
|
||||
"px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-001)]",
|
||||
large:
|
||||
"px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-012)]",
|
||||
};
|
||||
|
||||
const baseStyles = `flex items-center ${sizeStyles[size]} ${className}`;
|
||||
|
||||
return (
|
||||
<nav className={baseStyles} {...props}>
|
||||
|
||||
@@ -17,6 +17,8 @@ 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)]",
|
||||
large:
|
||||
"px-[var(--spacing-scale-012)] py-[var(--spacing-scale-012)] gap-[var(--spacing-scale-004)]",
|
||||
};
|
||||
|
||||
const textStyles = {
|
||||
@@ -24,6 +26,8 @@ export default function MenuBarItem({
|
||||
"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%]",
|
||||
};
|
||||
|
||||
const baseStyles = `inline-flex items-center ${sizeStyles[size]} rounded-[var(--radius-measures-radius-full)] ${textStyles[size]} transition-all duration-200 cursor-pointer`;
|
||||
|
||||
Reference in New Issue
Block a user