Merge pull request #111 from Full-Stack-Collective/na-logo-styles

Open graph logo, updated send request button in the patient form, updated spacing between practice logo and name

src/app/[practiceCode]/book/opengraph-image.tsx

@@ -0,0 +1,72 @@
+/* eslint-disable @next/next/no-img-element */
+import { ImageResponse } from 'next/server';
+import { createServerComponentClient } from '@supabase/auth-helpers-nextjs';
+import { cookies } from 'next/headers';
+
+export const size = {
+  width: 800,
+  height: 500,
+};
+
+// Route segment config
+export const runtime = 'edge';
+export const contentType = 'image/png';
+
+const supabase = createServerComponentClient<Database>({ cookies });
+
+export default async function og({
+  params,
+}: {
+  params: { practiceCode: string };
+}) {
+  const { practiceCode } = params;
+
+  try {
+    const { data: practice } = await supabase
+      .from('Practice')
+      .select()
+      .eq('practice_code', practiceCode);
+
+    if (!practice || practice.length === 0) {
+      throw new Error('Practice data not found');
+    }
+    const [{ name, logo }] = practice;
+    const imageUrl = logo || '/connectient-logo.png';
+
+    return new ImageResponse(
+      (
+        <div
+          style={{
+            height: '100%',
+            width: '100%',
+            display: 'flex',
+            textAlign: 'center',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexDirection: 'column',
+            flexWrap: 'nowrap',
+          }}
+        >
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              justifyItems: 'center',
+            }}
+          >
+            <img
+              src={imageUrl}
+              alt={name}
+              width={size.width}
+              height={size.height}
+            />
+          </div>
+          <div style={{ fontSize: 40, color: 'black' }}>{name}</div>
+        </div>
+      ),
+    );
+  } catch (error) {
+    console.error(error);
+  }
+}

src/app/[practiceCode]/book/page.tsx

@@ -9,6 +9,54 @@ import { redirect } from 'next/navigation';
 
 const supabase = createServerComponentClient<Database>({ cookies });
 
+export async function generateMetadata({
+  params,
+}: {
+  params: {
+    practiceCode: string;
+  };
+}) {
+  try {
+    const { practiceCode } = params;
+    const { data: practice } = await supabase
+      .from('Practice')
+      .select()
+      .eq('practice_code', practiceCode);
+
+    if (!practice || practice.length === 0)
+      return {
+        title: 'Not Found',
+        description: 'The page you are looking for does not exist.',
+      };
+
+    const [{ name, logo }] = practice;
+    const imageUrl = logo || '/connectient-logo.png';
+
+    return {
+      title: name,
+      description: `Appointments Made Easy at ${name}`,
+      openGraph: {
+        images: [
+          {
+            url: imageUrl,
+
+            alt: `${name} Logo`,
+          },
+        ],
+      },
+      alternates: {
+        canonical: `/${practiceCode}/book`,
+      },
+    };
+  } catch (error) {
+    console.error(error);
+    return {
+      title: 'Not Found',
+      description: 'The page you are looking for does not exist.',
+    };
+  }
+}
+
 export default async function Appointment({
   params,
 }: {

src/app/admin/dashboard/page.tsx

@@ -100,7 +100,7 @@ const AppointmentDemo = async () => {
   return (
     <main className="flex-1 container mx-auto pt-4 pb-10">
       {practiceInfo && (
-        <div className=" text-3xl font-bold flex justify-center items-center ">
+        <div className=" text-3xl font-bold flex justify-center items-center gap-4">
           {practiceInfo.logo && (
             <Image
               src={practiceInfo.logo}

src/app/layout.tsx

@@ -3,10 +3,25 @@ import { ThemeProvider } from '@/components/theme-provider';
 import { Toaster } from '@/components/ui/toaster';
 import { Analytics } from '@vercel/analytics/react';
 import './globals.css';
+import { Metadata } from 'next';
 
-export const metadata = {
-  title: 'Connectient',
+export const metadata: Metadata = {
+  metadataBase: new URL('https://connectient.co'),
+  title: {
+    default: 'Connectient',
+    template: `%s | Connectient`,
+  },
   description: 'Appointments Made Easy',
+  openGraph: {
+    images: [
+      {
+        url: '/connectient-logo.png',
+        width: '400',
+        height: '400',
+        alt: 'Connectient Logo',
+      },
+    ],
+  },
 };
 
 const lato = Lato({
@@ -18,15 +33,17 @@ const lato = Lato({
 
 const RootLayout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <html lang="en" className={`${lato.variable}`}>
-      <body className="text-lg">
-        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-          <div className="min-h-screen flex flex-col">{children}</div>
-          <Toaster />
-        </ThemeProvider>
-        <Analytics />
-      </body>
-    </html>
+    <>
+      <html lang="en" className={`${lato.variable}`}>
+        <body className="text-lg">
+          <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+            <div className="min-h-screen flex flex-col">{children}</div>
+            <Toaster />
+          </ThemeProvider>
+          <Analytics />
+        </body>
+      </html>
+    </>
   );
 };
 

src/components/AppointmentForm.tsx

@@ -483,7 +483,7 @@ const AppointmentForm = ({
                     (form.formState.isDirty && !form.formState.isValid)
                   }
                 >
-                  Request Appointment
+                  Send Request
                 </Button>
                 <Button
                   type="button"