chore: add eslint plugins for import and className sorting

2023-06-11 15:39:04 +04:00 · 2023-06-11 15:39:04 +04:00 · d96be6654d
commit d96be6654d
parent 0fa620719b
36 changed files with 522 additions and 174 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -1,5 +1,25 @@
 {
  "$schema": "https://json.schemastore.org/eslintrc",
  "root": true,
-  "extends": ["next/core-web-vitals", "prettier"]
+  "extends": [
+    "next/core-web-vitals",
+    "prettier",
+    "plugin:tailwindcss/recommended"
+  ],
+  "plugins": ["tailwindcss"],
+  "rules": {
+    "tailwindcss/no-custom-classname": "off"
+  },
+  "settings": {
+    "tailwindcss": {
+      "callees": ["cn", "cva"],
+      "config": "tailwind.config.js"
+    }
+  },
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx"],
+      "parser": "@typescript-eslint/parser"
+    }
+  ]
 }
--- a/app/api/chat/route.ts
+++ b/app/api/chat/route.ts
@ -1,9 +1,10 @@
 import { auth } from '@/auth'
 import { kv } from '@vercel/kv'
-import { nanoid } from '@/lib/utils'
 import { OpenAIStream, StreamingTextResponse } from 'ai-connector'
 import { Configuration, OpenAIApi } from 'openai-edge'

+import { nanoid } from '@/lib/utils'
+
 // export const runtime = 'edge'

 const configuration = new Configuration({
--- a/app/chat/[id]/page.tsx
+++ b/app/chat/[id]/page.tsx
@ -1,8 +1,8 @@
 import { type Metadata } from 'next'
-
 import { auth } from '@/auth'
-import { getChat } from '@/app/actions'
+
 import { Chat } from '@/components/chat'
+import { getChat } from '@/app/actions'

 // export const runtime = 'edge'
 export const preferredRegion = 'home'
--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -3,9 +3,9 @@ import { Metadata } from 'next'
 import '@/app/globals.css'
 import { fontMono, fontSans } from '@/lib/fonts'
 import { cn } from '@/lib/utils'
+import { Header } from '@/components/header'
 import { TailwindIndicator } from '@/components/tailwind-indicator'
 import { ThemeProvider } from '@/components/theme-provider'
-import { Header } from '@/components/header'

 export const metadata: Metadata = {
  title: {
@ -40,7 +40,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
        )}
      >
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-          <div className="h-screen flex flex-col">
+          <div className="flex h-screen flex-col">
            {/* @ts-ignore */}
            <Header />
            <main className="flex-1">{children}</main>
--- a/auth.ts
+++ b/auth.ts
@ -1,6 +1,6 @@
+import { NextResponse } from 'next/server'
 import NextAuth from '@auth/nextjs'
 import GitHub from '@auth/nextjs/providers/github'
-import { NextResponse } from 'next/server'

 export const {
  handlers: { GET, POST },
--- a/components/chat-list.tsx
+++ b/components/chat-list.tsx
@ -2,9 +2,9 @@

 import { type Message } from 'ai-connector'

+import { Separator } from '@/components/ui/separator'
 import { ChatMessage } from '@/components/chat-message'
 import { EmptyScreen } from '@/components/empty-screen'
-import { Separator } from '@/components/ui/separator'

 export interface ChatList {
  messages: Message[]
@ -12,7 +12,7 @@ export interface ChatList {

 export function ChatList({ messages }: ChatList) {
  return (
-    <div className="relative max-w-2xl px-4 mx-auto">
+    <div className="relative mx-auto max-w-2xl px-4">
      {messages.length > 0 ? (
        messages.map((message, index) => (
          <div key={index}>
--- a/components/chat-message.tsx
+++ b/components/chat-message.tsx
@ -3,11 +3,11 @@ import { User } from 'lucide-react'
 import remarkGfm from 'remark-gfm'
 import remarkMath from 'remark-math'

-import { cn } from '@/lib/utils'
 import { fontMessage } from '@/lib/fonts'
+import { cn } from '@/lib/utils'
 import { CodeBlock } from '@/components/ui/codeblock'
-import { MemoizedReactMarkdown } from '@/components/markdown'
 import { OpenAI } from '@/components/icons'
+import { MemoizedReactMarkdown } from '@/components/markdown'

 export interface ChatMessageProps {
  message: Message
@ -17,32 +17,32 @@ export function ChatMessage({ message, ...props }: ChatMessageProps) {
  return (
    <div
      className={cn(
-        'flex items-start mb-4 relative md:-ml-12',
+        'relative mb-4 flex items-start md:-ml-12',
        fontMessage.className
      )}
      {...props}
    >
      <div
        className={cn(
-          'md:flex h-8 w-8 shrink-0 hidden items-center justify-center rounded-full select-none border',
+          'hidden h-8 w-8 shrink-0 select-none items-center justify-center rounded-full border md:flex',
          message.role === 'user'
            ? 'bg-background'
            : 'bg-primary text-primary-foreground'
        )}
      >
        {message.role === 'user' ? (
-          <User className="w-4 h-4" />
+          <User className="h-4 w-4" />
        ) : (
-          <OpenAI className="w-4 h-4" />
+          <OpenAI className="h-4 w-4" />
        )}
      </div>
      <div className="md:ml-4">
        <MemoizedReactMarkdown
-          className="prose dark:prose-invert prose-pre:rounded-md leading-6 prose-p:leading-[1.8rem] prose-pre:bg-[#282c34]"
+          className="prose leading-6 dark:prose-invert prose-p:leading-[1.8rem] prose-pre:rounded-md prose-pre:bg-[#282c34]"
          remarkPlugins={[remarkGfm, remarkMath]}
          components={{
            p({ children }) {
-              return <p className={cn('mb-2 last:mb-0')}>{children}</p>
+              return <p className="mb-2 last:mb-0">{children}</p>
            },
            code({ node, inline, className, children, ...props }) {
              if (children.length) {
--- a/components/chat-panel.tsx
+++ b/components/chat-panel.tsx
@ -3,9 +3,9 @@
 import { UseChatHelpers } from 'ai-connector'
 import { RefreshCcw, StopCircle } from 'lucide-react'

+import { Button } from '@/components/ui/button'
 import { ExternalLink } from '@/components/external-link'
 import { PromptForm } from '@/components/prompt-form'
-import { Button } from '@/components/ui/button'

 export interface ChatPanelProps
  extends Pick<
@ -23,8 +23,8 @@ export function ChatPanel({
  messages
 }: ChatPanelProps) {
  return (
-    <div className="fixed bottom-0 left-0 right-0 bg-gradient-to-b from-muted/10 from-10% to-muted/30 to-50%">
-      <div className="sm:max-w-2xl sm:px-4 mx-auto">
+    <div className="fixed inset-x-0 bottom-0 bg-gradient-to-b from-muted/10 from-10% to-muted/30 to-50%">
+      <div className="mx-auto sm:max-w-2xl sm:px-4">
        <div className="flex items-center justify-center py-2">
          {isLoading ? (
            <Button
@ -32,7 +32,7 @@ export function ChatPanel({
              onClick={() => stop()}
              className="bg-background"
            >
-              <StopCircle className="h-4 w-4 mr-2" />
+              <StopCircle className="mr-2 h-4 w-4" />
              Stop generating
            </Button>
          ) : (
@ -42,13 +42,13 @@ export function ChatPanel({
                onClick={() => reload()}
                className="bg-background"
              >
-                <RefreshCcw className="h-4 w-4 mr-2" />
+                <RefreshCcw className="mr-2 h-4 w-4" />
                Regenerate response
              </Button>
            )
          )}
        </div>
-        <div className="sm:p-4 border-t sm:border bg-background space-y-4 shadow-lg sm:rounded-t-xl">
+        <div className="space-y-4 border-t bg-background shadow-lg sm:rounded-t-xl sm:border sm:p-4">
          <PromptForm
            onSubmit={value => {
              append({
@ -58,7 +58,7 @@ export function ChatPanel({
            }}
            isLoading={isLoading}
          />
-          <p className="hidden sm:block text-muted-foreground text-xs leading-normal text-center px-2">
+          <p className="hidden px-2 text-center text-xs leading-normal text-muted-foreground sm:block">
            Open source AI chatbot app built with{' '}
            <ExternalLink href="https://nextjs.org">Next.js</ExternalLink> and{' '}
            <ExternalLink href="https://vercel.com/storage/kv">
--- a/components/chat.tsx
+++ b/components/chat.tsx
@ -1,6 +1,7 @@
 'use client'

 import { useChat, type Message } from 'ai-connector'
+
 import { ChatList } from '@/components/chat-list'
 import { ChatPanel } from '@/components/chat-panel'

@ -17,7 +18,7 @@ export function Chat({ id, initialMessages }: ChatProps) {
  })

  return (
-    <div className="h-full w-full overflow-auto pt-4 md:pt-10 bg-muted/50 pb-[200px]">
+    <div className="h-full w-full overflow-auto bg-muted/50 pb-[200px] pt-4 md:pt-10">
      <ChatList messages={messages} />
      <ChatPanel
        id={id}
--- a/components/empty-screen.tsx
+++ b/components/empty-screen.tsx
@ -1,10 +1,10 @@
 import { ArrowRight } from 'lucide-react'

-import { cn } from '@/lib/utils'
 import { fontMessage } from '@/lib/fonts'
 import { useChatStore } from '@/lib/hooks/use-chat-store'
-import { ExternalLink } from '@/components/external-link'
+import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
+import { ExternalLink } from '@/components/external-link'

 const exampleMessages = [
  {
@ -27,15 +27,15 @@ export function EmptyScreen({ className }: React.ComponentProps<'div'>) {
  return (
    <div
      className={cn(
-        'border bg-background p-8 rounded-lg',
+        'rounded-lg border bg-background p-8',
        fontMessage.className,
        className
      )}
    >
-      <h1 className="font-semibold text-lg mb-2">
+      <h1 className="mb-2 text-lg font-semibold">
        Welcome to Next.js Chatbot!
      </h1>
-      <p className="text-muted-foreground leading-normal mb-2">
+      <p className="mb-2 leading-normal text-muted-foreground">
        This is an open source AI chatbot app built with{' '}
        <ExternalLink href="https://nextjs.org">Next.js</ExternalLink> and{' '}
        <ExternalLink href="https://vercel.com/storage/kv">
@ -43,7 +43,7 @@ export function EmptyScreen({ className }: React.ComponentProps<'div'>) {
        </ExternalLink>
        .
      </p>
-      <p className="text-muted-foreground leading-normal">
+      <p className="leading-normal text-muted-foreground">
        You can start a conversation here or try the following examples:
      </p>
      <div className="mt-4 flex flex-col items-start space-y-2">
@ -51,10 +51,10 @@ export function EmptyScreen({ className }: React.ComponentProps<'div'>) {
          <Button
            key={index}
            variant="link"
-            className="p-0 h-auto text-base"
+            className="h-auto p-0 text-base"
            onClick={() => setDefaultMessage(message.message)}
          >
-            <ArrowRight className="w-4 h-4 mr-2 text-muted-foreground" />
+            <ArrowRight className="mr-2 h-4 w-4 text-muted-foreground" />
            {message.heading}
          </Button>
        ))}
--- a/components/external-link.tsx
+++ b/components/external-link.tsx
@ -9,7 +9,7 @@ export function ExternalLink({
    <a
      href={href}
      target="_blank"
-      className="inline-flex gap-1 hover:underline flex-1 justify-center leading-4"
+      className="inline-flex flex-1 justify-center gap-1 leading-4 hover:underline"
    >
      <span>{children}</span>
      <svg
--- a/components/header.tsx
+++ b/components/header.tsx
@ -1,33 +1,34 @@
-import { cn } from '@/lib/utils'
 import { auth } from '@/auth'
-import { getChats } from '@/app/actions'
+
+import { cn } from '@/lib/utils'
 import { buttonVariants } from '@/components/ui/button'
-import { UserMenu } from '@/components/user-menu'
 import { GitHub, Separator, Vercel } from '@/components/icons'
 import { Sidebar } from '@/components/sidebar'
+import { UserMenu } from '@/components/user-menu'
+import { getChats } from '@/app/actions'

 export async function Header() {
  const session = await auth()
  const chats = session?.user?.email ? await getChats(session.user.email) : []

  return (
-    <header className="h-16 shrink-0 z-50 border-b bg-gradient-to-b from-background/10 via-background/50 backdrop-blur-xl to-background/80 px-4 flex sticky top-0 w-full items-center justify-between">
+    <header className="sticky top-0 z-50 flex h-16 w-full shrink-0 items-center justify-between border-b bg-gradient-to-b from-background/10 via-background/50 to-background/80 px-4 backdrop-blur-xl">
      <div className="flex items-center">
        {/* @ts-ignore */}
        <Sidebar chats={chats} session={session} />
-        <div className="hidden md:flex items-center">
+        <div className="hidden items-center md:flex">
          <Separator className="h-6 w-6 text-muted-foreground/50" />
          <UserMenu session={session} />
        </div>
      </div>
-      <div className="flex space-x-2 items-center justify-end">
+      <div className="flex items-center justify-end space-x-2">
        <a
          target="_blank"
          href="https://github.com/vercel/nextjs-ai-chatbot/"
          rel="noopener noreferrer"
          className={cn(buttonVariants({ variant: 'outline' }))}
        >
-          <GitHub className="w-4 h-4 mr-2" />
+          <GitHub className="mr-2 h-4 w-4" />
          <span>GitHub</span>
        </a>
        <a
@ -35,7 +36,7 @@ export async function Header() {
          target="_blank"
          className={cn(buttonVariants())}
        >
-          <Vercel className="w-4 h-4 mr-2" />
+          <Vercel className="mr-2 h-4 w-4" />
          <span className="hidden sm:block">Deploy to Vercel</span>
          <span className="sm:hidden">Vercel</span>
        </a>
--- a/components/icons.tsx
+++ b/components/icons.tsx
@ -16,7 +16,7 @@ export function NextChat({
      viewBox="0 0 17 17"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
-      className={cn('w-4 h-4', className)}
+      className={cn('h-4 w-4', className)}
      {...props}
    >
      <defs>
@ -95,7 +95,7 @@ export function OpenAI({ className, ...props }: React.ComponentProps<'svg'>) {
      viewBox="0 0 24 24"
      role="img"
      xmlns="http://www.w3.org/2000/svg"
-      className={cn('w-4 h-4', className)}
+      className={cn('h-4 w-4', className)}
      {...props}
    >
      <title>OpenAI icon</title>
@ -110,7 +110,7 @@ export function Vercel({ className, ...props }: React.ComponentProps<'svg'>) {
      aria-label="Vercel logomark"
      role="img"
      viewBox="0 0 74 64"
-      className={cn('w-4 h-4', className)}
+      className={cn('h-4 w-4', className)}
      {...props}
    >
      <path
@ -128,7 +128,7 @@ export function GitHub({ className, ...props }: React.ComponentProps<'svg'>) {
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
      fill="currentColor"
-      className={cn('w-4 h-4', className)}
+      className={cn('h-4 w-4', className)}
      {...props}
    >
      <title>GitHub</title>
@ -151,7 +151,7 @@ export function Separator({
      strokeWidth="1"
      viewBox="0 0 24 24"
      aria-hidden="true"
-      className={cn('w-4 h-4', className)}
+      className={cn('h-4 w-4', className)}
      {...props}
    >
      <path d="M16.88 3.549L7.12 20.451"></path>
--- a/components/prompt-form.tsx
+++ b/components/prompt-form.tsx
@ -1,20 +1,20 @@
 'use client'

 import * as React from 'react'
+import Link from 'next/link'
 import { CornerDownLeft, Plus } from 'lucide-react'
 import Textarea from 'react-textarea-autosize'

-import { Button, buttonVariants } from '@/components/ui/button'
+import { useChatStore } from '@/lib/hooks/use-chat-store'
 import { useEnterSubmit } from '@/lib/hooks/use-enter-submit'
 import { cn } from '@/lib/utils'
-import { useChatStore } from '@/lib/hooks/use-chat-store'
+import { Button, buttonVariants } from '@/components/ui/button'
 import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger
 } from '@/components/ui/tooltip'
-import Link from 'next/link'

 export interface PromptProps {
  onSubmit: (value: string) => void
@ -50,14 +50,14 @@ export function PromptForm({ onSubmit, isLoading }: PromptProps) {
      ref={formRef}
    >
      <TooltipProvider>
-        <div className="relative flex w-full grow flex-col sm:rounded-md sm:border bg-background overflow-hidden px-12">
+        <div className="relative flex w-full grow flex-col overflow-hidden bg-background px-12 sm:rounded-md sm:border">
          <Tooltip>
            <TooltipTrigger asChild>
              <Link
                href="/"
                className={cn(
                  buttonVariants({ size: 'sm', variant: 'outline' }),
-                  'w-8 h-8 p-0 rounded-full absolute top-4 left-4 bg-background'
+                  'absolute left-4 top-4 h-8 w-8 rounded-full bg-background p-0'
                )}
              >
                <Plus className="h-4 w-4" />
@ -75,9 +75,9 @@ export function PromptForm({ onSubmit, isLoading }: PromptProps) {
            onChange={e => setInput(e.target.value)}
            placeholder="Send a message."
            spellCheck={false}
-            className="min-h-[60px] sm:text-sm bg-transparent px-4 py-[1.4rem] focus-within:outline-none w-full resize-none"
+            className="min-h-[60px] w-full resize-none bg-transparent px-4 py-[1.4rem] focus-within:outline-none sm:text-sm"
          />
-          <div className="absolute top-4 right-4">
+          <div className="absolute right-4 top-4">
            <Tooltip>
              <TooltipTrigger asChild>
                <Button
--- a/components/sidebar-item.tsx
+++ b/components/sidebar-item.tsx
@ -2,12 +2,11 @@

 import * as React from 'react'
 import { useTransition } from 'react'
-import { Loader2Icon, MessageSquare, Trash2Icon } from 'lucide-react'
 import Link from 'next/link'
 import { usePathname, useRouter } from 'next/navigation'
+import { Loader2Icon, MessageSquare, Trash2Icon } from 'lucide-react'

 import { cn } from '@/lib/utils'
-import { removeChat } from '@/app/actions'
 import {
  AlertDialog,
  AlertDialogAction,
@ -19,6 +18,7 @@ import {
  AlertDialogTitle
 } from '@/components/ui/alert-dialog'
 import { Button, buttonVariants } from '@/components/ui/button'
+import { removeChat } from '@/app/actions'

 export function SidebarItem({
  title,
@ -49,9 +49,9 @@ export function SidebarItem({
          isActive && 'bg-accent'
        )}
      >
-        <MessageSquare className="h-4 w-4 mr-2" />
+        <MessageSquare className="mr-2 h-4 w-4" />
        <div
-          className="relative max-h-5 flex-1 overflow-hidden text-ellipsis break-all select-none"
+          className="relative max-h-5 flex-1 select-none overflow-hidden text-ellipsis break-all"
          title={title}
        >
          <span className="whitespace-nowrap">{title}</span>
@ -60,7 +60,7 @@ export function SidebarItem({
          <Button
            variant="ghost"
            size="icon"
-            className="w-7 h-7"
+            className="h-7 w-7"
            disabled={isPending}
            onClick={() => setIsOpen(true)}
          >
@ -92,7 +92,7 @@ export function SidebarItem({
              }}
            >
              {isPending && (
-                <Loader2Icon className="animate-spin h-4 w-4 mr-2" />
+                <Loader2Icon className="mr-2 h-4 w-4 animate-spin" />
              )}
              Delete
            </AlertDialogAction>
--- a/components/sidebar.tsx
+++ b/components/sidebar.tsx
@ -1,9 +1,9 @@
 'use client'

 import * as React from 'react'
-import { Sidebar as SidebarIcon } from 'lucide-react'
-import { type Session } from '@auth/nextjs/types'
 import { signOut } from '@auth/nextjs/client'
+import { type Session } from '@auth/nextjs/types'
+import { Sidebar as SidebarIcon } from 'lucide-react'

 import { type Chat } from '@/lib/types'
 import { Button } from '@/components/ui/button'
@ -26,16 +26,16 @@ export async function Sidebar({ session, chats }: SidebarProps) {
  return (
    <Sheet>
      <SheetTrigger asChild>
-        <Button variant="ghost" className="w-9 h-9 p-0 -ml-2">
-          <SidebarIcon className="w-6 h-6" />
+        <Button variant="ghost" className="-ml-2 h-9 w-9 p-0">
+          <SidebarIcon className="h-6 w-6" />
          <span className="sr-only">Toggle Sidebar</span>
        </Button>
      </SheetTrigger>
      <SheetContent
        position="left"
-        className="w-[300px] gap-0 top-0 bottom-0 lg:top-2 p-0 rounded-r-lg lg:bottom-2 h-auto flex flex-col"
+        className="inset-y-0 flex h-auto w-[300px] flex-col gap-0 rounded-r-lg p-0 lg:inset-y-2"
      >
-        <SheetHeader className="px-4 py-4">
+        <SheetHeader className="p-4">
          <SheetTitle className="text-sm">Chat History</SheetTitle>
        </SheetHeader>
        <div className="flex-1 overflow-auto">
@ -52,7 +52,7 @@ export async function Sidebar({ session, chats }: SidebarProps) {
              ))}
            </div>
          ) : (
-            <div className="text-center p-8">
+            <div className="p-8 text-center">
              <p className="text-sm text-muted-foreground">
                {session?.user ? <>No chat history</> : <>Login for history</>}
              </p>
--- a/components/theme-toggle.tsx
+++ b/components/theme-toggle.tsx
@ -1,8 +1,8 @@
 'use client'

 import * as React from 'react'
-import { useTheme } from 'next-themes'
 import { Moon, Sun } from 'lucide-react'
+import { useTheme } from 'next-themes'

 import { Button } from '@/components/ui/button'

--- a/components/ui/alert-dialog.tsx
+++ b/components/ui/alert-dialog.tsx
@ -1,10 +1,10 @@
-"use client"
+'use client'

-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import * as React from 'react'
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'

-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/ui/button"
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'

 const AlertDialog = AlertDialogPrimitive.Root

@ -29,7 +29,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
  <AlertDialogPrimitive.Overlay
    className={cn(
-      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm transition-opacity animate-in fade-in",
+      'fixed inset-0 z-50 bg-background/80 backdrop-blur-sm transition-opacity animate-in fade-in',
      className
    )}
    {...props}
@ -47,7 +47,7 @@ const AlertDialogContent = React.forwardRef<
    <AlertDialogPrimitive.Content
      ref={ref}
      className={cn(
-        "fixed z-50 grid w-full max-w-lg scale-100 gap-4 border bg-background p-6 opacity-100 shadow-lg animate-in fade-in-90 slide-in-from-bottom-10 sm:rounded-lg sm:zoom-in-90 sm:slide-in-from-bottom-0 md:w-full",
+        'fixed z-50 grid w-full max-w-lg scale-100 gap-4 border bg-background p-6 opacity-100 shadow-lg animate-in fade-in-90 slide-in-from-bottom-10 sm:rounded-lg sm:zoom-in-90 sm:slide-in-from-bottom-0 md:w-full',
        className
      )}
      {...props}
@ -62,13 +62,13 @@ const AlertDialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
+      'flex flex-col space-y-2 text-center sm:text-left',
      className
    )}
    {...props}
  />
 )
-AlertDialogHeader.displayName = "AlertDialogHeader"
+AlertDialogHeader.displayName = 'AlertDialogHeader'

 const AlertDialogFooter = ({
  className,
@ -76,13 +76,13 @@ const AlertDialogFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
      className
    )}
    {...props}
  />
 )
-AlertDialogFooter.displayName = "AlertDialogFooter"
+AlertDialogFooter.displayName = 'AlertDialogFooter'

 const AlertDialogTitle = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Title>,
@ -90,7 +90,7 @@ const AlertDialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Title
    ref={ref}
-    className={cn("text-lg font-semibold", className)}
+    className={cn('text-lg font-semibold', className)}
    {...props}
  />
 ))
@ -102,7 +102,7 @@ const AlertDialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Description
    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn('text-sm text-muted-foreground', className)}
    {...props}
  />
 ))
@ -128,8 +128,8 @@ const AlertDialogCancel = React.forwardRef<
  <AlertDialogPrimitive.Cancel
    ref={ref}
    className={cn(
-      buttonVariants({ variant: "outline" }),
-      "mt-2 sm:mt-0",
+      buttonVariants({ variant: 'outline' }),
+      'mt-2 sm:mt-0',
      className
    )}
    {...props}
@ -146,5 +146,5 @@ export {
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
-  AlertDialogCancel,
+  AlertDialogCancel
 }
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@ -5,25 +5,25 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'

 const buttonVariants = cva(
-  'inline-flex items-center justify-center shadow rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background',
+  'inline-flex items-center justify-center rounded-md text-sm font-medium shadow ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
  {
    variants: {
      variant: {
        default:
-          'bg-primary shadow-md text-primary-foreground hover:bg-primary/90',
+          'bg-primary text-primary-foreground shadow-md hover:bg-primary/90',
        destructive:
          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
        outline:
          'border border-input hover:bg-accent hover:text-accent-foreground',
        secondary:
          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent shadow-none hover:text-accent-foreground',
-        link: 'underline-offset-4 shadow-none hover:underline text-primary'
+        ghost: 'shadow-none hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 shadow-none hover:underline'
      },
      size: {
-        default: 'h-8 py-2 px-4',
-        sm: 'h-8 px-3 rounded-md',
-        lg: 'h-11 px-8 rounded-md',
+        default: 'h-8 px-4 py-2',
+        sm: 'h-8 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
        icon: 'h-8 w-8 p-0'
      }
    },
--- a/components/ui/codeblock.tsx
+++ b/components/ui/codeblock.tsx
@ -1,10 +1,12 @@
 'use client'
-import { useCopyToClipboard } from '@/lib/hooks/use-copy-to-cliipboard'
-import { Check, Clipboard, Download } from 'lucide-react'
+
 import { FC, memo } from 'react'
+import { Check, Clipboard, Download } from 'lucide-react'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { coldarkDark } from 'react-syntax-highlighter/dist/cjs/styles/prism'

+import { useCopyToClipboard } from '@/lib/hooks/use-copy-to-cliipboard'
+
 interface Props {
  language: string
  value: string
--- a/components/ui/input.tsx
+++ b/components/ui/input.tsx
@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
      <input
        type={type}
        className={cn(
-          'flex h-9 w-full shadow-sm rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
          className
        )}
        ref={ref}
--- a/components/ui/separator.tsx
+++ b/components/ui/separator.tsx
@ -1,16 +1,16 @@
-"use client"
+'use client'

-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import * as React from 'react'
+import * as SeparatorPrimitive from '@radix-ui/react-separator'

-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'

 const Separator = React.forwardRef<
  React.ElementRef<typeof SeparatorPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
 >(
  (
-    { className, orientation = "horizontal", decorative = true, ...props },
+    { className, orientation = 'horizontal', decorative = true, ...props },
    ref
  ) => (
    <SeparatorPrimitive.Root
@ -18,8 +18,8 @@ const Separator = React.forwardRef<
      decorative={decorative}
      orientation={orientation}
      className={cn(
-        "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        'shrink-0 bg-border',
+        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
        className
      )}
      {...props}
--- a/components/ui/sheet.tsx
+++ b/components/ui/sheet.tsx
@ -43,12 +43,12 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName

 const sheetVariants = cva(
-  'fixed z-50 scale-100 gap-4 bg-background p-6 opacity-100 shadow-lg border h-full',
+  'fixed z-50 h-full scale-100 gap-4 border bg-background p-6 opacity-100 shadow-lg',
  {
    variants: {
      position: {
-        left: 'data-[state=open]:animate-slide-from-left data-[state=closed]:animate-slide-to-left',
-        right: 'animate-in slide-in-from-right h-full duration-300'
+        left: 'data-[state=closed]:animate-slide-to-left data-[state=open]:animate-slide-from-left',
+        right: 'h-full animate-in slide-in-from-right duration-300'
      }
    },
    defaultVariants: {
--- a/components/ui/textarea.tsx
+++ b/components/ui/textarea.tsx
@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from 'react'

-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'

 export interface TextareaProps
  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
@ -10,7 +10,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
    return (
      <textarea
        className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          'flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
          className
        )}
        ref={ref}
@ -19,6 +19,6 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
    )
  }
 )
-Textarea.displayName = "Textarea"
+Textarea.displayName = 'Textarea'

 export { Textarea }
--- a/components/ui/tooltip.tsx
+++ b/components/ui/tooltip.tsx
@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef<
    ref={ref}
    sideOffset={sideOffset}
    className={cn(
-      'z-50 overflow-hidden rounded-md border bg-popover font-medium px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1',
+      'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm font-medium text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1',
      className
    )}
    {...props}
--- a/components/user-menu.tsx
+++ b/components/user-menu.tsx
@ -1,7 +1,6 @@
 'use client'

 import * as React from 'react'
-
 import { signIn } from '@auth/nextjs/client'
 import { type Session } from '@auth/nextjs/types'
 import { Loader2Icon } from 'lucide-react'
@ -26,13 +25,13 @@ export function UserMenu({ session }: UserMenuProps) {
        }}
        disabled={isLoading}
      >
-        {isLoading && <Loader2Icon className="animate-spin w-4 h-4 mr-2" />}
+        {isLoading && <Loader2Icon className="mr-2 h-4 w-4 animate-spin" />}
        Login
      </Button>
    )
  }

  return (
-    <p className="text-sm font-medium px-2">Logged in as {session.user.name}</p>
+    <p className="px-2 text-sm font-medium">Logged in as {session.user.name}</p>
  )
 }
--- a/lib/analytics.ts
+++ b/lib/analytics.ts
@ -1,5 +1,5 @@
-import type { NextRequest, NextFetchEvent } from 'next/server'
 import type { NextApiRequest } from 'next'
+import type { NextFetchEvent, NextRequest } from 'next/server'

 export const initAnalytics = ({
  request,
--- a/lib/fonts.ts
+++ b/lib/fonts.ts
@ -1,6 +1,6 @@
 import {
-  JetBrains_Mono as FontMono,
  Lora as FontMessage,
+  JetBrains_Mono as FontMono,
  Inter as FontSans
 } from 'next/font/google'

--- a/lib/hooks/use-copy-to-cliipboard.tsx
+++ b/lib/hooks/use-copy-to-cliipboard.tsx
@ -1,4 +1,5 @@
 'use client'
+
 import { useState } from 'react'

 export interface useCopyToClipboardProps {
--- a/lib/hooks/use-enter-submit.tsx
+++ b/lib/hooks/use-enter-submit.tsx
@ -1,5 +1,4 @@
-import type { RefObject } from 'react'
-import { useRef } from 'react'
+import { useRef, type RefObject } from 'react'

 export function useEnterSubmit(): {
  formRef: RefObject<HTMLFormElement>
--- a/lib/hooks/use-window-size.ts
+++ b/lib/hooks/use-window-size.ts
@ -1,4 +1,5 @@
 'use client'
+
 import { useEffect, useState } from 'react'

 export default function useWindowSize() {
--- a/middleware.ts
+++ b/middleware.ts
@ -1 +1 @@
-export { auth as middleware } from "./auth";
+export { auth as middleware } from './auth'
--- a/package.json
+++ b/package.json
@ -45,17 +45,20 @@
    "zustand": "^4.3.8"
  },
  "devDependencies": {
+    "@ianvs/prettier-plugin-sort-imports": "^3.7.2",
    "@tailwindcss/typography": "^0.5.9",
    "@types/node": "^17.0.12",
    "@types/react": "^18.0.22",
    "@types/react-dom": "^18.0.7",
    "@types/react-syntax-highlighter": "^15.5.6",
+    "@typescript-eslint/parser": "^5.59.7",
    "autoprefixer": "^10.4.13",
    "dotenv": "^16.0.3",
    "drizzle-kit": "^0.18.0",
    "eslint": "^8.31.0",
    "eslint-config-next": "13.4.5-canary.3",
    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-tailwindcss": "^3.12.0",
    "postcss": "^8.4.21",
    "prettier": "^2.7.1",
    "tailwind-merge": "^1.12.0",
@ -67,13 +70,5 @@
    "overrides": {
      "@auth/core": "0.0.0-manual.527fff6c"
    }
-  },
-  "prettier": {
-    "tabWidth": 2,
-    "semi": false,
-    "useTabs": false,
-    "singleQuote": true,
-    "arrowParens": "avoid",
-    "trailingComma": "none"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -61,7 +61,7 @@ dependencies:
    version: 4.0.2
  next:
    specifier: 13.4.5-canary.3
-    version: 13.4.5-canary.3(react-dom@18.2.0)(react@18.2.0)
+    version: 13.4.5-canary.3(@babel/core@7.22.5)(react-dom@18.2.0)(react@18.2.0)
  next-themes:
    specifier: ^0.2.1
    version: 0.2.1(next@13.4.5-canary.3)(react-dom@18.2.0)(react@18.2.0)
@ -97,6 +97,9 @@ dependencies:
    version: 4.3.8(react@18.2.0)

 devDependencies:
+  '@ianvs/prettier-plugin-sort-imports':
+    specifier: ^3.7.2
+    version: 3.7.2(prettier@2.8.8)
  '@tailwindcss/typography':
    specifier: ^0.5.9
    version: 0.5.9(tailwindcss@3.3.2)
@ -112,6 +115,9 @@ devDependencies:
  '@types/react-syntax-highlighter':
    specifier: ^15.5.6
    version: 15.5.6
+  '@typescript-eslint/parser':
+    specifier: ^5.59.7
+    version: 5.59.7(eslint@8.40.0)(typescript@5.1.3)
  autoprefixer:
    specifier: ^10.4.13
    version: 10.4.14(postcss@8.4.23)
@ -130,6 +136,9 @@ devDependencies:
  eslint-config-prettier:
    specifier: ^8.3.0
    version: 8.8.0(eslint@8.40.0)
+  eslint-plugin-tailwindcss:
+    specifier: ^3.12.0
+    version: 3.12.0(tailwindcss@3.3.2)
  postcss:
    specifier: ^8.4.21
    version: 8.4.23
@ -156,6 +165,13 @@ packages:
    engines: {node: '>=10'}
    dev: true

+  /@ampproject/remapping@2.2.1:
+    resolution: {integrity: sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.3
+      '@jridgewell/trace-mapping': 0.3.18
+
  /@auth/core@0.0.0-manual.527fff6c:
    resolution: {integrity: sha512-NYWuH+6VAAMV05juyarbMm6rCDUGvS5vPFsE+V13NIfbvbwbEZPj3JfcHVv7vMDrUrPtJ4EhTh00Svejp1Moqg==}
    peerDependencies:
@ -179,18 +195,192 @@ packages:
      react: ^18.2.0
    dependencies:
      '@auth/core': 0.0.0-manual.527fff6c
-      next: 13.4.5-canary.3(react-dom@18.2.0)(react@18.2.0)
+      next: 13.4.5-canary.3(@babel/core@7.22.5)(react-dom@18.2.0)(react@18.2.0)
      react: 18.2.0
    transitivePeerDependencies:
      - nodemailer
    dev: false

+  /@babel/code-frame@7.22.5:
+    resolution: {integrity: sha512-Xmwn266vad+6DAqEB2A6V/CcZVp62BbwVmcOJc2RPuwih1kw02TjQvWVWlcKGbBPd+8/0V5DEkOcizRGYsspYQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/highlight': 7.22.5
+
+  /@babel/compat-data@7.22.5:
+    resolution: {integrity: sha512-4Jc/YuIaYqKnDDz892kPIledykKg12Aw1PYX5i/TY28anJtacvM1Rrr8wbieB9GfEJwlzqT0hUEao0CxEebiDA==}
+    engines: {node: '>=6.9.0'}
+
+  /@babel/core@7.22.5:
+    resolution: {integrity: sha512-SBuTAjg91A3eKOvD+bPEz3LlhHZRNu1nFOVts9lzDJTXshHTjII0BAtDS3Y2DAkdZdDKWVZGVwkDfc4Clxn1dg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@ampproject/remapping': 2.2.1
+      '@babel/code-frame': 7.22.5
+      '@babel/generator': 7.22.5
+      '@babel/helper-compilation-targets': 7.22.5(@babel/core@7.22.5)
+      '@babel/helper-module-transforms': 7.22.5
+      '@babel/helpers': 7.22.5
+      '@babel/parser': 7.22.5
+      '@babel/template': 7.22.5
+      '@babel/traverse': 7.22.5
+      '@babel/types': 7.22.5
+      convert-source-map: 1.9.0
+      debug: 4.3.4
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.0
+    transitivePeerDependencies:
+      - supports-color
+
+  /@babel/generator@7.22.5:
+    resolution: {integrity: sha512-+lcUbnTRhd0jOewtFSedLyiPsD5tswKkbgcezOqqWFUVNEwoUTlpPOBmvhG7OXWLR4jMdv0czPGH5XbflnD1EA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.22.5
+      '@jridgewell/gen-mapping': 0.3.3
+      '@jridgewell/trace-mapping': 0.3.18
+      jsesc: 2.5.2
+
+  /@babel/helper-compilation-targets@7.22.5(@babel/core@7.22.5):
+    resolution: {integrity: sha512-Ji+ywpHeuqxB8WDxraCiqR0xfhYjiDE/e6k7FuIaANnoOFxAHskHChz4vA1mJC9Lbm01s1PVAGhQY4FUKSkGZw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/compat-data': 7.22.5
+      '@babel/core': 7.22.5
+      '@babel/helper-validator-option': 7.22.5
+      browserslist: 4.21.5
+      lru-cache: 5.1.1
+      semver: 6.3.0
+
+  /@babel/helper-environment-visitor@7.22.5:
+    resolution: {integrity: sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==}
+    engines: {node: '>=6.9.0'}
+
+  /@babel/helper-function-name@7.22.5:
+    resolution: {integrity: sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/template': 7.22.5
+      '@babel/types': 7.22.5
+
+  /@babel/helper-hoist-variables@7.22.5:
+    resolution: {integrity: sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.22.5
+
+  /@babel/helper-module-imports@7.22.5:
+    resolution: {integrity: sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.22.5
+
+  /@babel/helper-module-transforms@7.22.5:
+    resolution: {integrity: sha512-+hGKDt/Ze8GFExiVHno/2dvG5IdstpzCq0y4Qc9OJ25D4q3pKfiIP/4Vp3/JvhDkLKsDK2api3q3fpIgiIF5bw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-environment-visitor': 7.22.5
+      '@babel/helper-module-imports': 7.22.5
+      '@babel/helper-simple-access': 7.22.5
+      '@babel/helper-split-export-declaration': 7.22.5
+      '@babel/helper-validator-identifier': 7.22.5
+      '@babel/template': 7.22.5
+      '@babel/traverse': 7.22.5
+      '@babel/types': 7.22.5
+    transitivePeerDependencies:
+      - supports-color
+
+  /@babel/helper-simple-access@7.22.5:
+    resolution: {integrity: sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.22.5
+
+  /@babel/helper-split-export-declaration@7.22.5:
+    resolution: {integrity: sha512-thqK5QFghPKWLhAV321lxF95yCg2K3Ob5yw+M3VHWfdia0IkPXUtoLH8x/6Fh486QUvzhb8YOWHChTVen2/PoQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.22.5
+
+  /@babel/helper-string-parser@7.22.5:
+    resolution: {integrity: sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==}
+    engines: {node: '>=6.9.0'}
+
+  /@babel/helper-validator-identifier@7.22.5:
+    resolution: {integrity: sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==}
+    engines: {node: '>=6.9.0'}
+
+  /@babel/helper-validator-option@7.22.5:
+    resolution: {integrity: sha512-R3oB6xlIVKUnxNUxbmgq7pKjxpru24zlimpE8WK47fACIlM0II/Hm1RS8IaOI7NgCr6LNS+jl5l75m20npAziw==}
+    engines: {node: '>=6.9.0'}
+
+  /@babel/helpers@7.22.5:
+    resolution: {integrity: sha512-pSXRmfE1vzcUIDFQcSGA5Mr+GxBV9oiRKDuDxXvWQQBCh8HoIjs/2DlDB7H8smac1IVrB9/xdXj2N3Wol9Cr+Q==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/template': 7.22.5
+      '@babel/traverse': 7.22.5
+      '@babel/types': 7.22.5
+    transitivePeerDependencies:
+      - supports-color
+
+  /@babel/highlight@7.22.5:
+    resolution: {integrity: sha512-BSKlD1hgnedS5XRnGOljZawtag7H1yPfQp0tdNJCHoH6AZ+Pcm9VvkrK59/Yy593Ypg0zMxH2BxD1VPYUQ7UIw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-validator-identifier': 7.22.5
+      chalk: 2.4.2
+      js-tokens: 4.0.0
+
+  /@babel/parser@7.22.5:
+    resolution: {integrity: sha512-DFZMC9LJUG9PLOclRC32G63UXwzqS2koQC8dkx+PLdmt1xSePYpbT/NbsrJy8Q/muXz7o/h/d4A7Fuyixm559Q==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dependencies:
+      '@babel/types': 7.22.5
+
  /@babel/runtime@7.21.5:
    resolution: {integrity: sha512-8jI69toZqqcsnqGGqwGS4Qb1VwLOEp4hz+CXPywcvjs60u3B4Pom/U/7rm4W8tMOYEB+E9wgD0mW1l3r8qlI9Q==}
    engines: {node: '>=6.9.0'}
    dependencies:
      regenerator-runtime: 0.13.11

+  /@babel/template@7.22.5:
+    resolution: {integrity: sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.22.5
+      '@babel/parser': 7.22.5
+      '@babel/types': 7.22.5
+
+  /@babel/traverse@7.22.5:
+    resolution: {integrity: sha512-7DuIjPgERaNo6r+PZwItpjCZEa5vyw4eJGufeLxrPdBXBoLcCJCIasvK6pK/9DVNrLZTLFhUGqaC6X/PA007TQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.22.5
+      '@babel/generator': 7.22.5
+      '@babel/helper-environment-visitor': 7.22.5
+      '@babel/helper-function-name': 7.22.5
+      '@babel/helper-hoist-variables': 7.22.5
+      '@babel/helper-split-export-declaration': 7.22.5
+      '@babel/parser': 7.22.5
+      '@babel/types': 7.22.5
+      debug: 4.3.4
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+
+  /@babel/types@7.22.5:
+    resolution: {integrity: sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-string-parser': 7.22.5
+      '@babel/helper-validator-identifier': 7.22.5
+      to-fast-properties: 2.0.0
+
  /@esbuild/android-arm@0.15.18:
    resolution: {integrity: sha512-5GT+kcs2WVGjVs7+boataCkO5Fg0y4kCjzkB5bAip7H4jfnOS3dA6KPiww9W1OEKTKeAcUVhdZGvgI65OXmUnw==}
    engines: {node: '>=12'}
@ -311,6 +501,28 @@ packages:
    resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
    dev: true

+  /@ianvs/prettier-plugin-sort-imports@3.7.2(prettier@2.8.8):
+    resolution: {integrity: sha512-bVckKToJM8XV2wTOG1VpeXrSmfAG49esVrikbxeFbY51RJdNke9AdMANJtGuACB59uo+pGlz0wBdWFrRzWyO1A==}
+    peerDependencies:
+      '@vue/compiler-sfc': '>=3.0.0'
+      prettier: 2.x
+    peerDependenciesMeta:
+      '@vue/compiler-sfc':
+        optional: true
+    dependencies:
+      '@babel/core': 7.22.5
+      '@babel/generator': 7.22.5
+      '@babel/parser': 7.22.5
+      '@babel/traverse': 7.22.5
+      '@babel/types': 7.22.5
+      javascript-natural-sort: 0.7.1
+      lodash.clone: 4.5.0
+      lodash.isequal: 4.5.0
+      prettier: 2.8.8
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
  /@jridgewell/gen-mapping@0.3.3:
    resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==}
    engines: {node: '>=6.0.0'}
@ -318,32 +530,26 @@ packages:
      '@jridgewell/set-array': 1.1.2
      '@jridgewell/sourcemap-codec': 1.4.15
      '@jridgewell/trace-mapping': 0.3.18
-    dev: true

  /@jridgewell/resolve-uri@3.1.0:
    resolution: {integrity: sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==}
    engines: {node: '>=6.0.0'}
-    dev: true

  /@jridgewell/set-array@1.1.2:
    resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
    engines: {node: '>=6.0.0'}
-    dev: true

  /@jridgewell/sourcemap-codec@1.4.14:
    resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==}
-    dev: true

  /@jridgewell/sourcemap-codec@1.4.15:
    resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
-    dev: true

  /@jridgewell/trace-mapping@0.3.18:
    resolution: {integrity: sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==}
    dependencies:
      '@jridgewell/resolve-uri': 3.1.0
      '@jridgewell/sourcemap-codec': 1.4.14
-    dev: true

  /@next/env@13.4.5-canary.3:
    resolution: {integrity: sha512-2TrPvCIs8R9DpFpEDmGUOpWkVqbpb4+sGQMcZVP4zDYYg893p0nAbNbBxL996oBl+/vLTzcLIDceP5peHsGPzg==}
@ -1340,8 +1546,8 @@ packages:
    resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==}
    dev: false

-  /@typescript-eslint/parser@5.59.5(eslint@8.40.0)(typescript@5.1.3):
-    resolution: {integrity: sha512-NJXQC4MRnF9N9yWqQE2/KLRSOLvrrlZb48NGVfBa+RuPMN6B7ZcK5jZOvhuygv4D64fRKnZI4L4p8+M+rfeQuw==}
+  /@typescript-eslint/parser@5.59.7(eslint@8.40.0)(typescript@5.1.3):
+    resolution: {integrity: sha512-VhpsIEuq/8i5SF+mPg9jSdIwgMBBp0z9XqjiEay+81PYLJuroN+ET1hM5IhkiYMJd9MkTz8iJLt7aaGAgzWUbQ==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
@ -1350,9 +1556,9 @@ packages:
      typescript:
        optional: true
    dependencies:
-      '@typescript-eslint/scope-manager': 5.59.5
-      '@typescript-eslint/types': 5.59.5
-      '@typescript-eslint/typescript-estree': 5.59.5(typescript@5.1.3)
+      '@typescript-eslint/scope-manager': 5.59.7
+      '@typescript-eslint/types': 5.59.7
+      '@typescript-eslint/typescript-estree': 5.59.7(typescript@5.1.3)
      debug: 4.3.4
      eslint: 8.40.0
      typescript: 5.1.3
@ -1360,21 +1566,21 @@ packages:
      - supports-color
    dev: true

-  /@typescript-eslint/scope-manager@5.59.5:
-    resolution: {integrity: sha512-jVecWwnkX6ZgutF+DovbBJirZcAxgxC0EOHYt/niMROf8p4PwxxG32Qdhj/iIQQIuOflLjNkxoXyArkcIP7C3A==}
+  /@typescript-eslint/scope-manager@5.59.7:
+    resolution: {integrity: sha512-FL6hkYWK9zBGdxT2wWEd2W8ocXMu3K94i3gvMrjXpx+koFYdYV7KprKfirpgY34vTGzEPPuKoERpP8kD5h7vZQ==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    dependencies:
-      '@typescript-eslint/types': 5.59.5
-      '@typescript-eslint/visitor-keys': 5.59.5
+      '@typescript-eslint/types': 5.59.7
+      '@typescript-eslint/visitor-keys': 5.59.7
    dev: true

-  /@typescript-eslint/types@5.59.5:
-    resolution: {integrity: sha512-xkfRPHbqSH4Ggx4eHRIO/eGL8XL4Ysb4woL8c87YuAo8Md7AUjyWKa9YMwTL519SyDPrfEgKdewjkxNCVeJW7w==}
+  /@typescript-eslint/types@5.59.7:
+    resolution: {integrity: sha512-UnVS2MRRg6p7xOSATscWkKjlf/NDKuqo5TdbWck6rIRZbmKpVNTLALzNvcjIfHBE7736kZOFc/4Z3VcZwuOM/A==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    dev: true

-  /@typescript-eslint/typescript-estree@5.59.5(typescript@5.1.3):
-    resolution: {integrity: sha512-+XXdLN2CZLZcD/mO7mQtJMvCkzRfmODbeSKuMY/yXbGkzvA9rJyDY5qDYNoiz2kP/dmyAxXquL2BvLQLJFPQIg==}
+  /@typescript-eslint/typescript-estree@5.59.7(typescript@5.1.3):
+    resolution: {integrity: sha512-4A1NtZ1I3wMN2UGDkU9HMBL+TIQfbrh4uS0WDMMpf3xMRursDbqEf1ahh6vAAe3mObt8k3ZATnezwG4pdtWuUQ==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
      typescript: '*'
@ -1382,8 +1588,8 @@ packages:
      typescript:
        optional: true
    dependencies:
-      '@typescript-eslint/types': 5.59.5
-      '@typescript-eslint/visitor-keys': 5.59.5
+      '@typescript-eslint/types': 5.59.7
+      '@typescript-eslint/visitor-keys': 5.59.7
      debug: 4.3.4
      globby: 11.1.0
      is-glob: 4.0.3
@ -1394,11 +1600,11 @@ packages:
      - supports-color
    dev: true

-  /@typescript-eslint/visitor-keys@5.59.5:
-    resolution: {integrity: sha512-qL+Oz+dbeBRTeyJTIy0eniD3uvqU7x+y1QceBismZ41hd4aBSRh8UAw4pZP0+XzLuPZmx4raNMq/I+59W2lXKA==}
+  /@typescript-eslint/visitor-keys@5.59.7:
+    resolution: {integrity: sha512-tyN+X2jvMslUszIiYbF0ZleP+RqQsFVpGrKI6e0Eet1w8WmhsAtmzaqm8oM8WJQ1ysLwhnsK/4hYHJjOgJVfQQ==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    dependencies:
-      '@typescript-eslint/types': 5.59.5
+      '@typescript-eslint/types': 5.59.7
      eslint-visitor-keys: 3.4.1
    dev: true

@ -1463,6 +1669,12 @@ packages:
    engines: {node: '>=8'}
    dev: true

+  /ansi-styles@3.2.1:
+    resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
+    engines: {node: '>=4'}
+    dependencies:
+      color-convert: 1.9.3
+
  /ansi-styles@4.3.0:
    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
    engines: {node: '>=8'}
@ -1650,7 +1862,6 @@ packages:
      electron-to-chromium: 1.4.389
      node-releases: 2.0.10
      update-browserslist-db: 1.0.11(browserslist@4.21.5)
-    dev: true

  /bundle-name@3.0.0:
    resolution: {integrity: sha512-PKA4BeSvBpQKQ8iPOGCSiell+N8P+Tf1DlwqmYhpe2gAhKPHn8EYOxVT+ShuGmhg8lN8XiSlS80yiExKXrURlw==}
@ -1695,6 +1906,14 @@ packages:
    resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
    dev: false

+  /chalk@2.4.2:
+    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
+    engines: {node: '>=4'}
+    dependencies:
+      ansi-styles: 3.2.1
+      escape-string-regexp: 1.0.5
+      supports-color: 5.5.0
+
  /chalk@4.1.2:
    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
    engines: {node: '>=10'}
@ -1770,6 +1989,11 @@ packages:
    engines: {node: '>=6'}
    dev: false

+  /color-convert@1.9.3:
+    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
+    dependencies:
+      color-name: 1.1.3
+
  /color-convert@2.0.1:
    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
    engines: {node: '>=7.0.0'}
@ -1777,6 +2001,9 @@ packages:
      color-name: 1.1.4
    dev: true

+  /color-name@1.1.3:
+    resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
+
  /color-name@1.1.4:
    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
    dev: true
@ -1808,6 +2035,9 @@ packages:
    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
    dev: true

+  /convert-source-map@1.9.0:
+    resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
+
  /cookie@0.5.0:
    resolution: {integrity: sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==}
    engines: {node: '>= 0.6'}
@ -2009,7 +2239,6 @@ packages:

  /electron-to-chromium@1.4.389:
    resolution: {integrity: sha512-WDgWUOK8ROR7sDFyYmxCUOoDc50lPgYAHAHwnnD1iN3SKO/mpqftb9iIPiEkMKmqYdkrR0j3N/O+YB/U7lSxwg==}
-    dev: true

  /emoji-regex@9.2.2:
    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
@ -2359,7 +2588,10 @@ packages:
  /escalade@3.1.1:
    resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
    engines: {node: '>=6'}
-    dev: true
+
+  /escape-string-regexp@1.0.5:
+    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
+    engines: {node: '>=0.8.0'}

  /escape-string-regexp@4.0.0:
    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
@ -2382,11 +2614,11 @@ packages:
    dependencies:
      '@next/eslint-plugin-next': 13.4.5-canary.3
      '@rushstack/eslint-patch': 1.2.0
-      '@typescript-eslint/parser': 5.59.5(eslint@8.40.0)(typescript@5.1.3)
+      '@typescript-eslint/parser': 5.59.7(eslint@8.40.0)(typescript@5.1.3)
      eslint: 8.40.0
      eslint-import-resolver-node: 0.3.7
-      eslint-import-resolver-typescript: 3.5.5(@typescript-eslint/parser@5.59.5)(eslint-import-resolver-node@0.3.7)(eslint-plugin-import@2.27.5)(eslint@8.40.0)
-      eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.59.5)(eslint-import-resolver-typescript@3.5.5)(eslint@8.40.0)
+      eslint-import-resolver-typescript: 3.5.5(@typescript-eslint/parser@5.59.7)(eslint-import-resolver-node@0.3.7)(eslint-plugin-import@2.27.5)(eslint@8.40.0)
+      eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.59.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.40.0)
      eslint-plugin-jsx-a11y: 6.7.1(eslint@8.40.0)
      eslint-plugin-react: 7.32.2(eslint@8.40.0)
      eslint-plugin-react-hooks: 4.6.0(eslint@8.40.0)
@ -2415,7 +2647,7 @@ packages:
      - supports-color
    dev: true

-  /eslint-import-resolver-typescript@3.5.5(@typescript-eslint/parser@5.59.5)(eslint-import-resolver-node@0.3.7)(eslint-plugin-import@2.27.5)(eslint@8.40.0):
+  /eslint-import-resolver-typescript@3.5.5(@typescript-eslint/parser@5.59.7)(eslint-import-resolver-node@0.3.7)(eslint-plugin-import@2.27.5)(eslint@8.40.0):
    resolution: {integrity: sha512-TdJqPHs2lW5J9Zpe17DZNQuDnox4xo2o+0tE7Pggain9Rbc19ik8kFtXdxZ250FVx2kF4vlt2RSf4qlUpG7bhw==}
    engines: {node: ^14.18.0 || >=16.0.0}
    peerDependencies:
@ -2425,8 +2657,8 @@ packages:
      debug: 4.3.4
      enhanced-resolve: 5.14.0
      eslint: 8.40.0
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@5.59.5)(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.40.0)
-      eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.59.5)(eslint-import-resolver-typescript@3.5.5)(eslint@8.40.0)
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@5.59.7)(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.40.0)
+      eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.59.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.40.0)
      get-tsconfig: 4.5.0
      globby: 13.1.4
      is-core-module: 2.12.0
@ -2439,7 +2671,7 @@ packages:
      - supports-color
    dev: true

-  /eslint-module-utils@2.8.0(@typescript-eslint/parser@5.59.5)(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.40.0):
+  /eslint-module-utils@2.8.0(@typescript-eslint/parser@5.59.7)(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.40.0):
    resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==}
    engines: {node: '>=4'}
    peerDependencies:
@ -2460,16 +2692,16 @@ packages:
      eslint-import-resolver-webpack:
        optional: true
    dependencies:
-      '@typescript-eslint/parser': 5.59.5(eslint@8.40.0)(typescript@5.1.3)
+      '@typescript-eslint/parser': 5.59.7(eslint@8.40.0)(typescript@5.1.3)
      debug: 3.2.7
      eslint: 8.40.0
      eslint-import-resolver-node: 0.3.7
-      eslint-import-resolver-typescript: 3.5.5(@typescript-eslint/parser@5.59.5)(eslint-import-resolver-node@0.3.7)(eslint-plugin-import@2.27.5)(eslint@8.40.0)
+      eslint-import-resolver-typescript: 3.5.5(@typescript-eslint/parser@5.59.7)(eslint-import-resolver-node@0.3.7)(eslint-plugin-import@2.27.5)(eslint@8.40.0)
    transitivePeerDependencies:
      - supports-color
    dev: true

-  /eslint-plugin-import@2.27.5(@typescript-eslint/parser@5.59.5)(eslint-import-resolver-typescript@3.5.5)(eslint@8.40.0):
+  /eslint-plugin-import@2.27.5(@typescript-eslint/parser@5.59.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.40.0):
    resolution: {integrity: sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==}
    engines: {node: '>=4'}
    peerDependencies:
@ -2479,7 +2711,7 @@ packages:
      '@typescript-eslint/parser':
        optional: true
    dependencies:
-      '@typescript-eslint/parser': 5.59.5(eslint@8.40.0)(typescript@5.1.3)
+      '@typescript-eslint/parser': 5.59.7(eslint@8.40.0)(typescript@5.1.3)
      array-includes: 3.1.6
      array.prototype.flat: 1.3.1
      array.prototype.flatmap: 1.3.1
@ -2487,7 +2719,7 @@ packages:
      doctrine: 2.1.0
      eslint: 8.40.0
      eslint-import-resolver-node: 0.3.7
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@5.59.5)(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.40.0)
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@5.59.7)(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.40.0)
      has: 1.0.3
      is-core-module: 2.12.0
      is-glob: 4.0.3
@ -2560,6 +2792,17 @@ packages:
      string.prototype.matchall: 4.0.8
    dev: true

+  /eslint-plugin-tailwindcss@3.12.0(tailwindcss@3.3.2):
+    resolution: {integrity: sha512-DMfg8NcSV04V1v3iBgJGEhmRuapW36XZXyRV8WHdNFGEXGUkBwM9R8MujguKXeQKBG6VhjiX4t98rhzXdIlUFw==}
+    engines: {node: '>=12.13.0'}
+    peerDependencies:
+      tailwindcss: ^3.3.2
+    dependencies:
+      fast-glob: 3.2.12
+      postcss: 8.4.23
+      tailwindcss: 3.3.2
+    dev: true
+
  /eslint-scope@7.2.0:
    resolution: {integrity: sha512-DYj5deGlHBfMt15J7rdtyKNq/Nqlv5KfU4iodrQ019XESsRnwXH9KAE0y3cwtUHDo2ob7CypAnCqefh6vioWRw==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@ -2841,6 +3084,10 @@ packages:
    resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
    dev: true

+  /gensync@1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
+
  /get-intrinsic@1.2.0:
    resolution: {integrity: sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==}
    dependencies:
@ -2929,6 +3176,10 @@ packages:
      once: 1.4.0
    dev: true

+  /globals@11.12.0:
+    resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
+    engines: {node: '>=4'}
+
  /globals@13.20.0:
    resolution: {integrity: sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==}
    engines: {node: '>=8'}
@ -2999,6 +3250,10 @@ packages:
    resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}
    dev: true

+  /has-flag@3.0.0:
+    resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
+    engines: {node: '>=4'}
+
  /has-flag@4.0.0:
    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
    engines: {node: '>=8'}
@ -3358,6 +3613,10 @@ packages:
      - encoding
    dev: false

+  /javascript-natural-sort@0.7.1:
+    resolution: {integrity: sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==}
+    dev: true
+
  /jiti@1.18.2:
    resolution: {integrity: sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==}
    hasBin: true
@ -3381,6 +3640,11 @@ packages:
      argparse: 2.0.1
    dev: true

+  /jsesc@2.5.2:
+    resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
+    engines: {node: '>=4'}
+    hasBin: true
+
  /json-diff@0.9.0:
    resolution: {integrity: sha512-cVnggDrVkAAA3OvFfHpFEhOnmcsUpleEKq4d4O8sQWWSH40MBrWstKigVB1kGrgLWzuom+7rRdaCsnBD6VyObQ==}
    hasBin: true
@ -3405,6 +3669,11 @@ packages:
      minimist: 1.2.8
    dev: true

+  /json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
+    hasBin: true
+
  /jsx-ast-utils@3.3.3:
    resolution: {integrity: sha512-fYQHZTZ8jSfmWZ0iyzfwiU4WDX4HpHbMCZ3gPlWYiCl3BoeOTsqKBqnTVfH2rYT7eP5c3sVbeSPHnnJOaTrWiw==}
    engines: {node: '>=4.0'}
@ -3463,6 +3732,14 @@ packages:
    resolution: {integrity: sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==}
    dev: true

+  /lodash.clone@4.5.0:
+    resolution: {integrity: sha512-GhrVeweiTD6uTmmn5hV/lzgCQhccwReIVRLHp7LT4SopOjqEZ5BbX8b5WWEtAKasjmy8hR7ZPwsYlxRCku5odg==}
+    dev: true
+
+  /lodash.isequal@4.5.0:
+    resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==}
+    dev: true
+
  /lodash.isplainobject@4.0.6:
    resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
    dev: true
@ -3492,6 +3769,11 @@ packages:
      highlight.js: 10.7.3
    dev: false

+  /lru-cache@5.1.1:
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
+    dependencies:
+      yallist: 3.1.1
+
  /lru-cache@6.0.0:
    resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
    engines: {node: '>=10'}
@ -4022,7 +4304,7 @@ packages:
      react: '*'
      react-dom: '*'
    dependencies:
-      next: 13.4.5-canary.3(react-dom@18.2.0)(react@18.2.0)
+      next: 13.4.5-canary.3(@babel/core@7.22.5)(react-dom@18.2.0)(react@18.2.0)
      react: 18.2.0
      react-dom: 18.2.0(react@18.2.0)
    dev: false
@ -4031,7 +4313,7 @@ packages:
    resolution: {integrity: sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==}
    dev: true

-  /next@13.4.5-canary.3(react-dom@18.2.0)(react@18.2.0):
+  /next@13.4.5-canary.3(@babel/core@7.22.5)(react-dom@18.2.0)(react@18.2.0):
    resolution: {integrity: sha512-5YLpHWSLjjInYlqxtkZZr7cwYp62wXEm7ik6Wu+4JqWQdbwD/pemuXwErxRIt65ruDQwe9RvE/dzMOuQuNDE+A==}
    engines: {node: '>=16.8.0'}
    hasBin: true
@ -4056,7 +4338,7 @@ packages:
      postcss: 8.4.14
      react: 18.2.0
      react-dom: 18.2.0(react@18.2.0)
-      styled-jsx: 5.1.1(react@18.2.0)
+      styled-jsx: 5.1.1(@babel/core@7.22.5)(react@18.2.0)
      zod: 3.21.4
    optionalDependencies:
      '@next/swc-darwin-arm64': 13.4.5-canary.3
@ -4087,7 +4369,6 @@ packages:

  /node-releases@2.0.10:
    resolution: {integrity: sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==}
-    dev: true

  /normalize-path@3.0.0:
    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
@ -4752,7 +5033,6 @@ packages:
  /semver@6.3.0:
    resolution: {integrity: sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==}
    hasBin: true
-    dev: true

  /semver@7.5.0:
    resolution: {integrity: sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==}
@ -4895,7 +5175,7 @@ packages:
      inline-style-parser: 0.1.1
    dev: false

-  /styled-jsx@5.1.1(react@18.2.0):
+  /styled-jsx@5.1.1(@babel/core@7.22.5)(react@18.2.0):
    resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==}
    engines: {node: '>= 12.0.0'}
    peerDependencies:
@ -4908,6 +5188,7 @@ packages:
      babel-plugin-macros:
        optional: true
    dependencies:
+      '@babel/core': 7.22.5
      client-only: 0.0.1
      react: 18.2.0
    dev: false
@ -4926,6 +5207,12 @@ packages:
      ts-interface-checker: 0.1.13
    dev: true

+  /supports-color@5.5.0:
+    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
+    engines: {node: '>=4'}
+    dependencies:
+      has-flag: 3.0.0
+
  /supports-color@7.2.0:
    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
    engines: {node: '>=8'}
@ -5037,6 +5324,10 @@ packages:
    engines: {node: '>=12'}
    dev: true

+  /to-fast-properties@2.0.0:
+    resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
+    engines: {node: '>=4'}
+
  /to-regex-range@5.0.1:
    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
    engines: {node: '>=8.0'}
@ -5191,7 +5482,6 @@ packages:
      browserslist: 4.21.5
      escalade: 3.1.1
      picocolors: 1.0.0
-    dev: true

  /uri-js@4.4.1:
    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
@ -5376,6 +5666,9 @@ packages:
    engines: {node: '>=0.4'}
    dev: false

+  /yallist@3.1.1:
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+
  /yallist@4.0.0:
    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
    dev: true
--- a/prettier.config.cjs
+++ b/prettier.config.cjs
@ -0,0 +1,35 @@
+/** @type {import('prettier').Config} */
+module.exports = {
+  endOfLine: 'lf',
+  semi: false,
+  useTabs: false,
+  singleQuote: true,
+  arrowParens: 'avoid',
+  tabWidth: 2,
+  trailingComma: 'none',
+  importOrder: [
+    '^(react/(.*)$)|^(react$)',
+    '^(next/(.*)$)|^(next$)',
+    '<THIRD_PARTY_MODULES>',
+    '',
+    '^types$',
+    '^@/types/(.*)$',
+    '^@/config/(.*)$',
+    '^@/lib/(.*)$',
+    '^@/hooks/(.*)$',
+    '^@/components/ui/(.*)$',
+    '^@/components/(.*)$',
+    '^@/registry/(.*)$',
+    '^@/styles/(.*)$',
+    '^@/app/(.*)$',
+    '',
+    '^[./]'
+  ],
+  importOrderSeparation: false,
+  importOrderSortSpecifiers: true,
+  importOrderBuiltinModulesToTop: true,
+  importOrderParserPlugins: ['typescript', 'jsx', 'decorators-legacy'],
+  importOrderMergeDuplicateImports: true,
+  importOrderCombineTypeAndValueImports: true,
+  plugins: ['@ianvs/prettier-plugin-sort-imports']
+}