From c636357b45244185374168c716e942612b36404e Mon Sep 17 00:00:00 2001 From: donykevin214 Date: Fri, 12 May 2023 14:05:00 -0500 Subject: [PATCH 1/2] home page --- src/App.tsx | 3 +- src/assets/img/material.svg | 16 +++++++++ src/assets/img/solar.svg | 20 ++++++++++++ src/components/Detail/Profile.tsx | 10 +++++- src/components/Home/index.tsx | 54 +++++++++++++++++-------------- src/components/UI/Card.ui.tsx | 30 ++++++----------- tailwind.config.js | 9 +++++- 7 files changed, 93 insertions(+), 49 deletions(-) create mode 100644 src/assets/img/material.svg create mode 100644 src/assets/img/solar.svg diff --git a/src/App.tsx b/src/App.tsx index 5cbc156..50fee89 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,6 +4,7 @@ import { Route, Routes, Navigate } from "react-router-dom"; import Header from "~/components/Header"; import { AuthProvider } from "./providers/AuthProvider"; function App() { + const Home = lazy(() => import("./components/Home")); const Room = lazy(() => import("./components/Room")); const GameMode = lazy(() => import("./components/GameMode")); const Leaderboard = lazy(() => import("./components/Leaderboard")); @@ -19,7 +20,7 @@ function App() { Loading...}> <> - } /> + } /> } /> } /> } /> diff --git a/src/assets/img/material.svg b/src/assets/img/material.svg new file mode 100644 index 0000000..22e1f5d --- /dev/null +++ b/src/assets/img/material.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/assets/img/solar.svg b/src/assets/img/solar.svg new file mode 100644 index 0000000..d3254ab --- /dev/null +++ b/src/assets/img/solar.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Detail/Profile.tsx b/src/components/Detail/Profile.tsx index 885bdfa..cb2de6b 100644 --- a/src/components/Detail/Profile.tsx +++ b/src/components/Detail/Profile.tsx @@ -6,6 +6,8 @@ import SideBar from './SideBar' import { Table, Image } from '../UI' import { ColumnDefinitionType } from '../UI' import { useAuth } from '~/providers/AuthProvider'; +import { useEffect } from 'react' +import { useNavigate } from 'react-router-dom' interface History { type: React.ReactElement; @@ -85,7 +87,13 @@ const columns: ColumnDefinitionType[] = [ ] const Profile: React.FC = () => { - const { user } = useAuth() + const { user, isAuthenticated } = useAuth() + const navigate = useNavigate(); + useEffect(() => { + if(!isAuthenticated()){ + navigate('/'); + } + },[]) return (
diff --git a/src/components/Home/index.tsx b/src/components/Home/index.tsx index b87e34e..e865c58 100644 --- a/src/components/Home/index.tsx +++ b/src/components/Home/index.tsx @@ -1,32 +1,36 @@ import { FC } from 'react'; -import { Logo, Button, Card } from '~/components/UI'; +import { Card } from '~/components/UI'; +import Material from '~/assets/img/material.svg' +import Solar from '~/assets/img/solar.svg' +import { useNavigate } from 'react-router-dom'; +import { useAuth } from '~/providers/AuthProvider'; +import { useAppState } from '~/providers/StateProvider/StateProvider'; -const cards = ['Quick Play', 'Computer', 'Friend'] const Home: FC = () => { + const { isAuthenticated } = useAuth(); + const { actions } = useAppState(); + const navigate = useNavigate(); + const goTo = (param: string) => { + if(isAuthenticated()){ + navigate(param) + } + else{ + actions.setOpenModal(true); + } + } return ( - <> -
-
- -
-
-
- -
- { - cards.map((text,index)=>( - - )) - } -
-
- +
+ goTo('/play')} + /> + goTo('/pools')} + /> +
); }; diff --git a/src/components/UI/Card.ui.tsx b/src/components/UI/Card.ui.tsx index 6b69559..52e6e38 100644 --- a/src/components/UI/Card.ui.tsx +++ b/src/components/UI/Card.ui.tsx @@ -1,30 +1,18 @@ -import { Button } from '.' -import { useNavigate } from 'react-router-dom' +import { Image } from '.' export interface CardProps{ text: string, - button?: string + image?: string, + to : (param: string) => void, } -export const Card: React.FC = ({ text, button='Button' }: CardProps) =>{ - const navigate = useNavigate() - const gotoRoom = () => { - navigate('/play') - } +export const Card: React.FC = ({ text, image, to }: CardProps) =>{ return( -
-
-

{text}

+
- -
+ {text} + ) } diff --git a/tailwind.config.js b/tailwind.config.js index 3a496c6..b98a07e 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -20,9 +20,15 @@ export default { 'Libre' : 'Libre Baskerville', 'Inter': 'Inter' }, + boxShadow: { + 'xl': '0px 77.5917px 31.1939px rgba(0, 146, 255, 0.03), 0px 43.7763px 26.2134px rgba(0, 146, 255, 0.1), 0px 19.3979px 19.3979px rgba(0, 146, 255, 0.17), 0px 4.98052px 10.7475px rgba(0, 146, 255, 0.2)', + '2xl' : '0px 107.28px 43.0688px rgba(53, 114, 141, 0.01), 0px 60.2963px 36.0212px rgba(53, 114, 141, 0.03), 0px 26.6243px 26.6243px rgba(53, 114, 141, 0.04), 0px 7.04762px 14.8783px rgba(53, 114, 141, 0.05)', + }, colors:{ white: { - 100: '#F7F7F7' + 100: '#F7F7F7', + 200: '#F6FBFF', + 300: '#ffffffa6', }, purple:{ 100: '#7B61FF' @@ -45,6 +51,7 @@ export default { blue: { 100: '#1D9BF0' }, + card: 'linear-gradient(292.94deg, #DCEEFF 0%, #F1F8FF 0%, #F1F8FF 0%, #FFFFFF 100%)', fontFamily:{ 'libre':['Libre Baskerville', ...defaultTheme.fontFamily.sans] } From e1f8ceb2bfa3d2cf2d9245ed011a54eac01d38be Mon Sep 17 00:00:00 2001 From: donykevin214 Date: Fri, 12 May 2023 20:00:09 -0500 Subject: [PATCH 2/2] fix issue --- src/App.tsx | 4 ++-- src/components/Header.tsx | 4 ++-- src/components/Home/index.tsx | 2 +- src/components/{GameMode => Pools}/index.tsx | 4 ++-- 4 files changed, 7 insertions(+), 7 deletions(-) rename src/components/{GameMode => Pools}/index.tsx (91%) diff --git a/src/App.tsx b/src/App.tsx index 50fee89..2d5a5bb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,7 +6,7 @@ import { AuthProvider } from "./providers/AuthProvider"; function App() { const Home = lazy(() => import("./components/Home")); const Room = lazy(() => import("./components/Room")); - const GameMode = lazy(() => import("./components/GameMode")); + const Pools = lazy(() => import("./components/Pools")); const Leaderboard = lazy(() => import("./components/Leaderboard")); const Profile = lazy(() => import("./components/Detail/Profile")); const Deposit = lazy(() => import("./components/Detail/Deposit")); @@ -22,7 +22,7 @@ function App() { } /> } /> - } /> + } /> } /> } /> } /> diff --git a/src/components/Header.tsx b/src/components/Header.tsx index d64417a..389cd26 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -39,10 +39,10 @@ const Header: FC = () => {