60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
|
import dynamic from "next/dynamic";
|
||
|
|
import { Inter } from "next/font/google";
|
||
|
|
import { useState } from "react";
|
||
|
|
|
||
|
|
export default function Home() {
|
||
|
|
const [showBanner, setShowBanner] = useState(true);
|
||
|
|
const [lessons, setLessons] = useState<Element[]>([]);
|
||
|
|
|
||
|
|
const loadLesson = (name: string) => {
|
||
|
|
setShowBanner(false);
|
||
|
|
|
||
|
|
const LessonContainer = dynamic(
|
||
|
|
() => import("../components/LessonContainer"),
|
||
|
|
{ loading: () => <p>Loading...</p> }
|
||
|
|
);
|
||
|
|
|
||
|
|
setLessons([...lessons, <LessonContainer name={name} />]);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<main>
|
||
|
|
<details
|
||
|
|
className="intro"
|
||
|
|
open={showBanner}
|
||
|
|
>
|
||
|
|
<summary>Intro</summary>
|
||
|
|
<p>
|
||
|
|
Functional programming is a structured way of thinking that gives us a
|
||
|
|
better understanding about how programs behave. Although it relies on
|
||
|
|
theoretical foundations, the things you will take away will help guide
|
||
|
|
your thinking no matter what paradigm!
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Ready to start learning functional programming? Click one of the
|
||
|
|
buttons below to get started!
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<button onClick={() => loadLesson("functions")}>
|
||
|
|
Get Started
|
||
|
|
<br />
|
||
|
|
<small>Functions ↓</small>
|
||
|
|
</button>
|
||
|
|
<button onClick={() => loadLesson("types")}>
|
||
|
|
Get Started
|
||
|
|
<br />
|
||
|
|
<small>Types ↓</small>
|
||
|
|
</button>
|
||
|
|
<button onClick={() => loadLesson("state")}>
|
||
|
|
Get Started
|
||
|
|
<br />
|
||
|
|
<small>State ↓</small>
|
||
|
|
</button>
|
||
|
|
</details>
|
||
|
|
|
||
|
|
{lessons}
|
||
|
|
</main>
|
||
|
|
);
|
||
|
|
}
|