feat: added user page (#65)

* feat: added user page * feat: add user details and ran prettier --------- Co-authored-by: Ashish Padhy <100484401+Shurtu-gal@users.noreply.github.com>
dscnitrourkela · Sep 27, 2023 · 19005e2 · 19005e2
1 parent d6cd511
commit 19005e2
Show file tree

Hide file tree

Showing 6 changed files with 382 additions and 2 deletions.
diff --git a/config/content/Profile.js 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
@@ -0,0 +1,33 @@
+import React from 'react';
+import {
+  Circle,
+  RegEventCard,
+  RegEventDate,
+  RegEventDetails,
+  RegEventImage,
+  RegEventName,
+  RegEventTitle,
+  RegEventClubname,
+  RegEventKnowMore,
+} from './styles';
+
+const RegisteredEventImage = ({ src }) => <RegEventImage src={src} alt='Event Image' />;
+
+const RegisteredEventCard = ({ title, img, clubName, date, location }) => (
+  <RegEventCard>
+    <RegisteredEventImage src={img} />
+    <RegEventDetails>
+      <RegEventDate>
+        <p>{date}</p>
+        <Circle />
+        <p>{location}</p>
+      </RegEventDate>
+      <RegEventName>
+        <RegEventTitle>{title}</RegEventTitle>
+        <RegEventClubname>{clubName}</RegEventClubname>
+      </RegEventName>
+      <RegEventKnowMore>Know More</RegEventKnowMore>
+    </RegEventDetails>
+  </RegEventCard>
+);
+export default RegisteredEventCard;
diff --git a/src/components/User/User.jsx 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 }) => (
+  <FieldSet>
+    <Legend align='left'>{name}</Legend>
+    <DataValue>{value}</DataValue>
+  </FieldSet>
+);
+
+const User = () => {
+  const { userData } = useContext(AuthContext);
+
+  return (
+    <DetailWrapper>
+      <Heading2>Your Details</Heading2>
+      <DetailContainer>
+        {UserData.map((item) => (
+          <DataContainer
+            key={item.key}
+            name={item.fieldName}
+            value={userData[item.key] || item.value}
+          />
+        ))}
+      </DetailContainer>
+      <Heading2>Registered Events</Heading2>
+      <RegEventContainer>
+        {RegEvents.map(({ id, title, img, clubName, date, location }) => (
+          <RegisteredEventCard
+            key={id}
+            title={title}
+            img={img}
+            clubName={clubName}
+            date={date}
+            location={location}
+          />
+        ))}
+      </RegEventContainer>
+    </DetailWrapper>
+  );
+};
+
+export default User;
diff --git a/src/components/User/styles.js 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
@@ -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 = () => (
       <title>Playground</title>
       <meta name='description' content='This is playground' />
     </Helmet>
+    <User />
     <Layout>
       <FAQSection />
     </Layout>