diff --git a/packages/studio-ts/src/app/page.tsx b/packages/studio-ts/src/app/page.tsx index 6ef54a1..c1883f6 100644 --- a/packages/studio-ts/src/app/page.tsx +++ b/packages/studio-ts/src/app/page.tsx @@ -20,6 +20,7 @@ import logoPhobiaLight from '@/images/clients/phobia/logo-light.svg' import logoUnseal from '@/images/clients/unseal/logo-light.svg' import imageLaptop from '@/images/laptop.jpg' import { type CaseStudy, type MDXEntry, loadCaseStudies } from '@/lib/mdx' +import { WaitlistForm } from '@/components/WaitlistForm' const clients = [ ['Phobia', logoPhobiaLight], @@ -185,13 +186,12 @@ export default async function Home() {

- Award-winning development studio based in Denmark. + The open source Assistant Platform

-

- We are a development studio working at the intersection of design - and technology. It’s a really busy intersection though — a lot of - our staff have been involved in hit and runs. -

+

Join the waiting list

+
+ +
diff --git a/packages/studio-ts/src/app/server.tsx b/packages/studio-ts/src/app/server.tsx new file mode 100644 index 0000000..4566581 --- /dev/null +++ b/packages/studio-ts/src/app/server.tsx @@ -0,0 +1,37 @@ +'use server' + +export type FormState = { + message: string + submitted: boolean +} + +export const handleWaitlistSubmit = async ( + prevState: FormState, + formData: FormData, +) => { + const url = process.env.NEXT_GOOGLE_SHEETS_API! + let rawFormData = { email: formData.get('email') } + + try { + const response = await fetch(url, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(rawFormData), + }) + + if (response.ok) { + return { message: 'Email address sent successfully!', submitted: true } + } else { + console.error( + 'Failed to send email address. Status code:', + response.status, + ) + } + } catch (error) { + return { message: 'Email address not sent', submitted: false } + } + + return { message: 'Email address not sent', submitted: false } +} diff --git a/packages/studio-ts/src/components/Footer.tsx b/packages/studio-ts/src/components/Footer.tsx index 2e1a0a0..8cd1c81 100644 --- a/packages/studio-ts/src/components/Footer.tsx +++ b/packages/studio-ts/src/components/Footer.tsx @@ -65,50 +65,7 @@ function Navigation() { ) } -function ArrowIcon(props: React.ComponentPropsWithoutRef<'svg'>) { - return ( - - ) -} -function NewsletterForm() { - return ( -
-

- Sign up for our newsletter -

-

- Subscribe to get the latest design news, articles, resources and - inspiration. -

-
- -
- -
-
-
- ) -} export function Footer() { return ( @@ -116,9 +73,6 @@ export function Footer() {
-
- -
diff --git a/packages/studio-ts/src/components/RootLayout.tsx b/packages/studio-ts/src/components/RootLayout.tsx index 07a5fb0..f21ac28 100644 --- a/packages/studio-ts/src/components/RootLayout.tsx +++ b/packages/studio-ts/src/components/RootLayout.tsx @@ -81,10 +81,10 @@ function Header({ />
- - + */}
diff --git a/packages/studio-ts/src/components/WaitlistForm.tsx b/packages/studio-ts/src/components/WaitlistForm.tsx new file mode 100644 index 0000000..1ceab0c --- /dev/null +++ b/packages/studio-ts/src/components/WaitlistForm.tsx @@ -0,0 +1,79 @@ +"use client" +import { FormState, handleWaitlistSubmit } from '@/app/server' +import { useFormState, useFormStatus } from 'react-dom' + +const initialState: FormState = { + message: '', + submitted: false, +} + +function ArrowIcon(props: React.ComponentPropsWithoutRef<'svg'>) { + return ( + + ) +} + +function CheckMarkIcon(props: React.ComponentPropsWithoutRef<'svg'>) { + return ( + + ) +} + +export function WaitlistForm() { + const [state, formAction] = useFormState(handleWaitlistSubmit, initialState) + + return ( +
+
+ +
+ +
+
+
+ ) +} + +function FormIconDisplay({ submitted }: { submitted: boolean | undefined }) { + const { pending } = useFormStatus() + + return ( + + ) +}