Fix Interface Variable Names

components/button.tsx

@@ -2,7 +2,7 @@ import { CSSProperties } from 'react'
 
 import clsx from 'clsx'
 
-interface buttonProps {
+interface ButtonProps {
   label?: string
   onClick?: () => void
   variant?: 'primary' | 'secondary' | 'ghost' | 'outline'
@@ -23,7 +23,7 @@ export const Button = ({
   disabled,
   ref,
   ...props
-}: buttonProps) => {
+}: ButtonProps) => {
   const variantCls = {
     primary: 'text-white bg-primary xs:hover:opacity-75',
     secondary:

components/card.tsx

@@ -1,14 +1,14 @@
 import Link from 'next/link'
 import Image from 'next/image'
 
-interface cardProps {
+interface CardProps {
   link: string
   imageUrl: string
   title: string
   description: string
 }
 
-export const Card = ({ link, imageUrl, title, description }: cardProps) => (
+export const Card = ({ link, imageUrl, title, description }: CardProps) => (
   <Link
     href={link}
     className="w-full sm:max-w-[300px] h-[156px] xs:h-[168px] sm:h-[200px] flex flex-col justify-start items-start gap-3 sm:gap-4 p-4 sm:p-6 rounded-xl dark:hover:bg-zinc-600/5 border border-gray-200 dark:border-opacity-15 dark:hover:border-opacity-30 hover:shadow-card outline-none transition-all duration-300"

components/footer.tsx

@@ -11,12 +11,12 @@ import {
   OTHER_LINKS,
 } from '@/constants/footer-links'
 
-interface linksProps {
+interface LinksProps {
   title: string
   links: Array<{ href: string; label: string }>
 }
 
-const Links = ({ title, links }: linksProps) => (
+const Links = ({ title, links }: LinksProps) => (
   <div className="basis-[100%] md:basis-[calc(33%-8px)] lg:basis-[calc(25%-8px)] xl:basis-[calc(20%-8px)]">
     <h3 className="pb-6 text-base font-semibold text-black dark:text-gray-200">
       {title}

components/modal/modal-portal.tsx

@@ -1,12 +1,15 @@
 import { useRef, useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
 
-interface modalPortal {
+interface ModalPortalProps {
   children: React.ReactNode
   selector?: string
 }
 
-export const ModalPortal = ({ children, selector = 'modal' }: modalPortal) => {
+export const ModalPortal = ({
+  children,
+  selector = 'modal',
+}: ModalPortalProps) => {
   const ref = useRef<HTMLDivElement | null>(null)
   const [mounted, setMounted] = useState(false)
 

components/modal/modal.tsx

@@ -5,7 +5,7 @@ import { ModalPortal } from '@/components/modal/modal-portal'
 
 import { useClickOutside } from '@/hooks/useClickOutside'
 
-interface modalProps {
+interface ModalProps {
   isOpen: boolean
   close: () => void
   children: React.ReactNode
@@ -19,7 +19,7 @@ export const Modal = ({
   children,
   closeOnClickAway = false,
   className,
-}: modalProps) => {
+}: ModalProps) => {
   const contentRef = useRef(null)
 
   useClickOutside({

components/nav-dropdown.tsx

@@ -1,7 +1,7 @@
 import Link from 'next/link'
 import clsx from 'clsx'
 
-interface navDropdownProps {
+interface NavDropdownProps {
   title: string
   link: string
   options: Array<{ label: string; link: string }>
@@ -13,7 +13,7 @@ export const NavDropdown = ({
   link,
   options,
   position = 'center',
-}: navDropdownProps) => {
+}: NavDropdownProps) => {
   const positionCls = {
     left: '-left-2',
     right: '-right-2',

components/navbar.tsx

@@ -4,11 +4,11 @@ import { NavDropdown } from '@/components/nav-dropdown'
 
 import { ALL_NAV_ITEMS, LESS_NAV_ITEMS } from '@/constants/nav-items'
 
-interface navbarProps {
+interface NavbarProps {
   className?: string
 }
 
-export const Navbar = ({ className }: navbarProps) => (
+export const Navbar = ({ className }: NavbarProps) => (
   <nav className={clsx('w-full max-w-6xl', className)}>
     <ul className="w-full hidden lg:flex items-center justify-between gap-1">
       {ALL_NAV_ITEMS.map((navItem, i) => (

components/search-bar.tsx

@@ -1,11 +1,11 @@
 import Image from 'next/image'
 import clsx from 'clsx'
 
-interface searchbarProps {
+interface SearchbarProps {
   className?: string
 }
 
-export const Searchbar = ({ className }: searchbarProps) => (
+export const Searchbar = ({ className }: SearchbarProps) => (
   <div
     className={clsx(
       'flex-1 sm:max-w-[280px] md:max-w-[400px] lg:max-w-[500px] flex items-center justify-between gap-x-4 md:gap-x-6 px-4 sm:px-6 py-1.5 bg-zinc-100 dark:bg-zinc-800 rounded-3xl',

components/section-wrapper.tsx

@@ -2,7 +2,7 @@ import { Button } from '@/components/button'
 
 import AngleRightIcon from '@/public/angle-right.svg'
 
-interface sectionWraperProps {
+interface SectionWraperProps {
   title: string
   showAllButton?: boolean
   children: React.ReactNode
@@ -14,7 +14,7 @@ export const SectionWrapper = ({
   showAllButton,
   children,
   childrenClass,
-}: sectionWraperProps) => (
+}: SectionWraperProps) => (
   <section className="w-full flex flex-col px-0 xs:px-2 sm:px-4 md:px-6 py-0 sm:py-2 md:py-4 bg-white dark:bg-midnight-slate rounded-xl xs:rounded-2xl sm:rounded-3xl">
     <div className="flex items-center justify-between px-4 py-4 sm:py-6 gap-2">
       <h1

components/theme/toggle-theme-button.tsx

@@ -9,11 +9,11 @@ import { Button } from '@/components/button'
 import MoonIcon from '@/public/moon.svg'
 import SunIcon from '@/public/sun.svg'
 
-interface toggleThemeButtonProps {
+interface ToggleThemeButtonProps {
   className?: string
 }
 
-export const ToggleThemeButton = ({ className }: toggleThemeButtonProps) => {
+export const ToggleThemeButton = ({ className }: ToggleThemeButtonProps) => {
   const [isMounted, setIsMounted] = useState(false)
   const { resolvedTheme, setTheme } = useTheme()
 

hooks/useClickOutside.ts

@@ -1,11 +1,11 @@
 import { useEffect } from 'react'
 
-interface funcProps {
+interface UseClickOutsideProps {
   onClick: () => void
   ref: { current: HTMLDivElement } | { current: null }
 }
 
-export const useClickOutside = ({ onClick, ref }: funcProps) => {
+export const useClickOutside = ({ onClick, ref }: UseClickOutsideProps) => {
   useEffect(() => {
     const handleClickOutside = (e: any) =>
       ref.current && !ref.current.contains(e.target) && onClick()