diff options
Diffstat (limited to 'react-frontend/src')
| -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 |
3 files changed, 34 insertions, 5 deletions
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> </> ); } |