Add invoice toolbar component

apps/website/src/app/components/invoice-toolbar/page.tsx

@@ -0,0 +1,42 @@
+import type { Metadata } from "next";
+import Image from "next/image";
+import invoiceToolbar from "../invoice-toolbar.png";
+
+export const metadata: Metadata = {
+  title: "Invoice Toolbar | Midday",
+  description: "A Next.js Invoice Toolbar for invoices.",
+};
+
+export default function Page() {
+  return (
+    <div className="container mt-24 max-w-[540px]">
+      <div className="py-[200px] flex items-center justify-center">
+        <Image
+          src={invoiceToolbar}
+          alt="Invoice Toolbar"
+          className="max-w-[240px]"
+        />
+      </div>
+      <div className="mt-8">
+        <div className="border bg-card text-card-foreground shadow-sm">
+          <div className="flex flex-col space-y-1.5 p-6">
+            <h3 className="text-xl font-medium">Invoice Toolbar</h3>
+            <p className="text-sm text-[#878787]">
+              Get started with our Invoice Toolbar
+            </p>
+          </div>
+          <div className="p-6 pt-0">
+            <a
+              href="https://go.midday.ai/83E5GCe"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2"
+            >
+              View implementation
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/website/src/app/components/page.tsx

@@ -7,6 +7,7 @@ import Link from "next/link";
 import editor from "./editor.png";
 import invoiceOg from "./invoice-og.png";
 import invoiceReact from "./invoice-react.png";
+import invoiceToolbar from "./invoice-toolbar.png";
 import invoice from "./invoice.png";
 import pdf from "./pdf.png";
 
@@ -22,7 +23,7 @@ const components = [
     description: "A rich text editor with AI tools powered by Vercel AI SDK.",
     image: editor,
     href: "/components/editor",
-    className: "mt-24",
+    className: "mt-24 max-w-[300px]",
     ready: true,
   },
 
@@ -47,6 +48,14 @@ const components = [
     href: "/components/invoice-og",
     ready: true,
   },
+  {
+    name: "Invoice Toolbar",
+    description: "A toolbar for invoices with comments and avatars.",
+    image: invoiceToolbar,
+    href: "/components/invoice-toolbar",
+    ready: true,
+    className: "mt-24 max-w-[220px]",
+  },
   {
     name: "Invoice Editor",
     description:
@@ -80,7 +89,7 @@ export default function Page() {
         {components.map(
           ({ name, description, image, href, ready, className }) => (
             <Link href={href} key={name} className="flex">
-              <Card className="p-6 flex flex-col group">
+              <Card className="p-6 flex flex-col group w-full">
                 <div className="flex items-center justify-between mb-4">
                   <h2 className="text-lg font-semibold">{name}</h2>
                   {!ready && (
@@ -91,11 +100,14 @@ export default function Page() {
                 </div>
                 <p className="text-sm text-[#878787]">{description}</p>
 
-                <div className={cn("flex justify-center mt-6", className)}>
+                <div className="flex justify-center mt-6 w-full">
                   <Image
                     src={image}
                     alt={name}
-                    className="transition-transform duration-300 group-hover:-translate-y-2"
+                    className={cn(
+                      "transition-transform duration-300 group-hover:-translate-y-2",
+                      className,
+                    )}
                   />
                 </div>
               </Card>