diff --git a/frontend/code/src/components/Home/LeaderBoard.tsx b/frontend/code/src/components/Home/LeaderBoard.tsx new file mode 100644 index 0000000..1f558d3 --- /dev/null +++ b/frontend/code/src/components/Home/LeaderBoard.tsx @@ -0,0 +1,13 @@ +import { Chart } from './assets/Chart' +import { Table } from './assets/Table' +export const LeaderBoard = () => { + return ( +
+
+ Leader Board + +
+ + + ) +} \ No newline at end of file diff --git a/frontend/code/src/components/Home/assets/Button.tsx b/frontend/code/src/components/Home/assets/Button.tsx new file mode 100644 index 0000000..247b2e0 --- /dev/null +++ b/frontend/code/src/components/Home/assets/Button.tsx @@ -0,0 +1,20 @@ +export const Button = () => { + return ( + +
+ PLAY NOW + + + + + + + + + + + + +
+ ) +} diff --git a/frontend/code/src/components/Home/assets/Chart.tsx b/frontend/code/src/components/Home/assets/Chart.tsx new file mode 100644 index 0000000..404dcd2 --- /dev/null +++ b/frontend/code/src/components/Home/assets/Chart.tsx @@ -0,0 +1,9 @@ +export const Chart = () => { + return ( + + + + + + ) +} diff --git a/frontend/code/src/components/Home/assets/Data.Json b/frontend/code/src/components/Home/assets/Data.Json new file mode 100644 index 0000000..e69de29 diff --git a/frontend/code/src/components/Home/assets/Hero.png b/frontend/code/src/components/Home/assets/Hero.png new file mode 100644 index 0000000..7d1878d Binary files /dev/null and b/frontend/code/src/components/Home/assets/Hero.png differ diff --git a/frontend/code/src/components/Home/assets/Table.tsx b/frontend/code/src/components/Home/assets/Table.tsx new file mode 100644 index 0000000..3d51338 --- /dev/null +++ b/frontend/code/src/components/Home/assets/Table.tsx @@ -0,0 +1,67 @@ +import { Trophy } from './Trophy' +import { useState,useEffect } from 'react' + + + + + +export const Table = () => +{ + const [users, setUsers] = useState([]) + useEffect( () => { + + const fetchdata = async() =>{ + for (let i = 0 ; i < 10 ; i++) + { + let response = await fetch(`https://randomuser.me/api/`) + let data = await response.json() + if (data.results && data.results.length > 0) { + const newUser = data.results[0]; + setUsers((oldUsers : any) => [...oldUsers, newUser]); + console.log(newUser) + } + } + } + + fetchdata().catch(console.error) + + },[]) + return ( +
+
+ + + + + + + + + {users.map((x: any, index: number) => ( + + + + + + ))} + +
PlaceUserScore
+
+
+ +
+
+ 		+
+
+ Avatar Tailwind CSS Component +
+
+
{x.name.first}
+ 		24
+
+ ); +} \ No newline at end of file diff --git a/frontend/code/src/components/Home/assets/Trophy.tsx b/frontend/code/src/components/Home/assets/Trophy.tsx new file mode 100644 index 0000000..a27f1c7 --- /dev/null +++ b/frontend/code/src/components/Home/assets/Trophy.tsx @@ -0,0 +1,9 @@ +export const Trophy = () => { + return ( + + + + + + ) +} diff --git a/frontend/code/src/components/Home/index.tsx b/frontend/code/src/components/Home/index.tsx new file mode 100644 index 0000000..df0d1d1 --- /dev/null +++ b/frontend/code/src/components/Home/index.tsx @@ -0,0 +1,23 @@ +import { FC } from 'react' +import {Layout} from '../Layout/' +import { Button } from './assets/Button' +import Hero from './assets/Hero.png' +import { LeaderBoard } from './LeaderBoard' +export const Home : FC = () : JSX.Element =>{ + return ( + +
+
+ bg hero +
+
+ + +
+ +
+ + + ) +} \ No newline at end of file diff --git a/frontend/code/src/components/Layout/Assets/Dash.tsx b/frontend/code/src/components/Layout/Assets/Dash.tsx index 17a3a55..4484f46 100644 --- a/frontend/code/src/components/Layout/Assets/Dash.tsx +++ b/frontend/code/src/components/Layout/Assets/Dash.tsx @@ -1,10 +1,12 @@ export const Dash = () => { return ( - - - - - - +
+ + + + + + +
) } \ No newline at end of file diff --git a/frontend/code/src/components/Layout/Assets/Game.tsx b/frontend/code/src/components/Layout/Assets/Game.tsx new file mode 100644 index 0000000..e9fd728 --- /dev/null +++ b/frontend/code/src/components/Layout/Assets/Game.tsx @@ -0,0 +1,10 @@ +export const Game = () => { + return ( +
+ + + +
+ + ) +} \ No newline at end of file diff --git a/frontend/code/src/components/Layout/Assets/Logo.tsx b/frontend/code/src/components/Layout/Assets/Logo.tsx index 96e39e4..ca490cc 100644 --- a/frontend/code/src/components/Layout/Assets/Logo.tsx +++ b/frontend/code/src/components/Layout/Assets/Logo.tsx @@ -1,6 +1,6 @@ export const Logo = () => { return ( - + diff --git a/frontend/code/src/components/Layout/Assets/Message.tsx b/frontend/code/src/components/Layout/Assets/Message.tsx new file mode 100644 index 0000000..dac2a77 --- /dev/null +++ b/frontend/code/src/components/Layout/Assets/Message.tsx @@ -0,0 +1,11 @@ +export const Message = () => { + return ( +
+ + + + + +
+ ) +} \ No newline at end of file diff --git a/frontend/code/src/components/Layout/Assets/Out.tsx b/frontend/code/src/components/Layout/Assets/Out.tsx new file mode 100644 index 0000000..8be25e0 --- /dev/null +++ b/frontend/code/src/components/Layout/Assets/Out.tsx @@ -0,0 +1,11 @@ + +export const Out = () => { + return ( +
+ + + + +
+ ) +} diff --git a/frontend/code/src/components/Layout/Assets/Profile.tsx b/frontend/code/src/components/Layout/Assets/Profile.tsx new file mode 100644 index 0000000..bfdb2fb --- /dev/null +++ b/frontend/code/src/components/Layout/Assets/Profile.tsx @@ -0,0 +1,10 @@ + +export const Profile = () => { + return ( +
+ + + +
+ ) +} \ No newline at end of file diff --git a/frontend/code/src/components/Layout/Assets/Search.tsx b/frontend/code/src/components/Layout/Assets/Search.tsx new file mode 100644 index 0000000..cf63a74 --- /dev/null +++ b/frontend/code/src/components/Layout/Assets/Search.tsx @@ -0,0 +1,10 @@ +import {BiSearch} from 'react-icons/bi' + +export const Search = () => { + return ( +
+ +
+
+ ) +} \ No newline at end of file diff --git a/frontend/code/src/components/Layout/Assets/Settings.tsx b/frontend/code/src/components/Layout/Assets/Settings.tsx new file mode 100644 index 0000000..1ea1ae0 --- /dev/null +++ b/frontend/code/src/components/Layout/Assets/Settings.tsx @@ -0,0 +1,9 @@ +export const Settings = () => { +return ( +
+ + + +
+ ) +} \ No newline at end of file diff --git a/frontend/code/src/components/Layout/Assets/dash.svg b/frontend/code/src/components/Layout/Assets/dash.svg deleted file mode 100644 index 0a9df36..0000000 --- a/frontend/code/src/components/Layout/Assets/dash.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/frontend/code/src/components/Layout/Assets/logo.svg b/frontend/code/src/components/Layout/Assets/logo.svg deleted file mode 100644 index 228ec52..0000000 --- a/frontend/code/src/components/Layout/Assets/logo.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/frontend/code/src/components/Layout/index.tsx b/frontend/code/src/components/Layout/index.tsx index a662da4..717678e 100644 --- a/frontend/code/src/components/Layout/index.tsx +++ b/frontend/code/src/components/Layout/index.tsx @@ -1,38 +1,71 @@ import { Logo } from './Assets/Logo' import { Alert } from './Assets/Alert' import { Avatar } from './Assets/Avatar' -import {BiSearch} from 'react-icons/bi' +import { Search } from './Assets/Search' +import { Dash } from './Assets/Dash' +import { Game } from './Assets/Game' +import { Message } from './Assets/Message' +import { Profile } from './Assets/Profile' +import { Settings } from './Assets/Settings' +import { Out } from './Assets/Out' +import { FC } from 'react' -export const Layout = () => +interface myNodetype { + children : React.ReactNode +} +export const Layout : FC = (Content) : JSX.Element => { return ( <> -
-
- -
- -
+
+ +
+
+ +
+
+ + + +
+
+
+ +
+
+ + + + + +
+
+
- -
- -
-
- - - +
+ + + + + +
+
+ {Content.children} +
-
-
) diff --git a/frontend/code/src/components/Login/index.tsx b/frontend/code/src/components/Login/index.tsx index c7a915d..fe6864a 100644 --- a/frontend/code/src/components/Login/index.tsx +++ b/frontend/code/src/components/Login/index.tsx @@ -11,7 +11,7 @@ export const Login = () =>
Logo
- +
diff --git a/frontend/code/src/index.css b/frontend/code/src/index.css index e212ffa..8d3f436 100644 --- a/frontend/code/src/index.css +++ b/frontend/code/src/index.css @@ -3,3 +3,4 @@ @tailwind utilities; @import url('https://fonts.googleapis.com/css2?family=Lexend+Peta:wght@400;700&display=swap'); @import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap"); +@import url('https://fonts.googleapis.com/css2?family=Lexend+Peta:wght@400;700&family=Montserrat:wght@700&display=swap'); diff --git a/frontend/code/src/index.tsx b/frontend/code/src/index.tsx index acfe1c2..1d3d132 100644 --- a/frontend/code/src/index.tsx +++ b/frontend/code/src/index.tsx @@ -4,10 +4,10 @@ import './index.css'; import {Login} from './components/Login' import {Main} from './components/Login/main' import {Lobby} from './components/Lobby/index' -import {Layout} from './components/Layout/index' import {Error} from './components/404/index' import reportWebVitals from './reportWebVitals'; import { BrowserRouter, Routes, Route } from "react-router-dom"; +import { Home } from './components/Home'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement @@ -19,7 +19,7 @@ root.render( }> }> }> - }> + }> }> diff --git a/frontend/code/tailwind.config.js b/frontend/code/tailwind.config.js index c0a9fc9..ba08f8d 100644 --- a/frontend/code/tailwind.config.js +++ b/frontend/code/tailwind.config.js @@ -9,10 +9,12 @@ module.exports = { fontFamily: { poppins: ['Poppins', 'sans-serif'], lexend: ['Lexend Peta', 'sans-serif'], + montserrat : ['Montserrat', 'sans-serif'] }, backgroundImage: { 'login': "url('./components/Login/Assets/bg.gif')", 'gif-error': "url('./components/404/assest/Error.gif')", + }, }, @@ -31,7 +33,7 @@ module.exports = { "primary-content" :"#5921CB", - "secondary": "#272932", + "secondary": "#6A4CFC", "accent": "#aedd1f",