From 686c871b275134e369e077ce34a932c83148bb8a Mon Sep 17 00:00:00 2001 From: daniyal Date: Thu, 11 Jul 2024 17:15:03 +0500 Subject: [PATCH] feat: implemented games page --- src/components/GameCard.tsx | 21 +++++++ src/layout/header.tsx | 37 ++++++++---- src/pages/games.tsx | 87 +++++++++++++++++++++++++++++ src/pages/home.tsx | 32 ++--------- src/routes/index.tsx | 25 ++++++++- src/styles/pagination.css | 103 ++++++++++++++++++++++++++++++++++ src/styles/search.css | 108 ++++++++++++++++++++++++++++++++++++ 7 files changed, 375 insertions(+), 38 deletions(-) create mode 100644 src/components/GameCard.tsx create mode 100644 src/pages/games.tsx create mode 100644 src/styles/pagination.css create mode 100644 src/styles/search.css diff --git a/src/components/GameCard.tsx b/src/components/GameCard.tsx new file mode 100644 index 0000000..9cd2c03 --- /dev/null +++ b/src/components/GameCard.tsx @@ -0,0 +1,21 @@ +import '../styles/cardGames.css' + +type GameCardProps = { + backgroundLink: string +} + +export const GameCard = ({ backgroundLink }: GameCardProps) => { + return ( + +
+
+

This is a game title, the best game title

+
+ + ) +} diff --git a/src/layout/header.tsx b/src/layout/header.tsx index 2efd5cb..cc2ccb3 100644 --- a/src/layout/header.tsx +++ b/src/layout/header.tsx @@ -1,6 +1,8 @@ import navStyles from '../styles/nav.module.scss' import mainStyles from '../styles//main.module.scss' import { Banner } from '../components/Banner' +import { Link } from 'react-router-dom' +import { appRoutes } from '../routes' export const Header = () => { return ( @@ -10,14 +12,17 @@ export const Header = () => {
- +
- +
@@ -92,18 +97,30 @@ export const Header = () => { diff --git a/src/pages/games.tsx b/src/pages/games.tsx new file mode 100644 index 0000000..b08c791 --- /dev/null +++ b/src/pages/games.tsx @@ -0,0 +1,87 @@ +import '../styles/pagination.css' +import '../styles/styles.css' +import '../styles/search.css' +import { GameCard } from '../components/GameCard' + +export const GamesPage = () => { + return ( +
+
+
+
+
+
+

Games

+
+
+
+
+ + +
+
+
+
+
+
+
+ + + + + + + + + + +
+
+ +
+
+
+ ) +} diff --git a/src/pages/home.tsx b/src/pages/home.tsx index e4d677f..7d510cf 100644 --- a/src/pages/home.tsx +++ b/src/pages/home.tsx @@ -1,5 +1,5 @@ +import { GameCard } from '../components/GameCard' import '../styles/cardBlogs.css' -import '../styles/cardGames.css' import '../styles/cardLists.css' import '../styles/cardMod.css' import '../styles/SimpleSlider.css' @@ -129,11 +129,11 @@ export const HomePage = () => {

Cool Games

- - - - - + + + + +
{ ) } -type GameCardProps = { - backgroungLink: string -} - -const GameCard = ({ backgroungLink }: GameCardProps) => { - return ( - -
-
-

This is a game title, the best game title

-
- - ) -} - type ModCardProps = { backgroundLink: string } diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 7ec7d09..143cd0a 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -1,8 +1,13 @@ +import { GamesPage } from '../pages/games' import { HomePage } from '../pages/home' -export const appRoutes: Record = { +export const appRoutes = { index: '/', - home: '/home' + home: '/home', + games: '/games', + mods: '/mods', + about: '/about', + blog: '/blog' } export const routes = [ @@ -13,5 +18,21 @@ export const routes = [ { path: appRoutes.home, element: + }, + { + path: appRoutes.games, + element: + }, + { + path: appRoutes.mods, + element: + }, + { + path: appRoutes.about, + element: + }, + { + path: appRoutes.blog, + element: } ] diff --git a/src/styles/pagination.css b/src/styles/pagination.css new file mode 100644 index 0000000..2e739b1 --- /dev/null +++ b/src/styles/pagination.css @@ -0,0 +1,103 @@ +.PaginationMain { + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.PaginationMainInside { + width: 100%; + max-width: 600px; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: center; + grid-gap: 10px; + height: 50px; +} + +@media (max-width: 768px) { + .PaginationMainInside { + flex-direction: row; + height: unset; + max-width: unset; + } +} + +.PaginationMainInsideBox { + transition: ease 0.4s; + text-decoration: unset; + color: unset; + padding: 10px 20px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background: rgba(35,35,35,0); + border-radius: 10px; + height: 100%; + box-shadow: 0 0 8px 0 rgba(0,0,0,0); + transform: scale(1); + border: solid 1px rgba(255,255,255,0); + color: rgba(255,255,255,0.1); + font-weight: bold; +} + +.PaginationMainInsideBox.PaginationMainInsideBoxArrows { +} + +@media (max-width: 768px) { + .PaginationMainInsideBox.PaginationMainInsideBoxArrows { + order: 2; + flex-grow: 1; + } +} + +.PaginationMainInsideBox:hover { + transition: ease 0.4s; + text-decoration: unset; + color: unset; + background: linear-gradient(to top right, #232323, #262626, #232323); + box-shadow: 0 0 16px 0 rgba(0,0,0,0.1); + transform: scale(1.01); + border: solid 1px rgba(255,255,255,0.1); + color: rgba(255,255,255,0.85); +} + +.PaginationMainInsideBox:active { + transition: ease 0.1s; + transform: scale(0.98); +} + +.PaginationMainInsideBox.PMIBActive { + transition: ease 0.4s; + text-decoration: unset; + color: unset; + transform: scale(1.01); + border: solid 1px rgba(255,255,255,0.1); + color: rgba(255,255,255,0.75); +} + +.PMIBDots { + border: unset; + background: unset; + box-shadow: unset; +} + +.PaginationMainInsideBoxGroup { + display: flex; + flex-direction: row; + justify-content: center; + grid-gap: 10px; +} + +@media (max-width: 768px) { + .PaginationMainInsideBoxGroup { + width: 100%; + order: 1; + justify-content: space-around; + } +} + diff --git a/src/styles/search.css b/src/styles/search.css new file mode 100644 index 0000000..9c33a2e --- /dev/null +++ b/src/styles/search.css @@ -0,0 +1,108 @@ +.SearchMain { + height: 100%; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + width: 100%; + max-width: 300px; +} + +@media (max-width: 768px) { + .SearchMain { + max-width: unset; + } +} + +.SearchMainInside { + width: 100%; + padding: 10px; + display: flex; + flex-direction: row; + justify-content: end; + align-items: center; + background: linear-gradient(to top right, #262626, #292929, #262626); + border-radius: 15px; + box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); +} + +.SearchMainInsideWrapper { + display: grid; + grid-template-columns: 1.65fr 0.35fr; + justify-content: end; + align-items: center; + height: 100%; + position: relative; + overflow: hidden; + border-radius: 10px; + background: rgba(0,0,0,0.1); + width: 100%; + grid-gap: 0; +} + +.SMIWInput { + outline: unset; + border: unset; + height: 100%; + width: 100%; + padding: 10px; + background: rgba(0,0,0,0); + overflow: hidden; + border-radius: 10px 0 0 10px; + color: rgba(255,255,255,0.75); + box-shadow: inset 0 0 5px 0 rgba(0,0,0,0.1); +} + +.SMIWInput:focus { + background: rgba(0,0,0,0.05); +} + +.btnMain.SMIWButton { + transition: ease 0.4s; + color: rgba(255,255,255,0.15); + border: unset; + outline: unset; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background: rgba(255,255,255,0); + border-radius: 0; + border-left: solid 1px rgba(255,255,255,0.05); + height: 100%; + padding: 10px; +} + +.btnMain.SMIWButton:focus { + transition: ease 0.4s; + color: rgba(255,255,255,0.5); + border: unset; + outline: unset; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background: linear-gradient(to top right, #2f2f2f, #303030, #2f2f2f); + border-radius: 0; + border-left: solid 1px rgba(255,255,255,0); + box-shadow: 0 0 8px 0 rgba(0,0,0,0.25); +} + +.SMIWInput:focus + .SMIWButton { + background: rgba(0,0,0,0.05); + background: linear-gradient(to top right, #2f2f2f, #303030, #2f2f2f); +} + +.SearchMainWrapper { + display: flex; + flex-direction: row; + justify-content: end; +} + +@media (max-width: 768px) { + .SearchMainWrapper { + flex-direction: column; + grid-gap: 15px; + } +} +