blob: 8b876348762687221697ec16627fb1e6743a946f (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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 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>
</>
);
}
|
