diff --git a/config/content/Profile.js b/config/content/Profile.js
new file mode 100644
index 0000000..d5ab433
--- /dev/null
+++ b/config/content/Profile.js
@@ -0,0 +1,92 @@
+export const UserData = [
+ {
+ fieldName: 'Name',
+ key: 'name',
+ fieldValue: '',
+ },
+ {
+ fieldName: 'Email',
+ key: 'email',
+ fieldValue: '',
+ },
+ {
+ fieldName: 'Phone',
+ key: 'mobile',
+ fieldValue: '',
+ },
+];
+
+export const RegisteredEvents = [
+ {
+ id: 1,
+ img: 'https://res.cloudinary.com/dme9vltjf/image/upload/v1695674904/got_lungcp.jpg',
+ title: 'A Feast for Crows Helloopooooo',
+ clubName: 'House Frey',
+ date: '17 July',
+ location: 'LA',
+ },
+ {
+ id: 2,
+ img: 'https://res.cloudinary.com/dme9vltjf/image/upload/v1695674904/got_lungcp.jpg',
+ title: 'A Song of Ice and Fire',
+ clubName: 'House Targaryen',
+ date: '17 July',
+ location: 'LA',
+ },
+ {
+ id: 3,
+ img: 'https://res.cloudinary.com/dme9vltjf/image/upload/v1695674904/got_lungcp.jpg',
+ title: 'The Red Wedding',
+ clubName: 'House Lannister',
+ date: '17 July',
+ location: 'LA',
+ },
+ {
+ id: 4,
+ img: 'https://res.cloudinary.com/dme9vltjf/image/upload/v1695674904/got_lungcp.jpg',
+ title: 'A Game of Thrones',
+ clubName: 'House Stark',
+ date: '17 July',
+ location: 'LA',
+ },
+ {
+ id: 5,
+ img: 'https://res.cloudinary.com/dme9vltjf/image/upload/v1695674904/got_lungcp.jpg',
+ title: 'Clash of Kings',
+ clubName: 'House Baratheon',
+ date: '17 July',
+ location: 'LA',
+ },
+ {
+ id: 6,
+ img: 'https://res.cloudinary.com/dme9vltjf/image/upload/v1695674904/got_lungcp.jpg',
+ title: 'A Storm of Swords',
+ clubName: 'House Tyrell',
+ date: '17 July',
+ location: 'LA',
+ },
+ {
+ id: 7,
+ img: 'https://res.cloudinary.com/dme9vltjf/image/upload/v1695674904/got_lungcp.jpg',
+ title: 'A Dance with Dragons',
+ clubName: 'House Targaryen',
+ date: '17 July',
+ location: 'LA',
+ },
+ {
+ id: 8,
+ img: 'https://res.cloudinary.com/dme9vltjf/image/upload/v1695674904/got_lungcp.jpg',
+ title: 'The Winds of Winter',
+ clubName: 'House Stark',
+ date: '17 July',
+ location: 'LA',
+ },
+ {
+ id: 9,
+ img: 'https://res.cloudinary.com/dme9vltjf/image/upload/v1695674904/got_lungcp.jpg',
+ title: 'A Dream of Spring',
+ clubName: 'House Martell',
+ date: '17 July',
+ location: 'LA',
+ },
+];
diff --git a/src/components/User/RegisteredEventCard.jsx b/src/components/User/RegisteredEventCard.jsx
new file mode 100644
index 0000000..c98598f
--- /dev/null
+++ b/src/components/User/RegisteredEventCard.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import {
+ Circle,
+ RegEventCard,
+ RegEventDate,
+ RegEventDetails,
+ RegEventImage,
+ RegEventName,
+ RegEventTitle,
+ RegEventClubname,
+ RegEventKnowMore,
+} from './styles';
+
+const RegisteredEventImage = ({ src }) => ;
+
+const RegisteredEventCard = ({ title, img, clubName, date, location }) => (
+
+
+
+
+ {date}
+
+ {location}
+
+
+ {title}
+ {clubName}
+
+ Know More
+
+
+);
+export default RegisteredEventCard;
diff --git a/src/components/User/User.jsx b/src/components/User/User.jsx
new file mode 100644
index 0000000..56b0aff
--- /dev/null
+++ b/src/components/User/User.jsx
@@ -0,0 +1,54 @@
+import React, { useContext } from 'react';
+import {
+ DetailContainer,
+ Legend,
+ FieldSet,
+ DataValue,
+ DetailWrapper,
+ RegEventContainer,
+} from './styles';
+import { UserData, RegisteredEvents as RegEvents } from '../../../config/content/Profile';
+import { Heading2 } from '../shared';
+import RegisteredEventCard from './RegisteredEventCard';
+import { AuthContext } from '../../utils/Auth';
+
+const DataContainer = ({ name, value }) => (
+
+);
+
+const User = () => {
+ const { userData } = useContext(AuthContext);
+
+ return (
+
+ Your Details
+
+ {UserData.map((item) => (
+
+ ))}
+
+ Registered Events
+
+ {RegEvents.map(({ id, title, img, clubName, date, location }) => (
+
+ ))}
+
+
+ );
+};
+
+export default User;
diff --git a/src/components/User/styles.js b/src/components/User/styles.js
new file mode 100644
index 0000000..1ee7da3
--- /dev/null
+++ b/src/components/User/styles.js
@@ -0,0 +1,196 @@
+import styled from 'styled-components';
+import tw from 'twin.macro';
+
+export const DetailWrapper = styled.div`
+ ${tw`
+ w-[90%]
+ mx-[auto]
+ `}
+`;
+export const DetailContainer = styled.div`
+ ${tw`
+ px-[32px]
+ py-[42px]
+ bg-background-dark
+ rounded-[16px]
+ grid
+ grid-cols-3
+ sm:grid-cols-1
+ gap-6
+ mt-[36px]
+ mb-[48px]
+ `}
+`;
+
+export const FieldSet = styled.fieldset`
+ ${tw`
+ col-span-1
+ `}
+ height: auto;
+ padding: 10px 8px;
+ display: flex;
+ align-items: flex-start;
+ border-radius: 4px;
+ border: 0.4px solid #b8fffb;
+`;
+export const Legend = styled.legend`
+ ${tw`
+ font-Inter
+ text-color-primary
+ `}
+ font-size: 10px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 14px;
+`;
+
+export const DataValue = styled.p`
+ ${tw`
+ font-Inter
+ text-color-primary
+ text-[14px]
+ `}
+`;
+
+export const RegEventContainer = styled.div`
+ ${tw`
+ grid
+ grid-cols-3
+ gap-[20px]
+ mt-[36px]
+ mx-auto
+ `}
+
+ @media (max-width: 1120px) {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ @media (max-width: 639px) {
+ grid-template-columns: repeat(1, 1fr);
+ }
+`;
+
+export const RegEventCard = styled.div`
+ ${tw`
+ h-[176px]
+ min-w-[342px]
+ bg-background-dark
+ rounded-[16px]
+ px-[16px]
+ pt-[16px]
+ pb-[24px]
+ flex
+ gap-[8px]
+ `}
+
+ @media (max-width: 300px) {
+ min-width: 250px;
+ flex-direction: column;
+ height: auto;
+ align-items: center;
+ }
+`;
+export const RegEventImage = styled.img`
+ ${tw`
+ w-[39%]
+ aspect-square
+ rounded-[3px]
+ `}
+ object-fit: fill;
+ @media (max-width: 300px) {
+ width: 80%;
+ }
+`;
+
+export const RegEventDetails = styled.div`
+ ${tw`
+ w-[56%]
+ flex
+ flex-col
+ gap-[20px]
+ justify-between
+ `}
+
+ @media (max-width: 300px) {
+ width: 80%;
+ text-align: center;
+ }
+`;
+
+export const RegEventDate = styled.div`
+ ${tw`
+ flex
+ gap-[8px]
+ text-[16px]
+ text-color-secondary
+ `}
+ font-family: Noto Sans, serif;
+ font-style: normal;
+ font-weight: 600;
+ line-height: normal;
+ letter-spacing: 0.32px;
+
+ @media (max-width: 300px) {
+ margin: 0 auto;
+ }
+`;
+
+export const Circle = styled.div`
+ ${tw`
+ w-[5px]
+ h-[5px]
+ bg-color-secondary
+ border-[1px]
+ border-solid
+ border-color-secondary
+ rounded-full
+ my-auto
+ `}
+`;
+
+export const RegEventName = styled.div`
+ ${tw`
+ flex
+ flex-col
+ gap-[4px]
+ `}
+`;
+export const RegEventTitle = styled.div`
+ ${tw`
+ font-Roslindale
+ text-color-primary
+ text-[24px]
+ italic
+ font-[600]
+ `}
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ line-height: normal;
+ letter-spacing: 0.48px;
+`;
+export const RegEventClubname = styled.p`
+ ${tw`
+ text-color-tertiary
+ text-[14px]
+ font-[500]
+ `}
+ font-family: Noto Sans, sans-serif;
+ font-style: normal;
+ line-height: normal;
+ letter-spacing: 0.28px;
+`;
+
+export const RegEventKnowMore = styled.div`
+ ${tw`
+ cursor-pointer
+ `}
+ color: #FFF;
+ font-family:
+ Noto Sans,
+ sans-serif;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+`;
diff --git a/src/pages/playground.js b/src/pages/playground.js
index 9876416..8e847f4 100644
--- a/src/pages/playground.js
+++ b/src/pages/playground.js
@@ -1,6 +1,7 @@
/* eslint-disable jsx-a11y/click-events-have-key-events */
import React from 'react';
import { Helmet } from 'react-helmet';
+
import { Layout } from '../components';
import FAQSection from '../components/FAQSection/FAQSection';
@@ -11,6 +12,7 @@ const Playground = () => (
Playground
+
diff --git a/src/utils/Auth.jsx b/src/utils/Auth.jsx
index 536df8d..9ee0fbe 100644
--- a/src/utils/Auth.jsx
+++ b/src/utils/Auth.jsx
@@ -37,10 +37,13 @@ const AuthContextProvider = ({ children }) => {
const _cancelSubscription = onAuthStateChanged(auth, async (user) => {
if (user) {
setAuthenticated(true);
- setUserData(user);
setToken(user.accessToken);
- await api.fetchUserDetails({ uid: user.uid, accessToken: user.accessToken });
+ const avenueUser = await api.fetchUserDetails({
+ uid: user.uid,
+ accessToken: user.accessToken,
+ });
+ setUserData(avenueUser);
} else {
setAuthenticated(false);
setUserData({});