refactor: eslint and prettier conflict will be resolved and formatted

components/example.tsx

@@ -1,18 +1,18 @@
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
-function ExampleWrapper({ className, ...props }: React.ComponentProps<"div">) {
+function ExampleWrapper({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div className="bg-background w-full">
       <div
         data-slot="example-wrapper"
         className={cn(
-          "mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl",
+          'mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl',
           className
         )}
         {...props}
       />
     </div>
-  )
+  );
 }
 
 function Example({
@@ -21,23 +21,21 @@ function Example({
   className,
   containerClassName,
   ...props
-}: React.ComponentProps<"div"> & {
-  title?: string
-  containerClassName?: string
+}: React.ComponentProps<'div'> & {
+  title?: string;
+  containerClassName?: string;
 }) {
   return (
     <div
       data-slot="example"
       className={cn(
-        "mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none",
+        'mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none',
         containerClassName
       )}
       {...props}
     >
       {title && (
-        <div className="text-muted-foreground px-1.5 py-2 text-xs font-medium">
-          {title}
-        </div>
+        <div className="text-muted-foreground px-1.5 py-2 text-xs font-medium">{title}</div>
       )}
       <div
         data-slot="example-content"
@@ -49,7 +47,7 @@ function Example({
         {children}
       </div>
     </div>
-  )
+  );
 }
 
-export { ExampleWrapper, Example }
+export { ExampleWrapper, Example };