From 494612f54f14676c9b1b6093604204e5be79187a Mon Sep 17 00:00:00 2001 From: Lucif3r-in Date: Mon, 2 Oct 2023 18:09:04 +0530 Subject: [PATCH 01/10] feat: add event card --- src/components/EventCard/Card.jsx | 94 ++++++++++++++++ src/components/EventCard/EventCard.jsx | 42 ++++++++ src/components/EventCard/styles.js | 132 +++++++++++++++++++++++ src/components/FAQSection/FAQSection.jsx | 2 +- src/pages/playground.js | 39 ++++++- 5 files changed, 303 insertions(+), 6 deletions(-) create mode 100644 src/components/EventCard/Card.jsx create mode 100644 src/components/EventCard/EventCard.jsx create mode 100644 src/components/EventCard/styles.js diff --git a/src/components/EventCard/Card.jsx b/src/components/EventCard/Card.jsx new file mode 100644 index 0000000..c0c4d69 --- /dev/null +++ b/src/components/EventCard/Card.jsx @@ -0,0 +1,94 @@ +/* eslint-disable max-len */ +import React, { useState } from 'react'; +import { + Back, + BackDescription, + Card, + CardButtonContainer, + CardContainer, + CardImage, + CardTextContainer, + CardTitleContainer, + Circle, + EventClub, + EventName, + EventRegisterButton, + EventTimeVenue, + Front, + KnowButton, +} from './styles'; +import { Body2 } from '../shared'; + +const CardComponent = ({ + title, + club, + venue, + // time, + date, + month, + // prizes, + description, + contact, + poster, +}) => { + const [isFlipped, setIsFlipped] = useState(false); + + const flipCard = () => { + setIsFlipped(!isFlipped); + }; + + const bringToFront = () => { + setIsFlipped(false); + }; + + return ( + + + + + + + + {date} {month} + + {venue} + + + + {title} + {club} + + + + + + + + + + {title} + {club} + +
+ + + {date} {month} + + {venue} + + + + {description} + + Contact: {contact.join(', ')} + + + + + + + + ); +}; + +export default CardComponent; diff --git a/src/components/EventCard/EventCard.jsx b/src/components/EventCard/EventCard.jsx new file mode 100644 index 0000000..69292bd --- /dev/null +++ b/src/components/EventCard/EventCard.jsx @@ -0,0 +1,42 @@ +import React from 'react'; +import { + CardButtonContainer, + CardContainer, + CardImage, + CardTextContainer, + CardTitleContainer, + Circle, + EventClub, + EventName, + EventRegisterButton, + EventTimeVenue, + KnowButton, +} from './styles'; + +const FeaturedEventCard = () => ( + + + + + + 17 July + + LA + + + + Game Of Thrones + Knights Club + + + + + + + +); + +export default FeaturedEventCard; diff --git a/src/components/EventCard/styles.js b/src/components/EventCard/styles.js new file mode 100644 index 0000000..bf16a5c --- /dev/null +++ b/src/components/EventCard/styles.js @@ -0,0 +1,132 @@ +import styled from 'styled-components'; +import tw from 'twin.macro'; +import { Heading4, Body2, CaptionText } from '../shared'; +import Button from '../shared/Button'; + +export const CardImage = styled.img` + ${tw` + w-full + rounded-lg + `}; +`; + +export const CardTextContainer = styled.div` + ${tw` + mt-4 + md:mt-3 + `} +`; + +export const CardTitleContainer = styled.div` + ${tw` + flex-col + items-center + justify-between + `} +`; + +export const EventTimeVenue = styled(Body2)` + ${tw`mr-2`} +`; + +export const Circle = styled.div` + ${tw` + w-[5px] + h-[5px] + mx-2 + inline-block + bg-color-secondary + rounded-full + `} +`; +export const EventName = styled(Heading4)` + text-transform: none; + ${tw` + mt-4 + truncate + `} + + .dot { + width: 50px; + height: 50px; + border-radius: 50%; + } +`; + +export const EventClub = styled(CaptionText)` + ${tw``} +`; + +export const CardButtonContainer = styled.div` + ${tw` + flex + mt-4 + justify-between + `}; +`; + +export const KnowButton = styled(Button)` + ${tw` + px-0 + py-1.5 + `} +`; + +export const EventRegisterButton = styled(Button)` + ${tw` + px-4 + py-1.5 + `} +`; +export const CardContainer = styled.div` + margin: auto; + width: 420px; + max-width: 400px; + perspective: 1000px; +`; + +export const Card = styled.div` + width: min-content; + position: relative; + transform-style: preserve-3d; + transition: transform 0.6s; +`; + +export const Front = styled.div` + position: absolute; + background-color: #2c2c2c; + width: 400px; + max-width: 328px; + backface-visibility: hidden; + ${tw` + h-auto + px-4 + mx-auto + pt-4 + pb-6 + gap-4 + rounded-2xl + text-color-secondary + `}; +`; + +export const Back = styled.div` + width: 400px; + max-width: 328px; + background-color: #2c2c2c; + ${tw` + h-auto + px-4 + mx-auto + pt-4 + pb-6 + gap-4 + rounded-2xl + text-color-secondary + `}; + backface-visibility: hidden; + transform: rotateY(180deg); +`; +export const BackDescription = styled(Body2)` + color: #b9b9b9; +`; diff --git a/src/components/FAQSection/FAQSection.jsx b/src/components/FAQSection/FAQSection.jsx index e372a82..d894549 100644 --- a/src/components/FAQSection/FAQSection.jsx +++ b/src/components/FAQSection/FAQSection.jsx @@ -10,7 +10,7 @@ const FAQSection = () => { const secondHalf = FAQ.splice(-middleIndex); return ( - + {firstHalf.map((item, index) => ( diff --git a/src/pages/playground.js b/src/pages/playground.js index 55752c0..fa2cf29 100644 --- a/src/pages/playground.js +++ b/src/pages/playground.js @@ -1,13 +1,42 @@ +/* eslint-disable max-len */ /* eslint-disable jsx-a11y/click-events-have-key-events */ import React from 'react'; import { Helmet } from 'react-helmet'; +import CardComponent from '../components/EventCard/Card'; +const cardData = { + title: 'Game Of Thrones', + club: 'Knights Club', + venue: 'LA', + time: '10:00 AM', + date: '17', + month: 'July', + prizes: 'Cash prizes and trophies', + description: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in rutrum metus. Pellentesque commodo ante neque, eu hendrerit lorem gravida et. Aliquam scelerisque...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in rutrum metus. Pellentesque commodo ante neque, eu hendrerit lorem gravida et. Aliquam scelerisque...', + contact: ['Rashmi - 9848948949'], + poster: 'https://res.cloudinary.com/dw9odubkt/image/upload/v1695829352/Rectangle_1_wqmr3i.png', +}; const Playground = () => ( - - - Playground - - + <> + + + Playground + + + + ); export default Playground; From 6de3f4cbd12e50a6b2d9e3a998314fc1194cf367 Mon Sep 17 00:00:00 2001 From: Ashish Padhy <100484401+Shurtu-gal@users.noreply.github.com> Date: Tue, 3 Oct 2023 03:13:22 +0530 Subject: [PATCH 02/10] feat: integrate real event --- gatsby-browser.js | 2 +- gatsby-ssr.js | 2 +- src/components/EventCard/Card.jsx | 16 +++-- src/components/EventCard/EventCard.jsx | 42 ------------- src/components/EventCard/styles.js | 2 +- .../Registration/RegistrationForm.jsx | 5 +- src/pages/events.js | 15 +++++ src/pages/playground.js | 62 ++++++++----------- src/utils/Api.js | 2 +- src/utils/Auth.jsx | 6 +- src/utils/useEvents.js | 17 +++-- 11 files changed, 71 insertions(+), 100 deletions(-) delete mode 100644 src/components/EventCard/EventCard.jsx create mode 100644 src/pages/events.js diff --git a/gatsby-browser.js b/gatsby-browser.js index 04e85ae..6e917ac 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -71,6 +71,6 @@ export const wrapPageElement = ({ element, props }) => ( export const wrapRootElement = ({ element }) => ( {element} - + ); diff --git a/gatsby-ssr.js b/gatsby-ssr.js index 608c0f5..1811dcf 100644 --- a/gatsby-ssr.js +++ b/gatsby-ssr.js @@ -70,6 +70,6 @@ export const wrapPageElement = ({ element, props }) => ( export const wrapRootElement = ({ element }) => ( {element} - + ); diff --git a/src/components/EventCard/Card.jsx b/src/components/EventCard/Card.jsx index c0c4d69..8ab9a21 100644 --- a/src/components/EventCard/Card.jsx +++ b/src/components/EventCard/Card.jsx @@ -23,7 +23,7 @@ const CardComponent = ({ title, club, venue, - // time, + time, date, month, // prizes, @@ -51,6 +51,8 @@ const CardComponent = ({ {date} {month} + {time} + {venue} @@ -77,10 +79,14 @@ const CardComponent = ({ {venue} - - {description} - - Contact: {contact.join(', ')} +
    + {description?.map((desc) => ( +
  • + {desc.desc} +
    • + ))} +
+ Contact: {contact?.join(', ')} diff --git a/src/components/EventCard/EventCard.jsx b/src/components/EventCard/EventCard.jsx deleted file mode 100644 index 69292bd..0000000 --- a/src/components/EventCard/EventCard.jsx +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react'; -import { - CardButtonContainer, - CardContainer, - CardImage, - CardTextContainer, - CardTitleContainer, - Circle, - EventClub, - EventName, - EventRegisterButton, - EventTimeVenue, - KnowButton, -} from './styles'; - -const FeaturedEventCard = () => ( - - - - - - 17 July - - LA - - - - Game Of Thrones - Knights Club - - - - - - - -); - -export default FeaturedEventCard; diff --git a/src/components/EventCard/styles.js b/src/components/EventCard/styles.js index bf16a5c..d571778 100644 --- a/src/components/EventCard/styles.js +++ b/src/components/EventCard/styles.js @@ -26,7 +26,7 @@ export const CardTitleContainer = styled.div` `; export const EventTimeVenue = styled(Body2)` - ${tw`mr-2`} + ${tw` flex items-center`} `; export const Circle = styled.div` diff --git a/src/components/Registration/RegistrationForm.jsx b/src/components/Registration/RegistrationForm.jsx index fd129c0..f728d6f 100644 --- a/src/components/Registration/RegistrationForm.jsx +++ b/src/components/Registration/RegistrationForm.jsx @@ -13,10 +13,7 @@ export const RegistrationForm = () => { const { inputData, setInputValue, isNITR, setErrorMessage, verified, setIsNITR } = useContext(RegistrationContext); - const { - token, - userData: { uid }, - } = useContext(AuthContext); + const { token, uid } = useContext(AuthContext); const api = Api.getInstance(); diff --git a/src/pages/events.js b/src/pages/events.js new file mode 100644 index 0000000..54639eb --- /dev/null +++ b/src/pages/events.js @@ -0,0 +1,15 @@ +import React from 'react'; +import useEvents from '../utils/useEvents'; + +const EventPage = () => { + const { events } = useEvents('Technical'); + console.log(events); + + return ( +
+

Events

+
+ ); +}; + +export default EventPage; diff --git a/src/pages/playground.js b/src/pages/playground.js index fa2cf29..47378b3 100644 --- a/src/pages/playground.js +++ b/src/pages/playground.js @@ -1,42 +1,34 @@ -/* eslint-disable max-len */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ import React from 'react'; import { Helmet } from 'react-helmet'; import CardComponent from '../components/EventCard/Card'; +import useEvents from '../utils/useEvents'; -const cardData = { - title: 'Game Of Thrones', - club: 'Knights Club', - venue: 'LA', - time: '10:00 AM', - date: '17', - month: 'July', - prizes: 'Cash prizes and trophies', - description: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in rutrum metus. Pellentesque commodo ante neque, eu hendrerit lorem gravida et. Aliquam scelerisque...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in rutrum metus. Pellentesque commodo ante neque, eu hendrerit lorem gravida et. Aliquam scelerisque...', - contact: ['Rashmi - 9848948949'], - poster: 'https://res.cloudinary.com/dw9odubkt/image/upload/v1695829352/Rectangle_1_wqmr3i.png', +const Playground = () => { + const { events } = useEvents('technical'); + + return ( + <> + + + Playground + + + + + ); }; -const Playground = () => ( - <> - - - Playground - - - - -); export default Playground; diff --git a/src/utils/Api.js b/src/utils/Api.js index 741ef40..83b5c05 100644 --- a/src/utils/Api.js +++ b/src/utils/Api.js @@ -27,7 +27,7 @@ class Api { async getEvents(event) { return this.avenueApi.get('/events', { - params: { type: event, orgID: '65133eb72c5708eb84bf53d6' }, + params: { type: event, orgID: process.env.GATSBY_ORG_ID }, }); } diff --git a/src/utils/Auth.jsx b/src/utils/Auth.jsx index 8d8af02..86053c8 100644 --- a/src/utils/Auth.jsx +++ b/src/utils/Auth.jsx @@ -17,6 +17,7 @@ const defaultValues = { token: '', login: () => {}, logout: () => {}, + uid: '', }; export const AuthContext = createContext(defaultValues); @@ -26,6 +27,7 @@ const AuthContextProvider = ({ children }) => { const [userData, setUserData] = useState({}); const [token, setToken] = useState(''); const [loading, setLoading] = useState(true); + const [uid, setUid] = useState(''); // Get the singleton instance of the API const api = Api.getInstance(); @@ -38,6 +40,7 @@ const AuthContextProvider = ({ children }) => { console.log(user.accessToken); setAuthenticated(true); setToken(user.accessToken); + setUid(user.uid); const avenueUser = await api.fetchUserDetails({ uid: user.uid, @@ -111,8 +114,9 @@ const AuthContextProvider = ({ children }) => { logout, setUserData, loading, + uid, }; - }, [authenticated, token, userData, loading]); + }, [authenticated, token, userData, loading, uid]); return {children}; }; diff --git a/src/utils/useEvents.js b/src/utils/useEvents.js index c92f009..8bf2d6a 100644 --- a/src/utils/useEvents.js +++ b/src/utils/useEvents.js @@ -1,28 +1,26 @@ import { useMemo } from 'react'; import { useQuery } from '@tanstack/react-query'; -import { avenueApi } from './Api'; - -const fetchEvents = (event) => - avenueApi.get('/events', { params: { type: event, orgID: '640892e9f785cdd0afcd8ccf' } }); +import Api from './Api'; const useEvents = (eventName) => { + const api = Api.getInstance(); + const { data, isLoading } = useQuery({ queryKey: ['events', eventName], - queryFn: () => fetchEvents(eventName), + queryFn: () => api.getEvents(eventName), }); const events = useMemo( () => data?.data ?.map((event) => { - const name = JSON.parse(event.name); const description = JSON.parse(event.description); const date = new Date(event.startDate); return { id: event.id, - title: name.heading, - club: name.subHeading, + title: event.name, + club: event.subHeading, date: date.getDate(), month: date.toDateString().split(' ')[1], time: `${date.getHours().toString().padStart(2, '0')}:${date @@ -30,8 +28,9 @@ const useEvents = (eventName) => { .toString() .padStart(2, '0')}`, description, + contact: event.contact, venue: 'LA', - prizes: name.prizeAmount, + prizes: event.prizeMoney, poster: event.poster ? event.poster : 'TODO://link', }; }) From 0027d5abe702ae44cb0007483808f0a7a73ded31 Mon Sep 17 00:00:00 2001 From: Ashish Padhy <100484401+Shurtu-gal@users.noreply.github.com> Date: Tue, 3 Oct 2023 03:25:01 +0530 Subject: [PATCH 03/10] fix: add dummy event --- src/pages/playground.js | 31 ++++++++++++++++++++++++++++++- 1 file changed, 30 insertions(+), 1 deletion(-) diff --git a/src/pages/playground.js b/src/pages/playground.js index 47378b3..a7cc95a 100644 --- a/src/pages/playground.js +++ b/src/pages/playground.js @@ -3,8 +3,37 @@ import { Helmet } from 'react-helmet'; import CardComponent from '../components/EventCard/Card'; import useEvents from '../utils/useEvents'; +const events = [{ + title: 'Game Of Thrones', + club: 'Knights Club', + venue: 'LA', + time: '10:00 AM', + date: '17', + month: 'July', + prizes: 'Cash prizes and trophies', + description: [{ + id: 0, + desc: `Game of Thrones is a strategy board game created by Christian T. Petersen + and released by Fantasy Flight Games in 2003. The game is based on the A Song + of Ice and Fire fantasy series by George R. R. Martin. It was followed in 2004 + by the expansion A Clash of Kings, and in 2006 by the expansion A Storm of + Swords. A Game of Thrones allows the players to take on the roles of several + of the Great Houses vying for control of the Seven Kingdoms, including House + Stark, House Lannister, House Baratheon, House Greyjoy, House Tyrell, and a + of the expansion A Clash of Kings, House Martell. Players maneuver armies to + secure support in the various regions that comprise the Seven Kingdoms, with + the goal of capturing enough support to claim the Iron Throne. The game + is designed for three to six players, who each begin with control of one of the six Great + Houses of Westeros. Randomly chosen neutral territories and land areas make up the + remainder of the board.`, + }], + contact: ['Rashmi - 9848948949'], + poster: 'https://res.cloudinary.com/dw9odubkt/image/upload/v1695829352/Rectangle_1_wqmr3i.png', +}]; + const Playground = () => { - const { events } = useEvents('technical'); + // eslint-disable-next-line no-unused-vars + const { events: backendEvents } = useEvents('technical'); return ( <> From b33c7cb7235574c55a7004f1e5764d872eaf6f6d Mon Sep 17 00:00:00 2001 From: Ashutosh Rath Date: Tue, 3 Oct 2023 21:17:54 +0530 Subject: [PATCH 04/10] fix: Update styles.js --- src/components/EventCard/styles.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/EventCard/styles.js b/src/components/EventCard/styles.js index d571778..70b1b60 100644 --- a/src/components/EventCard/styles.js +++ b/src/components/EventCard/styles.js @@ -5,9 +5,13 @@ import Button from '../shared/Button'; export const CardImage = styled.img` ${tw` - w-full rounded-lg `}; + width: 21.25rem; + + @media (max-width: 768px) { + width: 100%; + } `; export const CardTextContainer = styled.div` @@ -129,4 +133,9 @@ export const Back = styled.div` `; export const BackDescription = styled(Body2)` color: #b9b9b9; + display: -webkit-box; + -webkit-line-clamp: 8; + -webkit-box-orient: vertical; + overflow: hidden; + margin: 1rem 0 2rem 0; `; From e26a615a5648a518d9446c98cc069aefc241ada0 Mon Sep 17 00:00:00 2001 From: Ashutosh Rath Date: Tue, 3 Oct 2023 21:18:22 +0530 Subject: [PATCH 05/10] fix: Update playground.js --- src/pages/playground.js | 92 +++++++++++++++++------------------------ 1 file changed, 37 insertions(+), 55 deletions(-) diff --git a/src/pages/playground.js b/src/pages/playground.js index a7cc95a..1a9cf6d 100644 --- a/src/pages/playground.js +++ b/src/pages/playground.js @@ -1,63 +1,45 @@ +/* eslint-disable max-len */ import React from 'react'; import { Helmet } from 'react-helmet'; import CardComponent from '../components/EventCard/Card'; -import useEvents from '../utils/useEvents'; -const events = [{ - title: 'Game Of Thrones', - club: 'Knights Club', - venue: 'LA', - time: '10:00 AM', - date: '17', - month: 'July', - prizes: 'Cash prizes and trophies', - description: [{ - id: 0, - desc: `Game of Thrones is a strategy board game created by Christian T. Petersen - and released by Fantasy Flight Games in 2003. The game is based on the A Song - of Ice and Fire fantasy series by George R. R. Martin. It was followed in 2004 - by the expansion A Clash of Kings, and in 2006 by the expansion A Storm of - Swords. A Game of Thrones allows the players to take on the roles of several - of the Great Houses vying for control of the Seven Kingdoms, including House - Stark, House Lannister, House Baratheon, House Greyjoy, House Tyrell, and a - of the expansion A Clash of Kings, House Martell. Players maneuver armies to - secure support in the various regions that comprise the Seven Kingdoms, with - the goal of capturing enough support to claim the Iron Throne. The game - is designed for three to six players, who each begin with control of one of the six Great - Houses of Westeros. Randomly chosen neutral territories and land areas make up the - remainder of the board.`, - }], - contact: ['Rashmi - 9848948949'], - poster: 'https://res.cloudinary.com/dw9odubkt/image/upload/v1695829352/Rectangle_1_wqmr3i.png', -}]; +const events = + { + title: 'Game Of Thrones', + club: 'Knights Club', + venue: 'LA', + time: '10:00 AM', + date: '17', + month: 'July', + prizes: '7 karod', + description: 'Game of Thrones is a strategy board game created by Christian T. Petersen and released by Fantasy Flight Games in 2003. The game is based on the A Song of Ice and Fire fantasy series by George R. R. Martin. It was followed in 2004 by the expansion A Clash of Kings, and in 2006 by the expansion A Storm of Swords. A Game of Thrones allows the players to take on the roles of several of the Great Houses vying for control of the Seven Kingdoms, including House Stark, House Lannister, House Baratheon, House Greyjoy, House Tyrell, and a of the expansion A Clash of Kings, House Martell. Players maneuver armies to secure support in the various regions that comprise the Seven Kingdoms, with the goal of capturing enough support to claim the Iron Throne. The game is designed for three to six players, who each begin with control of one of the six Great Houses of Westeros. Randomly chosen neutral territories and land areas make up the remainder of the board.', + contact: ['Rashmi - 9848948949'], + poster: 'https://res.cloudinary.com/dw9odubkt/image/upload/v1695829352/Rectangle_1_wqmr3i.png', + } -const Playground = () => { - // eslint-disable-next-line no-unused-vars - const { events: backendEvents } = useEvents('technical'); + const Playground = () => ( + <> + + + Playground + + + + +); - return ( - <> - - - Playground - - - - - ); -}; export default Playground; From 6dc7bcc2bc23bdb36fca42808183c81de97f0d80 Mon Sep 17 00:00:00 2001 From: Ashutosh Rath Date: Tue, 3 Oct 2023 21:18:40 +0530 Subject: [PATCH 06/10] fix: Update Card.jsx --- src/components/EventCard/Card.jsx | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/src/components/EventCard/Card.jsx b/src/components/EventCard/Card.jsx index 8ab9a21..31da4f0 100644 --- a/src/components/EventCard/Card.jsx +++ b/src/components/EventCard/Card.jsx @@ -26,7 +26,7 @@ const CardComponent = ({ time, date, month, - // prizes, + prizes, description, contact, poster, @@ -71,21 +71,17 @@ const CardComponent = ({ {title} {club} -
+
+ Prize - {prizes} +
{date} {month} {venue} -
    - {description?.map((desc) => ( -
  • - {desc.desc} -
    • - ))} -
+ {description} Contact: {contact?.join(', ')} From 610baefbfdf13b67d942708d34a96bc6bc768b81 Mon Sep 17 00:00:00 2001 From: Lucif3r-in Date: Tue, 3 Oct 2023 21:26:17 +0530 Subject: [PATCH 07/10] fix: prettier issues --- src/components/EventCard/Card.jsx | 4 ++-- src/components/EventCard/styles.js | 6 +++--- src/pages/playground.js | 29 ++++++++++++++--------------- 3 files changed, 19 insertions(+), 20 deletions(-) diff --git a/src/components/EventCard/Card.jsx b/src/components/EventCard/Card.jsx index 31da4f0..5db418b 100644 --- a/src/components/EventCard/Card.jsx +++ b/src/components/EventCard/Card.jsx @@ -74,14 +74,14 @@ const CardComponent = ({
Prize - {prizes} -
+
{date} {month} {venue} - {description} + {description} Contact: {contact?.join(', ')} diff --git a/src/components/EventCard/styles.js b/src/components/EventCard/styles.js index 70b1b60..47a70dc 100644 --- a/src/components/EventCard/styles.js +++ b/src/components/EventCard/styles.js @@ -7,10 +7,10 @@ export const CardImage = styled.img` ${tw` rounded-lg `}; - width: 21.25rem; - + width: 21.25rem; + @media (max-width: 768px) { - width: 100%; + width: 100%; } `; diff --git a/src/pages/playground.js b/src/pages/playground.js index 1a9cf6d..c4b9317 100644 --- a/src/pages/playground.js +++ b/src/pages/playground.js @@ -3,21 +3,21 @@ import React from 'react'; import { Helmet } from 'react-helmet'; import CardComponent from '../components/EventCard/Card'; -const events = - { - title: 'Game Of Thrones', - club: 'Knights Club', - venue: 'LA', - time: '10:00 AM', - date: '17', - month: 'July', - prizes: '7 karod', - description: 'Game of Thrones is a strategy board game created by Christian T. Petersen and released by Fantasy Flight Games in 2003. The game is based on the A Song of Ice and Fire fantasy series by George R. R. Martin. It was followed in 2004 by the expansion A Clash of Kings, and in 2006 by the expansion A Storm of Swords. A Game of Thrones allows the players to take on the roles of several of the Great Houses vying for control of the Seven Kingdoms, including House Stark, House Lannister, House Baratheon, House Greyjoy, House Tyrell, and a of the expansion A Clash of Kings, House Martell. Players maneuver armies to secure support in the various regions that comprise the Seven Kingdoms, with the goal of capturing enough support to claim the Iron Throne. The game is designed for three to six players, who each begin with control of one of the six Great Houses of Westeros. Randomly chosen neutral territories and land areas make up the remainder of the board.', - contact: ['Rashmi - 9848948949'], - poster: 'https://res.cloudinary.com/dw9odubkt/image/upload/v1695829352/Rectangle_1_wqmr3i.png', - } +const events = { + title: 'Game Of Thrones', + club: 'Knights Club', + venue: 'LA', + time: '10:00 AM', + date: '17', + month: 'July', + prizes: '7 karod', + description: + 'Game of Thrones is a strategy board game created by Christian T. Petersen and released by Fantasy Flight Games in 2003. The game is based on the A Song of Ice and Fire fantasy series by George R. R. Martin. It was followed in 2004 by the expansion A Clash of Kings, and in 2006 by the expansion A Storm of Swords. A Game of Thrones allows the players to take on the roles of several of the Great Houses vying for control of the Seven Kingdoms, including House Stark, House Lannister, House Baratheon, House Greyjoy, House Tyrell, and a of the expansion A Clash of Kings, House Martell. Players maneuver armies to secure support in the various regions that comprise the Seven Kingdoms, with the goal of capturing enough support to claim the Iron Throne. The game is designed for three to six players, who each begin with control of one of the six Great Houses of Westeros. Randomly chosen neutral territories and land areas make up the remainder of the board.', + contact: ['Rashmi - 9848948949'], + poster: 'https://res.cloudinary.com/dw9odubkt/image/upload/v1695829352/Rectangle_1_wqmr3i.png', +}; - const Playground = () => ( +const Playground = () => ( <> @@ -41,5 +41,4 @@ const events = ); - export default Playground; From 486b3c7b7a92014418445221d53f16a9bdc61c9a Mon Sep 17 00:00:00 2001 From: Ashutosh Rath Date: Tue, 3 Oct 2023 21:36:31 +0530 Subject: [PATCH 08/10] fix: Update Card.jsx --- src/components/EventCard/Card.jsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/EventCard/Card.jsx b/src/components/EventCard/Card.jsx index 5db418b..9b27e44 100644 --- a/src/components/EventCard/Card.jsx +++ b/src/components/EventCard/Card.jsx @@ -71,11 +71,9 @@ const CardComponent = ({ {title} {club} -
- + Prize - {prizes} -
- + {date} {month} {venue} From 06373098fa48c2200fbcdc561ee25bd54f0f0a8e Mon Sep 17 00:00:00 2001 From: Lucif3r-in Date: Tue, 3 Oct 2023 21:51:47 +0530 Subject: [PATCH 09/10] fix:minor changes --- src/components/EventCard/styles.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/EventCard/styles.js b/src/components/EventCard/styles.js index 47a70dc..1f50a55 100644 --- a/src/components/EventCard/styles.js +++ b/src/components/EventCard/styles.js @@ -8,9 +8,10 @@ export const CardImage = styled.img` rounded-lg `}; width: 21.25rem; - + aspect-ratio: 1/1; + object-fit: cover; @media (max-width: 768px) { - width: 100%; + width: 16.25; } `; @@ -84,9 +85,8 @@ export const EventRegisterButton = styled(Button)` `; export const CardContainer = styled.div` margin: auto; - width: 420px; + width: 380px; max-width: 400px; - perspective: 1000px; `; export const Card = styled.div` From 83102b4c359ff906a07629e21d39de0f64026726 Mon Sep 17 00:00:00 2001 From: Lucif3r-in Date: Tue, 3 Oct 2023 21:53:26 +0530 Subject: [PATCH 10/10] fix:minor changes --- src/components/EventCard/Card.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/EventCard/Card.jsx b/src/components/EventCard/Card.jsx index 9b27e44..5e0b1c1 100644 --- a/src/components/EventCard/Card.jsx +++ b/src/components/EventCard/Card.jsx @@ -71,7 +71,7 @@ const CardComponent = ({ {title} {club} - + Prize - {prizes} {date} {month}