fix: linting and formatting

Author: nameerakhter

README.md

@@ -1,8 +1,8 @@
 > **🚀 WSTACK - Under Development!**  
-> Enhancing the experience, one update at a time!  
+> Enhancing the experience, one update at a time!
 
 <div align="center">
   <img src="https://github.com/user-attachments/assets/8853f565-3512-494b-8374-c6245c32064e" alt="WSTACK Preview" style="border: 2px solid #ddd; border-radius: 8px; padding: 4px; max-width: 100%;">
 </div>
 
-### 📖 Check out the Documentation Repo (Incomplete at the Moment / Looking for Contributors):  **[WSTACK-DOCS](https://github.com/MambaCodes/wstack-docs)**
+### 📖 Check out the Documentation Repo (Incomplete at the Moment / Looking for Contributors): **[WSTACK-DOCS](https://github.com/MambaCodes/wstack-docs)**

src/app/(auth)/login/page.tsx

@@ -1,18 +1,19 @@
 'use client'
 
-import { signIn, signOut, useSession } from 'next-auth/react'
 import Image from 'next/image'
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
+import { signIn, signOut, useSession } from 'next-auth/react'
+
+import { Button } from '@/components/ui/button'
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
+} from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { cn } from '@/lib/utils'
 
 export default function Login() {
   const { data: session, status } = useSession()
@@ -39,7 +40,10 @@ export default function Login() {
   return (
     <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
       <div className="flex w-full max-w-sm flex-col gap-6">
-        <a href="/" className="flex items-center gap-2 self-center font-medium mt-6">
+        <a
+          href="/"
+          className="mt-6 flex items-center gap-2 self-center font-medium"
+        >
           <Image
             src="/wstack-white.svg"
             alt="Wstack Logo"
@@ -57,9 +61,9 @@ export default function Login() {
 export function LoginForm({
   className,
   ...props
-}: React.ComponentPropsWithoutRef<"div">) {
+}: React.ComponentPropsWithoutRef<'div'>) {
   return (
-    <div className={cn("flex flex-col gap-6", className)} {...props}>
+    <div className={cn('flex flex-col gap-6', className)} {...props}>
       <Card>
         <CardHeader className="text-center">
           <CardTitle className="text-xl">Welcome back</CardTitle>
@@ -71,7 +75,11 @@ export function LoginForm({
           <form>
             <div className="grid gap-6">
               <div className="flex flex-col gap-4">
-                <Button variant="outline" className="w-full" onClick={() => signIn('google')}>
+                <Button
+                  variant="outline"
+                  className="w-full"
+                  onClick={() => signIn('google')}
+                >
                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                     <path
                       d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
@@ -80,7 +88,11 @@ export function LoginForm({
                   </svg>
                   Login with Google
                 </Button>
-                <Button variant="outline" className="w-full" onClick={() => signIn('github')}>
+                <Button
+                  variant="outline"
+                  className="w-full"
+                  onClick={() => signIn('github')}
+                >
                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                     <path
                       d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
@@ -122,7 +134,7 @@ export function LoginForm({
                 </Button>
               </div>
               <div className="text-center text-sm">
-                Don&apos;t have an account?{" "}
+                Don&apos;t have an account?{' '}
                 <a href="#" className="underline underline-offset-4">
                   Sign up
                 </a>
@@ -131,8 +143,8 @@ export function LoginForm({
           </form>
         </CardContent>
       </Card>
-      <div className="text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-primary  ">
-        By clicking continue, you agree to our <a href="#">Terms of Service</a>{" "}
+      <div className="text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-primary">
+        By clicking continue, you agree to our <a href="#">Terms of Service</a>{' '}
         and <a href="#">Privacy Policy</a>.
       </div>
     </div>

src/app/(protected)/dashboard/page.tsx

@@ -1,9 +1,9 @@
 'use client'
 
-import { useSession } from 'next-auth/react'
 import { useRouter } from 'next/navigation'
-import { useEffect } from 'react'
+import { useSession } from 'next-auth/react'
 import { signOut } from 'next-auth/react'
+import { useEffect } from 'react'
 export default function Dashboard() {
   const { data: session, status } = useSession()
   const router = useRouter()

src/app/api/[...route]/route.ts

@@ -1,4 +1,5 @@
 import { handle } from 'hono/vercel'
+
 import app from '@/server/server'
 
 export const GET = handle(app)

src/app/api/auth/[...nextauth]/route.ts

@@ -1,6 +1,7 @@
-import { authOptions } from '@/lib/auth'
 import NextAuth from 'next-auth'
 
+import { authOptions } from '@/lib/auth'
+
 const handler = NextAuth(authOptions)
 
 export { handler as GET, handler as POST }

src/app/layout.tsx

@@ -1,7 +1,9 @@
 import type { Metadata } from 'next'
 import { Geist, Geist_Mono } from 'next/font/google'
+
 import './globals.css'
 import { Providers } from './provider'
+
 import { ThemeProvider } from '@/components/theme-provider'
 
 const geistSans = Geist({

src/app/page.tsx

@@ -1,21 +1,20 @@
 'use client'
-import { useState } from 'react'
-import Login from './(auth)/login/page'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-
+import { ArrowRight } from 'lucide-react'
 import Image from 'next/image'
-import Link from "next/link"
-import { ArrowRight } from "lucide-react"
-import { Spotlight } from "@/components/spotlight-new";
+import Link from 'next/link'
+import { useState } from 'react'
+
+import { Spotlight } from '@/components/spotlight-new'
 
 export default function Home() {
   const [queryClient] = useState(() => new QueryClient())
 
   return (
     <QueryClientProvider client={queryClient}>
-      <div className="flex min-h-screen flex-col items-center justify-between p-6 md:p-16 bg-black/[0.96] text-white relative overflow-hidden">
+      <div className="relative flex min-h-screen flex-col items-center justify-between overflow-hidden bg-black/[0.96] p-6 text-white md:p-16">
         <Spotlight />
-        <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm flex">
+        <div className="z-10 flex w-full max-w-5xl items-center justify-between font-mono text-sm">
           <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-800 bg-gradient-to-b from-zinc-900 pb-6 pt-8 backdrop-blur-2xl md:static md:w-auto md:rounded-xl md:border md:bg-gray-900 md:p-4">
             Get started by editing&nbsp;
             <code className="font-mono font-bold">src/app/page.tsx</code>
@@ -27,13 +26,20 @@ export default function Home() {
               target="_blank"
               rel="noopener noreferrer"
             >
-              By <Image src="/mamba-white.svg" alt="Wstack Logo" width={150} height={66} priority />
+              By{' '}
+              <Image
+                src="/mamba-white.svg"
+                alt="Wstack Logo"
+                width={150}
+                height={66}
+                priority
+              />
             </Link>
           </div>
         </div>
 
         <div className="flex flex-col items-center justify-center text-center">
-          <div className="relative flex place-items-center mb-8 md:mt-12 mt-24">
+          <div className="relative mb-8 mt-24 flex place-items-center md:mt-12">
             <Image
               src="/wstack-white.svg"
               alt="Wstack Logo"
@@ -42,42 +48,42 @@ export default function Home() {
               priority
               className="relative dark:drop-shadow-[0_0_1.2rem_#ffffff70]"
             />
-            <span className='text-xs font-medium text-cyan-200'>BETA</span>
+            <span className="text-xs font-medium text-cyan-200">BETA</span>
           </div>
 
-          <h1 className={` text-2xl md:text-3xl lg:text-4xl mb-6 max-w-3xl`}>
+          <h1 className={'mb-6 max-w-3xl text-2xl md:text-3xl lg:text-4xl'}>
             The only starter kit you need to launch your startup—period.
           </h1>
         </div>
 
-        <div className="mb-32 grid text-center lg:mb-0 lg:grid-cols-3 lg:text-left gap-8 max-w-5xl">
+        <div className="mb-32 grid max-w-5xl gap-8 text-center lg:mb-0 lg:grid-cols-3 lg:text-left">
           <Link
             href="https://github.com/MambaCodes/wstack"
             className="group rounded-lg border border-gray-800 px-5 py-4 transition-colors hover:border-gray-500 hover:bg-gray-900"
           >
-            <h2 className={`  mb-3 text-2xl font-semibold`}>
-              Tech Stack{" "}
+            <h2 className={'mb-3 text-2xl font-semibold'}>
+              Tech Stack{' '}
               <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
                 <ArrowRight className="inline h-5 w-5" />
               </span>
             </h2>
-            <p className={`  m-0 max-w-[30ch] text-sm opacity-70`}>
+            <p className={'m-0 max-w-[30ch] text-sm opacity-70'}>
               See why we chose this stack.
             </p>
           </Link>
 
           <Link
             href="https://github.com/MambaCodes/wstack-docs"
-            target='_blank'
+            target="_blank"
             className="group rounded-lg border border-gray-800 px-5 py-4 transition-colors hover:border-gray-500 hover:bg-gray-900"
           >
-            <h2 className={`  mb-3 text-2xl font-semibold`}>
-              Documentation{" "}
+            <h2 className={'mb-3 text-2xl font-semibold'}>
+              Documentation{' '}
               <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
                 <ArrowRight className="inline h-5 w-5" />
               </span>
             </h2>
-            <p className={`  m-0 max-w-[30ch] text-sm opacity-70`}>
+            <p className={'m-0 max-w-[30ch] text-sm opacity-70'}>
               Find in-depth information about Wstack features and API.
             </p>
           </Link>
@@ -86,29 +92,29 @@ export default function Home() {
             href="https://github.com/MambaCodes/wstack"
             className="group rounded-lg border border-gray-800 px-5 py-4 transition-colors hover:border-gray-500 hover:bg-gray-900"
           >
-            <h2 className={`  mb-3 text-2xl font-semibold`}>
-              Templates{" "}
+            <h2 className={'mb-3 text-2xl font-semibold'}>
+              Templates{' '}
               <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
                 <ArrowRight className="inline h-5 w-5" />
               </span>
             </h2>
-            <p className={`  m-0 max-w-[30ch] text-sm opacity-70`}>
+            <p className={'m-0 max-w-[30ch] text-sm opacity-70'}>
               Discover and deploy boilerplate example Wstack projects.
             </p>
           </Link>
 
           <Link
             href="https://github.com/MambaCodes/wstack-docs"
-            target='_blank'
+            target="_blank"
             className="group rounded-lg border border-gray-800 px-5 py-4 transition-colors hover:border-gray-500 hover:bg-gray-900"
           >
-            <h2 className={`  mb-3 text-2xl font-semibold`}>
-              Prompts{" "}
+            <h2 className={'mb-3 text-2xl font-semibold'}>
+              Prompts{' '}
               <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
                 <ArrowRight className="inline h-5 w-5" />
               </span>
             </h2>
-            <p className={`  m-0 max-w-[30ch] text-sm opacity-70`}>
+            <p className={'m-0 max-w-[30ch] text-sm opacity-70'}>
               AI-focused starter kit with pre-built prompts.
             </p>
           </Link>
@@ -117,34 +123,34 @@ export default function Home() {
             href="/login"
             className="group rounded-lg border border-gray-800 px-5 py-4 transition-colors hover:border-gray-500 hover:bg-gray-900"
           >
-            <h2 className={`  mb-3 text-2xl font-semibold`}>
-              Authentication{" "}
+            <h2 className={'mb-3 text-2xl font-semibold'}>
+              Authentication{' '}
               <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
                 <ArrowRight className="inline h-5 w-5" />
               </span>
             </h2>
-            <p className={`  m-0 max-w-[30ch] text-sm opacity-70`}>
+            <p className={'m-0 max-w-[30ch] text-sm opacity-70'}>
               See how we use NextAuth for Wstack.
             </p>
           </Link>
 
           <Link
             href="https://discord.gg/VFyDEVWx7s"
             className="group rounded-lg border border-gray-800 px-5 py-4 transition-colors hover:border-gray-500 hover:bg-gray-900"
-            target='_blank'
+            target="_blank"
           >
-            <h2 className={`  mb-3 text-2xl font-semibold`}>
-              Contact{" "}
+            <h2 className={'mb-3 text-2xl font-semibold'}>
+              Contact{' '}
               <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
                 <ArrowRight className="inline h-5 w-5" />
               </span>
             </h2>
-            <p className={`  m-0 max-w-[30ch] text-sm opacity-70`}>
+            <p className={'m-0 max-w-[30ch] text-sm opacity-70'}>
               Get in touch with us on Discord.
             </p>
           </Link>
         </div>
-    </div>
+      </div>
     </QueryClientProvider>
   )
 }

src/components/ProtectedLayout.tsx

@@ -1,7 +1,7 @@
 'use client'
 
-import { useSession } from 'next-auth/react'
 import { useRouter } from 'next/navigation'
+import { useSession } from 'next-auth/react'
 import { ReactNode, useEffect } from 'react'
 
 export default function ProtectedLayout({ children }: { children: ReactNode }) {

src/components/mode-toggle.tsx

@@ -1,14 +1,15 @@
 'use client'
 
 import { MoonIcon, SunIcon } from 'lucide-react'
+import { useTheme } from 'next-themes'
+
 import { Button } from '@/components/ui/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
-import { useTheme } from 'next-themes'
 
 export function ModeToggle() {
   const { setTheme } = useTheme()