Cleanup

Author: andreipfeiffer

components/button.module.css

@@ -0,0 +1,4 @@
+.title {
+  color: dodgerblue;
+  font-weight: 100;
+}

components/button.tsx

@@ -0,0 +1,5 @@
+import styles from "./heading.module.css";
+
+export function Heading() {
+  return <h1 className={styles.title}>Page title</h1>;
+}

components/demo/heading.module.css

@@ -0,0 +1,4 @@
+.title {
+  color: deeppink;
+  font-weight: 900;
+}

components/demo/heading.tsx

@@ -0,0 +1,9 @@
+import styles from "./product.module.css";
+
+export function Product() {
+  return (
+    <div>
+      <h2 className={styles.title}>Product title</h2>
+    </div>
+  );
+}

components/demo/product.module.css

@@ -0,0 +1,11 @@
+import { Heading } from "../components/demo/heading";
+import { Product } from "../components/demo/product";
+
+export default function Page() {
+  return (
+    <main>
+      <Heading />
+      <Product />
+    </main>
+  );
+}

components/demo/product.tsx

@@ -1,31 +1,7 @@
-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);
-
+export default function Page() {
   return (
     <main>
-      <Link href="/other" prefetch={false}>
-        <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)} />
+      <h1>Index page</h1>
     </main>
   );
 }