feat: add event card

gatsby-browser.js

@@ -71,6 +71,6 @@ export const wrapPageElement = ({ element, props }) => (
 export const wrapRootElement = ({ element }) => (
   <QueryClientProvider client={queryClient}>
     <AuthContextProvider>{element}</AuthContextProvider>
-    <ToastContainer />
+    <ToastContainer position='bottom-right' autoClose={5000} />
   </QueryClientProvider>
 );

gatsby-ssr.js

@@ -70,6 +70,6 @@ export const wrapPageElement = ({ element, props }) => (
 export const wrapRootElement = ({ element }) => (
   <QueryClientProvider client={queryClient}>
     <AuthContextProvider>{element}</AuthContextProvider>
-    <ToastContainer />
+    <ToastContainer position='bottom-right' autoClose={3000} />
   </QueryClientProvider>
 );

src/components/EventCard/Card.jsx

@@ -0,0 +1,100 @@
+/* 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 (
+    <CardContainer>
+      <Card style={{ transform: isFlipped ? 'rotateY(180deg)' : 'rotateY(0)' }}>
+        <Front>
+          <CardImage src={poster} alt={club} />
+          <CardTextContainer>
+            <CardTitleContainer>
+              <EventTimeVenue>
+                {date} {month}
+                <Circle />
+                {time}
+                <Circle />
+                {venue}
+              </EventTimeVenue>
+            </CardTitleContainer>
+            <CardTitleContainer>
+              <EventName>{title}</EventName>
+              <EventClub>{club}</EventClub>
+            </CardTitleContainer>
+          </CardTextContainer>
+          <CardButtonContainer>
+            <KnowButton text='Know More' onClick={flipCard} />
+            <EventRegisterButton variant='outline' text='Register For Event' />
+          </CardButtonContainer>
+        </Front>
+        <Back>
+          <CardTitleContainer>
+            <EventName style={{ marginTop: 0 }}>{title}</EventName>
+            <EventClub>{club}</EventClub>
+          </CardTitleContainer>
+          <div style={{ padding: '1rem' }} />
+          <CardTitleContainer>
+            <EventTimeVenue>
+              {date} {month}
+              <Circle />
+              {venue}
+            </EventTimeVenue>
+          </CardTitleContainer>
+          <ul className='list-none p-0 flex flex-col gap-2'>
+            {description?.map((desc) => (
+              <li key={desc.id}>
+                <BackDescription>{desc.desc}</BackDescription>
+              </li>
+            ))}
+          </ul>
+          <Body2>Contact: {contact?.join(', ')}</Body2>
+          <CardButtonContainer>
+            <KnowButton text='Back' onClick={bringToFront} />
+            <EventRegisterButton variant='outline' text='Register For Event' />
+          </CardButtonContainer>
+        </Back>
+      </Card>
+    </CardContainer>
+  );
+};
+
+export default CardComponent;

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` flex items-center`}
+`;
+
+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;
+`;

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();
 

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 (
+    <div>
+      <h1>Events</h1>
+    </div>
+  );
+};
+
+export default EventPage;

src/pages/playground.js

@@ -1,18 +1,34 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events */
 import React from 'react';
 import { Helmet } from 'react-helmet';
-import { About } from '../components/shared';
-import AboutUs from '../../config/content/AboutUs';
+import CardComponent from '../components/EventCard/Card';
+import useEvents from '../utils/useEvents';
 
-const Playground = () => (
-  <>
-    <Helmet>
-      <meta charset='utf-8' />
-      <title>Playground</title>
-      <meta name='description' content='This is playground' />
-    </Helmet>
-    <About title={AboutUs.title} desc={AboutUs.desc} link={AboutUs.link} />
-  </>
-);
+const Playground = () => {
+  const { events } = useEvents('technical');
+
+  return (
+    <>
+      <Helmet>
+        <meta charset='utf-8' />
+        <title>Playground</title>
+        <meta name='description' content='This is playground' />
+      </Helmet>
+      <CardComponent
+        key={events[0]?.id}
+        id={events[0]?.id}
+        title={events[0]?.title}
+        club={events[0]?.club}
+        venue={events[0]?.venue}
+        time={events[0]?.time}
+        date={events[0]?.date}
+        month={events[0]?.month}
+        prizes={events[0]?.prizes}
+        description={events[0]?.description}
+        contact={events[0]?.contact}
+        poster={events[0]?.poster}
+      />
+    </>
+  );
+};
 
 export default Playground;

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 },
     });
   }
 

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 <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
 };