From a74eba9e9743a0ce9c862a74b912cee1be03bd31 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com> Date: Sat, 30 Sep 2023 22:30:52 -0500 Subject: [PATCH] feat: started migrating to radix --- package.json | 1 + src/app/layout.tsx | 27 +- src/app/page.css.ts | 2 +- src/app/page.tsx | 11 +- src/app/tools/session/page.tsx | 47 ++- src/components/Button.tsx | 39 -- src/components/SearchBar.tsx | 46 -- yarn.lock | 743 ++++++++++++++++++++++++++++++++- 8 files changed, 793 insertions(+), 123 deletions(-) delete mode 100644 src/components/Button.tsx delete mode 100644 src/components/SearchBar.tsx diff --git a/package.json b/package.json index c14d1f8f9..5fa4dda3e 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "@octokit/rest": "^20.0.1", "@radix-ui/colors": "^3.0.0-rc.4", "@radix-ui/react-icons": "^1.3.0", + "@radix-ui/themes": "^1.1.2", "@resvg/resvg-js": "^2.4.1", "@vanilla-extract/css": "^1.13.0", "bepaint": "^0.1.0-beta.3", diff --git a/src/app/layout.tsx b/src/app/layout.tsx index c64015d59..dd84d1376 100644 --- a/src/app/layout.tsx +++ b/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 && } - -
- {children} -
+ {!isEmbed && } + +
+ {children} +
+ ); diff --git a/src/app/page.css.ts b/src/app/page.css.ts index 7a3aa03e9..7fbd76b86 100644 --- a/src/app/page.css.ts +++ b/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', diff --git a/src/app/page.tsx b/src/app/page.tsx index 89f8e6457..1bb863b09 100644 --- a/src/app/page.tsx +++ b/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 ( - + + + + + +
- { - if (event.target.value) { - setShowSearchResults(true); - setSearchResults(undefined); - } else { - setShowSearchResults(false); - } + + + + + { + 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..." + /> + {showSearchResults && (
diff --git a/src/components/Button.tsx b/src/components/Button.tsx deleted file mode 100644 index 29fcaa5f6..000000000 --- a/src/components/Button.tsx +++ /dev/null @@ -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; - -export function Button({ color, style, ...props }: ButtonProps) { - color = color ?? 'default'; - - return ( -