reorganize folder structure and highlight active tab

Author: michelleshx

components.json

@@ -5,7 +5,7 @@
   "tsx": true,
   "tailwind": {
     "config": "tailwind.config.ts",
-    "css": "src/app/globals.css",
+    "css": "src/styles/globals.css",
     "baseColor": "slate",
     "cssVariables": true,
     "prefix": ""
@@ -14,4 +14,4 @@
     "components": "@/components",
     "utils": "@/lib/utils"
   }
-}
+}

public/next.svg

@@ -1,10 +1,10 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import { cn } from "@/lib/utils";
-import "./globals.css";
+import "../styles/globals.css";
 
-import Appbar from "./components/appbar";
-import Sidebar from "./components/sidebar";
+import Appbar from "../components/appbar";
+import Sidebar from "../components/sidebar";
 
 const inter = Inter({ subsets: ["latin"] });
 

public/vercel.svg

@@ -0,0 +1,66 @@
+"use client";
+import { cn } from "@/lib/utils";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+import { Button } from "@/components/ui/button";
+import { Home, Users, DollarSign, ListChecks, Settings } from "lucide-react";
+
+interface ButtonLinkProps extends React.HTMLAttributes<HTMLDivElement> {
+  href: string;
+}
+
+const ButtonLink = ({ href, children }: ButtonLinkProps) => {
+  const pathname = usePathname();
+  const isActive = pathname === href;
+
+  return (
+    <Button
+      asChild
+      variant="ghost"
+      className={`w-full justify-start ${isActive && "bg-slate-100"}`}
+    >
+      <Link href={href}>{children}</Link>
+    </Button>
+  );
+};
+
+interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
+  isProgramManager: boolean;
+}
+
+export default function Sidebar({ className, isProgramManager }: SidebarProps) {
+  return (
+    <div
+      className={cn(
+        "pb-2 w-40 border-r bg-background text-slate-600",
+        className
+      )}
+    >
+      <ButtonLink href="/">
+        <Home className="mr-2 h-4 w-4" />
+        Home
+      </ButtonLink>
+      <ButtonLink href="/tasks">
+        <ListChecks className="mr-2 h-4 w-4" />
+        Tasks
+      </ButtonLink>
+      {isProgramManager && (
+        <>
+          <ButtonLink href="/agents">
+            <Users className="mr-2 h-4 w-4" />
+            Agents
+          </ButtonLink>
+          <ButtonLink href="/billings">
+            <DollarSign className="mr-2 h-4 w-4" />
+            Billings & Usage
+          </ButtonLink>
+        </>
+      )}
+      <ButtonLink href="/settings">
+        <Settings className="mr-2 h-4 w-4" />
+        Settings
+      </ButtonLink>
+    </div>
+  );
+}

src/app/components/sidebar/index.tsx

@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
@@ -17,8 +17,8 @@ const Avatar = React.forwardRef<
     )}
     {...props}
   />
-))
-Avatar.displayName = AvatarPrimitive.Root.displayName
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
 
 const AvatarImage = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Image>,
@@ -29,8 +29,8 @@ const AvatarImage = React.forwardRef<
     className={cn("aspect-square h-full w-full", className)}
     {...props}
   />
-))
-AvatarImage.displayName = AvatarPrimitive.Image.displayName
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 
 const AvatarFallback = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Fallback>,
@@ -44,7 +44,7 @@ const AvatarFallback = React.forwardRef<
     )}
     {...props}
   />
-))
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
-export { Avatar, AvatarImage, AvatarFallback }
+export { Avatar, AvatarImage, AvatarFallback };

src/app/layout.tsx

@@ -1,8 +1,8 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md 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",
@@ -31,26 +31,26 @@ const buttonVariants = cva(
       size: "default",
     },
   }
-)
+);
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+  asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : "button";
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
       />
-    )
+    );
   }
-)
-Button.displayName = "Button"
+);
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };