fix(components): resolve linting issues in project components

apps/web/app/(api-routes)/foo/route.ts

@@ -1,4 +1,4 @@
-export async function GET(req: Request) {
+export async function GET() {
 	return new Response(
 		JSON.stringify({ message: 'Hello from the foo route!' }),
 		{
@@ -8,7 +8,7 @@ export async function GET(req: Request) {
 	)
 }
 
-export async function POST(_req: Request) {
+export async function POST() {
 	return new Response(JSON.stringify({ message: 'Method Not Allowed' }), {
 		status: 405,
 		headers: { 'Content-Type': 'application/json' },

apps/web/app/(auth-pages)/forgot-password/page.tsx

@@ -1,4 +1,3 @@
-import { CheckCircle } from 'lucide-react'
 import Link from 'next/link'
 import { forgotPasswordAction } from '~/app/actions'
 import { Button } from '~/components/base/button'
@@ -54,31 +53,31 @@ export default async function ForgotPassword(props: {
 }
 
 // Optional: Add success state component
-interface SuccessMessageProps {
-	email: string
-}
+// interface SuccessMessageProps {
+// 	email: string
+// }
 
-const SuccessMessage = ({ email }: SuccessMessageProps) => (
-	<div className="space-y-4">
-		<div className="flex flex-col items-center justify-center space-y-2">
-			<CheckCircle className="w-12 h-12 text-green-500" />
-			<h2 className="text-2xl font-semibold">Check Your Email!</h2>
-		</div>
-		<p className="text-center text-muted-foreground">
-			We’ve sent a recovery link to <strong>{email}</strong>. The link will
-			expire in 24 hours.
-		</p>
-		<div className="text-center">
-			<p className="text-sm text-muted-foreground">
-				Didn’t receive the email?{' '}
-				{/* biome-ignore lint/a11y/useButtonType: <explanation> */}
-				<button
-					onClick={() => window.location.reload()}
-					className="text-primary hover:underline"
-				>
-					Resend recovery email
-				</button>
-			</p>
-		</div>
-	</div>
-)
+// const SuccessMessage = ({ email }: SuccessMessageProps) => (
+// 	<div className="space-y-4">
+// 		<div className="flex flex-col items-center justify-center space-y-2">
+// 			<CheckCircle className="w-12 h-12 text-green-500" />
+// 			<h2 className="text-2xl font-semibold">Check Your Email!</h2>
+// 		</div>
+// 		<p className="text-center text-muted-foreground">
+// 			We’ve sent a recovery link to <strong>{email}</strong>. The link will
+// 			expire in 24 hours.
+// 		</p>
+// 		<div className="text-center">
+// 			<p className="text-sm text-muted-foreground">
+// 				Didn’t receive the email?{' '}
+// 				{/* biome-ignore lint/a11y/useButtonType: <explanation> */}
+// 				<button
+// 					onClick={() => window.location.reload()}
+// 					className="text-primary hover:underline"
+// 				>
+// 					Resend recovery email
+// 				</button>
+// 			</p>
+// 		</div>
+// 	</div>
+// )

apps/web/app/(auth-pages)/sign-in/page.tsx

@@ -5,13 +5,12 @@ import { signInAction } from '~/app/actions'
 import { Button } from '~/components/base/button'
 import { Input } from '~/components/base/input'
 import { Label } from '~/components/base/label'
-import type { Message } from '~/components/form-message'
 import { AuthForm } from '~/components/shared/layout/auth/auth-form'
 import { AuthLayout } from '~/components/shared/layout/auth/auth-layout'
 import { useFormValidation } from '~/hooks/use-form-validation'
 
-export default function Login(props: { searchParams: Promise<Message> }) {
-	const searchParams = props.searchParams
+export default function Login() {
+	// const searchParams = props.searchParams
 	const {
 		isEmailInvalid,
 		isPasswordInvalid,
@@ -29,7 +28,7 @@ export default function Login(props: { searchParams: Promise<Message> }) {
 				title="Welcome Back"
 				subtitle={
 					<div className="text-sm text-muted-foreground">
-						Don't have an account?{' '}
+						Don&apos;t have an account?
 						<Link
 							className="text-primary font-medium hover:underline"
 							href="/sign-up"

apps/web/app/(auth-pages)/sign-up/page.tsx

@@ -12,12 +12,11 @@ import {
 } from '~/components/base/card'
 import { Input } from '~/components/base/input'
 import { Label } from '~/components/base/label'
-import type { Message } from '~/components/form-message'
 import { AuthLayout } from '~/components/shared/layout/auth/auth-layout'
 import { useFormValidation } from '~/hooks/use-form-validation'
 
-export default function Signup(props: { searchParams: Promise<Message> }) {
-	const searchParams = props.searchParams
+export default function Signup() {
+	// const searchParams = props.searchParams
 	// Show success message if registration was successful
 	// if (searchParams.success) {
 	//   return (

apps/web/app/(routes)/dashboard/page.tsx

@@ -1,6 +1,5 @@
 import AchievementPage from '~/components/pages/achievements'
-import type { PageProps } from '~/lib/types'
 
-export default function HomePage(props: PageProps) {
+export default function HomePage() {
 	return <AchievementPage />
 }

apps/web/app/(routes)/home/page.tsx

@@ -1,6 +1,5 @@
 import { HomeDashboard } from '~/components/pages/home'
-import type { PageProps } from '~/lib/types'
 
-export default function HomePage(props: PageProps) {
+export default function HomePage() {
 	return <HomeDashboard />
 }

apps/web/app/(routes)/project/page.tsx

@@ -9,28 +9,29 @@ import YourImpactSection from '~/components/sections/project/your-impact'
 import { projectTabsData } from '~/lib/mock-data/mock-projects'
 
 const TAB_COMPONENTS = {
-    overview: ProjectOverview,
-    updates: ProjectUpdatesSection,
-    impact: YourImpactSection,
-    showcase: ProjectShowcaseSection,
+	overview: ProjectOverview,
+	updates: ProjectUpdatesSection,
+	impact: YourImpactSection,
+	showcase: ProjectShowcaseSection,
 } as const
 
 const ProjectDetailsPage = () => {
-    const tabs = projectTabsData.map((tab) => {
-        const Component = TAB_COMPONENTS[tab.id as keyof typeof TAB_COMPONENTS]
+	const tabs = projectTabsData.map((tab) => {
+		const Component = TAB_COMPONENTS[tab.id as keyof typeof TAB_COMPONENTS]
 		const contentComponent = Component ? <Component key={tab.id} /> : null
 
+		return {
+			...tab,
+			content: contentComponent,
+		}
+	})
 
-        return {
-            ...tab,
-            content: contentComponent,
-        }
-    })
+	return (
+		<div className="container mx-auto p-6">
+			<h1 className="text-3xl font-bold mb-6">Project Details</h1>
+			<TabNavigation tabs={tabs} />
+		</div>
+	)
+}
 
-    return (
-        <div className="container mx-auto p-6">
-            <h1 className="text-3xl font-bold mb-6">Project Details</h1>
-            <TabNavigation tabs={tabs} />
-        </div>
-    )
-}
+export default ProjectDetailsPage

apps/web/app/layout.tsx

@@ -9,37 +9,40 @@ const defaultUrl = process.env.VERCEL_URL
 	? `https://${process.env.VERCEL_URL}`
 	: 'http://localhost:3000'
 export const metadata = {
-    metadataBase: new URL(defaultUrl),
-    title: 'KindFi',
-    description:
-        'The first Web3 platform connecting supporters to impactful causes while driving blockchain adoption for social and environmental change',
+	metadataBase: new URL(defaultUrl),
+	title: 'KindFi',
+	description:
+		'The first Web3 platform connecting supporters to impactful causes while driving blockchain adoption for social and environmental change',
 }
 
 const ProviderWrapper = ({ children }: { children: React.ReactNode }) => {
-    return (
-        <AuthProvider>
-            <ThemeProvider>{children}</ThemeProvider>
-        </AuthProvider>
-    )
+	return (
+		<AuthProvider>
+			<ThemeProvider>{children}</ThemeProvider>
+		</AuthProvider>
+	)
 }
 
 export default function RootLayout({
-    children,
+	children,
 }: {
-    children: React.ReactNode
+	children: React.ReactNode
 }) {
-    return (
-        <html lang="en" suppressHydrationWarning>
-            <head />
-            <body suppressHydrationWarning>
-                <ProviderWrapper>
-                    <div className="relative min-h-screen flex flex-col">
-                        <Header />
-                        <main className="flex-1">{children}</main>
-                        <Footer />
-                    </div>
-                </ProviderWrapper>
-				<GoogleAnalytics GA_MEASUREMENT_ID={process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID || ''} />                </body>
-        </html>
-    )
-}
+	return (
+		<html lang="en" suppressHydrationWarning>
+			<head />
+			<body suppressHydrationWarning>
+				<ProviderWrapper>
+					<div className="relative min-h-screen flex flex-col">
+						<Header />
+						<main className="flex-1">{children}</main>
+						<Footer />
+					</div>
+				</ProviderWrapper>
+				<GoogleAnalytics
+					GA_MEASUREMENT_ID={process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID || ''}
+				/>{' '}
+			</body>
+		</html>
+	)
+}

apps/web/components/base/carousel.tsx

@@ -23,7 +23,7 @@ type CarouselProps = {
 
 type CarouselContextProps = {
 	carouselRef: ReturnType<typeof useEmblaCarousel>[0]
-	api: ReturnType<typeof useEmblaCarousel>[1]
+	// api: ReturnType<typeof useEmblaCarousel>[1]
 	scrollPrev: () => void
 	scrollNext: () => void
 	canScrollPrev: boolean
@@ -124,7 +124,7 @@ const Carousel = React.forwardRef<
 			<CarouselContext.Provider
 				value={{
 					carouselRef,
-					api: api,
+					// api: api,
 					opts,
 					orientation:
 						orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),

apps/web/components/base/image.tsx

@@ -8,15 +8,21 @@ interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
 	isDecorative?: boolean
 }
 
-const Image: FC<ImageProps> = ({ src, alt, className, isDecorative = false, ...props }) => {
+const Image: FC<ImageProps> = ({
+	src,
+	alt,
+	className,
+	isDecorative = false,
+	...props
+}) => {
 	return (
 		<div
 			className={cn(
 				'w-full h-full flex items-center justify-center overflow-hidden',
 				className,
 			)}
 		>
-			<img
+			<Image
 				src={src}
 				alt={isDecorative ? '' : alt || 'Image'}
 				aria-hidden={isDecorative}

apps/web/components/base/input.tsx

@@ -2,24 +2,22 @@ import * as React from 'react'
 
 import { cn } from '~/lib/utils'
 
-export interface InputProps
-	extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-	({ className, type, ...props }, ref) => {
-		return (
-			<input
-				type={type}
-				className={cn(
-					'flex h-10 w-full rounded-md border border-input bg-background 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',
-					className,
-				)}
-				ref={ref}
-				{...props}
-			/>
-		)
-	},
-)
+const Input = React.forwardRef<
+	HTMLInputElement,
+	React.InputHTMLAttributes<HTMLInputElement>
+>(({ className, type, ...props }, ref) => {
+	return (
+		<input
+			type={type}
+			className={cn(
+				'flex h-10 w-full rounded-md border border-input bg-background 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',
+				className,
+			)}
+			ref={ref}
+			{...props}
+		/>
+	)
+})
 Input.displayName = 'Input'
 
 export { Input }

apps/web/components/base/navigation-menu.tsx

@@ -5,11 +5,11 @@ import * as React from 'react'
 
 import { cn } from '~/lib/utils'
 
-interface NavigationItem {
-	label: string
-	href: string
-	ariaLabel: string
-}
+// interface NavigationItem {
+// 	label: string
+// 	href: string
+// 	ariaLabel: string
+// }
 
 const navigationMenuTriggerStyle = cva(
 	'group inline-flex items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',

apps/web/components/base/sidebar.tsx

@@ -86,7 +86,7 @@ const SidebarProvider = React.forwardRef<
 				// This sets the cookie to keep the sidebar state.
 				document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
 			},
-			[setOpenProp, open],
+			[open, setOpenProp],
 		)
 
 		// Helper to toggle the sidebar.