feat: loading and more (#41)

* feat: loading and more

* fix: css stuff

* chore: small style changes

* fix: mobile sheet close

* chore: rename link

apps/web/src/app/app/(dashboard)/[workspaceId]/endpoint/loading.tsx

···
+import { Container } from "@/components/dashboard/container";
+import { Header } from "@/components/dashboard/header";
+
+export default function Loading() {
+  return (
+    <div className="grid gap-6 md:grid-cols-2 md:gap-8">
+      <Header.Skeleton />
+      <Container.Skeleton />
+      <Container.Skeleton />
+      <Container.Skeleton />
+    </div>
+  );
+}

apps/web/src/app/app/(dashboard)/[workspaceId]/endpoint/page.tsx

···
 import * as React from "react";
 
-import { Header } from "@/components/header";
+import { Container } from "@/components/dashboard/container";
+import { Header } from "@/components/dashboard/header";
+import { wait } from "@/lib/utils";
 
-export default function EndpointPage() {
+export default async function EndpointPage() {
+  await wait(1000);
   return (
-    <div>
+    <div className="grid gap-6 md:grid-cols-2 md:gap-8">
       <Header title="Endpoint" description="Overview of all your sites." />
+      <Container title="Hello"></Container>
+      <Container title="World"></Container>
     </div>
   );
 }

apps/web/src/app/app/(dashboard)/[workspaceId]/incident/loading.tsx

···
+import { Container } from "@/components/dashboard/container";
+import { Header } from "@/components/dashboard/header";
+
+export default function Loading() {
+  return (
+    <div className="grid gap-6 md:grid-cols-2 md:gap-8">
+      <Header.Skeleton />
+      <Container.Skeleton />
+      <Container.Skeleton />
+      <Container.Skeleton />
+    </div>
+  );
+}

apps/web/src/app/app/(dashboard)/[workspaceId]/incident/page.tsx

···
 import * as React from "react";
 
-import { Header } from "@/components/header";
+import { Container } from "@/components/dashboard/container";
+import { Header } from "@/components/dashboard/header";
+import { wait } from "@/lib/utils";
 
-export default function IncidentPage() {
+export default async function IncidentPage() {
+  await wait(1000);
   return (
-    <div>
+    <div className="grid gap-6 md:grid-cols-2 md:gap-8">
       <Header title="Monitor" description="Overview of all the responses." />
+      <Container title="Hello"></Container>
+      <Container title="World"></Container>
     </div>
   );
 }

apps/web/src/app/app/(dashboard)/[workspaceId]/loading.tsx

···
+import { Container } from "@/components/dashboard/container";
+import { Header } from "@/components/dashboard/header";
+
+export default function Loading() {
+  return (
+    <div className="grid gap-6 md:grid-cols-2 md:gap-8">
+      <Header.Skeleton />
+      <Container.Skeleton />
+      <Container.Skeleton />
+      <Container.Skeleton />
+    </div>
+  );
+}

apps/web/src/app/app/(dashboard)/[workspaceId]/monitor/loading.tsx

···
+import { Container } from "@/components/dashboard/container";
+import { Header } from "@/components/dashboard/header";
+
+export default function Loading() {
+  return (
+    <div className="grid gap-6 md:grid-cols-2 md:gap-8">
+      <Header.Skeleton />
+      <Container.Skeleton />
+      <Container.Skeleton />
+      <Container.Skeleton />
+    </div>
+  );
+}

apps/web/src/app/app/(dashboard)/[workspaceId]/monitor/page.tsx

···
 import * as React from "react";
 
-import { Header } from "@/components/header";
+import { Container } from "@/components/dashboard/container";
+import { Header } from "@/components/dashboard/header";
+import { wait } from "@/lib/utils";
 
-export default function MonitorPage() {
+export default async function MonitorPage() {
+  await wait(1000);
   return (
-    <div>
+    <div className="grid gap-6 md:grid-cols-2 md:gap-8">
       <Header title="Monitor" description="Overview of all the responses." />
+      <Container title="Hello"></Container>
+      <Container title="World"></Container>
     </div>
   );
 }

apps/web/src/app/app/(dashboard)/[workspaceId]/page.tsx

···
 import * as React from "react";
-import { auth, currentUser } from "@clerk/nextjs";
 
-import { Header } from "@/components/header";
+import { Container } from "@/components/dashboard/container";
+import { Header } from "@/components/dashboard/header";
+import { wait } from "@/lib/utils";
 
-export default async function AppPage() {
-  const user = await currentUser();
-  console.log({ user });
+export default async function DashboardPage() {
+  await wait(1000);
   return (
-    <div>
-      <Header title="App" description="Overview of all your websites" />
+    <div className="grid gap-6 md:grid-cols-2 md:gap-8">
+      <Header title="Dashboard" description="Overview of all your websites" />
+      <Container title="Hello"></Container>
+      <Container title="World"></Container>
     </div>
   );
 }

apps/web/src/app/app/(dashboard)/layout.tsx

···
 import * as React from "react";
 
+import { Shell } from "@/components/dashboard/shell";
 import { AppHeader } from "@/components/layout/app-header";
 import { AppMenu } from "@/components/layout/app-menu";
 import { AppSidebar } from "@/components/layout/app-sidebar";
···
     <div className="container mx-auto flex min-h-screen w-full flex-col items-center justify-center space-y-6 p-4 md:p-8">
       <AppHeader />
       <div className="flex w-full flex-1 gap-6 md:gap-8">
-        <aside className="border-border hidden rounded-lg border p-3 backdrop-blur-[2px] md:block md:p-6">
+        <Shell className="hidden max-w-min md:block">
           <nav>
             <AppSidebar />
           </nav>
-        </aside>
+        </Shell>
         <main className="z-10 flex w-full flex-1 flex-col items-start justify-center">
-          <div className="border-border relative w-full flex-1 rounded-lg border p-3 backdrop-blur-[2px] md:p-6">
+          <Shell className="relative flex-1">
             <nav className="absolute right-4 top-4 block md:hidden">
               <AppMenu />
             </nav>
             {children}
-          </div>
+          </Shell>
         </main>
       </div>
       <Footer />

apps/web/src/app/app/(dashboard)/page.tsx

···
-import * as React from "react";
-import { auth, currentUser } from "@clerk/nextjs";
-
-import { Header } from "@/components/header";
-
-export default async function AppPage() {
-  const user = await currentUser();
-  console.log({ user });
-  return (
-    <div>
-      <Header title="App" description="Overview of all your websites" />
-    </div>
-  );
-}

apps/web/src/components/dashboard/container.tsx

···
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+import { Skeleton } from "../ui/skeleton";
+
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  title: string;
+  description?: string;
+}
+
+function Container({ title, description, className, children }: CardProps) {
+  return (
+    <Card className={cn("border-border/50 w-full shadow-none", className)}>
+      <CardHeader>
+        <CardTitle className="text-lg font-medium tracking-normal">
+          {title}
+        </CardTitle>
+        {description ? <CardDescription>{description}</CardDescription> : null}
+      </CardHeader>
+      {/* potentially `asChild` */}
+      <CardContent>{children}</CardContent>
+    </Card>
+  );
+}
+
+function ContainerSkeleton() {
+  return <Skeleton className="h-24 w-full" />;
+}
+
+Container.Skeleton = ContainerSkeleton;
+
+export { Container };

apps/web/src/components/dashboard/header.tsx

···
+import { cn } from "@/lib/utils";
+import { Skeleton } from "../ui/skeleton";
+
+interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  title: string;
+  description?: string | null;
+}
+
+function Header({ title, description, className }: HeaderProps) {
+  return (
+    <div className={cn("col-span-full grid gap-1", className)}>
+      <h1 className="font-cal text-3xl">{title}</h1>
+      {description ? (
+        <p className="text-muted-foreground">{description}</p>
+      ) : null}
+    </div>
+  );
+}
+
+function HeaderSkeleton() {
+  return (
+    <div className="col-span-full grid gap-3">
+      <Skeleton className="h-8 w-[200px]" />
+      <Skeleton className="h-4 w-[300px]" />
+    </div>
+  );
+}
+
+Header.Skeleton = HeaderSkeleton;
+
+export { Header };

apps/web/src/components/dashboard/shell.tsx

···
+import { cn } from "@/lib/utils";
+
+type ShellProps = React.HTMLAttributes<HTMLDivElement>;
+
+function Shell({ children, className }: ShellProps) {
+  return (
+    <div
+      className={cn(
+        "border-border w-full rounded-lg border p-3 backdrop-blur-[2px] md:p-6",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export { Shell };

apps/web/src/components/header.tsx

···
-import { cn } from "@/lib/utils";
-
-interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
-  title: string;
-  description?: string | null;
-}
-
-export function Header({ title, description, className }: HeaderProps) {
-  return (
-    <div className={cn("grid gap-1", className)}>
-      <h1 className="font-cal text-3xl">{title}</h1>
-      {description ? (
-        <p className="text-muted-foreground">{description}</p>
-      ) : null}
-    </div>
-  );
-}

apps/web/src/components/layout/app-menu.tsx

···
+"use client";
+
+import * as React from "react";
+import { usePathname, useSearchParams } from "next/navigation";
 import { Menu } from "lucide-react";
 
 import { Button } from "../ui/button";
···
   SheetTitle,
   SheetTrigger,
 } from "../ui/sheet";
+//  your navigation
 import { AppSidebar } from "./app-sidebar";
 
 export function AppMenu() {
+  const [open, setOpen] = React.useState(false);
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  React.useEffect(() => {
+    setOpen(false);
+  }, [pathname, searchParams]); // remove searchParams if not needed
+
   return (
-    <Sheet>
+    <Sheet open={open} onOpenChange={(value) => setOpen(value)}>
       <SheetTrigger asChild>
         <Button size="icon" variant="outline">
           <Menu className="h-6 w-6" />
···
       </SheetTrigger>
       <SheetContent>
         <SheetHeader>
-          <SheetTitle>Navigation</SheetTitle>
+          <SheetTitle className="text-left">Navigation</SheetTitle>
           <SheetDescription>
-            <AppSidebar />
+            <AppSidebar /> {/* is here */}
           </SheetDescription>
         </SheetHeader>
       </SheetContent>

apps/web/src/components/layout/app-sidebar.tsx

···
 import { cn } from "@/lib/utils";
 import { Icons } from "../icons";
 
+type PageConfig = {
+  title: string;
+  href: string;
+  icon: string;
+  disabled: boolean;
+};
+
 export function AppSidebar() {
   const pathname = usePathname();
   const params = useParams();
···
     <ul className="grid gap-1">
       {pagesConfig.map(({ title, href, icon, disabled }) => {
         const Icon = Icons[icon];
+        const link = `/app/${params.workspaceId}${href}`; // TODO: add
         return (
           <li key={title} className="w-full">
             <Link
-              href={`/app/${params.workspaceId}/${href}`}
+              href={link}
               className={cn(
-                "hover:bg-muted/50 hover:text-foreground text-muted-foreground group -mx-2 flex w-full min-w-[200px] items-center rounded-md border border-transparent px-3 py-1",
-                pathname === href &&
+                "hover:bg-muted/50 hover:text-foreground text-muted-foreground group flex w-full min-w-[200px] items-center rounded-md border border-transparent px-3 py-1",
+                pathname === link &&
                   "bg-muted/50 border-border text-foreground",
                 disabled && "pointer-events-none opacity-60",
               )}

apps/web/src/components/ui/card.tsx

···
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "bg-card text-card-foreground rounded-xl border shadow",
+      className,
+    )}
+    {...props}
+  />
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-muted-foreground text-sm", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(" flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};

apps/web/src/components/ui/skeleton.tsx

···
+import { cn } from "@/lib/utils";
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("bg-primary/10 animate-pulse rounded-md", className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };

apps/web/src/config/pages.ts

···
   {
     title: "Dashboard",
     description: "Get an overview of what's hot.",
-    href: "/",
+    href: "",
     icon: "layout-dashboard",
   },
   {

apps/web/src/lib/utils.ts

···
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+
+export function wait(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}