refactor: Fix formatting using prettier

app/(authenticated)/(app)/DesktopSidebar.tsx

@@ -1,7 +1,14 @@
 import { Logo } from "@/components/logo";
 import { Button } from "@/components/ui/button";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import { BarChart, Database, FileKey, Filter, FormInput, Home } from "lucide-react";
+import {
+  BarChart,
+  Database,
+  FileKey,
+  Filter,
+  FormInput,
+  Home,
+} from "lucide-react";
 import { ChannelLink } from "./channelLink";
 import { TeamSwitcher } from "./TeamSwitcher";
 import Link from "next/link";
@@ -29,38 +36,64 @@ export const DesktopSidebar: React.FC<Props> = ({ navigation, channels }) => {
       </Link>
       <div className="space-y-4">
         <div className="px-6 py-2">
-          <h2 className="px-2 mb-2 text-lg font-semibold tracking-tight">{/* Events */}</h2>
+          <h2 className="px-2 mb-2 text-lg font-semibold tracking-tight">
+            {/* Events */}
+          </h2>
           <div className="space-y-1">
             <Link href="/overview">
-              <Button variant="ghost" size="sm" className="justify-start w-full">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="justify-start w-full"
+              >
                 <Home className="w-4 h-4 mr-2" />
                 Overview
               </Button>
             </Link>
             <Link href="/keys">
-              <Button variant="ghost" size="sm" className="justify-start w-full">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="justify-start w-full"
+              >
                 <FileKey className="w-4 h-4 mr-2" />
                 API Keys
               </Button>
             </Link>
             <Link href="/channels">
-              <Button variant="ghost" size="sm" className="justify-start w-full">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="justify-start w-full"
+              >
                 <Database className="w-4 h-4 mr-2" />
                 Channels
               </Button>
             </Link>
-            <Button variant="ghost" disabled size="sm" className="justify-start w-full">
+            <Button
+              variant="ghost"
+              disabled
+              size="sm"
+              className="justify-start w-full"
+            >
               <Filter className="w-4 h-4 mr-2" />
               Filter
             </Button>
-            <Button variant="ghost" disabled size="sm" className="justify-start w-full">
+            <Button
+              variant="ghost"
+              disabled
+              size="sm"
+              className="justify-start w-full"
+            >
               <BarChart className="w-4 h-4 mr-2" />
               Analytics
             </Button>
           </div>
         </div>
         <div className="py-2">
-          <h2 className="relative px-8 text-lg font-semibold tracking-tight">Channels</h2>
+          <h2 className="relative px-8 text-lg font-semibold tracking-tight">
+            Channels
+          </h2>
           <ScrollArea className="h-[230px] px-4">
             <div className="p-2 space-y-1">
               {channels

app/(authenticated)/(app)/MobileSidebar.tsx

@@ -49,38 +49,64 @@ export const MobileSidebar: React.FC<Props> = ({ channels }) => {
           </SheetHeader>
           <div className="space-y-4">
             <div className="px-6 py-2">
-              <h2 className="px-2 mb-2 text-lg font-semibold tracking-tight">{/* Events */}</h2>
+              <h2 className="px-2 mb-2 text-lg font-semibold tracking-tight">
+                {/* Events */}
+              </h2>
               <div className="space-y-1">
                 <Link href="/overview">
-                  <Button variant="ghost" size="sm" className="justify-start w-full">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="justify-start w-full"
+                  >
                     <Home className="w-4 h-4 mr-2" />
                     Overview
                   </Button>
                 </Link>
                 <Link href="/keys">
-                  <Button variant="ghost" size="sm" className="justify-start w-full">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="justify-start w-full"
+                  >
                     <FileKey className="w-4 h-4 mr-2" />
                     API Keys
                   </Button>
                 </Link>
                 <Link href="/channels">
-                  <Button variant="ghost" size="sm" className="justify-start w-full">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="justify-start w-full"
+                  >
                     <Database className="w-4 h-4 mr-2" />
                     Channels
                   </Button>
                 </Link>
-                <Button variant="ghost" disabled size="sm" className="justify-start w-full">
+                <Button
+                  variant="ghost"
+                  disabled
+                  size="sm"
+                  className="justify-start w-full"
+                >
                   <Filter className="w-4 h-4 mr-2" />
                   Filter
                 </Button>
-                <Button variant="ghost" disabled size="sm" className="justify-start w-full">
+                <Button
+                  variant="ghost"
+                  disabled
+                  size="sm"
+                  className="justify-start w-full"
+                >
                   <BarChart className="w-4 h-4 mr-2" />
                   Analytics
                 </Button>
               </div>
             </div>
             <div className="py-2">
-              <h2 className="relative px-8 text-lg font-semibold tracking-tight">Events</h2>
+              <h2 className="relative px-8 text-lg font-semibold tracking-tight">
+                Events
+              </h2>
               <ScrollArea className="h-[230px] px-4">
                 <div className="p-2 space-y-1">
                   {channels.map((channel) => (

app/(authenticated)/(app)/TeamSwitcher.tsx

@@ -12,7 +12,12 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { Loading } from "@/components/loading";
 
-import { useAuth, useOrganization, useOrganizationList, useUser } from "@clerk/clerk-react";
+import {
+  useAuth,
+  useOrganization,
+  useOrganizationList,
+  useUser,
+} from "@clerk/clerk-react";
 import { Avatar, AvatarImage } from "@/components/ui/avatar";
 import { AvatarFallback } from "@radix-ui/react-avatar";
 
@@ -51,10 +56,15 @@ export const TeamSwitcher: React.FC<Props> = (): JSX.Element => {
           <div className="flex items-center justify-start w-full gap-4 ">
             <Avatar>
               {user?.profileImageUrl ? (
-                <AvatarImage src={user.profileImageUrl} alt={user.username ?? "Profile picture"} />
+                <AvatarImage
+                  src={user.profileImageUrl}
+                  alt={user.username ?? "Profile picture"}
+                />
               ) : null}
               <AvatarFallback className="flex items-center justify-center w-8 h-8 overflow-hidden border rounded-md bg-zinc-100 border-zinc-500 text-zinc-700">
-                {(currentOrg?.slug ?? user?.username ?? "").slice(0, 2).toUpperCase() ?? "P"}
+                {(currentOrg?.slug ?? user?.username ?? "")
+                  .slice(0, 2)
+                  .toUpperCase() ?? "P"}
               </AvatarFallback>
             </Avatar>
             <span>{currentOrg?.name ?? "Personal"}</span>

app/(authenticated)/(app)/overview/page.tsx

@@ -1,20 +1,17 @@
-
 import { cn } from "@/lib/utils";
 
-export default async function Page(_props: {
-  params: { tenantSlug: string };
-}) {
+export default async function Page(_props: { params: { tenantSlug: string } }) {
   const stats: {
     label: string;
     value: string;
   }[] = [
     {
       label: "Total Channels",
-      value: '0',
+      value: "0",
     },
     {
       label: "Total Events (7 days)",
-      value: '0',
+      value: "0",
     },
   ];
   return (
@@ -47,7 +44,7 @@ export default async function Page(_props: {
                 "lg:grid-cols-2": stats.length === 2,
                 "lg:grid-cols-3": stats.length === 3,
                 "lg:grid-cols-4": stats.length >= 4,
-              },
+              }
             )}
           >
             {" "}
@@ -55,11 +52,17 @@ export default async function Page(_props: {
               <div
                 key={stat.label}
                 className={cn(
-                  statIdx % 2 === 1 ? "sm:border-l" : statIdx === 2 ? "lg:border-l" : "",
-                  "flex items-baseline flex-wrap justify-between gap-y-2 gap-x-4 border-t border-zinc-100/5 px-4 py-10 sm:px-6 lg:border-t-0 xl:px-8",
+                  statIdx % 2 === 1
+                    ? "sm:border-l"
+                    : statIdx === 2
+                    ? "lg:border-l"
+                    : "",
+                  "flex items-baseline flex-wrap justify-between gap-y-2 gap-x-4 border-t border-zinc-100/5 px-4 py-10 sm:px-6 lg:border-t-0 xl:px-8"
                 )}
               >
-                <dt className="text-sm font-medium leading-6 text-zinc-500">{stat.label}</dt>
+                <dt className="text-sm font-medium leading-6 text-zinc-500">
+                  {stat.label}
+                </dt>
                 {/* <dd
                   className={cn(
                     stat.changeType === 'negative' ? 'text-rose-600' : 'text-zinc-700',
@@ -96,9 +99,7 @@ export default async function Page(_props: {
                       <th>More details</th>
                     </tr>
                   </thead>
-                  <tbody>
-
-                  </tbody>
+                  <tbody></tbody>
                 </table>
               </div>
             </div>

app/(authenticated)/layout.tsx

@@ -1,11 +1,12 @@
 import { Particles } from "@/components/landing/particles";
-import { ClerkProvider, SignIn, SignedIn, SignedOut } from "@clerk/nextjs/app-beta";
+import {
+  ClerkProvider,
+  SignIn,
+  SignedIn,
+  SignedOut,
+} from "@clerk/nextjs/app-beta";
 
-export default function AppLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function AppLayout({ children }: { children: React.ReactNode }) {
   return (
     <ClerkProvider>
       <SignedIn>{children}</SignedIn>