-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #19 from ismail-kharrobi/DEV-FRONT
Dev front
- Loading branch information
Showing
23 changed files
with
275 additions
and
55 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import { Chart } from './assets/Chart' | ||
| import { Table } from './assets/Table' | ||
| export const LeaderBoard = () => { | ||
| return ( | ||
| <div className='flex flex-col rounded-2xl justify-start items-start mt-6 sm:h-full h-full w-full bg-base-200 overflow-scroll scroll'> | ||
| <div className="flex justify-start items-start pl-2 pt-2 sm:pl-12 sm:pt-12 gap-x-4"> | ||
| <Chart/> <span className='font-montserrat'>Leader Board </span> | ||
|
|
||
| </div> | ||
| <Table /> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| export const Button = () => { | ||
| return ( | ||
|
|
||
| <div className="flex absolute justify-center items-center left-[40%] sm:left-[41.4%] top-[60%] sm:top-3/4 w-[22vw] sm:w-[17.5vw]"> | ||
| <span className="absolute text-white font-montserrat text-[1.4vw]">PLAY NOW</span> | ||
| <svg width="211" height="57" viewBox="0 0 211 57" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <rect x="0.84375" width="209.158" height="57" rx="6" fill="url(#paint0_linear_377_5387)"/> | ||
|
|
||
| <defs> | ||
| <linearGradient id="paint0_linear_377_5387" x1="105.423" y1="0" x2="105.423" y2="57" gradientUnits="userSpaceOnUse"> | ||
| <stop stopColor="#7940CF"/> | ||
| <stop offset="1" stopColor="#5921CB"/> | ||
| </linearGradient> | ||
| </defs> | ||
|
|
||
| </svg> | ||
|
|
||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| export const Chart = () => { | ||
| return ( | ||
|
|
||
| <svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path d="M16.8694 0C20.7805 0 22.9885 2.21835 23 6.1295V16.8705C23 20.7805 20.7805 23 16.8694 23H6.1295C2.21835 23 0 20.7805 0 16.8705V6.1295C0 2.21835 2.21835 0 6.1295 0H16.8694ZM12.075 4.7495C11.7519 4.554 11.3609 4.554 11.0515 4.7495C10.7399 4.94385 10.5685 5.3015 10.6019 5.658V17.3765C10.6605 17.871 11.0734 18.239 11.5564 18.239C12.052 18.239 12.4649 17.871 12.5109 17.3765V5.658C12.5569 5.3015 12.3855 4.94385 12.075 4.7495ZM6.7045 8.5215C6.394 8.326 6.00185 8.326 5.6925 8.5215C5.38085 8.717 5.2095 9.07235 5.244 9.43V17.3765C5.28885 17.871 5.70285 18.239 6.19735 18.239C6.693 18.239 7.10585 17.871 7.15185 17.3765V9.43C7.1875 9.07235 7.01385 8.717 6.7045 8.5215ZM17.3524 12.696C17.043 12.5005 16.652 12.5005 16.33 12.696C16.0184 12.8915 15.847 13.2354 15.893 13.6045V17.3765C15.939 17.871 16.3519 18.239 16.8475 18.239C17.3305 18.239 17.7434 17.871 17.802 17.3765V13.6045C17.8354 13.2354 17.664 12.8915 17.3524 12.696Z" fill="white"/> | ||
| </svg> | ||
|
|
||
| ) | ||
| } |
Empty file.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| import { Trophy } from './Trophy' | ||
| import { useState,useEffect } from 'react' | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
| export const Table = () => | ||
| { | ||
| const [users, setUsers] = useState<any | undefined>([]) | ||
| 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 ( | ||
| <div className="overflow-x-auto w-full"> | ||
| <table className="table w-full"> | ||
| <thead> | ||
| <tr className='w-[80vw] flex justify-between px-10 items-center'> | ||
| <th>Place</th> | ||
| <th>User</th> | ||
| <th>Score</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody className='flex flex-col justify-center items-center content-center gap-4'> | ||
| {users.map((x: any, index: number) => ( | ||
| <tr | ||
| key={index} | ||
| className='bg-base-100 border-base-200 rounded-3xl w-[80vw] flex justify-between px-10 items-center' | ||
| > | ||
| <td> | ||
| <div className="flex items-center space-x-3"> | ||
| <div className='flex justify-center items-center gap-x-3'> | ||
| <Trophy /> | ||
| </div> | ||
| </div> | ||
| </td> | ||
| <td className='flex justify-start items-center gap-x-2'> | ||
| <div className="avatar"> | ||
| <div className="mask mask-squircle w-12 h-12"> | ||
| <img src={x.picture.thumbnail} alt="Avatar Tailwind CSS Component" /> | ||
| </div> | ||
| </div> | ||
| <div className="flex font-montserrat ">{x.name.first}</div> | ||
| </td> | ||
| <td>24</td> | ||
| </tr> | ||
| ))} | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| export const Trophy = () => { | ||
| return ( | ||
|
|
||
| <svg width="31" height="30" viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path d="M25.0906 2.90323C25.1875 1.93548 25.1875 1.06452 25.1875 0H5.8125C5.8125 1.06452 5.8125 1.93548 5.90938 2.90323H0V3.87097C0 12.4839 10.9469 18.5806 13.5625 19.9355V23.2258C13.5625 24.871 12.3031 26.129 10.6563 26.129H8.71875V30H22.2812V26.129H20.3438C18.6969 26.129 17.4375 24.871 17.4375 23.2258V19.9355C20.0531 18.5806 31 12.4839 31 3.87097V2.90323H25.0906ZM2.03438 4.83871H6.10313C6.49063 9.19355 7.55625 12.2903 8.71875 14.5161C5.61875 12.0968 2.42188 8.70968 2.03438 4.83871ZM22.3781 14.5161C23.5406 12.2903 24.6063 9.19355 24.9938 4.83871H29.0625C28.5781 8.70968 25.3813 12.0968 22.3781 14.5161Z" fill="#7138CE"/> | ||
| </svg> | ||
|
|
||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <Layout> | ||
| <div className="flex flex-col items-center h-screen w-full sm:gap-y-8 gap-y-2"> | ||
| <div className='flex justify-center relative items-start pt-6 h-2/6 max-h-36 sm:max-h-96 w-[100vw] sm:h-3/4 sm:w-[90vw]'> | ||
| <img className='object-fit h-full w-full px-12' src={Hero} alt="bg hero" /> | ||
| <Button/> | ||
| </div> | ||
| <div className='flex justify-center relative items-start pt-6 h-3/6 px-12 w-[100vw] sm:h-3/4 sm:w-[90vw]'> | ||
| <LeaderBoard/> | ||
|
|
||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| </Layout> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,12 @@ | ||
| export const Dash = () => { | ||
| return ( | ||
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <rect x="4" y="4" width="6" height="7" rx="1" stroke="#BDBDBD" stroke-width="2" stroke-linejoin="round"/> | ||
| <rect x="4" y="15" width="6" height="5" rx="1" stroke="#BDBDBD" stroke-width="2" stroke-linejoin="round"/> | ||
| <rect x="14" y="4" width="6" height="5" rx="1" stroke="#BDBDBD" stroke-width="2" stroke-linejoin="round"/> | ||
| <rect x="14" y="13" width="6" height="7" rx="1" stroke="#BDBDBD" stroke-width="2" stroke-linejoin="round"/> | ||
| </svg> | ||
| <div className="h-9 w-9 hover:bg-secondary rounded-xl flex justify-center items-center"> | ||
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <rect x="4" y="4" width="6" height="7" rx="1" stroke="#BDBDBD" strokeWidth="2" strokeLinejoin="round"/> | ||
| <rect x="4" y="15" width="6" height="5" rx="1" stroke="#BDBDBD" strokeWidth="2" strokeLinejoin="round"/> | ||
| <rect x="14" y="4" width="6" height="5" rx="1" stroke="#BDBDBD" strokeWidth="2" strokeLinejoin="round"/> | ||
| <rect x="14" y="13" width="6" height="7" rx="1" stroke="#BDBDBD" strokeWidth="2" strokeLinejoin="round"/> | ||
| </svg> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| export const Game = () => { | ||
| return ( | ||
| <div className="h-9 w-9 hover:bg-secondary rounded-xl flex justify-center items-center "> | ||
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path d="M7.79142 0C8.29642 0 8.69321 0.401326 8.69321 0.885278C8.69321 1.23939 8.9938 1.52268 9.35452 1.52268H10.5449C12.3605 1.53448 13.8394 2.98634 13.8514 4.7569V4.98117C14.9937 4.98117 16.1359 5.00477 17.2902 5.01658C21.4625 5.01658 24.5045 7.99111 24.5045 12.0988V17.3751C24.5045 21.4828 21.4625 24.4573 17.2902 24.4573C15.6189 24.4927 13.9476 24.5045 12.2643 24.5045C10.5809 24.5045 8.88559 24.4927 7.21428 24.4573C3.04202 24.4573 0 21.4828 0 17.3751V12.0988C0 7.99111 3.04202 5.01658 7.2263 5.01658C8.80142 4.99297 10.4126 4.96936 12.0478 4.96936V4.7687C12.0478 3.95424 11.3625 3.29324 10.5449 3.29324H9.35452C7.99583 3.29324 6.88964 2.20729 6.88964 0.885278C6.88964 0.401326 7.29845 0 7.79142 0ZM8.68118 11.7211C8.17618 11.7211 7.7794 12.1224 7.7794 12.6064V13.8458H6.50488C6.0119 13.8458 5.60309 14.2471 5.60309 14.731C5.60309 15.2268 6.0119 15.6163 6.50488 15.6163H7.7794V16.8675C7.7794 17.3515 8.17618 17.7528 8.68118 17.7528C9.17416 17.7528 9.58297 17.3515 9.58297 16.8675V15.6163H10.8455C11.3384 15.6163 11.7473 15.2268 11.7473 14.731C11.7473 14.2471 11.3384 13.8458 10.8455 13.8458H9.58297V12.6064C9.58297 12.1224 9.17416 11.7211 8.68118 11.7211ZM18.1319 15.9114H18.0117C17.5054 15.9114 17.1099 16.3127 17.1099 16.7967C17.1099 17.2924 17.5054 17.682 18.0117 17.682H18.1319C18.6249 17.682 19.0337 17.2924 19.0337 16.7967C19.0337 16.3127 18.6249 15.9114 18.1319 15.9114ZM16.0758 11.8509H15.9556C15.4506 11.8509 15.0538 12.2523 15.0538 12.7362C15.0538 13.232 15.4506 13.6215 15.9556 13.6215H16.0758C16.5688 13.6215 16.9776 13.232 16.9776 12.7362C16.9776 12.2523 16.5688 11.8509 16.0758 11.8509Z" fill="#BDBDBD"/> | ||
| </svg> | ||
| </div> | ||
|
|
||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| export const Message = () => { | ||
| return ( | ||
| <div className="h-9 w-9 hover:bg-secondary rounded-xl flex justify-center items-center "> | ||
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path d="M19.3259 5.77772C20 6.78661 20 8.19108 20 11C20 13.8089 20 15.2134 19.3259 16.2223C19.034 16.659 18.659 17.034 18.2223 17.3259C17.3409 17.9148 16.1577 17.9892 14 17.9986V18L12.8944 20.2111C12.5259 20.9482 11.4741 20.9482 11.1056 20.2111L10 18V17.9986C7.8423 17.9892 6.65907 17.9148 5.77772 17.3259C5.34096 17.034 4.96596 16.659 4.67412 16.2223C4 15.2134 4 13.8089 4 11C4 8.19108 4 6.78661 4.67412 5.77772C4.96596 5.34096 5.34096 4.96596 5.77772 4.67412C6.78661 4 8.19108 4 11 4H13C15.8089 4 17.2134 4 18.2223 4.67412C18.659 4.96596 19.034 5.34096 19.3259 5.77772Z" stroke="#BDBDBD" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/> | ||
| <path d="M9 9L15 9" stroke="#BDBDBD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> | ||
| <path d="M9 13H12" stroke="#BDBDBD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> | ||
| </svg> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
|
|
||
| export const Out = () => { | ||
| return ( | ||
| <div className="h-9 w-9 hover:bg-secondary rounded-xl flex justify-center items-center "> | ||
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path d="M7 7.13193V6.61204C7 4.46614 7 3.3932 7.6896 2.79511C8.37919 2.19703 9.44136 2.34877 11.5657 2.65224L15.8485 3.26408C18.3047 3.61495 19.5327 3.79039 20.2664 4.63628C21 5.48217 21 6.72271 21 9.20377V14.7962C21 17.2773 21 18.5178 20.2664 19.3637C19.5327 20.2096 18.3047 20.385 15.8485 20.7359L11.5657 21.3478C9.44136 21.6512 8.37919 21.803 7.6896 21.2049C7 20.6068 7 19.5339 7 17.388V17.066" stroke="#BDBDBD" stroke-width="2"/> | ||
| <path d="M16 12L16.7809 11.3753L17.2806 12L16.7809 12.6247L16 12ZM4 13C3.44771 13 3 12.5523 3 12C3 11.4477 3.44771 11 4 11V13ZM12.7809 6.3753L16.7809 11.3753L15.2191 12.6247L11.2191 7.6247L12.7809 6.3753ZM16.7809 12.6247L12.7809 17.6247L11.2191 16.3753L15.2191 11.3753L16.7809 12.6247ZM16 13H4V11H16V13Z" fill="#BDBDBD"/> | ||
| </svg> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
|
|
||
| export const Profile = () => { | ||
| return ( | ||
| <div className="h-9 w-9 hover:bg-secondary rounded-xl flex justify-center items-center "> | ||
| <svg width="19" height="24" viewBox="0 0 19 24" fill="#BDBDBD" xmlns="http://www.w3.org/2000/svg"> | ||
| <path d="M9.3615 15.416C14.4385 15.416 18.723 16.241 18.723 19.4239C18.723 22.608 14.4104 23.4037 9.3615 23.4037C4.28566 23.4037 0 22.5788 0 19.3958C0 16.2117 4.31259 15.416 9.3615 15.416ZM9.3615 0C12.8008 0 15.5565 2.75465 15.5565 6.19152C15.5565 9.6284 12.8008 12.3842 9.3615 12.3842C5.92337 12.3842 3.16654 9.6284 3.16654 6.19152C3.16654 2.75465 5.92337 0 9.3615 0Z" fill="#BDBDBD"/> | ||
| </svg> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import {BiSearch} from 'react-icons/bi' | ||
|
|
||
| export const Search = () => { | ||
| return ( | ||
| <div className='hidden sm:flex sm:items-center absolute pr-24 '> | ||
| <input type="text" placeholder="Search" className={`input w-60 mr-4 h-12`}/> | ||
| <div className='relative right-12 top-0 w-12 '><BiSearch size="1.4em" /></div> | ||
| </div> | ||
| ) | ||
| } |
Oops, something went wrong.