diff --git a/components/Alert/Alert.mocks.tsx b/components/Alert/Alert.mocks.tsx new file mode 100644 index 0000000..2f66bab --- /dev/null +++ b/components/Alert/Alert.mocks.tsx @@ -0,0 +1,11 @@ +import { IAlertProps } from '.'; + +const MockAlert: IAlertProps = { + autoClose: true, + id: '1', + message: 'This is a message', + onClose: () => {}, + type: 'success', +}; + +export default MockAlert; diff --git a/components/Alert/Alert.module.scss b/components/Alert/Alert.module.scss new file mode 100644 index 0000000..7575238 --- /dev/null +++ b/components/Alert/Alert.module.scss @@ -0,0 +1,30 @@ +.alert { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 60vw; + border-radius: 10px; + padding: 15px; + margin: 10px; + color: black; + + span { + p { + color: black; + } + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + } + button { + background-color: white; + border-radius: 5px; + padding: 5px; + border: none; + cursor: pointer; + box-shadow: 2px 2px 2px grey; + color: black; + } +} diff --git a/components/Alert/Alert.stories.tsx b/components/Alert/Alert.stories.tsx new file mode 100644 index 0000000..e9f5c00 --- /dev/null +++ b/components/Alert/Alert.stories.tsx @@ -0,0 +1,16 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import Alert, { IAlertProps } from '.'; +import MockAlert from './Alert.mocks'; + +export default { + title: 'Components/Alert', + component: Alert, + argTypes: {}, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ; + +export const Basic = Template.bind({}); +Basic.args = { + ...MockAlert, +} as IAlertProps; diff --git a/components/Alert/index.tsx b/components/Alert/index.tsx new file mode 100644 index 0000000..8a38da3 --- /dev/null +++ b/components/Alert/index.tsx @@ -0,0 +1,54 @@ +import React from 'react'; +import { Button } from '..'; +import styles from './Alert.module.scss'; + +export interface IAlertProps { + id: string; + message: string; + autoClose: boolean; + type: string; + onClose: (id: string) => void; +} + +function getBgColor(type: string) { + switch (type) { + case 'success': + return 'lightgreen'; + case 'error': + return 'lightred'; + case 'warning': + return 'lightyellow'; + case 'info': + return 'lightblue'; + default: + return 'lightblue'; + } +} +const Alert: React.FC = ({ + id, + message, + autoClose, + type, + onClose, +}) => { + const bgcolor = getBgColor(type); + return ( +
+ +

{type}

:

{message}

+ + {!autoClose && ( + + )} +
+ ); +}; + +export default Alert; diff --git a/components/Landing Page/EventsSection/EventSection.module.scss b/components/Landing Page/EventsSection/EventSection.module.scss new file mode 100644 index 0000000..bc3784d --- /dev/null +++ b/components/Landing Page/EventsSection/EventSection.module.scss @@ -0,0 +1,74 @@ +@import '../../../styles/commons.scss'; + +.event_section { + @extend .flexRow; + height: 100vh; + background-color: black; + color: white; + + .left_section, + .right_section { + height: 100%; + width: 50%; + } + + .left_section { + position: relative; + @extend .flexCol; + h1 { + font-family: serif; + } + .college_name { + position: absolute; + top: 33%; + left: 20%; + color: #ffffff80; + } + } + + .right_section { + @extend .flexRow; + gap: 15px; + position: relative; + overflow: hidden; + .column_one, + .column_two, + .column_three { + overflow: hidden; + position: absolute; + @extend .flexCol; + width: 35%; + height: 100vh; + gap: 15px; + .halfcard { + height: 50%; + width: 100%; + background-color: #ffffff30; + border-radius: 20px; + } + .card { + height: 550px; + width: 100%; + background-color: #ffffff30; + border-radius: 20px; + span { + height: 100% !important; + width: 100% !important; + } + } + top: 0; + left: 0; + } + .column_one { + top: 80px; + left: 4%; + } + .column_two { + top: -80px; + left: 42%; + } + .column_three { + left: 80%; + } + } +} diff --git a/components/Landing Page/EventsSection/EventSection.tsx b/components/Landing Page/EventsSection/EventSection.tsx new file mode 100644 index 0000000..e192969 --- /dev/null +++ b/components/Landing Page/EventsSection/EventSection.tsx @@ -0,0 +1,59 @@ +import { motion, useScroll, useTransform } from 'framer-motion'; +import Image from 'next/image'; +import { useRef } from 'react'; +import imageOne from '../../../public/Images/IET_EVENTS/IET_EVENTS_IMG1.png'; +import imageTwo from '../../../public/Images/IET_EVENTS/IET_EVENTS_IMG2.png'; +import imageThree from '../../../public/Images/IET_EVENTS/IET_EVENTS_IMG3.png'; + +import styles from './EventSection.module.scss'; + +type Props = {}; + +const EventSection = (props: Props) => { + const ref = useRef(null); + const scrollRef = useRef(null); + const { scrollYProgress } = useScroll({ + target: ref, + offset: ['start end', 'end end'], + }); + const x = useTransform(scrollYProgress, [0, 1], [0, 150]); + const y1 = useTransform(scrollYProgress, [0, 1], [-500, -50]); + const y2 = useTransform(scrollYProgress, [0, 1], [-100, 50]); + const y3 = useTransform(scrollYProgress, [0, 1], [-100, 250]); + return ( +
+
+ + IET + +

Events

+
+
+ +
+
+ +
+
+ + +
+
+ +
+
+ +
+
+ + +
+
+
+ +
+
+ ); +}; + +export default EventSection; diff --git a/package.json b/package.json index 7d32ab8..7841074 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "dependencies": { "axios": "^1.1.3", "clsx": "^1.2.1", + "framer-motion": "^9.0.1", "next": "12.3.1", "react": "18.2.0", "react-dom": "18.2.0" diff --git a/pages/Home.module.scss b/pages/Home.module.scss index 19cf6b6..5bd2e4e 100644 --- a/pages/Home.module.scss +++ b/pages/Home.module.scss @@ -2,6 +2,5 @@ .main { @extend .flexCol; - width: 100vw; - min-height: 100vh; + height: 100vh; } diff --git a/pages/_app.tsx b/pages/_app.tsx index 8b0a1be..1a3de74 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,9 +1,14 @@ import type { AppProps } from 'next/app'; import '../styles/globals.scss'; +import AlertContextProvider from '../utils/contexts/AlertContext'; // eslint-disable-next-line react/function-component-definition -function MyApp({ Component, pageProps }: AppProps) { - return ; -} +const MyApp = ({ Component, pageProps }: AppProps) => { + return ( + + + + ); +}; export default MyApp; diff --git a/pages/index.tsx b/pages/index.tsx index a2b107e..c39d5f7 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,20 +1,24 @@ import type { NextPage } from 'next'; import Head from 'next/head'; +import EventSection from '../components/Landing Page/EventsSection/EventSection'; import styles from './Home.module.scss'; -const Home: NextPage = () => ( -
- - IET DAVV - - - +const Home: NextPage = () => { + return ( +
+ + IET DAVV + + + -
-

IET DAVV Website

-

hello

-
-
-); +
+

IET DAVV Website

+

hello

+
+ +
+ ); +}; export default Home; diff --git a/public/Images/IET_EVENTS/IET_EVENTS_IMG1.png b/public/Images/IET_EVENTS/IET_EVENTS_IMG1.png new file mode 100644 index 0000000..aa9b616 Binary files /dev/null and b/public/Images/IET_EVENTS/IET_EVENTS_IMG1.png differ diff --git a/public/Images/IET_EVENTS/IET_EVENTS_IMG2.png b/public/Images/IET_EVENTS/IET_EVENTS_IMG2.png new file mode 100644 index 0000000..a9eb424 Binary files /dev/null and b/public/Images/IET_EVENTS/IET_EVENTS_IMG2.png differ diff --git a/public/Images/IET_EVENTS/IET_EVENTS_IMG3.png b/public/Images/IET_EVENTS/IET_EVENTS_IMG3.png new file mode 100644 index 0000000..5ca4f45 Binary files /dev/null and b/public/Images/IET_EVENTS/IET_EVENTS_IMG3.png differ diff --git a/utils/contexts/AlertContext.tsx b/utils/contexts/AlertContext.tsx new file mode 100644 index 0000000..68e354d --- /dev/null +++ b/utils/contexts/AlertContext.tsx @@ -0,0 +1,135 @@ +import React, { createContext, useMemo, useState } from 'react'; +import Alert from '../../components/Alert'; +/*global NodeJS */ + +interface IAlertContext { + Message: () => { + success: ( + message: string, + autoClose?: boolean, + duration?: number + ) => NodeJS.Timeout | undefined; + error: ( + message: string, + autoClose?: boolean, + duration?: number + ) => NodeJS.Timeout | undefined; + warning: ( + message: string, + autoClose?: boolean, + duration?: number + ) => NodeJS.Timeout | undefined; + }; +} + +export const AlertContext = createContext({} as IAlertContext); + +interface AlertContextProviderProps { + children: React.ReactNode; +} +interface IAlert { + id: string; + message: string; + autoClose: boolean; + type: 'warning' | 'error' | 'success'; +} + +const AlertContextProvider: React.FC = ({ + children, +}) => { + const [Alerts, setAlerts] = useState>([]); + + const Message = useMemo(() => { + return () => { + const id = (Math.random() * 100 + 100).toLocaleString(); + const res = { + success: ( + message: string, + autoClose: boolean = true, + duration: number = 1000 + ) => { + setAlerts((state) => [ + ...state, + { + message, + autoClose, + type: 'success', + id, + }, + ]); + if (autoClose) { + return setTimeout(() => { + setAlerts((state) => state.filter((value) => value.id !== id)); + }, duration); + } + return undefined; + }, + error: ( + message: string, + autoClose: boolean = true, + duration: number = 1000 + ) => { + setAlerts((state) => [ + ...state, + { + message, + autoClose, + type: 'error', + id, + }, + ]); + if (autoClose) { + return setTimeout(() => { + setAlerts((state) => state.filter((value) => value.id !== id)); + }, duration); + } + return undefined; + }, + warning: ( + message: string, + autoClose: boolean = true, + duration: number = 1000 + ) => { + setAlerts((state) => [ + ...state, + { + message, + autoClose, + type: 'warning', + id, + }, + ]); + if (autoClose) { + return setTimeout(() => { + setAlerts((state) => state.filter((value) => value.id !== id)); + }, duration); + } + return undefined; + }, + }; + return res; + }; + }, []); + function onClose(id: string) { + return setAlerts((state) => state.filter((value) => value.id !== id)); + } + return ( + +
+ {Alerts?.length !== 0 && + Alerts.map((alert) => ( + + ))} +
+ {children} + + ); +}; +export default AlertContextProvider;