feat(server): more server components (#8239)

* feat(server): more server components

* more server

Author: avivkeller

apps/site/components/Common/LinkTabs.tsx

@@ -1,15 +1,11 @@
-'use client';
-
 import BaseLinkTabs from '@node-core/ui-components/Common/BaseLinkTabs';
 import type { LinkTabsProps } from '@node-core/ui-components/Common/BaseLinkTabs';
 import type { FC } from 'react';
 
 import Link from '#site/components/Link';
-import { useRouter } from '#site/navigation.mjs';
 
-const LinkTabs: FC<Omit<LinkTabsProps, 'as' | 'onSelect'>> = props => {
-  const { push } = useRouter();
-  return <BaseLinkTabs onSelect={value => push(value)} as={Link} {...props} />;
+const LinkTabs: FC<Omit<LinkTabsProps, 'as'>> = props => {
+  return <BaseLinkTabs as={Link} {...props} />;
 };
 
 export default LinkTabs;

apps/site/components/Common/Supporters/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import Avatar from '@node-core/ui-components/Common/AvatarGroup/Avatar';
 import type { FC } from 'react';
 

apps/site/components/Downloads/DownloadButton/index.tsx

@@ -1,11 +1,9 @@
-'use client';
-
 import { CloudArrowDownIcon } from '@heroicons/react/24/outline';
 import classNames from 'classnames';
 import type { FC, PropsWithChildren } from 'react';
 
+import { getClientContext } from '#site/client-context';
 import Button from '#site/components/Common/Button';
-import { useClientContext } from '#site/hooks';
 import type { NodeRelease } from '#site/types';
 import { getNodeDownloadUrl } from '#site/util/url';
 import { getUserPlatform } from '#site/util/userAgent';
@@ -18,7 +16,7 @@ const DownloadButton: FC<PropsWithChildren<DownloadButtonProps>> = ({
   release: { versionWithPrefix },
   children,
 }) => {
-  const { os, bitness, architecture } = useClientContext();
+  const { os, bitness, architecture } = getClientContext();
 
   const platform = getUserPlatform(architecture, bitness);
   const downloadLink = getNodeDownloadUrl({ versionWithPrefix, os, platform });

apps/site/components/Downloads/DownloadLink.tsx

@@ -1,9 +1,7 @@
-'use client';
-
 import type { FC, PropsWithChildren } from 'react';
 
+import { getClientContext } from '#site/client-context';
 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';
 import { getUserPlatform } from '#site/util/userAgent';
@@ -15,7 +13,7 @@ const DownloadLink: FC<PropsWithChildren<DownloadLinkProps>> = ({
   kind = 'installer',
   children,
 }) => {
-  const { os, bitness, architecture } = useClientContext();
+  const { os, bitness, architecture } = getClientContext();
 
   const platform = getUserPlatform(architecture, bitness);
 

packages/ui-components/src/Common/BaseLinkTabs/index.module.css

@@ -38,13 +38,5 @@
 }
 
 .tabsSelect {
-  @apply sm:visible
-    md:hidden;
-
-  > span {
-    @apply max-xs:flex
-      my-6
-      hidden
-      w-full;
-  }
+  @apply md:hidden;
 }

packages/ui-components/src/Common/BaseLinkTabs/index.tsx

@@ -1,9 +1,9 @@
 import type { FC, PropsWithChildren } from 'react';
 
-import Select from '#ui/Common/Select';
 import type { LinkLike } from '#ui/types';
 
 import styles from './index.module.css';
+import StatelessSelect from '../Select/StatelessSelect';
 
 type LinkTab = { key: string; label: string; link: string };
 
@@ -12,7 +12,6 @@ export type LinkTabsProps = PropsWithChildren<{
   tabs: Array<LinkTab>;
   activeTab: string;
   as?: LinkLike;
-  onSelect: (value: string) => void;
 }>;
 
 const BaseLinkTabs: FC<LinkTabsProps> = ({
@@ -21,7 +20,6 @@ const BaseLinkTabs: FC<LinkTabsProps> = ({
   activeTab,
   children,
   as: Component = 'a',
-  onSelect,
 }) => (
   <>
     <div className={styles.tabsList}>
@@ -37,14 +35,12 @@ const BaseLinkTabs: FC<LinkTabsProps> = ({
       ))}
     </div>
 
-    <div className={styles.tabsSelect}>
-      <Select
-        label={label}
-        defaultValue={tabs.find(tab => tab.key === activeTab)?.link}
-        values={tabs.map(tab => ({ label: tab.label, value: tab.link }))}
-        onChange={onSelect}
-      />
-    </div>
+    <StatelessSelect
+      label={label}
+      className={styles.tabsSelect}
+      defaultValue={tabs.find(tab => tab.key === activeTab)?.link}
+      values={tabs.map(tab => ({ label: tab.label, value: tab.link }))}
+    />
 
     {children}
   </>

packages/ui-components/src/Common/Select/index.module.css

@@ -180,7 +180,8 @@
   }
 
   .dropdown {
-    @apply absolute
+    @apply z-99
+      absolute
       left-0
       mt-4;
   }

packages/ui-components/src/Common/Separator/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import classNames from 'classnames';
 import type { FC, ComponentProps } from 'react';

packages/ui-components/src/Containers/NavBar/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import Hamburger from '@heroicons/react/24/solid/Bars3Icon';
 import XMark from '@heroicons/react/24/solid/XMarkIcon';
 import * as Label from '@radix-ui/react-label';