ui demo cleanup

Author: thomasyuill-livekit

app/ui/_container.tsx

@@ -1,19 +1,20 @@
 import { cn } from '@/lib/utils';
 
 interface ContainerProps {
+  componentName?: string;
   children: React.ReactNode;
   className?: string;
 }
 
-export function Container({ children, className }: ContainerProps) {
+export function Container({ componentName, children, className }: ContainerProps) {
   return (
-    <div
-      className={cn(
-        'bg-card border-input relative space-y-4 rounded-lg border p-4 drop-shadow-lg/5',
-        className
-      )}
-    >
-      {children}
+    <div className={cn('space-y-4', className)}>
+      <h3 className="text-foreground text-2xl font-bold">
+        <span className="tracking-tight">{componentName}</span>
+      </h3>
+      <div className="bg-background border-input space-y-4 rounded-3xl border p-8 drop-shadow-lg/5">
+        {children}
+      </div>
     </div>
   );
 }

app/ui/layout.tsx

@@ -7,16 +7,23 @@ export default async function ComponentsLayout({ children }: { children: React.R
   const hdrs = await headers();
   const appConfig = await getAppConfig(hdrs);
   return (
-    <div className="mx-auto min-h-svh max-w-3xl space-y-8 px-4 py-8">
-      <header className="flex flex-col gap-1">
-        <h1 className="text-3xl font-bold tracking-tight">Quick Start UI overview</h1>
-        <p className="text-muted-foreground">
-          A quick start UI overview for the LiveKit Voice Assistant.
-        </p>
-      </header>
-      <RoomProvider appConfig={appConfig}>
-        <main className="flex w-full flex-1 flex-col items-stretch gap-8">{children}</main>
-      </RoomProvider>
+    <div className="bg-muted/20 min-h-svh p-8">
+      <div className="mx-auto max-w-3xl space-y-8">
+        <header className="space-y-2">
+          <h1 className="text-5xl font-bold tracking-tight">LiveKit UI</h1>
+          <p className="text-muted-foreground max-w-prose text-balance">
+            A set of beautifully designed components that you can customize, extend, and build on.
+          </p>
+          <p className="text-muted-foreground max-w-prose text-balance">
+            Built with Shadcn conventions.
+          </p>
+          <p className="text-foreground max-w-prose text-balance">Open Source. Open Code.</p>
+        </header>
+
+        <RoomProvider appConfig={appConfig}>
+          <main className="space-y-20">{children}</main>
+        </RoomProvider>
+      </div>
     </div>
   );
 }