Add default CSS modules solution

Author: andreipfeiffer

README.md

@@ -1,34 +1,9 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+This is a [Next.js](https://nextjs.org/) project.
 
 ## Getting Started
 
 First, run the development server:
 
 ```bash
-npm run dev
-# or
 yarn dev
 ```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

components/button.module.css

@@ -0,0 +1,41 @@
+.button {
+  color: dodgerblue;
+  border: 0;
+  height: 3em;
+  padding: 0 2em;
+  border-radius: 1.5em;
+  cursor: pointer;
+  font-weight: bold;
+  width: 100vw;
+  display: block;
+  outline: 0;
+  background-color: currentColor;
+  margin: 1em auto;
+}
+
+.button span {
+  color: white;
+}
+
+.button:hover {
+  animation-name: button-animation;
+  animation-fill-mode: forwards;
+  animation-duration: 0.5s;
+}
+
+@media only screen and (min-width: 640px) {
+  .button {
+    width: 100%;
+  }
+}
+
+@keyframes button-animation {
+  from {
+    transform: translateY(0);
+    box-shadow: none;
+  }
+  to {
+    transform: translateY(-0.5em);
+    box-shadow: 0 0.5em 0 0 #ddd;
+  }
+}

components/button.tsx

@@ -0,0 +1,16 @@
+import styles from "./button.module.css";
+
+type Props = {
+  children: string;
+  color?: string;
+};
+
+export function Button(props: Props) {
+  const { children, color = "dodgerblue" } = props;
+
+  return (
+    <button className={styles.button} style={{ color }}>
+      <span>{children}</span>
+    </button>
+  );
+}

next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

package.json

@@ -11,5 +11,10 @@
     "next": "10.0.5",
     "react": "17.0.1",
     "react-dom": "17.0.1"
+  },
+  "devDependencies": {
+    "@types/node": "^14.14.20",
+    "@types/react": "^17.0.0",
+    "typescript": "^4.1.3"
   }
 }

pages/_app.js

@@ -0,0 +1,9 @@
+import type { AppProps /*, AppContext */ } from "next/app";
+
+import "../styles/globals.css";
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />;
+}
+
+export default MyApp;

pages/_app.tsx

@@ -0,0 +1,11 @@
+import { Button } from "../components/button";
+
+export default function Home() {
+  return (
+    <main>
+      <Button>Default color</Button>
+      <Button color="#e3b307">Yellow color</Button>
+      <Button color="#57b004">Green color</Button>
+    </main>
+  );
+}