Feature/available for work

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
 

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"
         )}
       >
-        <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>
+        {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-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
+                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 />

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 }

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>
+  );
+}

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`;