diff --git a/.gitignore b/.gitignore index 97e61955..1437c53f 100644 --- a/.gitignore +++ b/.gitignore @@ -32,6 +32,3 @@ yarn-error.log* # vercel .vercel - -# autogenerated css module typings -*.module.scss.d.ts \ No newline at end of file diff --git a/pages/_app.tsx b/pages/_app.tsx index 1a20948d..e940a065 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -8,7 +8,6 @@ import "src/components/BoardGrid/styles.scss"; import "src/components/Button/styles.scss"; import "src/components/CommunitiesGrid/styles.scss"; import "src/components/Footer/styles.scss"; -import "src/components/NavigationBar/styles.scss"; import "src/components/ScrollDownArrow/styles.scss"; import "src/components/Statistic/styles.scss"; // section css imports @@ -28,7 +27,7 @@ const MyApp = ({ Component, pageProps }) => ( margin: `0 auto`, maxWidth: 960, minHeight: 960, - padding: `81px 0`, + padding: `85px 0`, }} >
diff --git a/pages/about.tsx b/pages/about.tsx index 121f162c..a2d48de2 100644 --- a/pages/about.tsx +++ b/pages/about.tsx @@ -9,8 +9,10 @@ import AboutMembership from "src/sections/about/About.Membership"; import AboutBoard from "src/sections/about/About.Board"; import HeroImage from "public/assets/about-images/about-hero.png"; +import { BoardMemberProps } from "src/types"; +import { getBoardData } from "src/api/BoardAPI"; -const AboutPage: React.FC = () => { +const AboutPage: React.FC<{ board: BoardMemberProps[] }> = ({ board }) => { const size: Size = useWindowSize(); const [isMobile, setIsMobile] = useState(false); @@ -29,9 +31,19 @@ const AboutPage: React.FC = () => { {isMobile ? null : } - + ); }; export default AboutPage; + +export async function getStaticProps() { + const boardData = await getBoardData(); + return { + props: { + board: boardData || [], + }, + revalidate: 1 * 60 * 60, // generate once every hour (in seconds) + }; +} diff --git a/pages/events.tsx b/pages/events.tsx index 50da0b3a..7c1596f2 100644 --- a/pages/events.tsx +++ b/pages/events.tsx @@ -1,9 +1,24 @@ -const EventsPage: React.FC = () => { +import { EventsArray, getAllEvents } from "src/api/EventsAPI"; +import SEO from "src/components/SEO"; +import EventsContent from "src/sections/events/Events.Content"; + +const EventsPage: React.FC<{ events: EventsArray }> = ({ events }) => { return ( <> -

Events Page

+ + ); }; export default EventsPage; + +export async function getStaticProps() { + const eventsData = await getAllEvents(); + return { + props: { + events: eventsData || [], + }, + revalidate: 1 * 60 * 60, + }; +} diff --git a/src/api/BoardAPI.ts b/src/api/BoardAPI.ts new file mode 100644 index 00000000..e5515e2b --- /dev/null +++ b/src/api/BoardAPI.ts @@ -0,0 +1,46 @@ +import { BoardMemberProps } from "src/types"; + +const formatLinkedIn = val => { + return val.includes("https://www.linkedin.com/in/") ? val : `https://www.linkedin.com/in/${val}`; +}; + +export const getBoardData = async () => { + const url = process.env.SPREADSHEET_URL; // Default value can be found at https://vercel.com/acmucsd/main-website/settings/environment-variables + + const data: BoardMemberProps[] = await fetch(url) + .then(res => res.text()) + .then(res => JSON.parse(res.substring(47).slice(0, -2))) // only get object + .then(res => { + const cols = res.table.cols.map((col, idx) => { + return { idx, label: col.label }; + }); + const colMap = {}; + cols.forEach(colHeader => { + colMap[colHeader.label.toLowerCase()] = colHeader.idx; + }); + colMap["team"] = 0; // Team shall always be the first column + + const rows = res.table.rows + .map(row => row.c) + .map(row => { + const get = label => row[colMap[label.toLowerCase()]]?.v ?? ""; // helper function for repetitive task + const userData: BoardMemberProps = { + name: get("Name"), // use spreadsheet column headers to find data + org: get("Team").toLowerCase(), + title: get("Position"), + profile_image: get("Profile Picture"), + email: get("ACM Email") || null, + personal_link: get("Website") || null, + linkedin_link: formatLinkedIn(get("LinkedIn")) || null, + }; + return userData; + }) + .filter(user => user.name) // name is required + .filter(user => user.org && user.org !== "members at large") // valid suborg is required + .filter(user => user.title) // position title is required + .filter(user => user.profile_image); // image url is required + + return rows; + }); + return data; +}; diff --git a/src/board-data.json b/src/board-data.json deleted file mode 100644 index 6b4111ab..00000000 --- a/src/board-data.json +++ /dev/null @@ -1,912 +0,0 @@ -[ - { - "name": "Stanley Lee", - "org": "general", - "title": "President", - "specialization": "", - "profile_image": "https://drive.google.com/uc?id=1xzLnAaz2ZrogtSLX0fopP-owDv0Wwy6B", - "email": "stanley@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/leestanleysg", - "personal_link": "https://github.com/leestanley" - }, - { - "name": "Steven Steiner", - "org": "general", - "title": "Vice President Development", - "specialization": "", - "profile_image": "https://drive.google.com/uc?id=1oSET37-Hzqs3eaUKmqOTqJM5hIpcU_FD", - "email": "steven@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/sisteine", - "personal_link": "" - }, - { - "name": "Ronak Shah", - "org": "general", - "title": "Product Manager", - "specialization": "", - "profile_image": "https://drive.google.com/uc?id=1kAwtEisnY7wb8DFNuozJunbWqgaF0wdd", - "email": "ronak@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/trulyronak", - "personal_link": "https://ronakshah.net" - }, - { - "name": "Jennifer Pham", - "org": "general", - "title": "Front End Developer", - "specialization": "", - "profile_image": "", - "email": "jennifer@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/jennifer-pham-575ab113b/", - "personal_link": "" - }, - { - "name": "Paul Pan", - "org": "general", - "title": "Front End Developer", - "specialization": "", - "profile_image": "", - "email": "paul@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/jpan05", - "personal_link": "" - }, - { - "name": "Meshach Adoe", - "org": "general", - "title": "Front End Developer", - "specialization": "", - "profile_image": "https://drive.google.com/uc?id=1Zp_VrLET7ptWAvWwfGm7XNdoQmtqRVsq", - "email": "meshach@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/meshachadoe", - "personal_link": "" - }, - { - "name": "Sean Ye", - "org": "general", - "title": "Front End Developer", - "specialization": "", - "profile_image": "https://drive.google.com/uc?id=1OTf1YvPj0IKfdLVCybFGhkuSbx2wgphk", - "email": "sean@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/seanye24", - "personal_link": "https://seancye.com" - }, - { - "name": "Joey Dang", - "org": "general", - "title": "Front End Developer", - "specialization": "", - "profile_image": "https://drive.google.com/uc?id=1TX8Uj8hj56gRIe7iSjaGQ30g9qXYhQRY", - "email": "joey@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/dangjoeyy", - "personal_link": "" - }, - { - "name": "Shravan Hariharan", - "org": "general", - "title": "Back End Developer", - "specialization": "", - "profile_image": "https://drive.google.com/uc?id=1zubhJ2qvurmM4brmCgnOiFMu31HkTCjL", - "email": "shravan@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/shravanhariharan", - "personal_link": "" - }, - { - "name": "Michael Shao", - "org": "general", - "title": "Back End Developer", - "specialization": "", - "profile_image": "", - "email": "michael@acmucsd.org", - "linkedin_link": "", - "personal_link": "" - }, - { - "name": "Matei-Alexandru Gardus", - "org": "general", - "title": "Automation Developer", - "specialization": "", - "profile_image": "https://drive.google.com/uc?id=1AcpLXjgge5jH0RMT20uy0gD_MxxOFNNU", - "email": "matei@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/storm_firefox1", - "personal_link": "https://stormhub.io" - }, - { - "name": "Bryce Tsuyuki", - "org": "general", - "title": "Vice President Events", - "specialization": "", - "profile_image": "https://drive.google.com/uc?id=1Cc8AbxeElWnELIY4UV8FvJ3Hxh2UqrlE", - "email": "bryce@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/bryce-tsuyuki/", - "personal_link": "https://brycetsuyuki.com/" - }, - { - "name": "Christopher Cha", - "org": "general", - "title": "Event Director", - "specialization": "Technical Event Director", - "profile_image": "", - "email": "ccha@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/christopher-cha/", - "personal_link": "https://rinsworth.github.io/" - }, - { - "name": "Eric Xiao", - "org": "general", - "title": "Event Director", - "specialization": "Technical Event Director", - "profile_image": "https://drive.google.com/uc?id=1CbXP-hhNpm5LOk7QAK3kQw70dkXWP0Oq", - "email": "eric@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/xiao-eric/", - "personal_link": "" - }, - { - "name": "Nick Nebel", - "org": "general", - "title": "Event Director", - "specialization": "Technical Event Director", - "profile_image": "", - "email": "nick@acmucsd.org", - "linkedin_link": "", - "personal_link": "" - }, - { - "name": "Jeffrey Ha", - "org": "general", - "title": "Event Director", - "specialization": "Interview Prep", - "profile_image": "https://drive.google.com/uc?id=1-uIgc4ip_prq8Mwrmu3pES8Qe2GoQYVU", - "email": "jeff@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/hajeffrey/", - "personal_link": "" - }, - { - "name": "Thang Phan", - "org": "general", - "title": "Event Director", - "specialization": "ProDev", - "profile_image": "", - "email": "thang@acmucsd.org", - "linkedin_link": "", - "personal_link": "" - }, - { - "name": "Anna Liu", - "org": "general", - "title": "Event Director", - "specialization": "ProDev", - "profile_image": "https://drive.google.com/uc?id=1pTxJTv0JWt-nUA7aD-0Wd32Y0pQkNiFI", - "email": "anna@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/annaliu2/", - "personal_link": "" - }, - { - "name": "Nishant Balaji", - "org": "general", - "title": "Event Coordinator", - "specialization": "", - "profile_image": "https://drive.google.com/uc?id=1ImFhss5tonDVq9XIqFrD4_pzmiN3EvjJ", - "email": "nishant@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/nishantbalaji", - "personal_link": "https://nishantbalaji.me/" - }, - { - "name": "Connie Chang", - "org": "general", - "title": "Event Coordinator", - "specialization": "", - "profile_image": "https://drive.google.com/uc?id=1eGEhEGMGQNNuzBU0ZN0zqXhfcoh7IZcC", - "email": "connie@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/kyrni", - "personal_link": "" - }, - { - "name": "Kristina Diep", - "org": "general", - "title": "Event Coordinator", - "specialization": "AV Manager", - "profile_image": "https://drive.google.com/uc?id=1qFUHHai63aj2KqrWKk4AX2mTpAtAbJXu", - "email": "kristina@acmucsd.org", - "linkedin_link": "", - "personal_link": "" - }, - { - "name": "Tristan Tjan", - "org": "general", - "title": "Vice President External", - "specialization": "", - "profile_image": "https://drive.google.com/uc?id=1rm_qgOYyj_Li2rU5pqvN_twrLEyBn9s2", - "email": "tristan@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/tristantjan/", - "personal_link": "" - }, - { - "name": "Alvin Wang", - "org": "general", - "title": "Sponsorship Director", - "specialization": "", - "profile_image": "https://drive.google.com/uc?id=1kcoxRqqlqyyYYBUA0DIXBWA7Y-dui_05", - "email": "alvin@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/alvinwang922/", - "personal_link": "https://www.acwang.me/" - }, - { - "name": "Kelynn Ma", - "org": "general", - "title": "Sponsorship Associate", - "specialization": "", - "profile_image": "https://drive.google.com/uc?id=1nOVabZjzI9jX4i70o7zVqKcIXDZ0wXnh", - "email": "kelynn@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/kelynn-ma/", - "personal_link": "" - }, - { - "name": "Bella Coles", - "org": "general", - "title": "Sponsorship Associate", - "specialization": "", - "profile_image": "https://drive.google.com/uc?id=1pvaEnD9ZCcXnqv37Sns3i22QL5LXeJXF", - "email": "bella@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/annabelle-coles/", - "personal_link": "" - }, - { - "name": "Uday Kalra", - "org": "general", - "title": "Sponsorship Associate", - "specialization": "", - "profile_image": "", - "email": "uday@acmucsd.org", - "linkedin_link": "", - "personal_link": "" - }, - { - "name": "Elias Arghand", - "org": "general", - "title": "Marketing Director", - "specialization": "", - "profile_image": "", - "email": "elias.arghand@acmucsd.org", - "linkedin_link": "", - "personal_link": "" - }, - { - "name": "Samuel Wu", - "org": "general", - "title": "Public Relations", - "specialization": "", - "profile_image": "https://drive.google.com/uc?id=1toHLNRQV_IDjxK3dpXPuCcKObSrOwUJL", - "email": "samuel.wu@acmucsd.org", - "linkedin_link": "", - "personal_link": "" - }, - { - "name": "Henry Luu", - "org": "general", - "title": "Public Relations", - "specialization": "", - "profile_image": "https://drive.google.com/uc?id=1MVmxsjEackxOuN7QUzF6M69MBx4J8apd", - "email": "henryl@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/henrytluu/", - "personal_link": "" - }, - { - "name": "Vivian Wu", - "org": "general", - "title": "Public Relations", - "specialization": "", - "profile_image": "https://drive.google.com/uc?id=1XoGt4tbNhqYgKsCWVccXuVSODWXqet7i", - "email": "vivian@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/vivianrwu/", - "personal_link": "https://vrwu.github.io/" - }, - { - "name": "Tiffany Chang", - "org": "general", - "title": "Content Creation", - "specialization": "", - "profile_image": "", - "email": "tiffany@acmucsd.org", - "linkedin_link": "", - "personal_link": "" - }, - { - "name": "Anthony Manrique", - "org": "general", - "title": "Content Creation", - "specialization": "", - "profile_image": "https://drive.google.com/uc?id=1KB7aBXqmjM_DrVjYWaruag-NUH0w66qX", - "email": "anthony@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/anthony-manrique/", - "personal_link": "" - }, - { - "name": "Tristin Xie", - "org": "general", - "title": "Vice President Finance", - "specialization": "", - "profile_image": "https://drive.google.com/uc?id=117RWGzWScUyGK_Vdecp6Qq9BTyEgaVWD", - "email": "tristin@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/tristin-xie-245918167/", - "personal_link": "https://www.tristinxie.com/" - }, - { - "name": "Alexander Yu", - "org": "general", - "title": "Funding Manager", - "specialization": "Internal", - "profile_image": "https://drive.google.com/uc?id=1kn_FMwVTlZcKLRPYTAGY1W7kz-51TWfN", - "email": "alex@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/alexander-w-yu/", - "personal_link": "" - }, - { - "name": "Samantha Susanto", - "org": "general", - "title": "Funding Manager", - "specialization": "AS", - "profile_image": "https://drive.google.com/uc?id=12MymGb_WcNP6sfSifeTrJKRfTwCwZ3pM", - "email": "ssusanto@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/samantha-susanto/", - "personal_link": "" - }, - { - "name": "Aaron Yu", - "org": "general", - "title": "Funding Manager", - "specialization": "Department", - "profile_image": "", - "email": "axyu@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/aaron-x-yu/", - "personal_link": "" - }, - { - "name": "Shirley Qi", - "org": "general", - "title": "Vice President Membership", - "specialization": "", - "profile_image": "https://drive.google.com/uc?id=1RnkWCa_jpk0gJLYI1i0vdT0bfLLqfp2h", - "email": "shirley@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/shirley-qi-5699961b6/", - "personal_link": "" - }, - { - "name": "Jacob Lin", - "org": "general", - "title": "Community Director", - "specialization": "Bit-Byte", - "profile_image": "https://drive.google.com/uc?id=1FQ4_1G2MvKt8SOdj8euQZ3TUWTLVJBCe", - "email": "jacob@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/jacob-lin-5877911ba/", - "personal_link": "" - }, - { - "name": "Edward De Leon", - "org": "general", - "title": "Community Director", - "specialization": "Discord Moderator", - "profile_image": "", - "email": "edward@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/edward-de-leon-9a3796177/", - "personal_link": "" - }, - { - "name": "Alistair Gray", - "org": "general", - "title": "Community Director", - "specialization": "Social", - "profile_image": "https://drive.google.com/uc?id=1aN6Q6gzhrtyct4bqP1-gh36qSA5kk52Q", - "email": "alistair@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/~ajg", - "personal_link": "" - }, - { - "name": "Faith Lu", - "org": "general", - "title": "Community Director", - "specialization": "Social", - "profile_image": "", - "email": "faith@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/faith-lu/", - "personal_link": "" - }, - { - "name": "Fiona Chen", - "org": "general", - "title": "Community Director", - "specialization": "Social", - "profile_image": "https://drive.google.com/uc?id=11ko3_9Y3PAcn9a-iqzQ4bQ5cxkc7I4vz", - "email": "fiona@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/chenfi/", - "personal_link": "" - }, - { - "name": "William Duan", - "org": "general", - "title": "Vice President Projects", - "specialization": "", - "profile_image": "https://drive.google.com/uc?id=1P1Sx1M0dHisDRtbhZ1m7WQkPpdsrUb2J", - "email": "william@acmucsd.org", - "linkedin_link": "", - "personal_link": "" - }, - { - "name": "Max Cohen", - "org": "general", - "title": "Projects Lead", - "specialization": "Collaboration Lead", - "profile_image": "https://drive.google.com/uc?id=11_EApKeT-B7Q7ZJ6zcagQLZyAWeJ-LYi", - "email": "max@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/maxcoh3n/", - "personal_link": "" - }, - { - "name": "Trisa Leung", - "org": "general", - "title": "Projects Lead", - "specialization": "", - "profile_image": "https://drive.google.com/uc?id=1-WUkdMou0mfkUniUX7QZd8DFvcsSqDOS", - "email": "trisa@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/trisa-leung-58384a183/", - "personal_link": "" - }, - { - "name": "Michele Murakami", - "org": "general", - "title": "Director of Dev x Design", - "specialization": "[ACM Dev Design Lead]", - "profile_image": "https://drive.google.com/uc?id=1uT6kSX_R9EtdUpJxnK7DpwgsnF2FpS5a", - "email": "", - "linkedin_link": "", - "personal_link": "" - }, - { - "name": "Avery Blas", - "org": "general", - "title": "Director of Design Projects", - "specialization": "[ACM Projects Design Lead]", - "profile_image": "https://drive.google.com/uc?id=16svB8NBuZ8j1vnNv9AkKBP5_bwXfsthS", - "email": "", - "linkedin_link": "", - "personal_link": "" - }, - { - "name": "Kaitlyn Chin", - "org": "general", - "title": "Graphics Lead", - "specialization": "", - "profile_image": "", - "email": "", - "linkedin_link": "", - "personal_link": "" - }, - { - "name": "Xinchen Fu", - "org": "general", - "title": "TBD", - "specialization": "", - "profile_image": "", - "email": "", - "linkedin_link": "", - "personal_link": "" - }, - { - "name": "Tiffany Lee", - "org": "general", - "title": "Events Coordinator", - "specialization": "", - "profile_image": "https://drive.google.com/uc?id=1QU5RBfGpmRb2KdZZK3AQLmp3RgrGQ_xS", - "email": "", - "linkedin_link": "", - "personal_link": "" - }, - { - "name": "Daphne Nong", - "org": "general", - "title": "TBD", - "specialization": "", - "profile_image": "", - "email": "", - "linkedin_link": "", - "personal_link": "" - }, - { - "name": "Lara Canonizado", - "org": "general", - "title": "Designer", - "specialization": "", - "profile_image": "https://drive.google.com/uc?id=1YXOUh_GnLZ9v2U8BQSVUvwvqJq96cpjW", - "email": "", - "linkedin_link": "", - "personal_link": "" - }, - { - "name": "Tam (Tyler) Tran", - "org": "general", - "title": "Designer", - "specialization": "", - "profile_image": "https://drive.google.com/uc?id=1W5l5fmdiQkeuL9fceP4tyD_TPKDwcdZZ", - "email": "", - "linkedin_link": "", - "personal_link": "" - }, - { - "name": "Juliet Zhuang", - "org": "general", - "title": "Designer", - "specialization": "", - "profile_image": "", - "email": "", - "linkedin_link": "", - "personal_link": "" - }, - { - "name": "Stone Tao", - "org": "ai", - "title": "President", - "specialization": "", - "profile_image": "https://drive.google.com/uc?id=10KRp4GbKtpW-Tk65e4wfIw8L9A7qb_CQ", - "email": "stone@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/stonet2000/", - "personal_link": "https://stoneztao.com" - }, - { - "name": "Edward Yang", - "org": "ai", - "title": "Director of Operations", - "specialization": "", - "profile_image": "", - "email": "edwardy@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/edward-yang-07101a189/", - "personal_link": "" - }, - { - "name": "Jonathan Zamora", - "org": "ai", - "title": "Director of Marketing", - "specialization": "", - "profile_image": "https://drive.google.com/uc?id=1KH68vLm4QZ8eAPQM24FRUFNw-p0O9frv", - "email": "jon@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/jonzamora18/", - "personal_link": "https://jonzamora.dev" - }, - { - "name": "Judy Liu", - "org": "ai", - "title": "Event Lead", - "specialization": "", - "profile_image": "https://drive.google.com/uc?id=1FyEnR6yobKG1xt4U16bimSgFAS834HCe", - "email": "judy@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/judyliu14/", - "personal_link": "" - }, - { - "name": "Jason Vega", - "org": "ai", - "title": "Event Lead", - "specialization": "", - "profile_image": "", - "email": "jason@acmucsd.org", - "linkedin_link": "", - "personal_link": "" - }, - { - "name": "Joseph Liu", - "org": "ai", - "title": "Event Lead", - "specialization": "", - "profile_image": "", - "email": "joseph@acmucsd.org", - "linkedin_link": "", - "personal_link": "" - }, - { - "name": "Satyam Gupta", - "org": "ai", - "title": "Event Lead", - "specialization": "", - "profile_image": "", - "email": "satyam@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/satyam19946", - "personal_link": "" - }, - { - "name": "Christopher Cha", - "org": "ai", - "title": "Event Lead", - "specialization": "", - "profile_image": "", - "email": "ccha@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/christopher-cha/", - "personal_link": "https://rinsworth.github.io/" - }, - { - "name": "Alvin Wang", - "org": "ai", - "title": "Event Lead", - "specialization": "", - "profile_image": "", - "email": "alvin@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/alvinwang922/", - "personal_link": "https://www.acwang.me/" - }, - { - "name": "Dhanvi Desu", - "org": "ai", - "title": "Developer", - "specialization": "", - "profile_image": "", - "email": "dhanvi@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/dhanvidesu/", - "personal_link": "dhanvidesu.herokuapp.com" - }, - { - "name": "William Duan", - "org": "ai", - "title": "Developer", - "specialization": "", - "profile_image": "https://drive.google.com/uc?id=1P1Sx1M0dHisDRtbhZ1m7WQkPpdsrUb2J", - "email": "william@acmucsd.org", - "linkedin_link": "", - "personal_link": "" - }, - { - "name": "Joshua Hong", - "org": "ai", - "title": "Developer", - "specialization": "", - "profile_image": "", - "email": "joshua@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/joshua--hong/", - "personal_link": "" - }, - { - "name": "Yuru Zhou", - "org": "ai", - "title": "Developer", - "specialization": "", - "profile_image": "https://drive.google.com/uc?id=1NlhxSzx6akSzGkgFQFx_UhQxIQI306rM", - "email": "yuz0712@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/yuz101/", - "personal_link": "" - }, - { - "name": "Dennis Luc", - "org": "ai", - "title": "Marketing Coordinator ", - "specialization": "", - "profile_image": "", - "email": "dennisluc@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/dennisluc/", - "personal_link": "" - }, - { - "name": "Jonah Soong", - "org": "ai", - "title": "Marketing Coordinator ", - "specialization": "", - "profile_image": "", - "email": "jonah@acmucsd.org", - "linkedin_link": "", - "personal_link": "" - }, - { - "name": "Kevin Nguyen", - "org": "ai", - "title": "Marketing Coordinator ", - "specialization": "", - "profile_image": "", - "email": "kevinnguyen@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/kevin-ngoow1n/", - "personal_link": "" - }, - { - "name": "Karthik Guruvayurappan", - "org": "ai", - "title": "Sponsorship Coordinator", - "specialization": "", - "profile_image": "https://drive.google.com/uc?id=1b3TSfvo1Pd8PTw1UOUbeDXL-QlAjVTVG", - "email": "karthik@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/karthik-guruvayurappan-172747163/", - "personal_link": "" - }, - { - "name": "Niel Pal", - "org": "ai", - "title": "Sponsorship Coordinator", - "specialization": "", - "profile_image": "https://drive.google.com/uc?id=1r92vXIrkkmuH-pbF-3V_-VdC8giqUIL7", - "email": "siddharth@acmucsd.org", - "linkedin_link": "", - "personal_link": "" - }, - { - "name": "Andy Peterson", - "org": "cyber", - "title": "President", - "specialization": "", - "profile_image": "", - "email": "andy@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/https://linkedin.com/in/i-am-andrew-peterson", - "personal_link": "" - }, - { - "name": "RJ Wakefield-Carl", - "org": "cyber", - "title": "Director of Competition", - "specialization": "", - "profile_image": "https://drive.google.com/uc?id=1VmosYgWlxgrEIeo4msUZI1_oa1TXTQPn", - "email": "rj@acmucsd.org", - "linkedin_link": "", - "personal_link": "" - }, - { - "name": "Kevin Son", - "org": "cyber", - "title": "Director of Logistics", - "specialization": "", - "profile_image": "", - "email": "kevinson@acmucsd.org", - "linkedin_link": "", - "personal_link": "" - }, - { - "name": "Rahil Shah", - "org": "cyber", - "title": "Director of Content", - "specialization": "", - "profile_image": "", - "email": "rahil@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/rahil-shah-383b7715a/", - "personal_link": "https://rahil.us" - }, - { - "name": "Jessica Lam", - "org": "cyber", - "title": "Director of Membership", - "specialization": "", - "profile_image": "", - "email": "jessica@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/jessicalam948/", - "personal_link": "" - }, - { - "name": "Aaron James Eason", - "org": "cyber", - "title": "Director of Finance", - "specialization": "\"Daddy of Dollars\"", - "profile_image": "", - "email": "aaron@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/aaron-james-eason/", - "personal_link": "" - }, - { - "name": "David Dempsey", - "org": "hack", - "title": "President", - "specialization": "", - "profile_image": "", - "email": "david@acmucsd.org", - "linkedin_link": "", - "personal_link": "" - }, - { - "name": "Bella Coles", - "org": "hack", - "title": "External Relations Lead", - "specialization": "", - "profile_image": "https://drive.google.com/uc?id=1pvaEnD9ZCcXnqv37Sns3i22QL5LXeJXF", - "email": "", - "linkedin_link": "", - "personal_link": "" - }, - { - "name": "Trisa Leung", - "org": "hack", - "title": "Projects Lead", - "specialization": "", - "profile_image": "https://drive.google.com/uc?id=1-WUkdMou0mfkUniUX7QZd8DFvcsSqDOS", - "email": "trisa@acmucsd.org", - "linkedin_link": "", - "personal_link": "" - }, - { - "name": "Garrett Luu", - "org": "hack", - "title": "Technical Event Lead", - "specialization": "", - "profile_image": "https://drive.google.com/uc?id=1W7s1UWcq4mt1DT1-WGkyTfIDQZdxkpjM", - "email": "garrett@acmucsd.org", - "linkedin_link": "", - "personal_link": "" - }, - { - "name": "Faris Ashai", - "org": "hack", - "title": "Technical Event Lead", - "specialization": "", - "profile_image": "", - "email": "faris@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/farisashai", - "personal_link": "https://www.farisashai.github.io" - }, - { - "name": "Ryan Heo", - "org": "hack", - "title": "Technical Event Lead", - "specialization": "", - "profile_image": "", - "email": "", - "linkedin_link": "", - "personal_link": "" - }, - { - "name": "Yuru Zhou", - "org": "hack", - "title": "Technical Event Lead", - "specialization": "", - "profile_image": "", - "email": "yuz0712@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/yuz101/", - "personal_link": "" - }, - { - "name": "Henry Chan", - "org": "hack", - "title": "Technical Event Lead", - "specialization": "", - "profile_image": "https://drive.google.com/uc?id=1lrYnOWB65E_Z9K_N1mCCBvCrRifgg3Ur", - "email": "henry@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/henry-c/", - "personal_link": "https://chanhenry54.github.io/" - }, - { - "name": "Shravan Hariharan", - "org": "hack", - "title": "Technical Event Lead", - "specialization": "", - "profile_image": "https://drive.google.com/uc?id=1zubhJ2qvurmM4brmCgnOiFMu31HkTCjL", - "email": "shravan@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/shravanhariharan/", - "personal_link": "" - }, - { - "name": "Praneet Bhoj", - "org": "innovate", - "title": "President", - "specialization": "", - "profile_image": "https://drive.google.com/uc?id=1aTGnCr_8mzkGqtymd3oPPdOp80Q6M45D", - "email": "praneet@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/praneet-bhoj/", - "personal_link": "" - }, - { - "name": "Ryan Heo", - "org": "innovate", - "title": "Workshop Director", - "specialization": "", - "profile_image": "", - "email": "ryan@acmusd.org", - "linkedin_link": "", - "personal_link": "" - }, - { - "name": "Jacob Bolano", - "org": "innovate", - "title": "Workshop Director", - "specialization": "", - "profile_image": "https://drive.google.com/uc?id=1U7oI1PsC_EL2HlXnjEtSB9vjGZD2ANg_", - "email": "jacob.bolano@acmucsd.org", - "linkedin_link": "https://www.linkedin.com/in/jacobbolano/", - "personal_link": "" - }, - { - "name": "Yunyi Huang", - "org": "innovate", - "title": "Talk Manager", - "specialization": "", - "profile_image": "", - "email": "yunyi@acmucsd.org", - "linkedin_link": "", - "personal_link": "" - } -] diff --git a/src/components/BoardCard/index.tsx b/src/components/BoardCard/index.tsx index b196f21d..e87cf43e 100644 --- a/src/components/BoardCard/index.tsx +++ b/src/components/BoardCard/index.tsx @@ -5,18 +5,9 @@ import AIDefault from "public/assets/default-board-images/ai-default.svg"; import CyberDefault from "public/assets/default-board-images/cyber-default.svg"; import HackDefault from "public/assets/default-board-images/hack-default.svg"; import InnovateDefault from "public/assets/default-board-images/innovate-default.svg"; - -interface BoardMember { - name: string; - org: string; - title: string; - email: string; - profile_image: string; - personal_link: string; - linkedin_link: string; -} +import { BoardMemberProps } from "src/types/index"; interface BoardCardProps { - boardmember: BoardMember; + boardmember: BoardMemberProps; } const defaultProps: BoardCardProps = { diff --git a/src/components/BoardGrid/index.tsx b/src/components/BoardGrid/index.tsx index e41f5d63..3d9d6a3f 100644 --- a/src/components/BoardGrid/index.tsx +++ b/src/components/BoardGrid/index.tsx @@ -4,9 +4,10 @@ import BoardCard from "src/components/BoardCard"; import LeftArrow from "public/assets/left-arrow.svg"; import RightArrow from "public/assets/right-arrow.svg"; +import { BoardMemberProps } from "src/types/index"; interface BoardGridProps { - members_list: unknown[]; + members_list: BoardMemberProps[]; isMobile: boolean; } const generateCurrentPage = (members_list, page) => { diff --git a/src/components/Button/styles.scss b/src/components/Button/styles.scss index 0fffacc3..1cf32561 100644 --- a/src/components/Button/styles.scss +++ b/src/components/Button/styles.scss @@ -25,5 +25,5 @@ .button:hover { opacity: 0.85; transform: translatey(-1px); - transition: 200ms; + transition: 0.2s; } diff --git a/src/components/EventCard/index.tsx b/src/components/EventCard/index.tsx new file mode 100644 index 00000000..24470c22 --- /dev/null +++ b/src/components/EventCard/index.tsx @@ -0,0 +1,35 @@ +import s from "src/styles/modules/Events.module.scss"; + +const EventCard: React.FC<{ + month: string; + date: number; + day: string; + org: string; + title: string; + location: string; + time: string; + facebookUrl?: string; +}> = ({ month, date, day, title, org, location, time, facebookUrl }) => ( +
+
+

+ {month} + {date} +

+

{day}

+
+
+

{title}

+

{location}

+

{time}

+
+
+ {!facebookUrl ? null : ( + + + + )} +
+
+); +export default EventCard; diff --git a/src/components/Footer/styles.scss b/src/components/Footer/styles.scss index 3ccfddfd..862e77ce 100644 --- a/src/components/Footer/styles.scss +++ b/src/components/Footer/styles.scss @@ -123,7 +123,7 @@ cursor: pointer; color: $black; background-color: $hover-blue; - transition-duration: 200ms; + transition-duration: 0.2s; } } .vercel-btn { diff --git a/src/components/NavigationBar/Navbar.module.scss b/src/components/NavigationBar/Navbar.module.scss new file mode 100644 index 00000000..328d5320 --- /dev/null +++ b/src/components/NavigationBar/Navbar.module.scss @@ -0,0 +1,182 @@ +@use "src/styles/colors" as colors; + +.navbarWrapper { + position: fixed; + top: 0; + width: 100%; + font-weight: bold; + z-index: 10; + white-space: nowrap; + + // container for fixed navbar (desktop and mobile) + .navbar { + background-color: colors.$white; + z-index: 20; + font-size: 18px; + width: 100%; + + height: 78px; + display: flex; + justify-content: space-between; + align-items: center; + + // left side of navbar is just the acm logo + .left { + height: 78px; + padding-top: 9px; + padding-bottom: 9px; + margin-left: 32px; + a { + display: flex; + flex-direction: row; + align-items: center; + text-decoration: none; + > img { + height: 60px; + margin: 0; + } + > p { + font-size: 16px; + color: colors.$black; + margin-left: 4px; + margin-bottom: 2px; + } + } + } + + // navbar right side contains all navlinks on desktop + .right { + display: flex; + flex-flow: row nowrap; + justify-content: center; + align-items: center; + + .navItem { + display: flex; + align-items: center; + text-decoration: none; + color: colors.$black; + margin-right: 32px; + } + + .loginButton { + height: 100%; + align-self: center; + + display: flex; + justify-content: center; + align-items: center; + text-decoration: none; + + height: 35px; + width: 150px; + + color: colors.$white; + background-color: colors.$black; + border-radius: 0.5em; + margin-right: 32px; + + &:hover { + opacity: 0.85; + transition: 0.3s; + } + } + &.hidden { + display: none; + } + } + + // toggle button for mobile menu is only visible on mobile, otherwise hidden + .toggleIcon { + position: relative; + width: 40px; + height: 20px; + margin: 0 30px; + padding: 0; + background-color: colors.$white; + + // the toggle icon is composed of two bars we can separately animate between a hamburger icon and an x icon (default is hamburger, we have .open class we can toggle to rotate into the shape of an x) + .bar1 { + width: 40px; + height: 5px; + border-radius: 2px; + background-color: colors.$black; + position: absolute; + top: 1.5px; + transition: 0.3s ease-in-out all; + + &.open { + transform: rotate(45deg); + top: 5px; + right: 0; + } + } + + .bar2 { + width: 23px; + height: 5px; + border-radius: 2px; + background-color: colors.$black; + position: absolute; + right: 0; + bottom: 1.5px; + transition: 0.3s ease-in-out all; + + &.open { + transform: rotate(-45deg); + width: 40px; + top: 5px; + right: 0; + } + } + &.hidden { + display: none; + } + } + } + + // menu div for links only on mobile version + .mobileNav { + width: 100vw; + background-color: colors.$white; + position: relative; + z-index: -1; + display: flex; + flex-flow: column nowrap; + justify-content: center; + align-items: center; + line-height: 300%; + transition: 0.3s ease-in-out; + // mobile menu is hidden by positioning under fixed navbar, we open it by sliding it out + margin-top: -18rem; + &.open { + margin-top: 0; + } + .navItem { + width: 100%; + text-align: center; + color: colors.$black; + transition: 0.3s ease-in-out all; + text-decoration: underline solid transparent; + &:hover { + text-decoration: underline solid currentColor; + } + } + } + + // rainbow bar is always visible below navbar, positioned to be at the bottom of the container even when mobile slides out and height changes + .rainbow { + width: 100vw; + height: 0.4em; + bottom: -0.4em; + background: linear-gradient( + 270deg, + colors.$red 0%, + colors.$orange 18.75%, + colors.$green 36.98%, + colors.$turquoise 55.73%, + colors.$blue 75%, + colors.$purple 100% + ); + } +} diff --git a/src/components/NavigationBar/Navbar.module.scss.d.ts b/src/components/NavigationBar/Navbar.module.scss.d.ts new file mode 100644 index 00000000..0841fa1f --- /dev/null +++ b/src/components/NavigationBar/Navbar.module.scss.d.ts @@ -0,0 +1,23 @@ +// AUTOGENERATED FILE -- DO NOT EDIT DIRECTLY + +declare namespace NavbarModuleScssNamespace { + export interface INavbarModuleScss { + bar1: string; + bar2: string; + hidden: string; + left: string; + loginButton: string; + mobileNav: string; + navItem: string; + navbar: string; + navbarWrapper: string; + open: string; + rainbow: string; + right: string; + toggleIcon: string; + } +} + +declare const NavbarModuleScssModule: NavbarModuleScssNamespace.INavbarModuleScss; + +export = NavbarModuleScssModule; diff --git a/src/components/NavigationBar/index.tsx b/src/components/NavigationBar/index.tsx index 5e82af09..9f03d462 100644 --- a/src/components/NavigationBar/index.tsx +++ b/src/components/NavigationBar/index.tsx @@ -1,103 +1,79 @@ import Link from "next/link"; -import Image from "next/image"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import ACMLogo from "public/assets/ACMWhiteLogo.png"; -import CloseMenuButton from "public/assets/closemenubutton.svg"; -import MenuButtonIcon from "public/assets/menubutton.svg"; +import s from "src/components/NavigationBar/Navbar.module.scss"; +import { Size, useWindowSize } from "src/utils"; const navLinks = [ - { to: "/sponsor", text: "Sponsor" }, - { to: "/communities", text: "Communities" }, - { to: "/events", text: "Events" }, { to: "/about", text: "About Us" }, + { to: "/events", text: "Events" }, + { to: "/communities", text: "Communities" }, + { to: "/sponsor", text: "Sponsor" }, + { to: "#contact", text: "Contact" }, ]; const NavigationBar: React.FC = () => { - const [menuState, setMenuState] = useState(false); + const size: Size = useWindowSize(); + + const [menuOpen, setMenuOpen] = useState(false); + const [mobile, setMobile] = useState(false); + const toggleMenu = () => setMenuOpen(!menuOpen); - const toggleMenu = () => setMenuState(!menuState); + // Switch to mobile less than 920px + useEffect(() => { + setMobile(size.width < 920); + }, [size]); + + // If they go back to desktop size, don't keep the menu open + useEffect(() => { + if (!mobile) setMenuOpen(false); + }, [mobile]); return ( -
-
- + + Member Login + +
+ {/* Mobile Navbar Toggle */} +
- {menuState ? ( -
- - - About Us - - - Events - - - Communities + {/* Mobile Menu Dropdown */} +
+ {navLinks.map((link, key) => ( + + {link.text} - - Sponsor - - - Contact - - Login -
- ) : ( -
-
- - - ACM Logo -

at UCSD

- - - -
-
- )} + ))} + + Member Login + +
-
+ {/* Bottom Rainbow */} +
); }; diff --git a/src/components/NavigationBar/styles.scss b/src/components/NavigationBar/styles.scss deleted file mode 100644 index 2fc2c6ed..00000000 --- a/src/components/NavigationBar/styles.scss +++ /dev/null @@ -1,210 +0,0 @@ -@import "src/styles/colors.scss"; - -.navigation-bar { - height: 78px; - font-size: 18px; - font-weight: bold; - - ul { - text-decoration: none; - margin: 0 !important; - padding: 0 !important; - list-style-type: none; - height: 100%; - } - li { - display: flex; - justify-content: center; - align-items: center; - margin-bottom: 0 !important; - text-decoration: none; - list-style-type: none; - height: 100%; - margin-right: 32px; - } - - &__logo { - float: left; - height: 78px; - padding-top: 9px; - padding-bottom: 9px; - margin-left: 32px; - a { - display: flex; - flex-direction: row; - align-items: center; - text-decoration: none; - > img { - height: 60px; - margin: 0; - } - > p { - font-size: 16px; - color: $black; - margin-left: 4px; - margin-bottom: 2px; - } - } - } - - &__nav-button { - float: right; - display: flex; - align-items: center; - a { - text-decoration: none; - color: $black; - } - } - &__login { - float: right; - height: 100%; - align-self: center; - &:hover { - opacity: 0.85; - transition: 200ms; - } - a { - display: flex; - justify-content: center; - align-items: center; - text-decoration: none; - - height: 35px !important; - width: 150px; - - color: $white !important; - background-color: $black !important; - border-radius: 0.5em; - } - } - - &__nav-button--login { - float: right; - } -} -.fixed-nav { - position: fixed; - top: 0; - width: 100%; - font-weight: bold; - background-color: $white; - z-index: 2; - font-size: 18px; - height: 78px; -} -.rainbow { - width: 100vw; - height: 0.4em; - display: table; - z-index: 3; - background: linear-gradient( - 270deg, - $red 0%, - $orange 18.75%, - $green 36.98%, - $turquoise 55.73%, - $blue 75%, - $purple 100% - ); -} -.navbar-mobile-div { - display: none; -} -// Styling for menu based nav bar - -.mobile-links { - display: none; -} - -@media only screen and (max-width: 900px) { - .navigation-bar { - display: none; - } - .navbar-mobile { - margin: 0px !important; - height: 78px; - a:first-of-type { - img { - margin-bottom: 0px !important; - } - } - } - .navbar-mobile-div { - font-size: 16px; - display: block; - } - - .navbar-mobile > button { - padding: 0px 30px; - float: right; - border: none; - background-color: transparent; - outline: none; - } - - .navbar-mobile > a:first-of-type { - display: flex; - align-items: center; - float: left; - height: 60px; - margin: 9px 32px; - text-decoration: none; - img { - height: 60px; - } - > p { - color: $black; - margin: 0 0 0 4px; - } - } - .icon { - height: 78px; - } - .menuicon { - height: 20px; - width: 40px; - margin: 29px 0; - } - - .mobile-links { - z-index: 2; - display: block; - background-color: $black; - padding-top: 0.5em; - padding-bottom: 0.5em; - a { - font-size: 24px !important; - font-weight: bold; - text-decoration: underline solid transparent; - transition: text-decoration 0.2s ease; - color: $white; - padding: 0.5em; - display: block; - text-align: center; - background-color: $black; - } - a:first-of-type { - margin-top: 0.5em; - } - a:hover { - text-decoration: underline solid Currentcolor; - } - button { - position: absolute; - right: 30px; - top: 28px; - height: 40px !important; - width: 60px !important; - color: $white; - background-color: $black; - cursor: pointer; - border: none; - outline: 0; - font-size: 1.3em; - img { - float: right; - } - } - } -} diff --git a/src/sections/about/About.Board.tsx b/src/sections/about/About.Board.tsx index 00b2b299..56c801da 100644 --- a/src/sections/about/About.Board.tsx +++ b/src/sections/about/About.Board.tsx @@ -20,34 +20,30 @@ import HackEmpty from "public/assets/board-filters/hack-empty.svg"; import InnovateSelected from "public/assets/board-filters/innovate-selected.svg"; import InnovateEmpty from "public/assets/board-filters/innovate-empty.svg"; -import BoardData from "src/board-data.json"; -const members_list = BoardData; +import { BoardMemberProps } from "src/types"; const filter = (filters, members_list) => { if (filters.length == 0) { // assume all board return members_list; } else { - const displayList = members_list.filter((member) => - filters.includes(member.org) - ); + const displayList = members_list.filter(member => filters.includes(member.org)); return displayList; } }; const renderFilters = (filters, setFilters) => {}; interface AboutBoardProps { isMobile: boolean; + board: BoardMemberProps[]; } -const AboutBoard: React.FC = ({ isMobile }) => { +const AboutBoard: React.FC = ({ isMobile, board }) => { const [filters, setFilters] = useState([]); - const [displayList, setDisplayList] = useState(members_list); + const [displayList, setDisplayList] = useState(board); useEffect(() => { - setDisplayList(filter(filters, members_list)); - }, [filters]); - useEffect(() => { - setDisplayList(filter(filters, members_list)); - }, [filters]); + setDisplayList(filter(filters, board)); + }, [board, filters]); + return (

Meet the Board

@@ -71,7 +67,7 @@ const AboutBoard: React.FC = ({ isMobile }) => { alt="general is now selected" src={GeneralSelected.src} onClick={() => { - setFilters(filters.filter((e) => e !== "general")); + setFilters(filters.filter(e => e !== "general")); }} /> ) : ( @@ -87,22 +83,18 @@ const AboutBoard: React.FC = ({ isMobile }) => { alt="ai is now selected" src={AISelected.src} onClick={() => { - setFilters(filters.filter((e) => e !== "ai")); + setFilters(filters.filter(e => e !== "ai")); }} /> ) : ( - ai is not selected setFilters(["ai"])} - /> + ai is not selected setFilters(["ai"])} /> )} {filters.includes("cyber") ? ( cyber is now selected { - setFilters(filters.filter((e) => e !== "cyber")); + setFilters(filters.filter(e => e !== "cyber")); }} /> ) : ( @@ -117,7 +109,7 @@ const AboutBoard: React.FC = ({ isMobile }) => { src={HackSelected.src} alt="hack is selected" onClick={() => { - setFilters(filters.filter((e) => e !== "hack")); + setFilters(filters.filter(e => e !== "hack")); }} /> ) : ( @@ -132,7 +124,7 @@ const AboutBoard: React.FC = ({ isMobile }) => { src={InnovateSelected.src} alt="innovate is selected" onClick={() => { - setFilters(filters.filter((e) => e !== "innovate")); + setFilters(filters.filter(e => e !== "innovate")); }} /> ) : ( diff --git a/src/sections/events/Events.Content.tsx b/src/sections/events/Events.Content.tsx new file mode 100644 index 00000000..3e924826 --- /dev/null +++ b/src/sections/events/Events.Content.tsx @@ -0,0 +1,38 @@ +import { EventsArray } from "src/api/EventsAPI"; +import EventCard from "src/components/EventCard"; +import s from "src/styles/modules/Events.module.scss"; +import { days, months, getDateTime } from "src/utils"; + +const EventsContent: React.FC<{ events: EventsArray }> = ({ events }) => { + return ( +
+ {/*
+

Events

+
+ + + + + +
+
*/} +
+ {events.map((event, key) => ( + + ))} +
+
+ ); +}; + +export default EventsContent; diff --git a/src/styles/modules/Events.module.scss b/src/styles/modules/Events.module.scss new file mode 100644 index 00000000..7f277308 --- /dev/null +++ b/src/styles/modules/Events.module.scss @@ -0,0 +1,167 @@ +.eventsContainer { + margin: 0 3rem; + width: auto; +} + +// .header { +// margin-top: 1.5rem; +// display: flex; +// flex-direction: row; +// justify-content: space-between; +// align-items: center; +// } + +// .headerText { +// width: fit-content; +// margin: 0; +// padding: 0; +// } + +// .filterContainer { +// display: flex; +// flex-direction: row; +// gap: 0 10px; +// } + +// .filterButton { +// width: 7.5rem; +// height: 2rem; +// padding: 0; +// background: #ffffff; +// border: 1px solid black; +// box-sizing: border-box; +// box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.25); +// border-radius: 10px; +// font-family: DM Sans; +// font-style: normal; +// font-weight: bold; +// font-size: 20px; +// line-height: 100%; + +// &.general { +// border-color: #62b0ff; +// color: #62b0ff; +// } +// &.hack { +// border-color: #f9a857; +// color: #f9a857; +// } +// &.cyber { +// border-color: #51c0c0; +// color: #51c0c0; +// } +// &.innovate { +// border-color: #816dff; +// color: #816dff; +// } +// &.ai { +// border-color: #ff6f6f; +// color: #ff6f6f; +// } +// } + +.cardContainer { + width: 100%; + display: grid; + gap: 2rem 2rem; + grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); + justify-items: center; + align-items: center; + margin-top: 2rem; +} + +.card { + width: 100%; + height: 177px; + background: #ffffff; + box-shadow: 0px 1px 6px #000000; + border-radius: 20px; + position: relative; + padding: 0.75rem; + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 2rem 1fr 20px; + + .cardHeader { + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: baseline; + + .cardDate { + font-family: DM Sans; + font-style: normal; + font-weight: normal; + font-size: 25px; + line-height: 100%; + color: #333333; + margin: 0; + display: inline; + } + .cardDay { + display: inline; + margin: 0 0 0 10px; + font-family: DM Sans; + font-style: normal; + font-weight: normal; + font-size: 11px; + line-height: 100%; + color: #000000; + text-transform: uppercase; + } + } + + .cardBody { + display: flex; + flex-flow: column; + justify-content: center; + + .eventTitle { + font-family: DM Sans; + font-style: normal; + font-weight: bold; + font-size: 15px; + line-height: 110%; + white-space: pre-wrap; /*keep text on one line */ + overflow: hidden; /*prevent text from being shown outside the border */ + text-overflow: ellipsis; /*cut off text with an ellipsis*/ + max-height: 40px; + margin: 0; + &.general { + color: #62b0ff; + } + &.innovate { + color: #816dff; + } + &.hack { + color: #f9a857; + } + &.cyber { + color: #51c0c0; + } + &.ai { + color: #ff6f6f; + } + } + .eventLocation, + .eventTime { + font-family: DM Sans; + font-style: normal; + font-weight: normal; + font-size: 13px; + line-height: 17px; + + color: #333333; + margin: 0; + } + } + .cardFooter { + .footerIcon { + width: 20px; + height: 20px; + + filter: invert(1); + margin: 0; + } + } +} diff --git a/src/styles/modules/Events.module.scss.d.ts b/src/styles/modules/Events.module.scss.d.ts new file mode 100644 index 00000000..feafa702 --- /dev/null +++ b/src/styles/modules/Events.module.scss.d.ts @@ -0,0 +1,27 @@ +// AUTOGENERATED FILE -- DO NOT EDIT DIRECTLY + +declare namespace EventsModuleScssNamespace { + export interface IEventsModuleScss { + ai: string; + card: string; + cardBody: string; + cardContainer: string; + cardDate: string; + cardDay: string; + cardFooter: string; + cardHeader: string; + cyber: string; + eventLocation: string; + eventTime: string; + eventTitle: string; + eventsContainer: string; + footerIcon: string; + general: string; + hack: string; + innovate: string; + } +} + +declare const EventsModuleScssModule: EventsModuleScssNamespace.IEventsModuleScss; + +export = EventsModuleScssModule; diff --git a/src/types/index.ts b/src/types/index.ts index eb25c350..49e28b5f 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -3,3 +3,13 @@ export interface IPost { title: string; body: string; } + +export interface BoardMemberProps { + name: string; + org: string; + title: string; + email?: string; + profile_image: string; + personal_link?: string; + linkedin_link?: string; +} diff --git a/src/utils.ts b/src/utils.ts index d838c195..71ced202 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -111,3 +111,20 @@ export function useWindowSize(): Size { }, []); return windowSize; } + +export const months = [ + "Jan", + "Feb", + "Mar", + "Apr", + "May", + "June", + "July", + "Aug", + "Sept", + "Oct", + "Nov", + "Dec", +]; + +export const days = ["Mon", "Tues", "Wed", "Thurs", "Fri", "Sat", "Sun"];