fix lint and correct eslint config

.eslintrc

@@ -17,6 +17,15 @@
 	"rules": {
 		"@typescript-eslint/no-unused-vars": "error",
 		"@typescript-eslint/consistent-type-definitions": ["error", "type"],
+    "@typescript-eslint/ban-types": [
+      "error",
+      {
+        "extendDefaults": true,
+        "types": {
+          "{}": false
+        }
+      }
+    ],
 		"indent": ["error", "tab"],
 		"react/jsx-indent": ["error", "tab"],
 		"react/jsx-indent-props": ["error", "tab"],

src/components/profile/Themecard.tsx

@@ -1,6 +1,6 @@
 import { GenericItemCardProps } from "../../interfaces/profile"
 
-export const ThemeCard: React.FC<GenericItemCardProps> = ({ mode, themeImg, name, description }) => {
+export const ThemeCard: React.FC<GenericItemCardProps> = ({ themeImg, name, description }) => {
 	return (
 		<div className="flex gap-3 w-full h-fit flex-row">
 			<img className="w-20 rounded-lg" src={themeImg} />

src/components/profile/profileSettings.tsx

@@ -1,55 +1,47 @@
 import {
-  SelectContent,
-  SelectItem,
-  SelectLabel,
-  SelectRoot,
-  SelectTrigger,
-  SelectValueText,
+	SelectContent,
+	SelectItem,
+	SelectLabel,
+	SelectRoot,
+	SelectTrigger,
+	SelectValueText,
 } from "@/components/ui/select";
 import i18n from "@/i18n";
-import { createListCollection, useRecipe } from "@chakra-ui/react"
+import { createListCollection } from "@chakra-ui/react"
 export default function ProfileSettings () {
-  const supportedLangs =createListCollection({
-    items:  [
-      {label: 'English', value: 'en'}
-    ]
-  });
+	const supportedLangs =createListCollection({
+		items:  [
+			{label: 'English', value: 'en'}
+		]
+	});
 
 
-  const langChangeHandler = (input) => {
-    const tag = input.value[0];
-    i18n.changeLanguage(tag);
+	const langChangeHandler = (input) => {
+		const tag = input.value[0];
+		i18n.changeLanguage(tag);
 
-  }
+	}
 	return (
 		<div className="rounded-xl w-[95vw] grid gap-8 text-primary-white
      self-center my-5 p-10 bg-primary-darkForeground">
 			<h2 className="font-extrabold text-xl ">Profile settings</h2>
 			<div className="flex flex-row gap-14 flex-wrap">
 				<div className="grid grid-flow-row gap-3">
-          <SelectRoot onValueChange={langChangeHandler}  width='100px' collection={supportedLangs}>
-            <SelectLabel className="font-extrabold">Language </SelectLabel>
-            <SelectTrigger className="border-2 px-1 rounded-md border-primary-mutedForeground">
-              <SelectValueText placeholder="Select Language" />
-            </SelectTrigger>
-            <SelectContent className="border-2 border-red-900" border='Highlight' >
-              {supportedLangs.items.map((lang) => (
-                <SelectItem item={lang} key={lang.value}>
-                  {lang.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </SelectRoot>
+					<SelectRoot onValueChange={langChangeHandler}  width='100px' collection={supportedLangs}>
+						<SelectLabel className="font-extrabold">Language </SelectLabel>
+						<SelectTrigger className="border-2 px-1 rounded-md border-primary-mutedForeground">
+							<SelectValueText placeholder="Select Language" />
+						</SelectTrigger>
+						<SelectContent className="border-2 border-red-900" border='Highlight' >
+							{supportedLangs.items.map((lang) => (
+								<SelectItem item={lang} key={lang.value}>
+									{lang.label}
+								</SelectItem>
+							))}
+						</SelectContent>
+					</SelectRoot>
 				</div>
 			</div>
 		</div>
 	)
 }
-
-const Select = ({children, onchangefunc} : any) => (
-	<select onChange={onchangefunc} className="bg-transparent border-accent-500 border-2 rounded-lg px-5 py-1">
-		{children}
-	</select>
-)
-
-//im writing type to any temporarily, until we use a cmpnt library

src/components/ui/accordion.tsx

@@ -2,45 +2,45 @@ import { Accordion, HStack } from "@chakra-ui/react"
 import { forwardRef } from "react"
 import { LuChevronDown } from "react-icons/lu"
 
-interface AccordionItemTriggerProps extends Accordion.ItemTriggerProps {
+type AccordionItemTriggerProps = {
   indicatorPlacement?: "start" | "end"
-}
+} & Accordion.ItemTriggerProps
 
 export const AccordionItemTrigger = forwardRef<
   HTMLButtonElement,
   AccordionItemTriggerProps
 >(function AccordionItemTrigger(props, ref) {
-  const { children, indicatorPlacement = "end", ...rest } = props
-  return (
-    <Accordion.ItemTrigger {...rest} ref={ref}>
-      {indicatorPlacement === "start" && (
-        <Accordion.ItemIndicator rotate={{ base: "-90deg", _open: "0deg" }}>
-          <LuChevronDown />
-        </Accordion.ItemIndicator>
-      )}
-      <HStack gap="4" flex="1" textAlign="start" width="full">
-        {children}
-      </HStack>
-      {indicatorPlacement === "end" && (
-        <Accordion.ItemIndicator>
-          <LuChevronDown />
-        </Accordion.ItemIndicator>
-      )}
-    </Accordion.ItemTrigger>
-  )
+	const { children, indicatorPlacement = "end", ...rest } = props
+	return (
+		<Accordion.ItemTrigger {...rest} ref={ref}>
+			{indicatorPlacement === "start" && (
+				<Accordion.ItemIndicator rotate={{ base: "-90deg", _open: "0deg" }}>
+					<LuChevronDown />
+				</Accordion.ItemIndicator>
+			)}
+			<HStack gap="4" flex="1" textAlign="start" width="full">
+				{children}
+			</HStack>
+			{indicatorPlacement === "end" && (
+				<Accordion.ItemIndicator>
+					<LuChevronDown />
+				</Accordion.ItemIndicator>
+			)}
+		</Accordion.ItemTrigger>
+	)
 })
 
-interface AccordionItemContentProps extends Accordion.ItemContentProps {}
+type AccordionItemContentProps = {} & Accordion.ItemContentProps
 
 export const AccordionItemContent = forwardRef<
   HTMLDivElement,
   AccordionItemContentProps
 >(function AccordionItemContent(props, ref) {
-  return (
-    <Accordion.ItemContent>
-      <Accordion.ItemBody {...props} ref={ref} />
-    </Accordion.ItemContent>
-  )
+	return (
+		<Accordion.ItemContent>
+			<Accordion.ItemBody {...props} ref={ref} />
+		</Accordion.ItemContent>
+	)
 })
 
 export const AccordionRoot = Accordion.Root

src/components/ui/action-bar.tsx

@@ -2,37 +2,37 @@ import { ActionBar, Portal } from "@chakra-ui/react"
 import { CloseButton } from "./close-button"
 import { forwardRef } from "react"
 
-interface ActionBarContentProps extends ActionBar.ContentProps {
+type ActionBarContentProps = {
   portalled?: boolean
   portalRef?: React.RefObject<HTMLElement>
-}
+} & ActionBar.ContentProps
 
 export const ActionBarContent = forwardRef<
   HTMLDivElement,
   ActionBarContentProps
 >(function ActionBarContent(props, ref) {
-  const { children, portalled = true, portalRef, ...rest } = props
+	const { children, portalled = true, portalRef, ...rest } = props
 
-  return (
-    <Portal disabled={!portalled} container={portalRef}>
-      <ActionBar.Positioner>
-        <ActionBar.Content ref={ref} {...rest} asChild={false}>
-          {children}
-        </ActionBar.Content>
-      </ActionBar.Positioner>
-    </Portal>
-  )
+	return (
+		<Portal disabled={!portalled} container={portalRef}>
+			<ActionBar.Positioner>
+				<ActionBar.Content ref={ref} {...rest} asChild={false}>
+					{children}
+				</ActionBar.Content>
+			</ActionBar.Positioner>
+		</Portal>
+	)
 })
 
 export const ActionBarCloseTrigger = forwardRef<
   HTMLButtonElement,
   ActionBar.CloseTriggerProps
 >(function ActionBarCloseTrigger(props, ref) {
-  return (
-    <ActionBar.CloseTrigger {...props} asChild ref={ref}>
-      <CloseButton size="sm" />
-    </ActionBar.CloseTrigger>
-  )
+	return (
+		<ActionBar.CloseTrigger {...props} asChild ref={ref}>
+			<CloseButton size="sm" />
+		</ActionBar.CloseTrigger>
+	)
 })
 
 export const ActionBarRoot = ActionBar.Root

src/components/ui/alert.tsx

@@ -2,50 +2,50 @@ import { Alert as ChakraAlert } from "@chakra-ui/react"
 import { CloseButton } from "./close-button"
 import { forwardRef } from "react"
 
-export interface AlertProps extends Omit<ChakraAlert.RootProps, "title"> {
+export type AlertProps = {
   startElement?: React.ReactNode
   endElement?: React.ReactNode
   title?: React.ReactNode
   icon?: React.ReactElement
   closable?: boolean
   onClose?: () => void
-}
+} & Omit<ChakraAlert.RootProps, "title">
 
 export const Alert = forwardRef<HTMLDivElement, AlertProps>(
-  function Alert(props, ref) {
-    const {
-      title,
-      children,
-      icon,
-      closable,
-      onClose,
-      startElement,
-      endElement,
-      ...rest
-    } = props
-    return (
-      <ChakraAlert.Root ref={ref} {...rest}>
-        {startElement || <ChakraAlert.Indicator>{icon}</ChakraAlert.Indicator>}
-        {children ? (
-          <ChakraAlert.Content>
-            <ChakraAlert.Title>{title}</ChakraAlert.Title>
-            <ChakraAlert.Description>{children}</ChakraAlert.Description>
-          </ChakraAlert.Content>
-        ) : (
-          <ChakraAlert.Title flex="1">{title}</ChakraAlert.Title>
-        )}
-        {endElement}
-        {closable && (
-          <CloseButton
-            size="sm"
-            pos="relative"
-            top="-2"
-            insetEnd="-2"
-            alignSelf="flex-start"
-            onClick={onClose}
-          />
-        )}
-      </ChakraAlert.Root>
-    )
-  },
+	function Alert(props, ref) {
+		const {
+			title,
+			children,
+			icon,
+			closable,
+			onClose,
+			startElement,
+			endElement,
+			...rest
+		} = props
+		return (
+			<ChakraAlert.Root ref={ref} {...rest}>
+				{startElement || <ChakraAlert.Indicator>{icon}</ChakraAlert.Indicator>}
+				{children ? (
+					<ChakraAlert.Content>
+						<ChakraAlert.Title>{title}</ChakraAlert.Title>
+						<ChakraAlert.Description>{children}</ChakraAlert.Description>
+					</ChakraAlert.Content>
+				) : (
+					<ChakraAlert.Title flex="1">{title}</ChakraAlert.Title>
+				)}
+				{endElement}
+				{closable && (
+					<CloseButton
+						size="sm"
+						pos="relative"
+						top="-2"
+						insetEnd="-2"
+						alignSelf="flex-start"
+						onClick={onClose}
+					/>
+				)}
+			</ChakraAlert.Root>
+		)
+	},
 )