Cleaning up the component names and better organizing the components

Author: tnylea

package-lock.json

@@ -45,7 +45,7 @@
         "@radix-ui/react-slot": "^1.1.1",
         "@radix-ui/react-toggle": "^1.1.1",
         "@radix-ui/react-toggle-group": "^1.1.1",
-        "@radix-ui/react-tooltip": "^1.1.5",
+        "@radix-ui/react-tooltip": "^1.1.6",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "lucide-react": "^0.468.0",

package.json

@@ -0,0 +1,18 @@
+import { SidebarInset } from '@/components/ui/sidebar';
+import * as React from 'react';
+
+interface AppContentProps extends React.ComponentProps<'div'> {
+    variant?: 'header' | 'sidebar';
+}
+
+export function AppContent({ variant = 'header', children, ...props }: AppContentProps) {
+    if (variant === 'sidebar') {
+        return <SidebarInset {...props}>{children}</SidebarInset>;
+    }
+
+    return (
+        <main className="flex h-full flex-1 flex-col gap-4 rounded-xl max-w-7xl mx-auto w-full" {...props}>
+            {children}
+        </main>
+    );
+}