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..b20274533f8a5 --- /dev/null +++ b/apps/site/components/Common/LinkWithArrow/index.tsx @@ -0,0 +1,38 @@ +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 +}) => + 'href' in props ? ( + + {children} + + + ) : ( + + ); + +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/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 1258763784fba..f13dc9d1a80c7 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/EOL/EOLReleaseTable.tsx b/apps/site/components/EOL/EOLReleaseTable.tsx index 8843fadf78eb9..2119fefb8ef03 100644 --- a/apps/site/components/EOL/EOLReleaseTable.tsx +++ b/apps/site/components/EOL/EOLReleaseTable.tsx @@ -5,9 +5,9 @@ import { Fragment, useState } from 'react'; import type { FC } from 'react'; import FormattedTime from '#site/components/Common/FormattedTime'; +import LinkWithArrow from '#site/components/Common/LinkWithArrow'; import EOLModal from '#site/components/EOL/EOLModal'; import VulnerabilityChips from '#site/components/EOL/VulnerabilityChips'; -import LinkWithArrow from '#site/components/LinkWithArrow'; import provideReleaseData from '#site/next-data/providers/releaseData'; import provideVulnerabilities from '#site/next-data/providers/vulnerabilities'; import { EOL_VERSION_IDENTIFIER } from '#site/next.constants.mjs'; diff --git a/apps/site/components/EOL/VulnerabilitiesTable.tsx b/apps/site/components/EOL/VulnerabilitiesTable.tsx index 0d304f9a8549e..fac5d23d3107d 100644 --- a/apps/site/components/EOL/VulnerabilitiesTable.tsx +++ b/apps/site/components/EOL/VulnerabilitiesTable.tsx @@ -2,8 +2,8 @@ import classNames from 'classnames'; import { useTranslations } from 'next-intl'; import type { FC } from 'react'; +import LinkWithArrow from '#site/components/Common/LinkWithArrow'; import VulnerabilityChip from '#site/components/EOL/VulnerabilityChips/VulnerabilityChip'; -import LinkWithArrow from '#site/components/LinkWithArrow'; import type { Vulnerability } from '#site/types/vulnerabilities'; const VulnerabilitiesTable: FC<{ diff --git a/apps/site/components/LinkWithArrow.tsx b/apps/site/components/LinkWithArrow.tsx deleted file mode 100644 index 8e9cc3abb91bd..0000000000000 --- a/apps/site/components/LinkWithArrow.tsx +++ /dev/null @@ -1,30 +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 { FC, PropsWithChildren } from 'react'; - -import Link from '#site/components/Link'; -import type { LinkProps } from '#site/components/Link'; - -type LinkWithArrowProps = - | ({ asChild?: false } & LinkProps) - | ({ 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/components/Releases/PreviousReleasesTable.tsx b/apps/site/components/Releases/PreviousReleasesTable.tsx index 19705cf0958aa..69416fb377510 100644 --- a/apps/site/components/Releases/PreviousReleasesTable.tsx +++ b/apps/site/components/Releases/PreviousReleasesTable.tsx @@ -6,7 +6,7 @@ import type { FC } from 'react'; import { useState } from 'react'; import FormattedTime from '#site/components/Common/FormattedTime'; -import LinkWithArrow from '#site/components/LinkWithArrow'; +import LinkWithArrow from '#site/components/Common/LinkWithArrow'; import provideReleaseData from '#site/next-data/providers/releaseData'; import ReleaseModal from './ReleaseModal'; diff --git a/apps/site/next.config.mjs b/apps/site/next.config.mjs index d162a178f4335..7157b5711d69e 100644 --- a/apps/site/next.config.mjs +++ b/apps/site/next.config.mjs @@ -86,7 +86,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 39590e493f5b6..0362afd15024d 100644 --- a/apps/site/next.mdx.use.mjs +++ b/apps/site/next.mdx.use.mjs @@ -3,10 +3,10 @@ import BadgeGroup from '@node-core/ui-components/Common/BadgeGroup'; import Button from './components/Common/Button'; +import LinkWithArrow from './components/Common/LinkWithArrow'; import EOLAlertBox from './components/EOL/EOLAlert'; import EOLReleaseTable from './components/EOL/EOLReleaseTable'; import Link from './components/Link'; -import LinkWithArrow from './components/LinkWithArrow'; import UpcomingMeetings from './components/MDX/Calendar/UpcomingMeetings'; import PreviousReleasesTable from './components/Releases/PreviousReleasesTable'; import WithBadgeGroup from './components/withBadgeGroup'; diff --git a/apps/site/package.json b/apps/site/package.json index 7174e6dbe56f6..bb84e033eb09c 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 e7634528d75b1..05329d0ec1d13 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.9)(react@19.1.1) '@radix-ui/react-tabs': specifier: ^1.1.12 version: 1.1.12(@types/react@19.1.9)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)