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

Run lint and prettier
CI Pipeline / test (20) (pull_request) Successful in 3m0s
Details
CI Pipeline / test (18) (pull_request) Successful in 3m18s
Details
CI Pipeline / e2e (firefox) (pull_request) Successful in 3m20s
Details
CI Pipeline / e2e (chromium) (pull_request) Successful in 3m54s
Details
CI Pipeline / e2e (webkit) (pull_request) Successful in 3m41s
Details
CI Pipeline / performance (pull_request) Successful in 3m3s
Details
CI Pipeline / visual-regression (pull_request) Successful in 7m12s
Details
CI Pipeline / storybook (pull_request) Successful in 1m29s
Details
CI Pipeline / lint (pull_request) Failing after 1m7s
Details
CI Pipeline / build (pull_request) Successful in 1m20s
Details

Browse Source
This commit is contained in:
adilallo
2025-10-07 17:27:07 -06:00
parent c991e22f09
commit 6bd751957c
40 changed files with 96370 additions and 524 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/NavigationItem.js
+46 -43
View File
@@ -1,58 +1,61 @@
import React, { memo } from "react";
const NavigationItem = memo(({
href = "#",
children,
variant = "default",
size = "default",
className = "",
disabled = false,
...props
}) {
// Variant styles
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",
};
const NavigationItem = memo(
({
href = "#",
children,
variant = "default",
size = "default",
className = "",
disabled = false,
...props
}) => {
// Variant styles
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",
};
// Size styles
const sizeStyles = {
default:
"px-[var(--spacing-scale-016)] py-[var(--spacing-scale-016)] gap-[var(--spacing-scale-004)]",
xsmall:
"px-[var(--spacing-scale-004)] py-[var(--spacing-scale-002)] gap-[var(--spacing-scale-004)]",
};
// Size styles
const sizeStyles = {
default:
"px-[var(--spacing-scale-016)] py-[var(--spacing-scale-016)] gap-[var(--spacing-scale-004)]",
xsmall:
"px-[var(--spacing-scale-004)] py-[var(--spacing-scale-002)] gap-[var(--spacing-scale-004)]",
};
// Text styles based on size
const textStyles = {
default: "font-inter text-[10px] leading-[12px] font-medium tracking-[0%]",
xsmall: "font-inter text-[10px] leading-[12px] font-medium tracking-[0%]",
};
// Text styles based on size
const textStyles = {
default:
"font-inter text-[10px] leading-[12px] font-medium tracking-[0%]",
xsmall: "font-inter text-[10px] leading-[12px] 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`;
const baseStyles = `inline-flex items-center ${sizeStyles[size]} rounded-[var(--radius-measures-radius-full)] ${textStyles[size]} transition-all duration-200 cursor-pointer`;
// Determine which variant to use
let finalVariant = variant;
if (disabled) {
finalVariant = "default"; // The disabled state is handled by disabled: utilities
}
// Determine which variant to use
let finalVariant = variant;
if (disabled) {
finalVariant = "default"; // The disabled state is handled by disabled: utilities
}
const combinedStyles = `${baseStyles} ${variantStyles[finalVariant]} ${className}`;
const combinedStyles = `${baseStyles} ${variantStyles[finalVariant]} ${className}`;
if (disabled) {
return (
<span className={combinedStyles} {...props}>
{children}
</span>
);
}
if (disabled) {
return (
<span className={combinedStyles} {...props}>
<a href={href} className={combinedStyles} {...props}>
{children}
</span>
</a>
);
}
return (
<a href={href} className={combinedStyles} {...props}>
{children}
</a>
);
});
);
NavigationItem.displayName = "NavigationItem";