diff --git a/package.json b/package.json index 7e3054a9b..f51d2aa6a 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "dependencies": { "@octokit/rest": "^20.0.1", "@radix-ui/colors": "^2.1.0", + "@radix-ui/react-icons": "^1.3.0", "@resvg/resvg-js": "^2.4.1", "bepaint": "^0.1.0-beta.3", "discord.js": "^14.13.0", diff --git a/src/app/layout.tsx b/src/app/layout.tsx index b39a82a2a..a89ebffd7 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -19,6 +19,7 @@ export default function RootLayout({ children }: RootLayoutProps) { height: '100vh', display: 'flex', flexDirection: 'column', + background: 'url(https://i.imgur.com/PhS06NJ.png)', }} > diff --git a/src/components/BlitzkriegWormWide.tsx b/src/components/BlitzkriegWormWide.tsx new file mode 100644 index 000000000..a17d52e39 --- /dev/null +++ b/src/components/BlitzkriegWormWide.tsx @@ -0,0 +1,51 @@ +export function BlitzkriegWormWide() { + return ( + + + + + + + + + + + + + ); +} diff --git a/src/components/GenericAllStats/components/Card.tsx b/src/components/GenericAllStats/components/Card.tsx index 71fb3d6e5..ac42bb83e 100644 --- a/src/components/GenericAllStats/components/Card.tsx +++ b/src/components/GenericAllStats/components/Card.tsx @@ -76,7 +76,10 @@ export function Card({ items, title }: CardProps) { )} {item.value === undefined || Number.isNaN(item.value) ? '--' diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx deleted file mode 100644 index ba2fdc2d6..000000000 --- a/src/components/Navbar.tsx +++ /dev/null @@ -1,5 +0,0 @@ -export default function Navbar() { - return ( -
- ); -} diff --git a/src/components/Navbar/components/Button.tsx b/src/components/Navbar/components/Button.tsx new file mode 100644 index 000000000..8be3c2f18 --- /dev/null +++ b/src/components/Navbar/components/Button.tsx @@ -0,0 +1,22 @@ +import { ReactNode } from 'react'; +import { theme } from '../../../stitches.config'; + +interface ButtonProps { + children: ReactNode; +} + +export function Button({ children }: ButtonProps) { + return ( + + ); +} diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx new file mode 100644 index 000000000..0d5333c94 --- /dev/null +++ b/src/components/Navbar/index.tsx @@ -0,0 +1,26 @@ +import { HamburgerMenuIcon, PersonIcon } from '@radix-ui/react-icons'; +import { theme } from '../../stitches.config'; +import { BlitzkriegWormWide } from '../BlitzkriegWormWide'; +import { Button } from './components/Button'; + +export default function Navbar() { + return ( +
+ + + +
+ ); +} diff --git a/src/stitches.config.ts b/src/stitches.config.ts index 30036ab13..3533cb02a 100644 --- a/src/stitches.config.ts +++ b/src/stitches.config.ts @@ -1,8 +1,10 @@ import { amberDark, blueDark, slate, slateDark } from '@radix-ui/colors'; -import { createBorderStyles, createColors } from 'bepaint'; +import { createBorderStyles, createColors, createSpaces } from 'bepaint'; // this isn't really a stitches config, but the object is compliant export const theme = { + spaces: createSpaces(), + colors: { ...createColors(slateDark), ...createColors(slate, 'light'), diff --git a/yarn.lock b/yarn.lock index 71bafde00..c1f6bdf2a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -651,6 +651,11 @@ resolved "https://registry.yarnpkg.com/@radix-ui/colors/-/colors-2.1.0.tgz#8aa6f233f68076a92c57db93d7235172e88fda44" integrity sha512-gcBnxjS2u2c6thQz/9K1+Pt2ZYcm5WKU4SLi0emYkRmYbVUw+37rlc5wgLtYOsSsRP9nxVtbJJYj6WVO7UUmZg== +"@radix-ui/react-icons@^1.3.0": + version "1.3.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-icons/-/react-icons-1.3.0.tgz#c61af8f323d87682c5ca76b856d60c2312dbcb69" + integrity sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw== + "@resvg/resvg-js-android-arm-eabi@2.4.1": version "2.4.1" resolved "https://registry.yarnpkg.com/@resvg/resvg-js-android-arm-eabi/-/resvg-js-android-arm-eabi-2.4.1.tgz#49dc9722f95096f8aff70186deae8e148d60dce5"