feat: started migrating to radix

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>
-    );
-  },
-);