Reformat with prettier

web/README.md

@@ -1,7 +1,13 @@
 # Mantic Markets web
 
-### Getting Started
+## Getting Started
 
 1. Run `npm install`
 2. Run `npm run dev`
 3. Your site will be available on http://localhost:3000
+
+## Formatting
+
+Before committing, run `npx prettier --write . `
+
+Recommended: Use a [Prettier editor integration](https://prettier.io/docs/en/editors.html) to automatically format on save

web/components/hero.tsx

@@ -1,15 +1,18 @@
-import { Popover } from '@headlessui/react'
-import { ConvertKitEmailForm } from './convert-kit-email-form'
+import { Popover } from "@headlessui/react";
+import { ConvertKitEmailForm } from "./convert-kit-email-form";
 
 const navigation = [
-	{ name: 'About', href: 'https://mantic.notion.site/About-Mantic-Markets-09bdde9044614e62a27477b4b1bf77ea' },
-	{ name: 'Simulator', href: 'https://simulator.mantic.markets' },
-  ]
+  {
+    name: "About",
+    href: "https://mantic.notion.site/About-Mantic-Markets-09bdde9044614e62a27477b4b1bf77ea",
+  },
+  { name: "Simulator", href: "https://simulator.mantic.markets" },
+];
 
 export const Hero = () => {
   return (
     <div className="relative overflow-hidden h-screen bg-world-trading bg-cover bg-gray-900">
-	  {/* <div className="absolute w-full h-full overflow-hidden bg-world-trading bg-cover bg-gray-900 z--1" /> */}
+      {/* <div className="absolute w-full h-full overflow-hidden bg-world-trading bg-cover bg-gray-900 z--1" /> */}
 
       <Popover as="header" className="relative">
         <div className="pt-6">
@@ -19,15 +22,27 @@ export const Hero = () => {
           >
             <div className="flex items-center flex-1">
               <div className="flex items-center justify-between w-full md:w-auto">
-                <a href="#" className="inline-grid grid-flow-col align-items-center h-6 sm:h-10">
-				          <img className="w-auto h-6 sm:h-10 inline-block mr-3" src="/logo-icon.svg" />
-                  <span className="text-white font-major-mono lowercase sm:text-2xl my-auto">Mantic Markets</span>
+                <a
+                  href="#"
+                  className="inline-grid grid-flow-col align-items-center h-6 sm:h-10"
+                >
+                  <img
+                    className="w-auto h-6 sm:h-10 inline-block mr-3"
+                    src="/logo-icon.svg"
+                  />
+                  <span className="text-white font-major-mono lowercase sm:text-2xl my-auto">
+                    Mantic Markets
+                  </span>
                 </a>
               </div>
-			  
+
               <div className="space-x-8 md:flex md:ml-16">
                 {navigation.map((item) => (
-                  <a key={item.name} href={item.href} className="text-base font-medium text-white hover:text-gray-300">
+                  <a
+                    key={item.name}
+                    href={item.href}
+                    className="text-base font-medium text-white hover:text-gray-300"
+                  >
                     {item.name}
                   </a>
                 ))}
@@ -45,13 +60,16 @@ export const Hero = () => {
                 <div className="lg:py-24">
                   <h1 className="mt-4 text-4xl tracking-tight font-extrabold text-white sm:mt-5 sm:text-6xl lg:mt-6 xl:text-6xl">
                     <span className="block">Create your own</span>
-                    <span className="block text-green-400">prediction markets</span>
+                    <span className="block text-green-400">
+                      prediction markets
+                    </span>
                   </h1>
                   <p className="mt-3 text-base text-gray-300 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
-					  Create and resolve your own prediction markets to earn a percent of the bet volume. Powered by Solana.
+                    Create and resolve your own prediction markets to earn a
+                    percent of the bet volume. Powered by Solana.
                   </p>
                   <div className="mt-10 sm:mt-12">
-					<ConvertKitEmailForm /> 
+                    <ConvertKitEmailForm />
                   </div>
                 </div>
               </div>
@@ -59,7 +77,6 @@ export const Hero = () => {
           </div>
         </div>
       </main>
-
     </div>
-  )
-}
+  );
+};

web/next.config.js

@@ -1,4 +1,4 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
   reactStrictMode: true,
-}
+};

web/pages/_app.tsx

@@ -1,8 +1,8 @@
-import 'tailwindcss/tailwind.css'
-import type { AppProps } from 'next/app'
+import "tailwindcss/tailwind.css";
+import type { AppProps } from "next/app";
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;

web/pages/api/hello.ts

@@ -1,13 +1,13 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from 'next'
+import type { NextApiRequest, NextApiResponse } from "next";
 
 type Data = {
-  name: string
-}
+  name: string;
+};
 
 export default function handler(
   req: NextApiRequest,
   res: NextApiResponse<Data>
 ) {
-  res.status(200).json({ name: 'John Doe' })
+  res.status(200).json({ name: "John Doe" });
 }

web/pages/index.tsx

@@ -1,7 +1,7 @@
-import type { NextPage } from 'next'
-import Head from 'next/head'
-import React from 'react'
-import LandingPage from './landing-page'
+import type { NextPage } from "next";
+import Head from "next/head";
+import React from "react";
+import LandingPage from "./landing-page";
 
 const Home: NextPage = () => {
   return (
@@ -13,12 +13,15 @@ const Home: NextPage = () => {
 
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-        <link href="https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap" rel="stylesheet" />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap"
+          rel="stylesheet"
+        />
       </Head>
 
       <LandingPage />
     </div>
-  )
-}
+  );
+};
 
-export default Home
+export default Home;

web/pages/landing-page.tsx

@@ -1,10 +1,8 @@
-import React from 'react'
-import { Hero } from '../components/hero'
+import React from "react";
+import { Hero } from "../components/hero";
 
 const LandingPage = () => {
-	return (
-		<Hero />
-	)
-}
+  return <Hero />;
+};
 
-export default LandingPage
+export default LandingPage;

web/postcss.config.js

@@ -5,4 +5,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

web/tailwind.config.js

@@ -1,21 +1,19 @@
 module.exports = {
-  mode: 'jit',
-  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
+  mode: "jit",
+  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
   darkMode: false, // or 'media' or 'class'
   theme: {
     fontFamily: {
-      'major-mono': ['Major Mono Display', 'monospace'],
+      "major-mono": ["Major Mono Display", "monospace"],
     },
     extend: {
       backgroundImage: {
-        'world-trading': "url('/world-trading-background.jpg')",
-      }
+        "world-trading": "url('/world-trading-background.jpg')",
+      },
     },
   },
   variants: {
     extend: {},
   },
-  plugins: [
-    require('@tailwindcss/forms'),
-  ],
-}
+  plugins: [require("@tailwindcss/forms")],
+};