Updates

Author: andreipfeiffer

components/button.tsx

@@ -1,21 +1,28 @@
 import styles from "./button.module.css";
 
 enum Color {
+  grey = "#cccccc",
   blue = "dodgerblue",
   yellow = "#e3b307",
   green = "#57b004",
+  red = "#db2e02",
 }
 
 type Props = {
   children: string;
   color?: keyof typeof Color;
+  onClick?(): void;
 };
 
 export function Button(props: Props) {
-  const { children, color = "blue" } = props;
+  const { children, color = "grey", onClick } = props;
 
   return (
-    <button className={styles.button} style={{ color: Color[color] }}>
+    <button
+      className={styles.button}
+      style={{ color: Color[color] }}
+      onClick={onClick}
+    >
       <span>{children}</span>
     </button>
   );

components/input.tsx

@@ -0,0 +1,25 @@
+type Props = {
+  value: number;
+  onChange(value: number): void;
+};
+
+export function Input({ value, onChange }: Props) {
+  return (
+    <>
+      <label>
+        User input styles:{" "}
+        <input
+          style={{
+            width: `${value}px`,
+
+            // this can be moved as a static style, in the .css file
+            padding: "0.5em",
+          }}
+          type="number"
+          value={value}
+          onChange={(e) => onChange(+e.target.value)}
+        />
+      </label>
+    </>
+  );
+}

pages/index.tsx

@@ -1,11 +1,31 @@
+import { useState } from "react";
+import Link from "next/link";
 import { Button } from "../components/button";
+import { Input } from "../components/input";
 
 export default function Home() {
+  const [showButtons, toggleButtons] = useState(false);
+  const [width, setWidth] = useState(100);
+
   return (
     <main>
-      <Button>Default color</Button>
-      <Button color="yellow">Yellow color</Button>
-      <Button color="green">Green color</Button>
+      <Link href="/other">
+        <a>Other page</a>
+      </Link>
+
+      <Button color="blue" onClick={() => toggleButtons(true)}>
+        Show other buttons
+      </Button>
+
+      {showButtons && (
+        <>
+          <Button color="yellow">Yellow button</Button>
+          <Button color="green">Green button</Button>
+          <Button color="red">Red button</Button>
+        </>
+      )}
+
+      <Input value={width} onChange={(val) => setWidth(val)} />
     </main>
   );
 }

pages/other.tsx

@@ -0,0 +1,25 @@
+import { useRouter } from "next/router";
+import { Button } from "../components/button";
+
+import styles from "../styles/other.module.css";
+
+export default function Home() {
+  const router = useRouter();
+
+  return (
+    <main>
+      <Button onClick={() => router.back()}>Go Back</Button>
+
+      <h1 className={styles.heading}>Another route</h1>
+
+      <p>
+        Styles should be code-splitted, loaded only when the route is loaded.
+      </p>
+
+      <p>
+        The button is loaded on the main route also, so it should not be fetched
+        twice.
+      </p>
+    </main>
+  );
+}

styles/globals.css

@@ -15,12 +15,17 @@ button,
 input {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
     Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-size: 16px;
 }
 
-a {
-  color: inherit;
+a:link,
+a:visited {
+  color: dodgerblue;
   text-decoration: none;
 }
+a:hover {
+  text-decoration: underline;
+}
 
 * {
   box-sizing: border-box;

styles/other.module.css

@@ -0,0 +1,4 @@
+.heading {
+  max-width: 75vw;
+  font-size: 1.5rem;
+}