feat: started migrating to radix

src/app/layout.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { Theme } from '@radix-ui/themes';
+import '@radix-ui/themes/styles.css';
 import { config } from 'dotenv';
 import { Roboto_Flex } from 'next/font/google';
 import { usePathname } from 'next/navigation';
@@ -31,16 +33,23 @@ export default function RootLayout({ children }: RootLayoutProps) {
             : 'url(https://i.imgur.com/PhS06NJ.png)',
         }}
       >
-        {!isEmbed && <Navbar />}
-
-        <div
-          style={{
-            flex: 1,
-            width: '100%',
-          }}
+        <Theme
+          appearance="dark"
+          panelBackground="translucent"
+          radius="full"
+          accentColor="blue"
         >
-          {children}
-        </div>
+          {!isEmbed && <Navbar />}
+
+          <div
+            style={{
+              flex: 1,
+              width: '100%',
+            }}
+          >
+            {children}
+          </div>
+        </Theme>
       </body>
     </html>
   );

src/app/page.css.ts

@@ -5,7 +5,7 @@ export const tool = style({
   height: 128,
   minWidth: 256,
   flex: 1,
-  borderRadius: 4,
+  borderRadius: 8,
   textDecoration: 'none',
   backgroundSize: 'cover',
   backgroundPosition: 'center',

src/app/page.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import { CaretRightIcon } from '@radix-ui/react-icons';
+import { CaretRightIcon, MagnifyingGlassIcon } from '@radix-ui/react-icons';
+import { TextField } from '@radix-ui/themes';
 import Link from 'next/link';
 import { useRef } from 'react';
 import { Search, SearchItem } from 'react-fuzzysort';
 import PageWrapper from '../components/PageWrapper';
-import { SearchBar } from '../components/SearchBar';
 import { TOOLS } from '../constants/tools';
 import { theme } from '../stitches.config';
 import * as styles from './page.css';
@@ -15,7 +15,12 @@ export default function Page() {
 
   return (
     <PageWrapper>
-      <SearchBar placeholder="Search tools..." ref={input} />
+      <TextField.Root>
+        <TextField.Slot>
+          <MagnifyingGlassIcon height="16" width="16" />
+        </TextField.Slot>
+        <TextField.Input ref={input} placeholder="Search tools..." />
+      </TextField.Root>
 
       <div
         style={{

src/app/tools/session/page.tsx

@@ -1,11 +1,10 @@
 'use client';
 
-import { CopyIcon, ReloadIcon } from '@radix-ui/react-icons';
+import { CopyIcon, PersonIcon, ReloadIcon } from '@radix-ui/react-icons';
+import { Button, TextField } from '@radix-ui/themes';
 import { debounce } from 'lodash';
 import { ChangeEvent, useRef, useState } from 'react';
-import { Button } from '../../../components/Button';
 import PageWrapper from '../../../components/PageWrapper';
-import { SearchBar } from '../../../components/SearchBar';
 import { REGION_NAMES, Region } from '../../../constants/regions';
 import { WARGAMING_APPLICATION_ID } from '../../../constants/wargamingApplicationID';
 import getWargamingResponse from '../../../core/blitz/getWargamingResponse';
@@ -69,22 +68,26 @@ export default function Page() {
     <PageWrapper>
       <div className={styles.toolBar}>
         <div style={{ flex: 1, boxSizing: 'border-box', position: 'relative' }}>
-          <SearchBar
-            ref={input}
-            style={{ width: '100%', boxSizing: 'border-box' }}
-            defaultValue={session.isTracking ? session.nickname : undefined}
-            onChange={(event) => {
-              if (event.target.value) {
-                setShowSearchResults(true);
-                setSearchResults(undefined);
-              } else {
-                setShowSearchResults(false);
-              }
+          <TextField.Root>
+            <TextField.Slot>
+              <PersonIcon height="16" width="16" />
+            </TextField.Slot>
+            <TextField.Input
+              defaultValue={session.isTracking ? session.nickname : undefined}
+              ref={input}
+              onChange={(event) => {
+                if (event.target.value) {
+                  setShowSearchResults(true);
+                  setSearchResults(undefined);
+                } else {
+                  setShowSearchResults(false);
+                }
 
-              handleChange(event);
-            }}
-            placeholder="Search for a player..."
-          />
+                handleChange(event);
+              }}
+              placeholder="Search for a player..."
+            />
+          </TextField.Root>
 
           {showSearchResults && (
             <div
@@ -159,16 +162,14 @@ export default function Page() {
         <div style={{ display: 'flex', gap: 8 }}>
           <Button
             className={styles.toolbarButton}
-            color="dangerous"
+            color="red"
             onClick={async () => {
               const session = useSession.getState();
-
               if (!session.isTracking) return;
-
               setSession(session.region, session.id, session.nickname);
             }}
           >
-            <ReloadIcon /> Reset
+            <ReloadIcon width="16" height="16" /> Reset
           </Button>
           <Button
             className={styles.toolbarButton}
@@ -176,7 +177,7 @@ export default function Page() {
               navigator.clipboard.writeText(`${location.origin}/embeds/session`)
             }
           >
-            <CopyIcon /> Embed
+            <CopyIcon width="16" height="16" /> Embed
           </Button>
         </div>
       </div>

src/components/Button.tsx

@@ -1,39 +0,0 @@
-import { ComponentProps } from 'react';
-import { theme } from '../stitches.config';
-
-type ButtonColor = 'default' | 'dangerous' | 'recommended';
-
-interface ButtonProps extends ComponentProps<'button'> {
-  color?: ButtonColor;
-}
-
-const BUTTON_COLORS = {
-  default: '',
-  dangerous: '_red',
-  recommended: '_blue',
-} as const satisfies Record<ButtonColor, string>;
-
-export function Button({ color, style, ...props }: ButtonProps) {
-  color = color ?? 'default';
-
-  return (
-    <button
-      style={{
-        color: theme.colors[`textHighContrast${BUTTON_COLORS[color]}`],
-        backgroundColor:
-          theme.colors[`componentInteractive${BUTTON_COLORS[color]}`],
-        borderRadius: 4,
-        border: 'none',
-        cursor: 'pointer',
-        padding: 8,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap: 4,
-
-        ...style,
-      }}
-      {...props}
-    />
-  );
-}

src/components/SearchBar.tsx

@@ -1,46 +0,0 @@
-import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
-import { ComponentProps, forwardRef, useImperativeHandle, useRef } from 'react';
-import { theme } from '../stitches.config';
-
-export const SearchBar = forwardRef<HTMLInputElement, ComponentProps<'input'>>(
-  ({ style, ...props }, ref) => {
-    const input = useRef<HTMLInputElement>(null);
-
-    useImperativeHandle(ref, () => input.current!);
-
-    return (
-      <div
-        style={{
-          display: 'flex',
-          padding: 8,
-          borderRadius: 4,
-          backgroundColor: theme.colors.componentInteractive,
-          color: theme.colors.textLowContrast,
-          fontSize: 16,
-          alignItems: 'center',
-          justifyContent: 'center',
-          gap: 8,
-          cursor: 'text',
-
-          ...style,
-        }}
-        onClick={() => input.current?.focus()}
-      >
-        <MagnifyingGlassIcon style={{ width: '1em', height: '1em' }} />
-
-        <input
-          {...props}
-          ref={input}
-          style={{
-            flex: 1,
-            color: theme.colors.textHighContrast,
-            backgroundColor: 'transparent',
-            border: 'none',
-            outline: 'none',
-            fontSize: 'inherit',
-          }}
-        />
-      </div>
-    );
-  },
-);