diff options
| author | realtradam <[email protected]> | 2024-06-28 15:37:18 -0400 |
|---|---|---|
| committer | realtradam <[email protected]> | 2024-06-28 15:37:18 -0400 |
| commit | d45295ba1ccb9ceb4165cf0b81f60b135a147938 (patch) | |
| tree | 5b87cdc478b214db54781b9375cec1ed9b331c75 | |
| parent | 2cb4da3b12c896b588716c50991a06c9bbb2cdeb (diff) | |
| download | gameHolster-d45295ba1ccb9ceb4165cf0b81f60b135a147938.tar.gz gameHolster-d45295ba1ccb9ceb4165cf0b81f60b135a147938.zip | |
add sidebar
| -rw-r--r-- | react-frontend/index.html | 17 | ||||
| -rw-r--r-- | react-frontend/package-lock.json | 10 | ||||
| -rw-r--r-- | react-frontend/package.json | 1 | ||||
| -rw-r--r-- | react-frontend/src/components/Layout.tsx | 29 | ||||
| -rw-r--r-- | react-frontend/src/index.css | 4 | ||||
| -rw-r--r-- | react-frontend/src/pages/Home.tsx | 6 |
6 files changed, 58 insertions, 9 deletions
diff --git a/react-frontend/index.html b/react-frontend/index.html index e4b78ea..577b83e 100644 --- a/react-frontend/index.html +++ b/react-frontend/index.html @@ -1,13 +1,22 @@ <!doctype html> -<html lang="en"> +<html lang="en" style="border-style:none"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <title>Vite + React + TS</title> + <title>Game Holster</title> + + <link href="https://fonts.googleapis.com/css2?family=Paytone+One&display=swap" rel="stylesheet"> + <style> + .font-title { + font-family: "Paytone One", sans-serif; + font-weight: 400; + font-style: normal; + } + </style> </head> - <body> - <div id="root"></div> + <body class="min-w-screen min-h-screen" style="border-style:none"> + <div id="root" class="min-h-screen min-w-screen" style="border-style:none"></div> <script type="module" src="/src/main.tsx"></script> </body> </html> diff --git a/react-frontend/package-lock.json b/react-frontend/package-lock.json index 1545f96..920fd12 100644 --- a/react-frontend/package-lock.json +++ b/react-frontend/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "react": "^18.3.1", "react-dom": "^18.3.1", + "react-icons": "^5.2.1", "react-router-dom": "^6.24.0", "rsuite": "^5.64.2" }, @@ -3496,6 +3497,15 @@ "react": "^18.3.1" } }, + "node_modules/react-icons": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz", + "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==", + "license": "MIT", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/react-frontend/package.json b/react-frontend/package.json index c031a51..b20bafa 100644 --- a/react-frontend/package.json +++ b/react-frontend/package.json @@ -12,6 +12,7 @@ "dependencies": { "react": "^18.3.1", "react-dom": "^18.3.1", + "react-icons": "^5.2.1", "react-router-dom": "^6.24.0", "rsuite": "^5.64.2" }, diff --git a/react-frontend/src/components/Layout.tsx b/react-frontend/src/components/Layout.tsx index 9221687..8b87634 100644 --- a/react-frontend/src/components/Layout.tsx +++ b/react-frontend/src/components/Layout.tsx @@ -1,11 +1,36 @@ import { Outlet } from "react-router-dom"; +import { IconButton, Button, ButtonGroup } from 'rsuite'; +import { Icon } from '@rsuite/icons'; +import { FaUser } from "react-icons/fa6"; +import { FaGamepad } from "react-icons/fa"; +import { GiCowboyHolster } from "react-icons/gi"; +import { GrAdd } from "react-icons/gr"; export default function Layout() { return( <> - <div>sidebar</div> - <Outlet/> + <div className="w-screen h-screen flex border-none"> + <div className="flex flex-col h-screen overflow-y-auto overflow-x-hidden w-72 bg-stone-100"> + <div className="flex flex-col bg-stone-800"> + <div className="m-4 mb-0 flex flex-col flex-grow"> + {/*<IconButton appearance="primary" color="green" icon={<Icon as={FaUser}/>}>Log In</IconButton>*/} + <ButtonGroup className="flex"> + <Button appearance="ghost" style={{width:"100%"}}>Account</Button> + <Button appearance="subtle" style={{paddingLeft:"1.4em", paddingRight:"1.4em"}}>Log Out</Button> + </ButtonGroup> + </div> + </div> + <div className="border-green-500 p-2 mb-2 text-red-700 bg-stone-800 rounded-b-xl"><Icon as={GiCowboyHolster} style={{width:"100%", height:"100%"}}/></div> + <div className="flex flex-col px-4 gap-2"> + <IconButton appearance="subtle" size="lg" icon={<Icon as={FaGamepad}/>}>Browse Games</IconButton> + <IconButton appearance="subtle" size="lg" icon={<Icon as={GrAdd}/>}>Upload Game</IconButton> + </div> + </div> + <div className="w-full"> + <Outlet/> + </div> + </div> </> ); } diff --git a/react-frontend/src/index.css b/react-frontend/src/index.css index a90f074..ac216f5 100644 --- a/react-frontend/src/index.css +++ b/react-frontend/src/index.css @@ -2,3 +2,7 @@ @tailwind components; @tailwind utilities; +* { + /*border: 1px solid red;*/ +} + diff --git a/react-frontend/src/pages/Home.tsx b/react-frontend/src/pages/Home.tsx index 1fe2c83..2f15dd3 100644 --- a/react-frontend/src/pages/Home.tsx +++ b/react-frontend/src/pages/Home.tsx @@ -1,10 +1,10 @@ -import { Button } from 'rsuite'; export default function Home() { return( <> - <h1>Welcome to Game Holster</h1> - <Button>Its an rsuite button</Button> + <div className="flex justify-center p-4"> + <h1 className="font-title text-6xl">Welcome to Game Holster</h1> + </div> </> ); } |