diff --git a/netlify.toml b/netlify.toml new file mode 100644 index 0000000..8057155 --- /dev/null +++ b/netlify.toml @@ -0,0 +1,3 @@ +[build] + command = "yarn build" + publish = ".next" \ No newline at end of file diff --git a/next.config.js b/next.config.js index 5f2e76d..5fa2801 100644 --- a/next.config.js +++ b/next.config.js @@ -34,5 +34,6 @@ module.exports = { env: { SMU_SCRAPER_URL: process.env.SMU_SCRAPER_URL, SCHOOL_SEMESTERS_URL: process.env.SCHOOL_SEMESTERS_URL, + CLASSMAID_URL: process.env.CLASSMAID_URL, }, }; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 8d20878..f9f7a1a 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,17 +1,117 @@ import { NextPage } from 'next'; import { useRouter } from 'next/router'; import React from 'react'; +import styled from 'styled-components'; + +import { CardTemplate } from '../screens/smu/components/widget/styled'; +import TodaySummaryWidget from '../screens/smu/components/widget/TodaySummary'; +import useWidgetSize from '../shared/hooks/useWidgetSize'; +import { MOBILE_WIDTH_SIZE_L } from '../shared/themes/size'; + +const MainWrapper = styled.div` + display: grid; + height: 100dvh; + justify-content: center; + align-items: center; + + @media screen and (max-width: ${MOBILE_WIDTH_SIZE_L}) { + display: flex; + flex-direction: column; + justify-content: flex-start; + } +`; + +const ContentWrapper = styled.div` + display: grid; + gap: 1em; + align-content: center; + align-items: center; + grid-template-areas: 'image message'; + + @media screen and (max-width: ${MOBILE_WIDTH_SIZE_L}) { + display: flex; + flex-direction: column; + gap: 0; + } +`; + +const WidgetWrapper = styled.div` + grid-area: image; + display: flex; + justify-content: flex-end; +`; + +const MessageWrapper = styled.div` + grid-area: message; + display: flex; +`; + +const Header = styled.h1` + font-size: 2.25rem; + margin: 0; + color: ${(props) => props.theme.textColor[10]}; + + @media screen and (max-width: ${MOBILE_WIDTH_SIZE_L}) { + font-size: 1.85rem; + } +`; + +const Message = styled.p` + margin-top: 8px; + margin-bottom: 8px; + font-size: 1.35rem; + color: ${(props) => props.theme.textColor[20]}; + line-height: 2rem; + font-weight: 500; + + a { + color: ${(props) => props.theme.primary[50]}; + text-decoration-color: ${(props) => props.theme.primary[50]}; + } + + @media screen and (max-width: ${MOBILE_WIDTH_SIZE_L}) { + font-size: 1rem; + line-height: 1.5rem; + } +`; export const ClassMaidHome: NextPage = function () { - // NOTE: (hello@amostan.me) Temp redirect to `/smu` page - // TODO: (hello@amostan.me) Build home page to select different schools - const { push } = useRouter(); + const router = useRouter(); + const widgetSize = useWidgetSize('large'); + const redirectUrl = `${process.env.CLASSMAID_URL ?? 'http://localhost:3000'}`; React.useEffect(() => { - push('/smu'); - }, [push]); + const redirect = setTimeout(() => { + router.push(redirectUrl); + }, 5000); + + return () => clearTimeout(redirect); + }, [redirectUrl, router]); - return
; + return ( + + + + + + + +
We have rebranded!
+ + { + "Don't worry, everything you loved about SMU Shortcuts can be found in " + } + Classmaid.sg! + + + You will be redirected in 5 seconds. Click the link if you are not + redirected immediately. + + + + + + ); }; export default ClassMaidHome; diff --git a/src/pages/smu/calendar.tsx b/src/pages/smu/calendar.tsx deleted file mode 100644 index 1ba0687..0000000 --- a/src/pages/smu/calendar.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; - -import CalendarList from '../../screens/smu/components/widget/Calendar/CalendarList'; -import DefaultLayout from '../../shared/components/layouts/DefaultLayout'; - -const Wrapper = styled.div` - box-sizing: border-box; - display: flex; - height: 100%; - - padding-top: 24px; - padding-bottom: max(24px, env(safe-area-inset-bottom)); - padding-left: max(16px, env(safe-area-inset-left)); - padding-right: max(16px, env(safe-area-inset-right)); - - @media screen and (max-width: ${(props) => props.theme.mobileSize}) { - padding-top: 16px; - padding-bottom: max(16px, env(safe-area-inset-bottom)); - padding-left: max(8px, env(safe-area-inset-left)); - padding-right: max(8px, env(safe-area-inset-right)); - - flex-direction: column; - overflow-y: auto; - } -`; - -export const Calendar: React.FC = () => { - return ( - - - - - - ); -}; - -export default Calendar; diff --git a/src/pages/smu/index.tsx b/src/pages/smu/index.tsx deleted file mode 100644 index f5e25e4..0000000 --- a/src/pages/smu/index.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import type { NextPage } from 'next'; -import React from 'react'; -import styled from 'styled-components'; - -import AppLibrary from '../../screens/smu/components/widget/AppLibrary'; -import LibraryCapacities from '../../screens/smu/components/widget/LibraryCapacities'; -import TodaySummaryWidget from '../../screens/smu/components/widget/TodaySummary'; -import DefaultLayout from '../../shared/components/layouts/DefaultLayout'; -import { - DESKTOP_WIDTH_SIZE_M, - DESKTOP_WIDTH_SIZE_S, - MOBILE_WIDTH_SIZE_L, - MOBILE_WIDTH_SIZE_S, -} from '../../shared/themes/size'; - -const ContentWrapper = styled.div` - box-sizing: border-box; - display: flex; - justify-content: center; -`; - -const Wrapper = styled.div` - width: 1020px; - display: flex; - flex-wrap: wrap; - - padding-top: 40px; - padding-bottom: 64px; - - @media screen and (max-width: ${DESKTOP_WIDTH_SIZE_M}) { - width: 920px; - } - - @media screen and (max-width: ${DESKTOP_WIDTH_SIZE_S}) { - width: 700px; - } - - @media screen and (max-width: ${MOBILE_WIDTH_SIZE_L}) { - width: 90%; - } - - @media screen and (max-width: ${MOBILE_WIDTH_SIZE_S}) { - justify-content: center; - } -`; - -export const Home: NextPage = function () { - return ( - - - - - - - - - - ); -}; - -export default Home;