Add metadata and button loading state

www/src/app/layout.tsx

@@ -1,3 +1,4 @@
+import { constructMetadata } from '@/lib/utils'
 import Footer from '@/components/Footer'
 import Navbar from '@/components/Navbar'
 import Providers from '@/components/Providers'
@@ -8,10 +9,7 @@ import './globals.css'
 
 const recursive = Recursive({ subsets: ['latin'] })
 
-export const metadata: Metadata = {
-  title: 'Fast, Open-Source Profanity API',
-  description: 'A project made by JoshTriedCoding',
-}
+export const metadata = constructMetadata()
 
 export const viewport: Viewport = {
   maximumScale: 1, // Disable auto-zoom on mobile Safari, credit to https://github.com/ai-ng

www/src/components/Demo.tsx

@@ -38,7 +38,7 @@ const Demo = () => {
         </div>
         <div className='relative flex flex-col sm:flex-row items-center gap-2 mt-6 h-full sm:h-9'>
           <Input
-            className='bg-white h-9'
+            className='bg-white h-9 w-full'
             value={message}
             onKeyDown={(e) => {
               if (e.key === 'Enter') mutate({ message })
@@ -49,9 +49,23 @@ const Demo = () => {
           />
           <Button
             disabled={isPending}
-            className='h-9 w-full sm:w-fit'
-            onClick={() => mutate({ message })}>
-            Profanity check
+            className='h-9 w-full sm:w-36 shrink-0'
+            onClick={() => mutate({ message })}
+          >
+            {isPending ? (
+              <svg
+                xmlns='http://www.w3.org/2000/svg'
+                viewBox='0 0 24 24'
+                fill='none'
+                stroke='currentColor'
+                strokeWidth='2'
+                strokeLinecap='round'
+                strokeLinejoin='round'
+                className='animate-spin h-4 w-4'
+              >
+                <path d='M21 12a9 9 0 1 1-6.219-8.56' />
+              </svg>
+            ) : <span>Profanity Check</span>}
           </Button>
         </div>
 

www/src/lib/utils.ts

@@ -1,6 +1,51 @@
 import { type ClassValue, clsx } from "clsx"
 import { twMerge } from "tailwind-merge"
+import { Metadata } from "next"
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+export function constructMetadata({
+  title = 'Fast, Open-Source Profanity API',
+  description = 'A project made by JoshTriedCoding',
+  image = '/thumbnail.jpg',
+  icons = '/favicon.ico',
+  noIndex = false,
+}: {
+  title?: string
+  description?: string
+  image?: string
+  icons?: string
+  noIndex?: boolean
+} = {}): Metadata {
+  return {
+    title,
+    description,
+    openGraph: {
+      title,
+      description,
+      images: [
+        {
+          url: image,
+        },
+      ],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title,
+      description,
+      images: [image],
+      creator: '@joshtriedcoding',
+    },
+    icons,
+    metadataBase: new URL('https://www.profanity.dev'),
+    themeColor: '#FFF',
+    ...(noIndex && {
+      robots: {
+        index: false,
+        follow: false,
+      },
+    }),
+  }
+}