fix: lint and action

Author: lsbyerley

app/routes/_index.tsx

@@ -23,7 +23,7 @@ const HeroOne = () => {
 	)
 };
 
-const HeroTwo = () => {
+export const HeroTwo = () => {
 	return (
 		<section className="w-full border-b py-12 md:py-24 lg:py-32">
 			<div className="container grid gap-6 px-4 md:px-6 lg:grid-cols-2 lg:gap-12 xl:gap-20">

app/routes/resources+/theme-switch.tsx

@@ -70,7 +70,7 @@ export function ThemeSwitch({
 	}
 
 	return (
-		<fetcher.Form method="POST" {...getFormProps(form)} action='/resources/theme'>
+		<fetcher.Form method="POST" {...getFormProps(form)} action='/resources/theme-switch'>
 			<input type="hidden" name="theme" value={nextMode} />
 			<div className="flex gap-2">
 				<button
@@ -90,7 +90,7 @@ export function ThemeSwitch({
  */
 export function useOptimisticThemeMode() {
 	const fetchers = useFetchers()
-	const themeFetcher = fetchers.find(f => f.formAction === '/')
+	const themeFetcher = fetchers.find(f => f.formAction === '/resources/theme-switch')
 
 	if (themeFetcher && themeFetcher.formData) {
 		const submission = parseWithZod(themeFetcher.formData, {

app/utils/misc.tsx

@@ -1,7 +1,7 @@
 import { useFormAction, useNavigation } from '@remix-run/react'
-import { useHydrated } from 'remix-utils/use-hydrated'
 import { clsx, type ClassValue } from 'clsx'
 import { useEffect, useMemo, useRef, useState } from 'react'
+import { useHydrated } from 'remix-utils/use-hydrated'
 import { useSpinDelay } from 'spin-delay'
 import { extendTailwindMerge } from 'tailwind-merge'
 import { extendedTheme } from './extended-theme.ts'