Add starter example

dashboard/final-example/app/lib/actions.ts

@@ -31,7 +31,7 @@ export type State = {
     amount?: string[];
     status?: string[];
   };
-  message: string;
+  message?: string | null;
 };
 
 export async function createInvoice(prevState: State, formData: FormData) {

dashboard/final-example/app/page.tsx

@@ -3,6 +3,7 @@ import { ArrowRightIcon } from '@heroicons/react/24/outline';
 import { lusitana } from '@/app/ui/fonts';
 import Image from 'next/image';
 import Link from 'next/link';
+
 export default function Page() {
   return (
     <main className="flex min-h-screen flex-col p-6">

dashboard/final-example/app/ui/invoices/create-form.tsx

@@ -8,13 +8,12 @@ import {
   CurrencyDollarIcon,
   UserCircleIcon,
 } from '@heroicons/react/24/outline';
-import { Button } from '../button';
+import { Button } from '@/app/ui/button';
 import { createInvoice } from '@/app/lib/actions';
-// @ts-ignore React types do not yet include useFormState
-import { experimental_useFormState as useFormState } from 'react-dom';
+import { useFormState } from 'react-dom';
 
 export default function Form({ customers }: { customers: CustomerField[] }) {
-  const initialState = { message: null, errors: [] };
+  const initialState = { message: null, errors: {} };
   const [state, dispatch] = useFormState(createInvoice, initialState);
 
   return (

dashboard/final-example/app/ui/invoices/edit-form.tsx

@@ -10,8 +10,7 @@ import {
 import Link from 'next/link';
 import { Button } from '../button';
 import { updateInvoice } from '@/app/lib/actions';
-// @ts-ignore React types do not yet include useFormState
-import { experimental_useFormState as useFormState } from 'react-dom';
+import { useFormState } from 'react-dom';
 
 export default function EditInvoiceForm({
   invoice,
@@ -20,7 +19,7 @@ export default function EditInvoiceForm({
   invoice: InvoiceForm;
   customers: CustomerField[];
 }) {
-  const initialState = { message: null, errors: [] };
+  const initialState = { message: null, errors: {} };
   const [state, dispatch] = useFormState(updateInvoice, initialState);
 
   return (

dashboard/final-example/app/ui/login-form.tsx

@@ -62,9 +62,7 @@ export default function LoginForm() {
             </div>
           </div>
         </div>
-        <Button className="mt-4 w-full" aria-disabled={pending}>
-          Log in <ArrowRightIcon className="ml-auto h-5 w-5 text-gray-50" />
-        </Button>
+        <LoginButton />
         <div className="flex h-8 items-end space-x-1">
           {code === 'CredentialsSignin' && (
             <>