feat: update the layout and add more pages

- Add a proper header to the layout
- Add a help page with instructions how to generate an invoice
- Add an empty blog page that will eventually be filled with blogs

3 files changed, 29 insertions, 3 deletions

diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index c07f42b..deab84b 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -1,7 +1,7 @@
 export const Footer = () => {
   return (
-    <footer className="w-full bg-gray-400 p-2 text-center">
-      <p className="font-bold text-white">
+    <footer className="w-full border-t p-2 text-center">
+      <p>
         Having issues? Contact me here:{' '}
         <a
           href="mailto:mihailonvojinovic@gmail.com"
diff --git a/src/components/header.tsx b/src/components/header.tsx
new file mode 100644
index 0000000..d54d957
--- /dev/null
+++ b/src/components/header.tsx
@@ -0,0 +1,21 @@
+import Link from 'next/link';
+
+export const Header = () => {
+  return (
+    <header className="flex w-full justify-center border-b p-2">
+      <div className="flex w-5xl items-center gap-4">
+        <Link href="/" className="text-xl">
+          🧾 Free Invoice Generator
+        </Link>
+        <ul className="flex gap-2">
+          <li>
+            <Link href="/blog">Blog</Link>
+          </li>
+          <li>
+            <Link href="/help">Help</Link>
+          </li>
+        </ul>
+      </div>
+    </header>
+  );
+};
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 29768f6..7876454 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -7,7 +7,12 @@ export const Button = ({
   return (
     <button
       {...props}
-      className={cn('rounded-sm border px-2', 'cursor-pointer', className)}
+      className={cn(
+        'rounded-sm border px-2',
+        'cursor-pointer',
+        props.disabled && 'cursor-default',
+        className,
+      )}
     />
   );
 };