diff --git a/apps/site/components/Common/LinkWithArrow/index.module.css b/apps/site/components/Common/LinkWithArrow/index.module.css new file mode 100644 index 0000000000000..8f1566281e65a --- /dev/null +++ b/apps/site/components/Common/LinkWithArrow/index.module.css @@ -0,0 +1,16 @@ +@reference "../../../styles/index.css"; + +.icon { + @apply ml-1 + inline + w-3 + fill-neutral-600 + dark:fill-white; +} + +.button { + @apply text-green-600 + hover:text-green-900 + dark:text-green-400 + dark:hover:text-green-200; +} diff --git a/apps/site/components/Common/LinkWithArrow/index.tsx b/apps/site/components/Common/LinkWithArrow/index.tsx new file mode 100644 index 0000000000000..37f820de02293 --- /dev/null +++ b/apps/site/components/Common/LinkWithArrow/index.tsx @@ -0,0 +1,48 @@ +import { ArrowUpRightIcon } from '@heroicons/react/24/solid'; +import classNames from 'classnames'; +import type { + ButtonHTMLAttributes, + ComponentProps, + FC, + PropsWithChildren, +} from 'react'; + +import Link from '#site/components/Link'; + +import styles from './index.module.css'; + +type LinkWithArrowProps = + | ComponentProps + | ButtonHTMLAttributes; + +const LinkWithArrow: FC> = ({ + children, + className, + ...props +}) => { + const content = ( + + {children} + + + ); + + if ('href' in props) { + return ( + + {content} + + ); + } + + return ( + + ); +}; + +export default LinkWithArrow; diff --git a/apps/site/components/Downloads/DownloadLink.tsx b/apps/site/components/Downloads/DownloadLink.tsx index 905adbf352d8a..097d95a640188 100644 --- a/apps/site/components/Downloads/DownloadLink.tsx +++ b/apps/site/components/Downloads/DownloadLink.tsx @@ -2,7 +2,7 @@ import type { FC, PropsWithChildren } from 'react'; -import LinkWithArrow from '#site/components/LinkWithArrow'; +import LinkWithArrow from '#site/components/Common/LinkWithArrow'; import { useClientContext } from '#site/hooks'; import type { DownloadKind, NodeRelease } from '#site/types'; import { getNodeDownloadUrl } from '#site/util/url'; diff --git a/apps/site/components/Downloads/DownloadReleasesTable/DetailsButton.tsx b/apps/site/components/Downloads/DownloadReleasesTable/DetailsButton.tsx index b8fbeb6f160b9..ca9b0575082cb 100644 --- a/apps/site/components/Downloads/DownloadReleasesTable/DetailsButton.tsx +++ b/apps/site/components/Downloads/DownloadReleasesTable/DetailsButton.tsx @@ -4,7 +4,7 @@ import { useTranslations } from 'next-intl'; import type { FC } from 'react'; import { use } from 'react'; -import LinkWithArrow from '#site/components/LinkWithArrow'; +import LinkWithArrow from '#site/components/Common/LinkWithArrow'; import { ReleaseModalContext } from '#site/providers/releaseModalProvider'; import type { NodeRelease } from '#site/types'; @@ -19,8 +19,8 @@ const DetailsButton: FC = ({ versionData }) => { return ( openModal(versionData)} + aria-label={t('details')} > {t('details')} diff --git a/apps/site/components/Downloads/Release/ChangelogLink.tsx b/apps/site/components/Downloads/Release/ChangelogLink.tsx index 13c4f4f784e80..047b623c62d5b 100644 --- a/apps/site/components/Downloads/Release/ChangelogLink.tsx +++ b/apps/site/components/Downloads/Release/ChangelogLink.tsx @@ -3,8 +3,7 @@ import type { FC, PropsWithChildren } from 'react'; import { useContext } from 'react'; -import Link from '#site/components/Link'; -import LinkWithArrow from '#site/components/LinkWithArrow'; +import LinkWithArrow from '#site/components/Common/LinkWithArrow'; import { BASE_CHANGELOG_URL } from '#site/next.constants.mjs'; import { ReleaseContext } from '#site/providers/releaseProvider'; @@ -12,8 +11,8 @@ const ChangelogLink: FC = ({ children }) => { const { release } = useContext(ReleaseContext); return ( - - {children} + + {children} ); }; diff --git a/apps/site/components/Downloads/Release/ReleaseCodeBox.tsx b/apps/site/components/Downloads/Release/ReleaseCodeBox.tsx index ccd9073412f41..f5751217d397c 100644 --- a/apps/site/components/Downloads/Release/ReleaseCodeBox.tsx +++ b/apps/site/components/Downloads/Release/ReleaseCodeBox.tsx @@ -8,8 +8,8 @@ import type { FC } from 'react'; import { useContext, useMemo } from 'react'; import CodeBox from '#site/components/Common/CodeBox'; +import LinkWithArrow from '#site/components/Common/LinkWithArrow'; import Link from '#site/components/Link'; -import LinkWithArrow from '#site/components/LinkWithArrow'; import { createSval } from '#site/next.jsx.compiler.mjs'; import { ReleaseContext, diff --git a/apps/site/components/LinkWithArrow.tsx b/apps/site/components/LinkWithArrow.tsx deleted file mode 100644 index 12eb3cdf5472d..0000000000000 --- a/apps/site/components/LinkWithArrow.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { ArrowUpRightIcon } from '@heroicons/react/24/solid'; -import type { SlotProps } from '@radix-ui/react-slot'; -import { Slot } from '@radix-ui/react-slot'; -import type { ComponentProps, FC, PropsWithChildren } from 'react'; - -import Link from '#site/components/Link'; - -type LinkWithArrowProps = - | ({ asChild?: false } & ComponentProps) - | ({ asChild: true } & SlotProps); - -const LinkWithArrow: FC> = ({ - children, - asChild = false, - ...props -}) => { - const Comp = asChild ? Slot : Link; - - return ( - - - {children} - - - - ); -}; - -export default LinkWithArrow; diff --git a/apps/site/next.config.mjs b/apps/site/next.config.mjs index c7335c9fcdd44..4b92f11a9b1a9 100644 --- a/apps/site/next.config.mjs +++ b/apps/site/next.config.mjs @@ -84,7 +84,6 @@ const nextConfig = { '@radix-ui/react-dropdown-menu', '@radix-ui/react-label', '@radix-ui/react-select', - '@radix-ui/react-slot', '@radix-ui/react-tabs', '@radix-ui/react-toast', '@radix-ui/react-tooltip', diff --git a/apps/site/next.mdx.use.mjs b/apps/site/next.mdx.use.mjs index b67817de4e9ff..9c441ea546da2 100644 --- a/apps/site/next.mdx.use.mjs +++ b/apps/site/next.mdx.use.mjs @@ -3,9 +3,9 @@ import BadgeGroup from '@node-core/ui-components/Common/BadgeGroup'; import Button from './components/Common/Button'; +import LinkWithArrow from './components/Common/LinkWithArrow'; import DownloadReleasesTable from './components/Downloads/DownloadReleasesTable'; import Link from './components/Link'; -import LinkWithArrow from './components/LinkWithArrow'; import UpcomingMeetings from './components/MDX/Calendar/UpcomingMeetings'; import WithBadgeGroup from './components/withBadgeGroup'; import WithBanner from './components/withBanner'; diff --git a/apps/site/package.json b/apps/site/package.json index b9dcf68148d55..8fc9246b42eff 100644 --- a/apps/site/package.json +++ b/apps/site/package.json @@ -45,7 +45,6 @@ "@opentelemetry/sdk-logs": "~0.203.0", "@orama/react-components": "^0.8.1", "@oramacloud/client": "^2.1.4", - "@radix-ui/react-slot": "^1.2.3", "@radix-ui/react-tabs": "^1.1.12", "@radix-ui/react-tooltip": "^1.2.7", "@tailwindcss/postcss": "~4.1.11", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3f365297d07a9..bb55dde54e756 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -105,9 +105,6 @@ importers: '@oramacloud/client': specifier: ^2.1.4 version: 2.1.4 - '@radix-ui/react-slot': - specifier: ^1.2.3 - version: 1.2.3(@types/react@19.1.8)(react@19.1.0) '@radix-ui/react-tabs': specifier: ^1.1.12 version: 1.1.12(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)