mirror of
https://dev.azure.com/globalhealthx/EMR/_git/helix-engage
synced 2026-05-18 20:08:19 +00:00
saridsa2
6f40b82579
Replace all @untitledui/icons imports across 55 files with equivalent
@fortawesome/pro-duotone-svg-icons icons, using FontAwesomeIcon wrappers
(FC<{ className?: string }>) for prop-based usage and inline replacements
for direct JSX usage. Drops unsupported Untitled UI-specific props
(strokeWidth, numeric size). TypeScript compiles clean with no errors.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
58 lines
2.9 KiB
TypeScript
58 lines
2.9 KiB
TypeScript
import type { PropsWithChildren } from "react";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { faXmark, faBars } from "@fortawesome/pro-duotone-svg-icons";
|
|
import {
|
|
Button as AriaButton,
|
|
Dialog as AriaDialog,
|
|
DialogTrigger as AriaDialogTrigger,
|
|
Modal as AriaModal,
|
|
ModalOverlay as AriaModalOverlay,
|
|
} from "react-aria-components";
|
|
import { UntitledLogo } from "@/components/foundations/logo/untitledui-logo";
|
|
import { cx } from "@/utils/cx";
|
|
|
|
export const MobileNavigationHeader = ({ children }: PropsWithChildren) => {
|
|
return (
|
|
<AriaDialogTrigger>
|
|
<header className="flex h-16 items-center justify-between border-b border-secondary bg-primary py-3 pr-2 pl-4 lg:hidden">
|
|
<UntitledLogo />
|
|
|
|
<AriaButton
|
|
aria-label="Expand navigation menu"
|
|
className="group flex items-center justify-center rounded-lg bg-primary p-2 text-fg-secondary outline-focus-ring hover:bg-primary_hover hover:text-fg-secondary_hover focus-visible:outline-2 focus-visible:outline-offset-2"
|
|
>
|
|
<FontAwesomeIcon icon={faBars} className="size-6 transition duration-200 ease-in-out group-aria-expanded:opacity-0" />
|
|
<FontAwesomeIcon icon={faXmark} className="absolute size-6 opacity-0 transition duration-200 ease-in-out group-aria-expanded:opacity-100" />
|
|
</AriaButton>
|
|
</header>
|
|
|
|
<AriaModalOverlay
|
|
isDismissable
|
|
className={({ isEntering, isExiting }) =>
|
|
cx(
|
|
"fixed inset-0 z-50 cursor-pointer bg-overlay/70 pr-16 backdrop-blur-md lg:hidden",
|
|
isEntering && "duration-300 ease-in-out animate-in fade-in",
|
|
isExiting && "duration-200 ease-in-out animate-out fade-out",
|
|
)
|
|
}
|
|
>
|
|
{({ state }) => (
|
|
<>
|
|
<AriaButton
|
|
aria-label="Close navigation menu"
|
|
onPress={() => state.close()}
|
|
className="fixed top-3 right-2 flex cursor-pointer items-center justify-center rounded-lg p-2 text-fg-white/70 outline-focus-ring hover:bg-white/10 hover:text-fg-white focus-visible:outline-2 focus-visible:outline-offset-2"
|
|
>
|
|
<FontAwesomeIcon icon={faXmark} className="size-6" />
|
|
</AriaButton>
|
|
|
|
<AriaModal className="w-full cursor-auto will-change-transform">
|
|
<AriaDialog className="h-dvh outline-hidden focus:outline-hidden">{children}</AriaDialog>
|
|
</AriaModal>
|
|
</>
|
|
)}
|
|
</AriaModalOverlay>
|
|
</AriaDialogTrigger>
|
|
);
|
|
};
|