full progressive enhancement on login experience

Author: kentcdodds

app/components/error-boundary.tsx

@@ -4,7 +4,7 @@ import {
 	useRouteError,
 } from '@remix-run/react'
 import { type ErrorResponse } from '@remix-run/router'
-import { getErrorMessage } from '~/utils/misc.ts'
+import { getErrorMessage } from '~/utils/misc.tsx'
 
 type StatusHandler = (info: {
 	error: ErrorResponse

app/components/search-bar.tsx

@@ -3,7 +3,7 @@ import { Icon } from './ui/icon.tsx'
 import { Input } from './ui/input.tsx'
 import { Label } from './ui/label.tsx'
 import { StatusButton } from './ui/status-button.tsx'
-import { useDebounce, useIsSubmitting } from '~/utils/misc.ts'
+import { useDebounce, useIsSubmitting } from '~/utils/misc.tsx'
 
 export function SearchBar({
 	status,

app/components/ui/button.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { Slot } from '@radix-ui/react-slot'
 import { cva, type VariantProps } from 'class-variance-authority'
 
-import { cn } from '~/utils/misc.ts'
+import { cn } from '~/utils/misc.tsx'
 
 const buttonVariants = cva(
 	'inline-flex items-center justify-center rounded-md text-sm font-medium 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',

app/components/ui/checkbox.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
 
-import { cn } from '~/utils/misc.ts'
+import { cn } from '~/utils/misc.tsx'
 
 export type CheckboxProps = Omit<
 	React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,

app/components/ui/dropdown-menu.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
 
-import { cn } from '~/utils/misc.ts'
+import { cn } from '~/utils/misc.tsx'
 
 const DropdownMenu = DropdownMenuPrimitive.Root
 

app/components/ui/icon.tsx

@@ -1,5 +1,5 @@
 import { type SVGProps } from 'react'
-import { cn } from '~/utils/misc.ts'
+import { cn } from '~/utils/misc.tsx'
 import href from './icons/sprite.svg'
 
 import { type IconName } from '@/icon-name'

app/components/ui/input.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { cn } from '~/utils/misc.ts'
+import { cn } from '~/utils/misc.tsx'
 
 export interface InputProps
 	extends React.InputHTMLAttributes<HTMLInputElement> {}

app/components/ui/label.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import * as LabelPrimitive from '@radix-ui/react-label'
 import { cva, type VariantProps } from 'class-variance-authority'
 
-import { cn } from '~/utils/misc.ts'
+import { cn } from '~/utils/misc.tsx'
 
 const labelVariants = cva(
 	'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',

app/components/ui/status-button.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { Button, type ButtonProps } from './button.tsx'
-import { cn } from '~/utils/misc.ts'
+import { cn } from '~/utils/misc.tsx'
 import { useSpinDelay } from 'spin-delay'
 import { Icon } from './icon.tsx'
 import {

app/components/ui/textarea.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { cn } from '~/utils/misc.ts'
+import { cn } from '~/utils/misc.tsx'
 
 export interface TextareaProps
 	extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}