fix settings

interface/src/components/ColorPicker.d.ts

@@ -1,6 +0,0 @@
-interface ColorPickerProps {
-    color: string;
-    onChange: (color: string) => void;
-}
-declare const Picker: ({ color, onChange }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element;
-export default Picker;

interface/src/components/ColorPicker.tsx

@@ -1,10 +1,7 @@
+// @ts-expect-error There aren't any types for the below library
 import ColorPicker from 'react-best-gradient-color-picker';
-import React, { useState, useRef, useEffect } from 'react';
-
-interface ColorPickerProps {
-  color: string;
-  onChange: (color: string) => void;
-}
+import { useState, useRef, useEffect } from 'react';
+import type { ColorPickerProps } from '../types/ColorPicker';
 
 const Picker = ({ color, onChange }: ColorPickerProps) => {
   const [showPicker, setShowPicker] = useState<boolean>(false);

interface/src/components/Slider.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import "./Slider.css";
-interface Slider {
-    onValueChange: (value: number) => void;
-}
-declare const Slider: React.FC<Slider>;
-export default Slider;

interface/src/components/Slider.tsx

@@ -1,9 +1,6 @@
 import React, { useState } from 'react';
 import "./Slider.css";
-
-interface Slider {
-  onValueChange: (value: number) => void;
-}
+import type { Slider } from '../types/Slider';
 
 const Slider: React.FC<Slider> = ({ onValueChange }) => {
   const [sliderValue, setSliderValue] = useState(0);

interface/src/components/Switch.d.ts

@@ -1,7 +0,0 @@
-import "./Switch.css";
-interface SwitchProps {
-    onChange: (isOn: boolean) => void;
-    state: boolean;
-}
-export default function Switch(props: SwitchProps): import("react/jsx-runtime").JSX.Element;
-export {};

interface/src/components/Switch.tsx

@@ -1,10 +1,6 @@
 import { motion } from "framer-motion";
 import "./Switch.css";
-
-interface SwitchProps {
-  onChange: (isOn: boolean) => void;
-  state: boolean;
-}
+import type { SwitchProps } from "../types/Switch";
 
 export default function Switch(props: SwitchProps) {
   const toggleSwitch = () => {

interface/src/components/TabbedContainer.d.ts

@@ -1,11 +0,0 @@
-import React, { JSX } from 'react';
-interface Tab {
-    title: string;
-    content: JSX.Element;
-}
-interface TabbedContainerProps {
-    tabs: Tab[];
-    themeColor: string;
-}
-declare const TabbedContainer: React.FC<TabbedContainerProps>;
-export default TabbedContainer;

interface/src/components/TabbedContainer.tsx

@@ -1,15 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { motion } from 'framer-motion';
-
-interface Tab {
-  title: string;
-  content: JSX.Element;
-}
-
-interface TabbedContainerProps {
-  tabs: Tab[];
-  themeColor: string;
-}
+import type { TabbedContainerProps } from '../types/TabbedContainer';
 
 const TabbedContainer: React.FC<TabbedContainerProps> = ({ tabs, themeColor }) => {
   const [activeTab, setActiveTab] = useState(0);