Update package.json for turbopack support, enhance AppSidebar with new icons, and add Textarea and auth-utils components

- Modified the dev script in package.json to use turbopack for improved development performance.
- Enhanced AppSidebar by adding new icons for navigation items, improving visual clarity.
- Introduced a new Textarea component for consistent styling and functionality across forms.
- Added auth-utils module to fetch the current user session, streamlining user authentication processes.

components/ui/app-sidebar.tsx

@@ -1,4 +1,12 @@
-import { ChevronRight } from "lucide-react";
+import {
+	ChevronRight,
+	Coins,
+	CreditCard,
+	Handshake,
+	MonitorSpeaker,
+	Smartphone,
+	UsersRound,
+} from "lucide-react";
 
 import {
 	Collapsible,
@@ -29,18 +37,18 @@ const data = {
 				{
 					title: "Devices",
 					url: "/devices",
+					icon: <Smartphone size={16} />,
 				},
-				{
+
-					title: "Parental Controls",
-					url: "/parental-controls",
-				},
 				{
 					title: "Payments",
 					url: "/payments",
+					icon: <CreditCard size={16} />,
 				},
 				{
 					title: "Agreements",
 					url: "/agreements",
+					icon: <Handshake size={16} />,
 				},
 			],
 		},
@@ -52,14 +60,17 @@ const data = {
 				{
 					title: "Users",
 					url: "/users",
+					icon: <UsersRound size={16} />,
 				},
 				{
 					title: "User Devices",
 					url: "/user-devices",
+					icon: <MonitorSpeaker size={16} />,
 				},
 				{
 					title: "User Payments",
 					url: "/user-payments",
+					icon: <Coins size={16} />,
 				},
 			],
 		},
@@ -78,43 +89,6 @@ export function AppSidebar({
 				</h4>
 			</SidebarHeader>
 			<SidebarContent className="gap-0">
-				{/* We create a collapsible SidebarGroup for each parent. */}
-				{/* {data.navMain.map((item) => (
-
-					<Collapsible
-						key={item.title}
-						title={item.title}
-						defaultOpen
-						className="group/collapsible"
-					>
-						<SidebarGroup>
-							<SidebarGroupLabel
-								asChild
-								className="group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
-							>
-								<CollapsibleTrigger>
-									{item.title}{" "}
-									<ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
-								</CollapsibleTrigger>
-							</SidebarGroupLabel>
-							<CollapsibleContent>
-								<SidebarGroupContent>
-									<SidebarMenu>
-										{item.items.map((item) => (
-											<SidebarMenuItem key={item.title}>
-												<SidebarMenuButton className="py-6" asChild>
-													<Link className="text-md" href={item.url}>
-														{item.title}
-													</Link>
-												</SidebarMenuButton>
-											</SidebarMenuItem>
-										))}
-									</SidebarMenu>
-								</SidebarGroupContent>
-							</CollapsibleContent>
-						</SidebarGroup>
-					</Collapsible>
-				))} */}
 				{data.navMain
 					.filter(
 						(item) =>
@@ -146,7 +120,10 @@ export function AppSidebar({
 														<SidebarMenuItem key={item.title}>
 															<SidebarMenuButton className="py-6" asChild>
 																<Link className="text-md" href={item.url}>
-																	{item.title}
+																	{item.icon}
+																	<span className="opacity-70 ml-2">
+																		{item.title}
+																	</span>
 																</Link>
 															</SidebarMenuButton>
 														</SidebarMenuItem>

components/ui/textarea.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<"textarea">
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }

lib/auth-utils.ts

@@ -0,0 +1,10 @@
+"use server";
+import { headers } from "next/headers";
+import { auth } from "./auth";
+
+export async function getCurrentUser() {
+	const session = await auth.api.getSession({
+		headers: await headers(),
+	});
+	return session?.user;
+}

package.json

@@ -3,7 +3,7 @@
 	"version": "0.1.0",
 	"private": true,
 	"scripts": {
-		"dev": "next dev",
+		"dev": "next dev --turbopack",
 		"build": "next build",
 		"start": "next start",
 		"lint": "next lint"