From d37c2d7a49027a9e6ded708cecc6664e09d87fe8 Mon Sep 17 00:00:00 2001 From: Nathan Wang Date: Sat, 18 Jul 2020 01:27:36 -0700 Subject: [PATCH] more work on dashboard --- src/backup_syllabus.tsx | 357 ------------------ .../ContactUsSlideover/SlideoverForm.tsx | 2 +- src/components/ModuleLayout/ModuleLayout.tsx | 134 +------ .../Accordion.tsx | 0 .../ItemLink.tsx | 93 +---- .../ModuleSidebarNav.tsx} | 2 +- src/components/Sidebar/Sidebar.tsx | 54 ++- .../Sidebar/SidebarBottomButtons.tsx | 63 ++++ src/components/Sidebar/SidebarLink.tsx | 96 +++++ src/pages/syllabus.tsx | 243 ++++++++++++ 10 files changed, 479 insertions(+), 565 deletions(-) delete mode 100644 src/backup_syllabus.tsx rename src/components/ModuleLayout/{SidebarNav => ModuleSidebarNav}/Accordion.tsx (100%) rename src/components/ModuleLayout/{SidebarNav => ModuleSidebarNav}/ItemLink.tsx (51%) rename src/components/ModuleLayout/{SidebarNav/SidebarNav.tsx => ModuleSidebarNav/ModuleSidebarNav.tsx} (96%) create mode 100644 src/components/Sidebar/SidebarBottomButtons.tsx create mode 100644 src/components/Sidebar/SidebarLink.tsx create mode 100644 src/pages/syllabus.tsx diff --git a/src/backup_syllabus.tsx b/src/backup_syllabus.tsx deleted file mode 100644 index 2bc90d8..0000000 --- a/src/backup_syllabus.tsx +++ /dev/null @@ -1,357 +0,0 @@ -import * as React from 'react'; -import { PageProps } from 'gatsby'; -import Layout from '../components/layout'; -import SEO from '../components/seo'; -import Sidebar, { SidebarLogo } from '../components/Sidebar/Sidebar'; -import { useState } from 'react'; -// @ts-ignore -import logo from '../assets/logo.svg'; - -export default function SyllabusPage(props: PageProps) { - const [isMobileNavOpen, setIsMobileNavOpen] = useState(false); - return ( - - -
- -
- Workflow -
- - - } - desktopSidebarContent={ -
-
- Workflow -
-
- {/* Sidebar component, swap this element with another sidebar if you like */} - -
-
- } - > -
-
- -
-
-
- -
-
- - - -
- -
-
-
-
- -
-
-
-
-
-
-

- Dashboard -

-
-
- {/* Replace with your content */} -
-
-
- {/* /End replace */} -
-
-
-
- -
- - ); -} diff --git a/src/components/ContactUsSlideover/SlideoverForm.tsx b/src/components/ContactUsSlideover/SlideoverForm.tsx index cfc4de3..45d149b 100644 --- a/src/components/ContactUsSlideover/SlideoverForm.tsx +++ b/src/components/ContactUsSlideover/SlideoverForm.tsx @@ -15,7 +15,7 @@ type SlideoverProps = { export default function SlideoverForm(props: SlideoverProps) { return ( -
+
{ const textColors = [ @@ -114,64 +118,6 @@ const Breadcrumbs = () => { ); }; -const SidebarBottomButtons = ({ onContactUs }) => { - const languages = { - showAll: 'All', - cpp: 'C++', - java: 'Java', - py: 'Python', - }; - const nextLang: { [key: string]: UserLang } = { - showAll: 'cpp', - cpp: 'java', - java: 'py', - py: 'cpp', - }; - const userSettings = useContext(UserDataContext); - return ( - <> -
- -
-
- -
- - ); -}; - const NavBar = ({ alignNavButtonsRight = true }) => { const moduleLayoutInfo = useContext(ModuleLayoutContext); const { module, moduleLinks } = moduleLayoutInfo; @@ -278,7 +224,6 @@ export default function ModuleLayout({ const { userProgressOnModules, setModuleProgress, lang } = useContext( UserDataContext ); - const [isContactUsActive, setIsContactUsActive] = useState(false); const [isConfettiActive, setIsConfettiActive] = useState(false); const [isMobileNavOpen, setIsMobileNavOpen] = useState(false); const moduleProgress = @@ -326,64 +271,20 @@ export default function ModuleLayout({ onDone={() => setIsConfettiActive(false)} /> } mobileSidebarContent={ -
-
- + <> + +
+
-
- -
- -
- -
- { - setIsMobileNavOpen(false); - setIsContactUsActive(true); - }} - /> -
- } - desktopSidebarContent={ -
-
- - {/* Sidebar component, swap this element with another sidebar if you like */} - -
- setIsContactUsActive(true)} - /> -
+ + } >
@@ -510,11 +411,6 @@ export default function ModuleLayout({
- setIsContactUsActive(false)} - activeModule={module} - /> ); } diff --git a/src/components/ModuleLayout/SidebarNav/Accordion.tsx b/src/components/ModuleLayout/ModuleSidebarNav/Accordion.tsx similarity index 100% rename from src/components/ModuleLayout/SidebarNav/Accordion.tsx rename to src/components/ModuleLayout/ModuleSidebarNav/Accordion.tsx diff --git a/src/components/ModuleLayout/SidebarNav/ItemLink.tsx b/src/components/ModuleLayout/ModuleSidebarNav/ItemLink.tsx similarity index 51% rename from src/components/ModuleLayout/SidebarNav/ItemLink.tsx rename to src/components/ModuleLayout/ModuleSidebarNav/ItemLink.tsx index f5d174c..c1e4b8e 100644 --- a/src/components/ModuleLayout/SidebarNav/ItemLink.tsx +++ b/src/components/ModuleLayout/ModuleSidebarNav/ItemLink.tsx @@ -1,81 +1,11 @@ import * as React from 'react'; import { Link } from 'gatsby'; import { ModuleLinkInfo } from '../../../models/module'; -import styled from 'styled-components'; import tw from 'twin.macro'; import { useContext } from 'react'; import ModuleLayoutContext from '../../../context/ModuleLayoutContext'; import UserDataContext from '../../../context/UserDataContext'; - -const LinkWithProgress = styled.span` - ${tw`block relative`} - - &::after { - content: ''; - left: 24px; - top: 18px; - height: 8px; - width: 8px; - position: absolute; - transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0s; - } - - &::after { - border-radius: 100%; - ${props => props.dotColorStyle}; - } - - &::before { - content: ''; - position: absolute; - width: 2px; - display: block; - left: 27px; - top: 0; - bottom: 0; - ${props => props.lineColorStyle}; - } - - &:first-of-type::before { - top: 22px; - } - - &:last-of-type::before { - bottom: calc(100% - 22px); - } -`; - -const StyledLink = styled.span` - ${tw`focus:outline-none transition ease-in-out duration-150 hover:text-blue-700 hover:bg-blue-50 focus:bg-blue-100 flex items-center pl-12 pr-4 py-3 text-sm leading-5`} - - ${({ isActive, activeTextStyle }) => - isActive ? activeTextStyle : tw`text-gray-600`} - - - &::before { - content: ''; - left: 24px; - top: 18px; - height: 8px; - width: 8px; - position: absolute; - transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0s; - } - - &::before { - transform: ${({ isActive }) => (isActive ? 'scale(1)' : 'scale(0.1)')}; - border-radius: 100%; - z-index: 1; - ${({ dotColorStyle }) => dotColorStyle} - } - - &:hover { - &::before { - transform: scale(1); - ${tw`bg-blue-600`} - } - } -`; +import SidebarLink from '../../Sidebar/SidebarLink'; const ItemLink = ({ link }: { link: ModuleLinkInfo }) => { const { module } = useContext(ModuleLayoutContext); @@ -119,21 +49,16 @@ const ItemLink = ({ link }: { link: ModuleLinkInfo }) => { } return ( - - - - {link.title} - - - + {link.title} + ); }; diff --git a/src/components/ModuleLayout/SidebarNav/SidebarNav.tsx b/src/components/ModuleLayout/ModuleSidebarNav/ModuleSidebarNav.tsx similarity index 96% rename from src/components/ModuleLayout/SidebarNav/SidebarNav.tsx rename to src/components/ModuleLayout/ModuleSidebarNav/ModuleSidebarNav.tsx index fa5416f..e913f25 100644 --- a/src/components/ModuleLayout/SidebarNav/SidebarNav.tsx +++ b/src/components/ModuleLayout/ModuleSidebarNav/ModuleSidebarNav.tsx @@ -11,7 +11,7 @@ export interface NavLinkGroup { children: ModuleLinkInfo[]; } -export const SidebarNav = () => { +export const ModuleSidebarNav = () => { const { module, moduleLinks } = useContext(ModuleLayoutContext); const links: NavLinkGroup[] = React.useMemo(() => { diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx index e3a6f79..f3642b2 100644 --- a/src/components/Sidebar/Sidebar.tsx +++ b/src/components/Sidebar/Sidebar.tsx @@ -1,10 +1,13 @@ import * as React from 'react'; import Transition from '../Transition'; import { Link } from 'gatsby'; -import { SidebarNav } from '../ModuleLayout/SidebarNav/SidebarNav'; +import { ModuleSidebarNav } from '../ModuleLayout/ModuleSidebarNav/ModuleSidebarNav'; // @ts-ignore import logo from '../../assets/logo.svg'; import { createContext, useState } from 'react'; +import SidebarBottomButtons from './SidebarBottomButtons'; +import ContactUsSlideover from '../ContactUsSlideover/ContactUsSlideover'; +import ModuleLayoutContext from '../../context/ModuleLayoutContext'; export const SidebarLogo = () => { return ( @@ -19,10 +22,19 @@ export default function Sidebar({ onMobileNavStateChange, mobileSidebarContent, desktopSidebarContent, + activeModule = null, children, }) { + const [isContactUsActive, setIsContactUsActive] = useState(false); + return ( <> + setIsContactUsActive(false)} + activeModule={activeModule} + /> +
@@ -50,7 +62,32 @@ export default function Sidebar({ leaveFrom="translate-x-0" leaveTo="-translate-x-full" > - {mobileSidebarContent} +
+
+ +
+
+ {mobileSidebarContent} +
+
{/* Force sidebar to shrink to fit close icon */} @@ -60,7 +97,18 @@ export default function Sidebar({ {/* Static sidebar for desktop */}
- {desktopSidebarContent} +
+
+ +
+ + setIsContactUsActive(true)} + /> +
{children}
diff --git a/src/components/Sidebar/SidebarBottomButtons.tsx b/src/components/Sidebar/SidebarBottomButtons.tsx new file mode 100644 index 0000000..a46c5ab --- /dev/null +++ b/src/components/Sidebar/SidebarBottomButtons.tsx @@ -0,0 +1,63 @@ +import UserDataContext, { UserLang } from '../../context/UserDataContext'; +import { useContext } from 'react'; +import * as React from 'react'; + +const SidebarBottomButtons = ({ onContactUs }) => { + const languages = { + showAll: 'All', + cpp: 'C++', + java: 'Java', + py: 'Python', + }; + const nextLang: { [key: string]: UserLang } = { + showAll: 'cpp', + cpp: 'java', + java: 'py', + py: 'cpp', + }; + const userSettings = useContext(UserDataContext); + return ( + <> +
+ +
+
+ +
+ + ); +}; + +export default SidebarBottomButtons; diff --git a/src/components/Sidebar/SidebarLink.tsx b/src/components/Sidebar/SidebarLink.tsx new file mode 100644 index 0000000..4356f3b --- /dev/null +++ b/src/components/Sidebar/SidebarLink.tsx @@ -0,0 +1,96 @@ +import { Link } from 'gatsby'; +import tw from 'twin.macro'; +import * as React from 'react'; +import styled from 'styled-components'; + +const LinkWithProgress = styled.span` + ${tw`block relative`} + + &::after { + content: ''; + left: 24px; + top: 18px; + height: 8px; + width: 8px; + position: absolute; + transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0s; + } + + &::after { + border-radius: 100%; + ${props => props.dotColorStyle}; + } + + &::before { + content: ''; + position: absolute; + width: 2px; + display: block; + left: 27px; + top: 0; + bottom: 0; + ${props => props.lineColorStyle}; + } + + &:first-of-type::before { + top: 22px; + } + + &:last-of-type::before { + bottom: calc(100% - 22px); + } +`; + +const StyledLink = styled.span` + ${tw`focus:outline-none transition ease-in-out duration-150 hover:text-blue-700 hover:bg-blue-50 focus:bg-blue-100 flex items-center pl-12 pr-4 py-3 text-sm leading-5`} + + ${({ textStyle }) => textStyle} + + + &::before { + content: ''; + left: 24px; + top: 18px; + height: 8px; + width: 8px; + position: absolute; + transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0s; + } + + &::before { + transform: ${({ isActive }) => (isActive ? 'scale(1)' : 'scale(0.1)')}; + border-radius: 100%; + z-index: 1; + ${({ dotColorStyle }) => dotColorStyle} + } + + &:hover { + &::before { + transform: scale(1); + ${tw`bg-blue-600`} + } + } +`; + +export default function SidebarLink({ + lineColorStyle, + dotColorStyle, + textStyle, + linkRef = null, + isActive, + url, + children, +}) { + return ( + + + + {children} + + + + ); +} diff --git a/src/pages/syllabus.tsx b/src/pages/syllabus.tsx new file mode 100644 index 0000000..806baee --- /dev/null +++ b/src/pages/syllabus.tsx @@ -0,0 +1,243 @@ +import * as React from 'react'; +import { PageProps } from 'gatsby'; +import Layout from '../components/layout'; +import SEO from '../components/seo'; +import Sidebar, { SidebarLogo } from '../components/Sidebar/Sidebar'; +import { useState } from 'react'; +// @ts-ignore +import logo from '../assets/logo.svg'; +import SidebarLink from '../components/Sidebar/SidebarLink'; +import tw from 'twin.macro'; + +export default function SyllabusPage(props: PageProps) { + const [isMobileNavOpen, setIsMobileNavOpen] = useState(false); + + return ( + + +
+ todo} + desktopSidebarContent={ + <> + + Intro + + + Bronze + + + Silver + + + Gold + + + Platinum + + + Advanced + + + } + > +
+ +
+
+
+ +
+
+ + + +
+ +
+
+
+ +
+
+
+
+ {/*
*/} + {/*
*/} + {/*

*/} + {/* Welcome to the USACO Guide!*/} + {/*

*/} + {/*
*/} + {/*

*/} + {/* Get started on the first module, "Using this Guide."*/} + {/*

*/} + {/*
*/} + {/*
*/} + {/* */} + {/* Get Started! →*/} + {/* */} + {/*
*/} + {/*
*/} + {/*
*/} +
+
+

+ Continue: Introduction to Competitive Programming +

+
+

+ Pick up where you left off. What is competitive + programming? Let's take a look! +

+
+ +
+
+
+
+

+ 🔥 Six Day Streak: Keep it up! +

+
+

You've visited this guide for six consecutive days.

+
+ +
+
+
+ +
+

1. About this Guide

+ {/* Replace with your content */} +
+
+
+ {/* /End replace */} +

2. Getting Started

+ {/* Replace with your content */} +
+
+
+ {/* /End replace */} +

1. About this Guide

+ {/* Replace with your content */} +
+
+
+ {/* /End replace */} +
+
+ +
+ + ); +}