Big Heading
28 |
23 |
27 |
28 | About
29 |
30 |
34 |
35 | FAQ
36 |
37 |
38 |
14 |
17 | {({ active }) => (
18 |
26 | )}
27 |
28 | ))}
29 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/components/AppHeader2/AdminNavbarGrid.tsx:
--------------------------------------------------------------------------------
1 | import { Menu } from '@headlessui/react';
2 |
3 | interface AdminNavbarGridProps {
4 | numCols?: number;
5 | sectionTitle: string;
6 | options: Array<{
7 | optionName: string;
8 | onClick: () => void;
9 | }>;
10 | }
11 |
12 | export default function AdminNavbarGrid({
13 | sectionTitle,
14 | options,
15 | numCols = 3,
16 | }: AdminNavbarGridProps) {
17 | return (
18 | {sectionTitle}
15 | {options.map((option) => ( 16 |
19 |
37 | );
38 | }
39 |
--------------------------------------------------------------------------------
/components/AppHeader2/QRCodeReaderV2.tsx:
--------------------------------------------------------------------------------
1 | import QrScanner from 'qr-scanner';
2 | import { useEffect, useRef, useState } from 'react';
3 |
4 | interface QRCodeReaderV2Props {
5 | onScanSuccess: (result: QrScanner.ScanResult) => void;
6 | onScanFail: (err: string | Error) => void;
7 | }
8 |
9 | export default function QRCodeReaderV2({ onScanSuccess, onScanFail }) {
10 | const scanner = useRef{sectionTitle}
20 |
21 | {options.map((option) => (
22 |
23 | {({ active }) => (
24 |
32 | )}
33 |
34 | ))}
35 |
36 |
45 |
46 |
47 | );
48 | }
49 |
--------------------------------------------------------------------------------
/components/AppHeader2/visual1-no_offset.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/acmutd/hackportal/ffaaafd00c6ff345284c015c5dd4136b48cbacb1/components/AppHeader2/visual1-no_offset.jpeg
--------------------------------------------------------------------------------
/components/AppHeader2/visual2-with_offset.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/acmutd/hackportal/ffaaafd00c6ff345284c015c5dd4136b48cbacb1/components/AppHeader2/visual2-with_offset.jpeg
--------------------------------------------------------------------------------
/components/AppHeader2/wrapper.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef, useState } from 'react';
2 |
3 | import clsx from 'clsx';
4 | import AppHeader2_Core from './core';
5 |
6 | export const APP_HEADER_HEIGHT = 86;
7 | const INITIAL_HEADER_HEIGHT = APP_HEADER_HEIGHT;
8 | const TOP_OFFSET = 0; // Can be set to APP_HEADER_HEIGHT if want to app bar to be separated from the Hero part
9 |
10 | export default function AppHeader2_Wrapper() {
11 | // Handle scrolling state
12 |
13 | const [height, setHeight] = useState(INITIAL_HEADER_HEIGHT);
14 |
15 | const prevScrollY = useRef(0);
16 | const appHeaderRef = useRef
100 |
102 |
18 |
28 | );
29 | }
30 |
--------------------------------------------------------------------------------
/components/BackgroundCircles.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useMemo, useRef, useState } from 'react';
2 | import { Container, ISourceOptions, RotateDirection } from '@tsparticles/engine';
3 | import Particles from './Particles';
4 | import { useParticles } from './Particles/ParticlesProvider';
5 |
6 | export default function BackgroundCircles() {
7 | const { state: particlesState } = useParticles();
8 |
9 | const [windowWidth, setWindowWidth] = useState(0);
10 | const [windowHeight, setWindowHeight] = useState(0);
11 | const timeoutSetWindowSize = useRef(-1);
12 |
13 | // tsparticles does not have documentation on size.value unit
14 | // after experimenting with it, the scaling factor to convert from pixels to size.value is to multiply pixels with 0.5
15 | const scaleFactor = 0.5;
16 |
17 | const particlesLoaded = (_container?: Container) => {
18 | return Promise.resolve();
19 | };
20 |
21 | useEffect(() => {
22 | const resizeHandler = () => {
23 | if (timeoutSetWindowSize.current) {
24 | window.clearTimeout(timeoutSetWindowSize.current);
25 | }
26 |
27 | timeoutSetWindowSize.current = window.setTimeout(() => {
28 | setWindowWidth(window.innerWidth);
29 | setWindowHeight(window.innerHeight);
30 | }, 200);
31 | };
32 |
33 | resizeHandler(); // Init
34 | window.addEventListener('resize', resizeHandler);
35 |
36 | return () => {
37 | window.removeEventListener('resize', resizeHandler);
38 | };
39 | }, []);
40 |
41 | const options = useMemo
11 | {
15 | onClose();
16 | }}
17 | />
18 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/components/ErrorList.tsx:
--------------------------------------------------------------------------------
1 | import ErrorCard from './ErrorCard';
2 |
3 | interface ErrorListProps {
4 | errors: string[];
5 | onClose: (idx: number) => void;
6 | }
7 |
8 | export default function ErrorList({ errors, onClose }: ErrorListProps) {
9 | return (
10 | {errorMsg}
12 |
11 | {errors.map((error, idx) => (
12 | {
16 | onClose(idx);
17 | }}
18 | />
19 | ))}
20 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/components/LoadIcon.tsx:
--------------------------------------------------------------------------------
1 | export interface LoadIconProps {
2 | width: number;
3 | height: number;
4 | }
5 | export default function LoadIcon({ width, height }: LoadIconProps) {
6 | return (
7 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/components/NavLink.tsx:
--------------------------------------------------------------------------------
1 | import { useRouter } from 'next/router';
2 | import Link from 'next/link';
3 | import PropTypes from 'prop-types';
4 |
5 | NavLink.propTypes = {
6 | href: PropTypes.string.isRequired,
7 | exact: PropTypes.bool,
8 | activeOptions: PropTypes.string, //css options when link is active
9 | };
10 |
11 | NavLink.defaultProps = {
12 | exact: false,
13 | };
14 |
15 | function NavLink({ href, exact, activeOptions, children, ...props }) {
16 | const { pathname } = useRouter();
17 | const isActive = exact ? pathname === href : pathname.startsWith(href);
18 |
19 | if (isActive) {
20 | props.className += ' active ' + activeOptions;
21 | }
22 |
23 | return (
24 |
25 | {children}
26 |
27 | );
28 | }
29 |
30 | export default NavLink;
31 |
--------------------------------------------------------------------------------
/components/Particles/IParticlesProps.ts:
--------------------------------------------------------------------------------
1 | import type { Container, ISourceOptions } from '@tsparticles/engine';
2 | import type { CSSProperties } from 'react';
3 |
4 | export interface IParticlesProps {
5 | id?: string;
6 | options?: ISourceOptions;
7 | url?: string;
8 | style?: CSSProperties;
9 | className?: string;
10 | particlesLoaded?: (container?: Container) => Promise
21 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/components/adminComponents/AdminStatsCard.tsx:
--------------------------------------------------------------------------------
1 | import { SvgIconTypeMap } from '@mui/material';
2 | import { OverridableComponent } from '@mui/material/OverridableComponent';
3 |
4 | interface AdminStatsCardProps {
5 | title: string;
6 | value: number;
7 | icon: any;
8 | }
9 |
10 | export default function AdminStatsCard({ title, value, icon }: AdminStatsCardProps) {
11 | return (
12 | {name}
22 |
13 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/components/adminComponents/FilterComponent.tsx:
--------------------------------------------------------------------------------
1 | import Checkbox from '@mui/material/Checkbox';
2 | import { blue } from '@mui/material/colors';
3 |
4 | interface FilterComponentProps {
5 | title: string;
6 | checked: boolean;
7 | onCheck: () => void;
8 | }
9 |
10 | export default function FilterComponent({ title, checked, onCheck }: FilterComponentProps) {
11 | const CustomCheckbox = () => (
12 |
14 | {icon}
15 |
20 |
16 |
19 | {title}
17 |{value}
18 |
29 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/components/adminComponents/NivoBarChart.tsx:
--------------------------------------------------------------------------------
1 | import dynamic from 'next/dynamic';
2 |
3 | // https://github.com/plouc/nivo/issues/2310
4 | const ResponsiveBar = dynamic(() => import('@nivo/bar').then((m) => m.ResponsiveBar), {
5 | ssr: false,
6 | });
7 |
8 | interface NivoBarChartProps {
9 | name: string;
10 | items: Array<{
11 | itemName: string;
12 | itemValue: string;
13 | }>;
14 | }
15 |
16 | export default function NivoBarChart({ name, items }: NivoBarChartProps) {
17 | const longestKey = items.reduce((prev, curr) => Math.max(prev, curr.itemName.length), 0);
18 | const items_ = items.map(({ itemName, itemValue }) => ({
19 | itemName,
20 | [name]: itemValue,
21 | }));
22 | return (
23 | {title}
31 |
24 | = 20 ? 30 : 0,
49 | legendPosition: 'middle',
50 | }}
51 | />
52 |
53 | );
54 | }
55 |
--------------------------------------------------------------------------------
/components/adminComponents/NivoPieChart.tsx:
--------------------------------------------------------------------------------
1 | import dynamic from 'next/dynamic';
2 |
3 | // https://github.com/plouc/nivo/issues/2310
4 | const ResponsivePie = dynamic(() => import('@nivo/pie').then((m) => m.ResponsivePie), {
5 | ssr: false,
6 | });
7 |
8 | interface NivoPieChartProps {
9 | name: string;
10 | items: Array<{
11 | id: string;
12 | value: number;
13 | }>;
14 | }
15 |
16 | export default function NivoPieChart({ name, items }: NivoPieChartProps) {
17 | return (
18 | {name}
25 |
19 |
65 | );
66 | }
67 |
--------------------------------------------------------------------------------
/components/adminComponents/SuccessCard.tsx:
--------------------------------------------------------------------------------
1 | interface SuccessCardProps {
2 | msg: string;
3 | }
4 |
5 | export default function SuccessCard({ msg }: SuccessCardProps) {
6 | return (
7 | {name}
20 |
8 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/components/adminComponents/UserList.tsx:
--------------------------------------------------------------------------------
1 | interface UserListProps {
2 | users: UserIdentifier[];
3 | selectedUsers: string[];
4 |
5 | onUserClick: (id: string) => void;
6 | onUserSelect: (id: string) => void;
7 | }
8 |
9 | export default function UserList({
10 | users,
11 | selectedUsers,
12 | onUserClick,
13 | onUserSelect,
14 | }: UserListProps) {
15 | const userList = [];
16 |
17 | users.forEach((user, idx) => {
18 | const bgColor = idx % 2 ? 'bg-white' : 'bg-gray-100';
19 |
20 | userList.push(
21 | {msg}
9 | onUserClick(user.id)}
31 | >
32 | {/*
33 | Name
34 | Status
35 | University
36 | Major
37 | Year
38 | */}
39 |
,
87 | );
88 | });
89 |
90 | return {
42 | e.stopPropagation();
43 | // onUserSelect(user.id);
44 | }}
45 | >
46 |
67 |
47 | {
49 | e.stopPropagation();
50 | onUserSelect(user.id);
51 | }}
52 | checked={user.selected}
53 | type="checkbox"
54 | className="w-4 h-4 mr-2 rounded-sm border-[1px] border-complementary bg-transparent text-primaryDark"
55 | />
56 |
57 | {
60 | e.stopPropagation();
61 | onUserClick(user.id);
62 | }}
63 | >
64 | {`${user.user.firstName} ${user.user.lastName}`}
65 |
66 |
68 |
74 | {user.status}
75 |
76 |
77 |
78 | {user.university}
79 |
80 |
81 | {user.major}
82 |
83 |
84 | {user.studyLevel}
85 |
86 | {userList}
;
91 | }
92 |
--------------------------------------------------------------------------------
/components/adminComponents/challengeComponents/ChallengeList.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ChallengeCard from '../../dashboardComponents/ChallengeCard';
3 | import {
4 | DndContext,
5 | useSensors,
6 | useSensor,
7 | KeyboardSensor,
8 | PointerSensor,
9 | closestCenter,
10 | DragEndEvent,
11 | } from '@dnd-kit/core';
12 |
13 | import {
14 | SortableContext,
15 | sortableKeyboardCoordinates,
16 | verticalListSortingStrategy,
17 | } from '@dnd-kit/sortable';
18 |
19 | interface ChallengeListProps {
20 | challenges: SortableObject
55 |
56 |
57 | {challenges.map(({ title, description, prizes }, idx) => (
58 |
61 |
62 |
63 | );
64 | }
65 |
--------------------------------------------------------------------------------
/components/adminComponents/eventComponents/EventDetailLink.tsx:
--------------------------------------------------------------------------------
1 | import { ArrowNarrowRightIcon } from '@heroicons/react/solid';
2 | import Link from 'next/link';
3 |
4 | interface EventDetailLinkProps {
5 | title: string;
6 | href: string;
7 | }
8 |
9 | export default function EventDetailLink({ title, href }: EventDetailLinkProps) {
10 | return (
11 |
12 |
13 |
18 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/components/adminComponents/eventComponents/EventList.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | interface EventListProps {
4 | events: ScheduleEvent[];
5 | onEventEditClick: (eventIndex: number) => void;
6 | onEventDeleteClick: (eventIndex: number) => void;
7 | }
8 |
9 | export default function EventList({
10 | events,
11 | onEventEditClick,
12 | onEventDeleteClick,
13 | }: EventListProps) {
14 | return (
15 | 14 | {title} 15 |
16 |
16 | {events.map((event, idx) => (
17 |
36 | );
37 | }
38 |
--------------------------------------------------------------------------------
/components/authComponents/EmailInput.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import EmailOutlinedIcon from '@mui/icons-material/EmailOutlined';
3 |
4 | // Define the type for the props by extending React.HTMLProps
18 |
34 | ))}
35 | {event.title}
19 |
20 |
26 |
32 |
33 |
18 |
21 |
42 | );
43 | };
44 |
45 | export default EmailInput;
46 |
--------------------------------------------------------------------------------
/components/authComponents/PasswordInput.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
3 | import VisibilityIcon from '@mui/icons-material/Visibility';
4 | import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
5 |
6 | // Define the type for the props by extending React.HTMLProps
22 |
41 |
23 |
26 |
50 | );
51 | };
52 |
53 | export default PasswordInput;
54 |
--------------------------------------------------------------------------------
/components/dashboardComponents/AnnouncementCards.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | /**
4 | * Announcement Cards Component
5 | *
6 | * Cards for announcements section in hack center
7 | */
8 |
9 | function AnouncementCard(props) {
10 | return (
11 | <>
12 |
27 |
49 |
46 | {showPassword ?
48 |
13 | {props.text}
14 |
15 | {props.time}
16 | 17 | ); 18 | } 19 | 20 | export default AnouncementCard; 21 | -------------------------------------------------------------------------------- /components/dashboardComponents/AnsweredQuestion.tsx: -------------------------------------------------------------------------------- 1 | import { Disclosure } from '@headlessui/react'; 2 | import { CheckCircleFilled } from '@ant-design/icons'; 3 | import { ChevronUpIcon } from '@heroicons/react/solid'; 4 | 5 | /** 6 | * 7 | * Props used by AnsweredQuestion component used in /about/questions 8 | * 9 | * @param question question asked by current user 10 | * @param answer answer from organizer for corresponding question 11 | * @param colorCode color code used for background of component 12 | * @param iconColorCode color code used for checkmark icon that goes with the component 13 | * 14 | */ 15 | interface AnsweredQuestionProps { 16 | question: string; 17 | answer: string; 18 | colorCode: string; 19 | iconColorCode: string; 20 | isOpen: boolean; 21 | toggleDisclosure: () => void; 22 | } 23 | 24 | /** 25 | * 26 | * Component representing an answered question in /about/questions 27 | * 28 | */ 29 | export default function AnsweredQuestion({ 30 | question, 31 | answer, 32 | colorCode, 33 | iconColorCode, 34 | isOpen, 35 | toggleDisclosure, 36 | }: AnsweredQuestionProps) { 37 | return ( 38 |
39 |
40 | {({ open }) => (
41 |
69 |
70 | );
71 | }
72 |
--------------------------------------------------------------------------------
/components/dashboardComponents/ChallengeCard.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Challenge Cards Component
3 | *
4 | * Cards for challenge section in hack center
5 | * To add a linebreak for the description, simply add \n into the string value where needed in firebase
6 | */
7 |
8 | function ChallengeCard(props) {
9 | var description;
10 | if (props.description !== undefined && props.description !== null) {
11 | description = props.description.replaceAll('\\n', '\n');
12 | }
13 | return (
14 |
42 |
63 | {answer}
64 |
65 | )}
66 |
67 | )}
68 |
43 |
45 |
59 |
60 |
61 | {isOpen && (
62 |
15 |
30 | );
31 | }
32 |
33 | export default ChallengeCard;
34 |
--------------------------------------------------------------------------------
/components/dashboardComponents/DashboardHeader.tsx:
--------------------------------------------------------------------------------
1 | import Link from 'next/link';
2 | import NavLink from '../NavLink';
3 | import { useRef, useState } from 'react';
4 | import { ChevronRightIcon } from '@heroicons/react/solid';
5 |
6 | /**
7 | * A dashboard header.
8 | */
9 | export default function DashboardHeader() {
10 | const accordian = useRef(null);
11 | const [isOpen, setIsOpen] = useState(false);
12 |
13 | const triggerAccordion = () => {
14 | let acc = accordian.current;
15 | setIsOpen(!isOpen);
16 | acc.classList.toggle('menuactive');
17 | var panel = acc.nextElementSibling;
18 | if (panel.style.maxHeight) {
19 | panel.style.maxHeight = null;
20 | } else {
21 | panel.style.maxHeight = panel.scrollHeight + 'px';
22 | }
23 | };
24 |
25 | return (
26 | {props.title}
16 |
17 |
19 | {props.prizes !== null && props.prizes !== undefined && (
20 | {description}
18 |
21 |
28 | )}
29 | Prizes
22 | -
23 | {props.prizes.map((prize, idx) => (
24 |
- {prize} 25 | ))} 26 |
29 |
35 | HackCenter
36 |
37 |
43 | Ask a Question
44 |
45 |
46 |
48 |
56 |
71 |
57 |
70 | -
58 |
-
59 |
60 | HackCenter61 | 62 |
63 |
-
64 |
65 | Ask a Question66 | 67 |
68 |
18 |
21 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/components/dashboardComponents/QRCode.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef } from 'react';
2 | import LoadIcon from '../LoadIcon';
3 | import { toCanvas } from 'qrcode';
4 |
5 | export interface QRCodeProps {
6 | /**
7 | * The data to display in the QRCode.
8 | */
9 | data: string;
10 | /**
11 | * QR load state.
12 | */
13 | loading: boolean;
14 | /**
15 | * QR width/height in pixels.
16 | */
17 | width: number;
18 | height: number;
19 | /**
20 | * Dark represents dots, Light represents the background
21 | */
22 | darkColor: string;
23 | lightColor: string;
24 | }
25 |
26 | export default function QRCode({
27 | data,
28 | loading,
29 | width,
30 | height,
31 | darkColor,
32 | lightColor,
33 | }: QRCodeProps) {
34 | const canvas = useRef(null);
35 | useEffect(() => {
36 | if (!canvas.current) return console.error('Invalid QRCode canvas referenece...');
37 | if (!data || data === '') return console.warn('No QRCode data found, aborting display...');
38 | toCanvas(canvas.current, data, { width, color: { dark: darkColor, light: lightColor } });
39 | });
40 | return !loading ? :
22 |
24 | {question}
23 |
74 | {videoReady && !paused ? :
76 | );
77 | }
78 |
--------------------------------------------------------------------------------
/components/dashboardComponents/Sidebar.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useUser } from '../../lib/profile/user-data';
3 | import { useAuthContext } from '../../lib/user/AuthContext';
4 |
5 | function Sidebar() {
6 | const { isSignedIn } = useAuthContext();
7 | const user = useUser();
8 | const role = user.permissions?.length > 0 ? user.permissions[0] : '';
9 | return (
10 | <>
11 | {/* ghost section to fill in for fixed sidebar */}
12 |
16 |
17 |
22 | Welcome,{' '}
23 | {!user || !isSignedIn ? 'hacker' : user.firstName !== '' ? user.firstName : 'hacker'}
24 |
25 | {role}
26 |
23 | {icon}{' '}
24 |
25 | {props.title}
26 |
27 |
28 | );
29 | }
30 |
31 | export default DocLink;
32 |
--------------------------------------------------------------------------------
/components/hackerpackComponents/HackerpackSidebar.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useUser } from '../../lib/profile/user-data';
3 | import { useAuthContext } from '../../lib/user/AuthContext';
4 |
5 | /**
6 | * Sidebar for the hackerpack; this is hidden on mobile
7 | */
8 | export default function HackerpackSidebar({ content }: { content: SidebarSection[] }) {
9 | const { isSignedIn } = useAuthContext();
10 | const user = useUser();
11 | const role = user.permissions?.length > 0 ? user.permissions[0] : '';
12 | return (
13 | <>
14 | {/* ghost section to fill in for fixed sidebar */}
15 |
19 |
20 | HackerPack
26 | -
27 | {/* Maps the sidebar-content.json file to a nested list */}
28 | {content.map((mainSection) => (
29 |
-
30 | {mainSection.title}
31 | {mainSection.sections ? (
32 |
-
33 | {mainSection.sections.map((subsection) => (
34 |
- 35 | {subsection.title} 36 | 37 | ))} 38 |
41 | ))}
42 |
46 |
*/}
52 |
47 | Welcome,{' '}
48 | {!user || !isSignedIn ? 'hacker' : user.firstName !== '' ? user.firstName : 'hacker'}
49 |
50 | {role}
51 |
40 |
44 |
64 |
65 |
66 | {/* {isOpen && ( */}
67 |
76 |
81 | {answer}
82 |
83 |
84 | {/* )} */}
85 |
86 |
41 |
63 | );
64 | };
65 |
66 | const HackUTDCountdown: React.FC = () => {
67 | return
42 | {Object.entries(timeLeft).map(([unit, value]) => {
43 | const digits = value.toString().padStart(2, '0').split('');
44 | return (
45 |
58 |
46 |
55 | );
56 | })}
57 |
47 | {digits.map((digit, index) => (
48 |
53 |
49 | {digit}
50 |
51 | ))}
52 | {unit.toUpperCase()}
54 |
59 |
62 | We will let you know when we are launching
60 | 61 |
5 |
28 | );
29 | }
30 |
--------------------------------------------------------------------------------
/components/homeComponents/HomeChallenges.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import HomeChallengesCard from './HomeChallengeCard';
3 |
4 | export default function HomeChallengesComponent(props: { challenges: Challenge[] }) {
5 | return (
6 | props.challenges.length !== 0 && (
7 |
6 | {/* Block */}
7 |
27 |
10 |
11 |
12 |
13 | {/* Challenge Name */}
14 |
26 | 15 | {props.challenge.title.toUpperCase()} 16 |
17 | {/* Company Name */} 18 |19 | {props.challenge.organization} 20 |
21 | {/* Description */} 22 |
23 |
25 | {props.challenge.description}
24 |
9 |
10 |
11 | Challenge Tracks
12 |
13 |
14 |
15 |
16 |
23 |
17 |
22 | 18 | Hackathons are 24-hour gatherings where students collaborate to create innovative 19 | projects, forge new connections, and compete for prizes. 20 |
21 |
24 | {props.challenges.map((challenge, idx) => (
25 |
28 |
13 |
20 | {/* TODO: Programmatically show these based on configured times/organizer preference */}
21 |
22 | HackPortal
{' '} 14 | {/* !change */} 15 |16 | {' '} 17 | {/* !change */}Powered by HackUTD and ACM Dev 18 |
19 |
23 | {buttonDatas.map((button) => (
24 |
31 | ))}
32 |
33 |
15 |
40 |
41 | {/* Bottom banner */}
42 |
16 |
18 |
19 |
20 | {/* MLH sticker */}
21 |
39 |
22 |
30 |
31 | {/* Big welcome */}
32 |
33 |
38 | Welcome To
34 |35 | HACKPORTAL 36 |
37 |
43 |
48 | 44 | SAMPLE TEXT • SAMPLE TEXT • SAMPLE TEXT • SAMPLE TEXT • SAMPLE TEXT • SAMPLE TEXT • SAMPLE 45 | TEXT • SAMPLE TEXT • SAMPLE TEXT 46 |
47 |
40 |
47 | Turn on push notifications to receive announcements!
48 |
49 | )
50 | );
51 | }
52 |
--------------------------------------------------------------------------------
/components/homeComponents/HomePrizes.tsx:
--------------------------------------------------------------------------------
1 | import HomePrizesCard from './HomePrizesCard';
2 |
3 | interface HomePrizesProps {
4 | prizes: Array<{
5 | rank: number;
6 | prizeName: string;
7 | }>;
8 | }
9 |
10 | export default function HomePrizes({ prizes }: HomePrizesProps) {
11 | return (
12 |
15 |
21 | {/* Component */}
22 | 16 | {Array.apply(null, Array(200)) 17 | .map(() => 'PRIZES') 18 | .join(' ')} 19 |
20 |
23 |
33 | 24 | Prizes 25 |
26 |Potential prize that participants can win!
27 |
28 | {prizes.map((prize, idx) => (
29 |
32 |
11 |
28 | );
29 | }
30 |
--------------------------------------------------------------------------------
/components/homeComponents/HomeSpeakers.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import { Swiper, SwiperSlide } from 'swiper/react';
3 | import { Navigation } from 'swiper/modules';
4 | import 'swiper/css';
5 | import 'swiper/css/navigation';
6 | import KeynoteSpeaker from './KeynoteSpeaker';
7 |
8 | export default function HomeSpeakers(props: { keynoteSpeakers: KeynoteSpeaker[] }) {
9 | const [speakers, setSpeakers] = useState
12 | {/* Block */}
13 |
27 |
14 |
15 |
16 | {/* Prize rank */}
17 | {props.prize.rank < rankName.length && (
18 | 19 | {rankName[props.prize.rank].toUpperCase()} PLACE 20 |
21 | )} 22 | {/* Prize name */} 23 |24 | {props.prize.prizeName.toUpperCase()} 25 |
26 |
19 | Speakers
20 |
21 |
22 | The members that make HackPortal possible
23 |
24 |
25 |
26 | = 320px
35 | 320: {
36 | slidesPerView: 1,
37 | spaceBetween: 5,
38 | },
39 | // when window width is >= 480px
40 | 480: {
41 | slidesPerView: 1,
42 | spaceBetween: 10,
43 | },
44 | 620: {
45 | slidesPerView: 2,
46 | spaceBetween: 15,
47 | },
48 | // when window width is >= 640px
49 | 840: {
50 | slidesPerView: 2,
51 | spaceBetween: 20,
52 | },
53 | 1024: {
54 | slidesPerView: 3,
55 | spaceBetween: 10,
56 | },
57 | }}
58 | >
59 | {speakers.map(
60 | (
61 | { name, subtitle, description, fileName, githubLink, linkedinLink, websiteLink },
62 | idx,
63 | ) => (
64 |
65 |
75 | ),
76 | )}
77 |
78 |
79 |
15 |
39 |
45 |
46 | 23 | Our Sponsors 24 |
25 |If you would like to sponsor HackPortal,
26 |27 | please reach out to us at 28 | 34 | email@organization.com 35 | 36 |
37 | {/* Sponsor Card */} 38 |
40 | {sponsor.map(({ link, reference }, idx) => (
41 |
44 |
17 |
42 |
18 |
41 | 19 | Meet the Team 20 |
{' '} 21 | {/* !change */} 22 |
23 |
40 |
24 | {/* Member Cards */}
25 | {members.map(
26 | ({ name, description, linkedin, github, personalSite, fileName }, idx) => (
27 |
39 |
7 | {/* Video */}
8 | {/* !change */}
9 |
18 |
19 | {/* Stats */}
20 |
34 |
21 | {stats.map((stat, index) => (
22 |
33 |
28 |
31 | ))}
32 | {stat.data}
29 |{stat.object}
30 |
32 |
62 | );
63 | }
64 |
--------------------------------------------------------------------------------
/components/homeComponents/MemberCards.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import firebase from 'firebase/compat/app';
3 | import 'firebase/compat/storage';
4 | import Image from 'next/image';
5 | import defaultPFP from '../../public/assets/defaultPFP.jpg';
6 | import GitHubIcon from '@mui/icons-material/GitHub';
7 | import LinkedInIcon from '@mui/icons-material/LinkedIn';
8 | import PersonIcon from '@mui/icons-material/Person';
9 |
10 | /**
11 | * card for each member of the team
12 | */
13 |
14 | export default function MemberCards(props) {
15 | const [imageLink, setImageLink] = useState
33 | {props.imageLink !== undefined && imageLink !== undefined && (
34 |
37 |
61 |
34 | {/* Profile Image */}
35 |
67 | );
68 | }
69 |
--------------------------------------------------------------------------------
/components/homeComponents/SponsorCard.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react';
2 | import firebase from 'firebase/compat/app';
3 | import 'firebase/compat/storage';
4 | import LoadIcon from '../LoadIcon';
5 | import Image from 'next/image';
6 |
7 | interface SponsorCardProps {
8 | link: string;
9 | reference: string;
10 | }
11 |
12 | /**
13 | * Keynote Speaker card for landing page.
14 | */
15 | export default function SponsorCard(props: SponsorCardProps) {
16 | const [imgSrc, setImgSrc] = useState
36 |
45 | {/* Main Body */}
46 |
47 | {props.name}
48 |{props.description}
49 | 66 |
42 |
43 |
53 |
54 | )}
55 |
56 | );
57 | }
58 |
--------------------------------------------------------------------------------
/components/registerComponents/DisplayQuestion.module.css:
--------------------------------------------------------------------------------
1 | .textInputQuestionsContainer {
2 | display: grid;
3 | grid-template-columns: repeat(2, 1fr);
4 | grid-template-rows: repeat(2, 1fr);
5 | grid-column-gap: 8px;
6 | grid-row-gap: 0px;
7 | }
8 |
9 | .textInputQuestionsContainer > :first-child {
10 | grid-area: 1 / 1 / 2 / 2;
11 | }
12 |
13 | .textInputQuestionsContainer > :nth-child(2) {
14 | grid-area: 1 / 2 / 2 / 3;
15 | }
16 |
17 | .textInputQuestionsContainer > :nth-child(3) {
18 | grid-area: 2 / 1 / 3 / 3;
19 | }
20 |
21 | .dropdownQuestionsContainer {
22 | display: grid;
23 | grid-template-columns: repeat(2, 1fr);
24 | grid-template-rows: repeat(2, 1fr);
25 | grid-column-gap: 8px;
26 | grid-row-gap: 0px;
27 | }
28 |
29 | .dropdownQuestionsContainer > :first-child {
30 | grid-area: 1 / 1 / 2 / 3;
31 | }
32 |
33 | .dropdownQuestionsContainer > :nth-child(2) {
34 | grid-area: 2 / 1 / 3 / 2;
35 | }
36 |
37 | .dropdownQuestionsContainer > :nth-child(3) {
38 | grid-area: 2 / 2 / 3 / 3;
39 | }
40 |
--------------------------------------------------------------------------------
/components/registerComponents/DisplayQuestion.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState, useLayoutEffect, Fragment } from 'react';
2 | import { Field, ErrorMessage } from 'formik';
3 | import Question from './RegistrationQuestion';
4 | import styles from './DisplayQuestion.module.css';
5 | /**
6 | *Display registration questions Component
7 | *
8 | *
9 | */
10 |
11 | function DisplayQuestion(props) {
12 | return (
13 | 53 |
16 | {props.obj.textInputQuestions?.map((inputObj) => (
17 |
20 | {/* Display number input questions */}
21 | {props.obj.numberInputQuestions?.map((inputObj) => (
22 |
32 | {props.obj.dropdownQuestions?.map((inputObj) => (
33 |
36 |
37 | {/* Display datalist input questions */}
38 | {props.obj.datalistQuestions?.map((inputObj) => (
39 | Unauthorized
;
41 |
42 | return (
43 |
44 |
61 | );
62 | }
63 |
--------------------------------------------------------------------------------
/pages/admin/events/add.tsx:
--------------------------------------------------------------------------------
1 | import { useRouter } from 'next/router';
2 | import EventForm from '../../../components/adminComponents/eventComponents/EventForm';
3 | import { RequestHelper } from '../../../lib/request-helper';
4 | import { useAuthContext } from '../../../lib/user/AuthContext';
5 | import Link from 'next/link';
6 | import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
7 |
8 | function isAuthorized(user): boolean {
9 | if (!user || !user.permissions) return false;
10 | return (user.permissions as string[]).includes('super_admin');
11 | }
12 |
13 | export default function AddEventPage() {
14 | const { user, isSignedIn } = useAuthContext();
15 | const router = useRouter();
16 |
17 | const submitAddEventRequest = async (eventData: ScheduleEvent) => {
18 | try {
19 | await RequestHelper.post
45 |
46 |
52 |
47 |
50 |
51 |
53 | {
55 | await submitAddChallengeRequest(challenge);
56 | }}
57 | formAction="Add"
58 | />
59 |
60 | Unauthorized
;
41 |
42 | return (
43 |
44 |
61 | );
62 | }
63 |
--------------------------------------------------------------------------------
/pages/api/applications/[applicationId].tsx:
--------------------------------------------------------------------------------
1 | import { NextApiRequest, NextApiResponse } from 'next';
2 | import { auth, firestore } from 'firebase-admin';
3 | import initializeApi from '../../../lib/admin/init';
4 | import { userIsAuthorized } from '../../../lib/authorization/check-authorization';
5 |
6 | initializeApi();
7 |
8 | const db = firestore();
9 |
10 | const APPLICATIONS_COLLECTION = '/registrations';
11 | const USERS_COLLECTION = '/users';
12 |
13 | function extractHeaderToken(input: string) {
14 | const result = input;
15 | return result;
16 | }
17 |
18 | /**
19 | * Handles GET requests to /api/application/
45 |
46 |
52 |
47 |
50 |
51 |
53 | {
55 | await submitAddEventRequest(event);
56 | }}
57 | formAction="Add"
58 | />
59 |
60 |
25 |
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/pages/dashboard/submit.tsx:
--------------------------------------------------------------------------------
1 | import Head from 'next/head';
2 | import React from 'react';
3 | import DashboardHeader from '../../components/dashboardComponents/DashboardHeader';
4 | import Sidebar from '../../components/dashboardComponents/Sidebar';
5 |
6 | /**
7 | * NOTE: THIS IS NOT BEING USED.
8 | * FEEL FREE TO DELETE THIS PAGE OR LINK IT TO THE HACKATHON DEVPOST.
9 | *
10 | *
11 | * The dashboard / submit.
12 | *
13 | * Landing: /submit
14 | */
15 | export default function Submit() {
16 | return (
17 | Signing out of HackPortal
26 |
18 |
19 | Project Submissions
20 | {/* !change */}
21 |
22 |
23 |
26 |
29 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/pages/hackerpacks/[id].tsx:
--------------------------------------------------------------------------------
1 | import { GetServerSideProps } from 'next';
2 | import { NotionAPI } from 'notion-client';
3 | import { useRouter } from 'next/router';
4 |
5 | import hackerpackSettings from '../../components/hackerpackComponents/hackerpack-settings.json';
6 | import HackerpackDisplay from '../../components/hackerpackComponents/HackerpackDisplay';
7 |
8 | export default function NotionSubpage(props: { content: any; error: boolean }) {
9 | const router = useRouter();
10 | // If the hackerpack is not a Notion page, ignore it
11 | if (props.error) {
12 | router.push('/hackerpacks');
13 | return null;
14 | }
15 |
16 | // Generate the sidebar content from Notion
17 | // Find the root block because Notion IDs have hyphens
18 | const rootId = Object.keys(props.content.block).find(
19 | (k) => k === router.asPath.replace('/hackerpacks/', ''),
20 | );
21 |
22 | // TODO: Support for Markdown subpages
23 | return