diff --git a/app/achievements/data.ts b/app/achievements/data.ts index df41697..e320051 100644 --- a/app/achievements/data.ts +++ b/app/achievements/data.ts @@ -1,9 +1,16 @@ -// import blocksData from '@/types/Block/blockCard.types +import blocksData from '@/types/Block/blockCard.types' +import basic_img from '@/public/Projects/Images/GRAND.png' -// const data: blocksData = [ -// { -// heading: 'Inter IIT TechMeet 11', -// }, -// ] +const data: blocksData = [ + { + heading: 'Inter IIT TechMeet 11', + time: 'May', + content: + 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.', + knowMoreLink: 'https://www.granddecoder.mit.edu/', + image: basic_img.src, + }, + // other achievements +] -// export default data +export default data diff --git a/app/achievements/page.module.css b/app/achievements/page.module.css index e69de29..5079e7d 100644 --- a/app/achievements/page.module.css +++ b/app/achievements/page.module.css @@ -0,0 +1,4 @@ +.achievementsWrapper { + background-color: var(--primary-light-pastel-gray); + background-image: url(/Events/micro_carbon.png); +} diff --git a/app/achievements/page.tsx b/app/achievements/page.tsx index 35e14cc..dedd9a9 100644 --- a/app/achievements/page.tsx +++ b/app/achievements/page.tsx @@ -1,7 +1,26 @@ -// Make this page like projects +'use client' -const page = () => { - return <> -} +import React, { useState, useEffect } from 'react' +import axios from 'axios' +import Block from '@/components/Block/Block' +import styles from './page.module.css' + +export default function Events() { + const [eventsData, setEventsData] = useState([]) + + const getEvents = () => { + axios.get('/api/admin/achievements').then(response => { + setEventsData(response.data) + }) + } -export default page + useEffect(() => { + getEvents() + }, []) + + return ( +
+ +
+ ) +} diff --git a/app/events/page.tsx b/app/events/page.tsx index d55035d..9caae44 100644 --- a/app/events/page.tsx +++ b/app/events/page.tsx @@ -1,14 +1,26 @@ -import data from './data' -import Block from '@/components/Block/Block' +'use client' +import React, { useState, useEffect } from 'react' +import axios from 'axios' +import Block from '@/components/Block/Block' import styles from './page.module.css' export default function Events() { + const [eventsData, setEventsData] = useState([]) + + const getEvents = () => { + axios.get('/api/admin/events').then(response => { + setEventsData(response.data) + }) + } + + useEffect(() => { + getEvents() + }, []) + return ( - <> -
- -
- +
+ +
) } diff --git a/app/layout.tsx b/app/layout.tsx index cb6c47c..1de26ab 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -9,7 +9,7 @@ const inter = Inter({ subsets: ['latin'] }) export const metadata = { title: 'Coding Club Website', - description: 'Coded by Shubh Agarwal (https://github.com/ShubhAgarwal-dev)', + description: 'The official website of the Coding Club of IIT Dharwad', } interface RootLayoutProps { diff --git a/app/members/page.module.css b/app/members/page.module.css index 649a00e..5d47e03 100644 --- a/app/members/page.module.css +++ b/app/members/page.module.css @@ -4,9 +4,137 @@ } .membersWrapper { + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, + 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', + 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; padding-top: 6rem; background-color: var(--primary-light-pastel-gray); background-image: url(/Events/micro_carbon.png); padding-bottom: 3rem; min-height: 100vh; + font-weight: normal; +} + +/* Styles for admin/members page here */ +.addButton { + color: white; + background-color: #212830; + border-radius: 4px; + margin: 3px; + padding: 4px; + margin: 2px auto; + cursor: pointer; + transition: 0.3s; + font-size: large; + width: 125px; + box-shadow: 2px 2px 0 0 black; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, + 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', + 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; +} + +.addButton:hover { + color: white; + background: black; + box-shadow: 2px 2px 0 0 white; +} + +.membersModal { + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, + 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', + 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; + margin: auto; + width: 65%; + height: fit-content; + justify-content: center; + align-items: center; + background: #e1e1e1; + background-color: rgb(46, 46, 46); + top: 0; + left: 0; + bottom: 0; + right: 0; + position: absolute; + padding: 1% 2%; + -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); + -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); + box-shadow: 0 0 10px rgba(0, 0, 0, 4); + text-align: center; + color: white; + border-radius: 10px; +} + +.membersModal > h1 { + font-size: larger; + font-weight: 600; + text-align: center; + margin-top: 2%; + margin-bottom: 4%; +} + +.membersModal * input, +.membersModal * select { + width: 80%; + resize: vertical; + padding: 1vh; + border-radius: 5px; + border: 0; + background-color: rgb(0, 0, 0); +} + +.membersModal * button { + color: white; + background-color: black; + border-radius: 5px; + padding: 4px; + cursor: pointer; + transition: 0.3s; + font-size: large; + width: 10%; + min-width: fit-content; + margin: 2%; + justify-content: center; +} +.membersModal * button:hover { + color: black; + background: white; + box-shadow: 3px 3px 0 0 black; +} + +.membersModal * label { + text-align: right; + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-content: flex-end; + width: 80%; + align-items: center; + margin: 1vh auto; + justify-content: space-between; +} + +.errorBox { + position: absolute; + top: 5%; + left: 50%; + transform: translateX(-50%); + z-index: 101; + font-size: larger; +} + +@media (max-width: 768px) { + .membersModal, + .errorBox { + width: 95%; + font-size: smaller; + padding: 1px 0px; + } + .membersModal * label { + flex-direction: row; + margin-top: 3px 0px; + } + .membersModal * input, + .membersModal * select { + width: 60%; + } } diff --git a/app/members/page.tsx b/app/members/page.tsx index b22f1fd..83fcdb8 100644 --- a/app/members/page.tsx +++ b/app/members/page.tsx @@ -1,17 +1,14 @@ 'use client' +import React, { useState, useRef, useEffect } from 'react' import { Tabs, type TabsRef } from 'flowbite-react' import Loading from '@/components/Loading/Loading' import InfoTable from '@/components/Table/InfoTable' -import React, { useState, useRef, useEffect } from 'react' - import styles from './page.module.css' - import { FOSS } from '@/types/Members/foss.types' import { CP } from '@/types/Members/cp.types' import { GD } from '@/types/Members/gd.types' import { members } from '@/types/Members/members.types' - import { SiBmcsoftware, SiCodeforces } from 'react-icons/si' import { IoGameController } from 'react-icons/io5' import { IoIosPeople } from 'react-icons/io' @@ -19,9 +16,8 @@ import { IoIosPeople } from 'react-icons/io' import Header from '@/components/Members/Header' const MEMBERS_REVALIDATION_TIME = 60 * 60 * 12 -// Keep this very high in the deployed version -const Page = async () => { +const Page = () => { const [memArr, setMemArr] = useState([[]]) const [cpArr, setCpArr] = useState([[]]) const [gdArr, setGdArr] = useState([[]]) @@ -192,12 +188,12 @@ const Page = async () => { )} - + {cpArr ? ( ) : ( diff --git a/app/projects/page.tsx b/app/projects/page.tsx index 1252344..d85207d 100644 --- a/app/projects/page.tsx +++ b/app/projects/page.tsx @@ -1,19 +1,26 @@ -import Block from '@/components/Block/Block' -import data from './data' +'use client' +import React, { useState, useEffect } from 'react' +import axios from 'axios' +import Block from '@/components/Block/Block' import styles from './page.module.css' -export const metadata = { - title: 'Projects for Coding Club', - description: 'Coded by Shubh Agarwal (https://github.com/ShubhAgarwal-dev)', -} +export default function Events() { + const [eventsData, setEventsData] = useState([]) + + const getEvents = () => { + axios.get('/api/admin/projects').then(response => { + setEventsData(response.data) + }) + } + + useEffect(() => { + getEvents() + }, []) -export default function Project() { return ( - <> -
- -
- +
+ +
) } diff --git a/app/protectedLayouts.tsx b/app/protectedLayouts.tsx index 7266004..0b73773 100644 --- a/app/protectedLayouts.tsx +++ b/app/protectedLayouts.tsx @@ -1,22 +1,21 @@ -// components/layouts/protectedLayouts.tsx - import { useSession } from 'next-auth/react' import { useRouter } from 'next/router' import { useEffect } from 'react' - -type Props = { - children: React.ReactElement +import AppBarAdmin from './../components/AppBar/AppBarAdmin' +import Footer from '@/components/Footer/Footer' +import './globals.css' +import AppBar from '@/components/AppBar/AppBar' +import './globals.css' +import { Inter } from 'next/font/google' +import { ReactNode } from 'react' +import { NextAuthProvider } from './../pages/provider' + +interface RootLayoutProps { + // Use interface for prop types + children: ReactNode } -/* - add the requireAuth property to the page component - to protect the page from unauthenticated users - e.g.: - OrderDetail.requireAuth = true; - export default OrderDetail; - */ - -const ProtectedLayout = ({ children }: Props): JSX.Element => { +function ProtectedLayout({ children }: RootLayoutProps) { const router = useRouter() const { status: sessionStatus } = useSession() const authorized = sessionStatus === 'authenticated' @@ -24,11 +23,8 @@ const ProtectedLayout = ({ children }: Props): JSX.Element => { const loading = sessionStatus === 'loading' useEffect(() => { - // check if the session is loading or the router is not ready if (loading || !router.isReady) return - // if the user is not authorized, redirect to the login page - // with a return url to the current page if (unAuthorized) { console.log('not authorized') router.push({ @@ -37,14 +33,19 @@ const ProtectedLayout = ({ children }: Props): JSX.Element => { } }, [loading, unAuthorized, sessionStatus, router]) - // if the user refreshed the page or somehow navigated to the protected page if (loading) { - return <>Loading app... + return <>Loading app... //need to change to loading screen } - // if the user is authorized, render the page - // otherwise, render nothing while the router redirects him to the login page - return authorized ?
{children}
: <> + return authorized ? ( + <> + +
{children}
+