ui demo cleanup

Author: thomasyuill-livekit

app/ui/_container.tsx

@@ -1,19 +1,23 @@
 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',
+        'bg-muted/20 border-input relative space-y-2 rounded-lg border p-2 drop-shadow-lg/5',
         className
       )}
     >
-      {children}
+      <h3 className="text-foreground text-lg font-medium">
+        <span className="font-mono">&lt;{componentName}/&gt;</span>
+      </h3>
+      <div className="bg-background border-input space-y-2 rounded border p-4">{children}</div>
     </div>
   );
 }

app/ui/layout.tsx

@@ -14,6 +14,7 @@ export default async function ComponentsLayout({ children }: { children: React.R
           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>