Format all pages with Prettier for consistent code styling

actions/form.ts

@@ -1,8 +1,8 @@
-"use server";
+'use server';
 
-import prisma from "@/lib/prisma";
-import { formSchema, formSchemaType } from "@/schemas/form";
-import { currentUser } from "@clerk/nextjs";
+import prisma from '@/lib/prisma';
+import { formSchema, formSchemaType } from '@/schemas/form';
+import { currentUser } from '@clerk/nextjs';
 
 class UserNotFoundErr extends Error {}
 
@@ -44,7 +44,7 @@ export async function GetFormStats() {
 export async function CreateForm(data: formSchemaType) {
   const validation = formSchema.safeParse(data);
   if (!validation.success) {
-    throw new Error("form not valid");
+    throw new Error('form not valid');
   }
 
   const user = await currentUser();
@@ -63,7 +63,7 @@ export async function CreateForm(data: formSchemaType) {
   });
 
   if (!form) {
-    throw new Error("something went wrong");
+    throw new Error('something went wrong');
   }
 
   return form.id;
@@ -80,7 +80,7 @@ export async function GetForms() {
       userId: user.id,
     },
     orderBy: {
-      createdAt: "desc",
+      createdAt: 'desc',
     },
   });
 }

app/(auth)/sign-in/[[...sign-in]]/page.tsx

@@ -1,5 +1,5 @@
-import { SignIn } from "@clerk/nextjs";
- 
+import { SignIn } from '@clerk/nextjs';
+
 export default function Page() {
   return <SignIn />;
-}
+}

app/(auth)/sign-up/[[...sign-up]]/page.tsx

@@ -1,5 +1,5 @@
-import { SignUp } from "@clerk/nextjs";
- 
+import { SignUp } from '@clerk/nextjs';
+
 export default function Page() {
   return <SignUp />;
-}
+}

app/(dashboard)/builder/[id]/erorr.tsx

@@ -1,8 +1,8 @@
-"use client";
+'use client';
 
-import { Button } from "@/components/ui/button";
-import Link from "next/link";
-import { useEffect } from "react";
+import { Button } from '@/components/ui/button';
+import Link from 'next/link';
+import { useEffect } from 'react';
 
 function ErrorPage({ error }: { error: Error }) {
   useEffect(() => {
@@ -12,7 +12,7 @@ function ErrorPage({ error }: { error: Error }) {
     <div className="flex w-full h-full flex-col items-center justify-center gap-4">
       <h2 className="text-destructive text-4xl">Something went wrong!</h2>
       <Button asChild>
-        <Link href={"/"}>Go back to home</Link>
+        <Link href={'/'}>Go back to home</Link>
       </Button>
     </div>
   );

app/(dashboard)/builder/[id]/layout.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode } from 'react';
 
 function layout({ children }: { children: ReactNode }) {
   return <div className="flex w-full flex-grow mx-auto">{children}</div>;

app/(dashboard)/builder/[id]/loading.tsx

@@ -1,4 +1,4 @@
-import { ImSpinner2 } from "react-icons/im";
+import { ImSpinner2 } from 'react-icons/im';
 
 function Loading() {
   return (

app/(dashboard)/builder/[id]/page.tsx

@@ -1,5 +1,5 @@
-import { GetFormById } from "@/actions/form";
-import FormBuilder from "@/components/FormBuilder";
+import { GetFormById } from '@/actions/form';
+import FormBuilder from '@/components/FormBuilder';
 
 async function BuilderPage({
   params,
@@ -12,7 +12,7 @@ async function BuilderPage({
   const form = await GetFormById(Number(id));
 
   if (!form) {
-    throw new Error("form not found");
+    throw new Error('form not found');
   }
   return <FormBuilder form={form} />;
 }

app/(dashboard)/layout.tsx

@@ -1,19 +1,21 @@
-import Logo from "@/components/Logo";
-import ThemeSwitcher from "@/components/ThemeSwitcher";
-import { UserButton } from "@clerk/nextjs";
-import { ReactNode } from "react";
+import Logo from '@/components/Logo';
+import ThemeSwitcher from '@/components/ThemeSwitcher';
+import { UserButton } from '@clerk/nextjs';
+import { ReactNode } from 'react';
 
 function Layout({ children }: { children: ReactNode }) {
-  return <div className="flex flex-col min-h-screen min-w-full bg-background max-h-screen">
-    <nav className="flex justify-between items-center border-b border-border h-[60px] px-4 py-2">
-      <Logo/>
-      <div className="flex gap-4 items-center">
-      <ThemeSwitcher/>
-      <UserButton afterSignOutUrl="/sign-in"/>
-      </div>
-    </nav>
-    <main className="flex w-full flex-grow">{children}</main>
-  </div>
+  return (
+    <div className="flex flex-col min-h-screen min-w-full bg-background max-h-screen">
+      <nav className="flex justify-between items-center border-b border-border h-[60px] px-4 py-2">
+        <Logo />
+        <div className="flex gap-4 items-center">
+          <ThemeSwitcher />
+          <UserButton afterSignOutUrl="/sign-in" />
+        </div>
+      </nav>
+      <main className="flex w-full flex-grow">{children}</main>
+    </div>
+  );
 }
 
 export default Layout;

app/(dashboard)/page.tsx

@@ -1,26 +1,26 @@
-import { GetFormStats, GetForms } from "@/actions/form";
+import { GetFormStats, GetForms } from '@/actions/form';
 import {
   Card,
   CardContent,
   CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
-import { ReactNode, Suspense } from "react";
-import { LuView } from "react-icons/lu";
-import { FaEdit, FaWpforms } from "react-icons/fa";
-import { HiCursorClick } from "react-icons/hi";
-import { TbArrowBounce } from "react-icons/tb";
-import { BiRightArrowAlt } from "react-icons/bi";
-import { Separator } from "@/components/ui/separator";
-import CreateFormBtn from "@/components/CreateFormBtn";
-import { Form } from "@prisma/client";
-import { Badge } from "@/components/ui/badge";
-import { formatDistance } from "date-fns";
-import { Button } from "@/components/ui/button";
-import Link from "next/link";
+} from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import { ReactNode, Suspense } from 'react';
+import { LuView } from 'react-icons/lu';
+import { FaEdit, FaWpforms } from 'react-icons/fa';
+import { HiCursorClick } from 'react-icons/hi';
+import { TbArrowBounce } from 'react-icons/tb';
+import { BiRightArrowAlt } from 'react-icons/bi';
+import { Separator } from '@/components/ui/separator';
+import CreateFormBtn from '@/components/CreateFormBtn';
+import { Form } from '@prisma/client';
+import { Badge } from '@/components/ui/badge';
+import { formatDistance } from 'date-fns';
+import { Button } from '@/components/ui/button';
+import Link from 'next/link';
 
 export default function Home() {
   return (
@@ -64,31 +64,31 @@ function StatsCards(props: StatsCardsProps) {
         title="Total visits"
         icon={<LuView className="text-blue-600" />}
         helperText="All time form visits"
-        value={data?.visits.toLocaleString() || ""}
+        value={data?.visits.toLocaleString() || ''}
         loading={loading}
         className="shadow-md shadow-blue-600"
       />
       <StatsCard
         title="Total submission"
         icon={<FaWpforms className="text-yellow-600" />}
         helperText="All time form submission"
-        value={data?.submissions.toLocaleString() || ""}
+        value={data?.submissions.toLocaleString() || ''}
         loading={loading}
         className="shadow-md shadow-yellow-600"
       />
       <StatsCard
         title="Submission rate"
         icon={<HiCursorClick className="text-green-600" />}
         helperText="Visits that result in form submission"
-        value={data?.submissionRate.toLocaleString() + "%" || ""}
+        value={data?.submissionRate.toLocaleString() + '%' || ''}
         loading={loading}
         className="shadow-md shadow-green-600"
       />
       <StatsCard
         title="Bounce Rate"
         icon={<TbArrowBounce className="text-red-600" />}
         helperText="Visits that leaves without interacting"
-        value={data?.bounceRate.toLocaleString() + "%" || ""}
+        value={data?.bounceRate.toLocaleString() + '%' || ''}
         loading={loading}
         className="shadow-md shadow-red-600"
       />
@@ -156,7 +156,7 @@ function FormCard({ form }: { form: Form }) {
         <CardTitle className="flex items-center gap-2 justify-between">
           <span className="truncate font-bold">{form.name}</span>
           {form.published && <Badge>Published</Badge>}
-          {!form.published && <Badge variant={"destructive"}>Draft</Badge>}
+          {!form.published && <Badge variant={'destructive'}>Draft</Badge>}
         </CardTitle>
         <CardDescription className="flex items-center justify-between text-muted-foreground text-sm">
           {formatDistance(form.createdAt, new Date(), {
@@ -173,20 +173,24 @@ function FormCard({ form }: { form: Form }) {
         </CardDescription>
       </CardHeader>
       <CardContent className="h-[20px] truncate text-sm text-muted-foreground">
-        {form.description || "No description"}
+        {form.description || 'No description'}
       </CardContent>
       <CardFooter>
         {form.published && (
           <Button asChild className="w-full mt-2 text-md gap-4">
             <Link href={`/forms/${form.id}`}>
-              View Submissions <BiRightArrowAlt />{" "}
+              View Submissions <BiRightArrowAlt />{' '}
             </Link>
           </Button>
         )}
         {!form.published && (
-          <Button variant={'secondary'} asChild className="w-full mt-2 text-md gap-4">
+          <Button
+            variant={'secondary'}
+            asChild
+            className="w-full mt-2 text-md gap-4"
+          >
             <Link href={`/builder/${form.id}`}>
-              Edit <FaEdit />{" "}
+              Edit <FaEdit />{' '}
             </Link>
           </Button>
         )}

app/globals.css

@@ -1,7 +1,6 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
 
 @layer base {
   :root {
@@ -26,7 +25,7 @@
     --ring: 224 71.4% 4.1%;
     --radius: 0.5rem;
   }
- 
+
   .dark {
     --background: 224 71.4% 4.1%;
     --foreground: 210 20% 98%;
@@ -50,12 +49,11 @@
   }
 }
 
-
 @layer base {
   * {
     @apply border-border;
   }
   body {
     @apply bg-background text-foreground;
   }
-}
+}

app/layout.tsx

@@ -1,17 +1,17 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import { ClerkProvider } from "@clerk/nextjs";
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import { ClerkProvider } from '@clerk/nextjs';
 
-import "./globals.css";
-import { ThemeProvider } from "@/components/providers/theme-providers";
-import { Toaster } from "@/components/ui/toaster";
-import DesignerContextProvider from "@/components/context/DesignerContext";
+import './globals.css';
+import { ThemeProvider } from '@/components/providers/theme-providers';
+import { Toaster } from '@/components/ui/toaster';
+import DesignerContextProvider from '@/components/context/DesignerContext';
 
-const inter = Inter({ subsets: ["latin"] });
+const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: 'Create Next App',
+  description: 'Generated by create next app',
 };
 
 export default function RootLayout({

components.json

@@ -13,4 +13,4 @@
     "components": "@/components",
     "utils": "@/lib/utils"
   }
-}
+}