components/common/Link.tsx

@@ -4,6 +4,7 @@ import NextLink from 'next/link'
 interface LinkProps {
   page: string
   className: string
+  children?: React.ReactNode
 }
 const Link: FC<LinkProps> = (props) => (
   <NextLink href={props.page}>

components/domain/wishes/createWish/CreateWish.tsx

@@ -1,13 +1,12 @@
-import { FC, FormEvent, SyntheticEvent, useEffect, useState } from 'react'
-import { result } from '../../../common/result'
-import { createWish, Wish } from '../models'
-import { v4 as uuid } from 'uuid'
+import { FC, ReactNode } from 'react'
+import { Wish } from '../models'
 
 interface CreateWishProps {
   onFocus: () => void
   hasFocus: boolean
   onSubmit: (wish: Wish) => void
   wish: Wish
+  children?: ReactNode
 }
 
 const CreateWish: FC<CreateWishProps> = (props) => {
@@ -19,7 +18,7 @@ const CreateWish: FC<CreateWishProps> = (props) => {
             type="text"
             name="wishName"
             placeholder="Your wish!"
-            className="w-full appearance-none bg-pink-100 p-6 text-center text-xl outline-none font-medium"
+            className="w-full appearance-none bg-pink-100 p-6 text-center text-xl font-medium outline-none"
             onChange={(e) =>
               props.onSubmit({ ...props.wish, name: e.target.value })
             }
@@ -37,6 +36,7 @@ const CreateWish: FC<CreateWishProps> = (props) => {
 interface InnerWishPromptInterface {
   wish: Wish
   onChange: (wish: Wish) => void
+  children?: ReactNode
 }
 
 const InnerWishPrompt: FC<InnerWishPromptInterface> = (props) => {
@@ -66,7 +66,10 @@ const InnerWishPrompt: FC<InnerWishPromptInterface> = (props) => {
   )
 }
 
-export const BasePrompt: FC = (props) => (
+interface BasePromptProps {
+  children?: ReactNode
+}
+export const BasePrompt: FC<BasePromptProps> = (props) => (
   <div>
     <div className="space-y-6 bg-white p-4 shadow">{props.children}</div>
   </div>

components/layout/authentication/AuthLayout.tsx

@@ -1,13 +1,16 @@
-import { FC } from 'react'
+import { FC, ReactNode } from 'react'
 import styles from './AuthLayout.module.scss'
 
-const AuthLayout: FC = (props) => (
+interface AuthLayoutProps {
+  children?: ReactNode
+}
+const AuthLayout: FC<AuthLayoutProps> = ({ children }) => (
   <div className={`${styles.root} min-h-screen`}>
-    <aside className="bg-pink-300 flex justify-center items-center">
+    <aside className="flex items-center justify-center bg-pink-300">
       <h1 className="text-4xl">Wishes</h1>
     </aside>
-    <main className="flex flex-col justify-center items-center">
-      <div>{props.children}</div>
+    <main className="flex flex-col items-center justify-center">
+      <div>{children}</div>
     </main>
   </div>
 )
@@ -16,13 +19,14 @@ interface AuthFieldProps {
   name: string
   required?: boolean
   type: 'text' | 'password'
+  children?: ReactNode
 }
 const AuthField: FC<AuthFieldProps> = (props) => {
   return (
     <div>
       <label
         htmlFor={props.name}
-        className="block text-gray-800 text-sm font-bold mb-2"
+        className="mb-2 block text-sm font-bold text-gray-800"
       >
         {props.children}
       </label>
@@ -30,7 +34,7 @@ const AuthField: FC<AuthFieldProps> = (props) => {
         type="text"
         name={props.name}
         required
-        className="appearance-none border rounded w-full py-2 px-3 text-gray-800 leading-tight"
+        className="w-full appearance-none rounded border py-2 px-3 leading-tight text-gray-800"
       />
     </div>
   )
@@ -39,6 +43,7 @@ const AuthField: FC<AuthFieldProps> = (props) => {
 interface AuthPasswordProps {
   name: string
   required?: boolean
+  children?: ReactNode
 }
 export const AuthPassword: FC<AuthPasswordProps> = (props) => (
   <AuthField {...props} type="password" />
@@ -47,6 +52,7 @@ export const AuthPassword: FC<AuthPasswordProps> = (props) => (
 interface AuthInputProps {
   name: string
   required?: boolean
+  children?: ReactNode
 }
 export const AuthInput: FC<AuthPasswordProps> = (props) => (
   <AuthField {...props} type="text" />

components/layout/home/HomeLayout.tsx

@@ -1,15 +1,16 @@
-import { FC, ReactElement } from 'react'
+import { FC, ReactElement, ReactNode } from 'react'
 import { inspect } from 'util'
 import styles from './HomeLayout.module.scss'
 
 interface HomeLayoutProps {
   page: string
+  children?: ReactNode
 }
 const HomeLayout: FC<HomeLayoutProps> = (props) => {
   return (
-    <div className="bg-pink-50 min-h-screen">
+    <div className="min-h-screen bg-pink-50">
       <div className={styles.root + ' space-x-6 pt-14'}>
-        <h1 className="text-2xl space-x-2 transition-all">
+        <h1 className="space-x-2 text-2xl transition-all">
           <span>Wishes</span>
           <span>/</span>
           <span>{props.page}</span>

pages/index.tsx

@@ -1,9 +1,10 @@
 import type { NextPage } from 'next'
 import Link from 'next/link'
-import { FC } from 'react'
+import { FC, ReactNode } from 'react'
 
 interface CtaLinkProps {
   page: string
+  children?: ReactNode
 }
 const CtaLink: FC<CtaLinkProps> = (props) => (
   <Link href={props.page}>
@@ -14,7 +15,7 @@ const CtaLink: FC<CtaLinkProps> = (props) => (
 const Home: NextPage = () => {
   return (
     <div className="flex min-h-screen flex-col items-center justify-center bg-pink-400">
-      <main className="space-y-8 flex flex-col items-center">
+      <main className="flex flex-col items-center space-y-8">
         <h1 className="text-6xl">Wishes</h1>
         <div className="space-x-3">
           <CtaLink page="/sign-up">Create account</CtaLink>