From 2f432b249112d6aacd1dee337b6408be27b607b1 Mon Sep 17 00:00:00 2001
From: David Levai <david@davidlevai.com>
Date: Mon, 3 Jul 2023 13:43:43 +0200
Subject: [PATCH 1/3] chore: updated changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f5c76f1..9791769 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Copy button component
 - Scroll-aware table of contets
 - Minimal hero variant
+- Work availability status
 
 ### Changed
 

From c3b7fb4b0989aaca913b85dd53e8db01d17c6b86 Mon Sep 17 00:00:00 2001
From: David Levai <david@davidlevai.com>
Date: Mon, 3 Jul 2023 14:21:26 +0200
Subject: [PATCH 2/3] feat: added work availability badge

---
 components/navigation.tsx              | 35 ++++++++++++++++++-------
 components/ui/badge.tsx                | 36 ++++++++++++++++++++++++++
 components/work-availability-badge.tsx | 12 +++++++++
 lib/metadata.ts                        |  1 +
 4 files changed, 74 insertions(+), 10 deletions(-)
 create mode 100644 components/ui/badge.tsx
 create mode 100644 components/work-availability-badge.tsx

diff --git a/components/navigation.tsx b/components/navigation.tsx
index 025db6b..934d0b5 100644
--- a/components/navigation.tsx
+++ b/components/navigation.tsx
@@ -10,6 +10,7 @@ import { CommandDialogComponent } from "@/components/command-dialog";
 import { MobileNav } from "@/components/mobile-nav";
 import { ModeToggle } from "@/components/mode-toggle";
 import { Navbar } from "@/components/navbar";
+import { WorkAvailabilityBadge } from "@/components/work-availability-badge";
 
 export function Navigation() {
   const [prevScrollPos, setPrevScrollPos] = useState(0);
@@ -37,20 +38,34 @@ export function Navigation() {
     <>
       <header
         className={cn(
-          "fixed -bottom-32 z-20 mx-auto mb-4 h-12 w-full px-4 animate-out delay-500 sm:static sm:z-auto sm:mb-0 sm:mt-4 sm:h-16 sm:max-w-6xl sm:transition-none sm:delay-0 lg:px-0",
+          "fixed -bottom-32 z-20 mx-auto mb-4 w-full px-4 animate-out delay-500 sm:static sm:z-auto sm:mb-0 sm:mt-4 sm:h-16 sm:max-w-6xl sm:transition-none sm:delay-0 lg:px-0",
           visible && "bottom-0 left-0 animate-in"
         )}
       >
+        {defaultAuthor.availableForWork && (
+          <div className="mx-auto mb-2 text-center sm:hidden">
+            <Link href="/now" aria-label="Go to Now page">
+              <WorkAvailabilityBadge />
+            </Link>
+          </div>
+        )}
         <div className="flex items-center rounded-full border border-primary/40 bg-white/30 bg-clip-padding px-4 py-2 shadow-md backdrop-blur-sm sm:container dark:border-white dark:bg-black/30 dark:text-white sm:justify-between sm:rounded-lg">
-          <Link href="/" aria-label="Go to Home" className="order-1">
-            <Image
-              className="aspect-square h-auto w-10 rounded-full border border-black hover:opacity-60"
-              width={40}
-              height={40}
-              src="/avatar.png"
-              alt={defaultAuthor.name}
-            />
-          </Link>
+          <div className="order-1 flex flex-row items-center justify-start">
+            <Link href="/" aria-label="Go to Home">
+              <Image
+                className="aspect-square h-auto w-10 rounded-full border border-black hover:opacity-60"
+                width={40}
+                height={40}
+                src="/avatar.png"
+                alt={defaultAuthor.name}
+              />
+            </Link>
+            {defaultAuthor.availableForWork && (
+              <Link href="/now" aria-label="Go to Now page" className="ml-2 hidden sm:block">
+                <WorkAvailabilityBadge />
+              </Link>
+            )}
+          </div>
           <div className="order-3 sm:order-2 sm:ml-auto">
             <nav className="ml-auto hidden space-x-6 text-sm font-medium sm:block sm:w-full">
               <Navbar />
diff --git a/components/ui/badge.tsx b/components/ui/badge.tsx
new file mode 100644
index 0000000..f000e3e
--- /dev/null
+++ b/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }
diff --git a/components/work-availability-badge.tsx b/components/work-availability-badge.tsx
new file mode 100644
index 0000000..427cac7
--- /dev/null
+++ b/components/work-availability-badge.tsx
@@ -0,0 +1,12 @@
+import { Badge } from "@/components/ui/badge";
+
+export function WorkAvailabilityBadge() {
+  return (
+    <Badge
+      variant="outline"
+      className="border-accent-foreground bg-background text-primary transition-colors duration-150 hover:bg-accent-foreground hover:text-white"
+    >
+      🟢 I&apos;m available for work
+    </Badge>
+  );
+}
diff --git a/lib/metadata.ts b/lib/metadata.ts
index 296453e..a815843 100644
--- a/lib/metadata.ts
+++ b/lib/metadata.ts
@@ -15,6 +15,7 @@ export const defaultAuthor = {
   website: "https://nextjs.org",
   jobTitle: "Frontend Engineer & UI Designer",
   company: "Unicorns & Co.",
+  availableForWork: true,
 };
 
 const defaultTitle = `${defaultAuthor.name}'s Blog`;

From 67dee6306cd082ea77e477c65d1e2e6d2f0b17bc Mon Sep 17 00:00:00 2001
From: David Levai <david@davidlevai.com>
Date: Mon, 3 Jul 2023 14:26:24 +0200
Subject: [PATCH 3/3] feat: modified navbar border

---
 components/navigation.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/navigation.tsx b/components/navigation.tsx
index 934d0b5..da9e574 100644
--- a/components/navigation.tsx
+++ b/components/navigation.tsx
@@ -49,7 +49,7 @@ export function Navigation() {
             </Link>
           </div>
         )}
-        <div className="flex items-center rounded-full border border-primary/40 bg-white/30 bg-clip-padding px-4 py-2 shadow-md backdrop-blur-sm sm:container dark:border-white dark:bg-black/30 dark:text-white sm:justify-between sm:rounded-lg">
+        <div className="flex items-center rounded-full border-b border-primary/40 bg-white/30 bg-clip-padding px-4 py-2 shadow-md backdrop-blur-sm sm:container dark:bg-black/30 dark:text-white sm:justify-between sm:rounded-lg">
           <div className="order-1 flex flex-row items-center justify-start">
             <Link href="/" aria-label="Go to Home">
               <Image