refactor -> Move types closer to the comp and rm utils folders

ui/src/components/General/ClipboardButton/index.tsx

@@ -1,8 +1,14 @@
 import { ResponsiveButton } from "components/General/FormComponents";
 import style from "./ClipboardButton.module.scss";
-import { ClipboardButtonProps } from "./utils/types";
 import Icon from "components/General/Icon";
 
+interface ClipboardButtonProps {
+	copyToClipboard: (text: string) => void;
+	copied: boolean;
+	text: string;
+	label?: boolean;
+}
+
 const ClipboardButton: React.FC<ClipboardButtonProps> = ({
 	copyToClipboard,
 	copied,

ui/src/components/General/CodeEditor/index.tsx

@@ -4,7 +4,14 @@ import useMode from "hooks/useMode";
 import { Form } from "antd";
 import style from "./CodeEditor.module.scss";
 import ValidateStatus from "./components/ValidateStatus";
-import { CodeEditorProps } from "./utils/types";
+
+interface CodeEditorProps {
+	handleCode: (code: string | undefined) => void;
+	language: string;
+	code: string;
+	label: string;
+	status?: string;
+}
 
 const CodeEditor: React.FC<CodeEditorProps> = ({
 	handleCode,

ui/src/components/General/CodeHighlightWithCopy/index.tsx

@@ -5,10 +5,14 @@ import {
 	obsidian,
 	stackoverflowLight,
 } from "react-syntax-highlighter/dist/esm/styles/hljs";
-import { CodeHighlightWithCopyProps } from "./utils/types";
 import style from "./CodeHighlightwithCopy.module.scss";
 import useMode from "hooks/useMode";
 
+interface CodeHighlightWithCopyProps {
+	codeString: string;
+	language: string;
+}
+
 const CodeHighlightWithCopy: React.FC<CodeHighlightWithCopyProps> = ({
 	codeString,
 	language,

ui/src/components/General/ColorPickerWithInput/index.tsx

@@ -2,7 +2,13 @@ import { Card } from "antd";
 import { ResponsiveInputWithLabel } from "components/General/FormComponents";
 import { ColorPicker as CP } from "@mantine/core";
 import style from "./ColorPickerWithInput.module.scss";
-import { ColorPickerWithInputProps } from "./utils/constants";
+
+interface ColorPickerWithInputProps {
+	value: string;
+	label: string;
+	setValue: (e: React.ChangeEvent<HTMLInputElement>) => void;
+	setColor: (color: string) => void;
+}
 
 const ColorPickerWithInput: React.FC<ColorPickerWithInputProps> = ({
 	value,

ui/src/components/General/DropdownDownloadButton/index.tsx

@@ -1,8 +1,27 @@
 import React from "react";
 import { ResponsiveDropdownButton } from "components/General/FormComponents";
 import Icon from "components/General/Icon";
-import { DropdownDownloadButtonProps } from "./utils/types";
-import { IMAGE_TYPE, items } from "./utils/constants";
+import { MenuProps } from "antd";
+
+const IMAGE_TYPE = {
+	jpeg: ".jpeg",
+	png: ".png",
+};
+
+const items: MenuProps["items"] = [
+	{
+		label: "Download JPEG",
+		key: IMAGE_TYPE.jpeg,
+	},
+	{
+		label: "Download PNG",
+		key: IMAGE_TYPE.png,
+	},
+];
+
+interface DropdownDownloadButtonProps {
+	handleDownload: (val: string) => void;
+}
 
 const DropdownDownloadButton: React.FC<DropdownDownloadButtonProps> = ({
 	handleDownload,

ui/src/components/General/FormComponents/index.tsx

@@ -4,18 +4,66 @@ import {
 	Segmented,
 	Select,
 	Button as AntButton,
-	ButtonProps,
 	Dropdown,
 } from "antd";
-import React from "react";
+import React, { ReactNode } from "react";
 import withLabelSize from "components/Hoc/withLabelSize/withLabelSize";
-import {
-	InputComponentProps,
-	SegmentComponentProps,
-	SelectComponentProps,
-} from "./utils/types";
 import withSize from "components/Hoc/withSize/withSize";
 import { DropdownButtonProps } from "antd/es/dropdown";
+interface Option {
+	value: string;
+	label: string;
+}
+
+interface SelectComponentProps {
+	label?: string;
+	value?: string;
+	defaultActiveFirstOption?: boolean;
+	onSelect?: (value: string, option: Option) => void;
+	options: Option[];
+}
+
+interface SegmentComponentProps {
+	label?: string;
+	value: string;
+	onChange: (value: string | number) => void;
+	options: Option[];
+}
+
+type NumberType = {
+	type: "number";
+	value: number;
+	onChange: (value: number | null) => void;
+};
+
+type TextType = {
+	type: "text";
+	value: string;
+	onChange: (value: React.ChangeEvent<HTMLInputElement>) => void;
+};
+
+type InputComponentProps = {
+	label: string;
+	precision?: number;
+	min?: number;
+	max?: number;
+	step?: number;
+	tooltip?: string;
+	placeholder?: string;
+	addonBefore?: ReactNode;
+	addonAfter?: ReactNode;
+	style?: React.CSSProperties;
+} & (NumberType | TextType);
+
+interface ButtonProps {
+	children?: React.ReactNode;
+	disabled?: boolean;
+	onClick?: () => void;
+	className?: string;
+	icon?: React.ReactNode;
+	shape?: "circle" | "round" | undefined;
+	type?: "link" | "text" | "default" | "dashed" | "primary" | undefined;
+}
 
 const ResponsiveSelect: React.FC<SelectComponentProps> = (props) => {
 	return <Select {...props} />;

ui/src/components/General/ListItems/News/News.tsx

@@ -1,8 +1,14 @@
-import { NewsType } from "./utils/types";
 import { Card, Image, Skeleton, Space, Typography } from "antd";
-import { ListItemProps } from "components/RenderProps/List/utils/types";
+import { ListItemProps } from "components/RenderProps/List";
 const { Title } = Typography;
 
+export interface NewsType {
+	title: string;
+	content: string;
+	url: string;
+	image?: string;
+}
+
 const News: React.FC<ListItemProps<NewsType>> = ({
 	resource,
 	handleOnClick,

ui/src/components/General/ListItems/Resource/Resource.tsx

@@ -1,12 +1,26 @@
 import { Avatar, Card, Skeleton, Space, Tag, Typography } from "antd";
 import style from "./Resource.module.scss";
-import { ResourceType } from "./utils/types";
-import { ListItemProps } from "components/RenderProps/List/utils/types";
 import Clipboard from "components/RenderProps/Clipboard";
 import ClipboardButton from "components/General/ClipboardButton";
+import { ListItemProps } from "components/RenderProps/List";
 
 const { Title } = Typography;
 
+export type SocialName = "github" | "youtube" | "website";
+
+interface Social {
+	name: SocialName;
+	url: string;
+}
+
+export interface ResourceType {
+	name: string;
+	category: string;
+	subCategory: string[];
+	socials: Social[];
+	url: string;
+}
+
 const Resource: React.FC<ListItemProps<ResourceType>> = ({
 	resource,
 	handleOnClick,

ui/src/components/General/Notification/components/NotificationList.tsx

@@ -3,9 +3,17 @@ import { Button, Skeleton } from "antd";
 import { Typography, Tag, Dropdown } from "antd";
 import Icon from "components/General/Icon";
 import { classNames } from "utils/helper-functions/string";
-import { NotificationListProps } from "components/General/Notification/utils/types";
+import { Markdown } from "components/General/Notification/types";
 const { Title } = Typography;
 
+interface NotificationListProps {
+	notifications: Markdown[] | undefined;
+	showRedFlag: boolean;
+	isLoading: boolean;
+	isError: boolean;
+	handleRedFlagNotification: () => void;
+}
+
 const NotificationList: React.FC<NotificationListProps> = ({
 	notifications,
 	isLoading,

ui/src/components/General/Notification/index.tsx

@@ -3,14 +3,14 @@ import {
 	NOTIFICATION_KEY,
 	NOTIFICATION_RED_FLAG_KEY,
 	NOTIFICATION_URL,
-} from "./utils/constants";
+} from "./constants";
 import useGetNotifications from "hooks/useGetNotifications";
 import NotificationList from "./components/NotificationList";
 import {
 	getLocalstorageValue,
 	setLocalstorageValue,
 } from "utils/helper-functions/storage";
-import { compareDate } from "./utils/helper";
+import { compareDate } from "./helper";
 
 const Notification: React.FC = () => {
 	const { notifications, isLoading, isError } = useGetNotifications(