add mimetype

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

@@ -28,7 +28,7 @@ const CodeHighlightWithCopy: React.FC<CodeHighlightWithCopyPropsType> = ({
 				wrapLines
 				language={language}
 				style={isDarkMode ? obsidian : stackoverflowLight}
-				customStyle={{ padding: "20px 0" }}
+				customStyle={{ padding: "20px" }}
 			>
 				{codeString}
 			</SyntaxHighlighter>

ui/src/pages/info/Mimetype/components/MimeSearchResult.tsx

@@ -0,0 +1,42 @@
+import { Card, Table } from "antd";
+import React from "react";
+import MimeSearch from "./SearchBar";
+import { MIME_COLUMNS } from "../utils/constants";
+import { MimeSearchResultPropsType } from "../utils/types";
+import { useSearchParams } from "react-router-dom";
+import { filteredMimeType } from "../utils/helper";
+
+const MimeSearchResult: React.FC<MimeSearchResultPropsType> = ({
+	data,
+	isError,
+	isLoading,
+}) => {
+	const [searchParams] = useSearchParams();
+
+	const searchQuery = searchParams.get("type") || "";
+
+	if (isError) {
+		return <div>Something went wrong!</div>;
+	}
+
+	const list = data
+		? searchQuery
+			? filteredMimeType(data, searchQuery)
+			: data
+		: [];
+	return (
+		<Card>
+			<MimeSearch />
+			<Table
+				columns={MIME_COLUMNS}
+				dataSource={list}
+				pagination={false}
+				bordered
+				scroll={{ x: "calc(50%)" }}
+				loading={isLoading}
+			/>
+		</Card>
+	);
+};
+
+export default MimeSearchResult;

ui/src/pages/info/Mimetype/components/SearchBar.tsx

@@ -0,0 +1,36 @@
+import { useSearchParams } from "react-router-dom";
+import { useState, useEffect, ChangeEvent } from "react";
+import { ResponsiveInputWithLabel } from "components/General/FormComponents";
+import { Form } from "antd";
+
+const MimeSearch: React.FC = () => {
+	const [searchParams, setSearchParams] = useSearchParams();
+	const [queryParams, setQueryParams] = useState({
+		q: searchParams.get("type") || "",
+	});
+
+	const { q: searchQuery } = queryParams;
+
+	useEffect(() => {
+		setSearchParams(`?type=${searchQuery}`);
+	}, [searchQuery, setSearchParams]);
+
+	const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
+		const value = e.target.value;
+		setQueryParams((prevParams) => ({ ...prevParams, q: value }));
+	};
+
+	return (
+		<Form layout="vertical">
+			<ResponsiveInputWithLabel
+				label="Search bar"
+				type="text"
+				placeholder="Search by Mimetype..."
+				value={searchQuery}
+				onChange={handleSearchChange}
+			/>
+		</Form>
+	);
+};
+
+export default MimeSearch;

ui/src/pages/info/Mimetype/index.tsx

@@ -1,19 +1,16 @@
-import { Table } from "antd";
 import React from "react";
-import { MIME_COLUMNS, MIME_DATA } from "./utils/constants";
+
+import useFetchList from "lib/utils/hooks/useFetchList";
+import MimeSearchResult from "./components/MimeSearchResult";
 
 const Mimetype: React.FC = () => {
+	const { data, isError, isLoading } = useFetchList(
+		"mime",
+		"/mime/data.json"
+	);
+
 	return (
-		<div>
-			<Table
-				columns={MIME_COLUMNS}
-				dataSource={MIME_DATA}
-				pagination={false}
-				title={() => "Features"}
-				bordered
-				scroll={{ x: "calc(50%)" }}
-			/>
-		</div>
+		<MimeSearchResult isError={isError} isLoading={isLoading} data={data} />
 	);
 };
 

ui/src/pages/info/Mimetype/utils/constants.tsx

@@ -1,110 +1,46 @@
 import { ColumnsType } from "antd/es/table";
-import { MIME_TABLE_TYPE } from "./types";
+import { MimeTableDataType } from "./types";
+import { Tag } from "antd";
+import CodeHighlightWithCopy from "components/General/CodeHighlightWithCopy";
 
-// Define a function to render different MIME types
-const renderMIMEType = (value: string) => {
-	if (
-		value.endsWith(".jpg") ||
-		value.endsWith(".jpeg") ||
-		value.endsWith(".png") ||
-		value.endsWith(".avif")
-	) {
-		return (
-			<div>
-				<img
-					style={{
-						width: "80px",
-						height: "50px",
-						objectFit: "contain",
-					}}
-					src={value}
-					alt=""
-				/>
-			</div>
-		);
-	}
-
-	if (value.endsWith(".mp3")) {
-		return (
-			<div>
-				<audio src={value} controls></audio>
-			</div>
-		);
-	}
-	if (value.endsWith(".mp4")) {
-		return (
-			<div>
-				<video width={200} height={100} src={value} controls></video>
-			</div>
-		);
-	}
-	return <code>{value}</code>;
-};
-
-// Define MIME_COLUMNS as a constant array of column configurations
-const MIME_COLUMNS: ColumnsType<MIME_TABLE_TYPE> = [
+// Column
+const MIME_COLUMNS: ColumnsType<MimeTableDataType> = [
 	{
 		title: "Name",
 		dataIndex: "name",
 		key: "name",
+		render: (value) => {
+			return <Tag>{value}</Tag>;
+		},
 	},
 	{
 		title: "Example",
 		dataIndex: "example",
 		key: "example",
-		render: renderMIMEType,
+		render: (value) => {
+			return (
+				<div>
+					<p>{value}</p>
+				</div>
+			);
+		},
 	},
 	{
 		title: "Code",
 		dataIndex: "code",
 		key: "code",
+		width: 200,
+		render: (value) => {
+			return (
+				<div>
+					<CodeHighlightWithCopy
+						language="typescript"
+						codeString={JSON.stringify(value)}
+					/>
+				</div>
+			);
+		},
 	},
 ];
 
-// Define MIME_DATA as a constant array of data
-const MIME_DATA: MIME_TABLE_TYPE[] = [
-	{
-		key: "1",
-		name: ".json",
-		example: `{"x": 1}`,
-		code: "application/json",
-	},
-	{
-		key: "2",
-		name: ".jpeg or .jpg",
-		example: `/mime/image.jpg`,
-		code: "image/jpeg",
-	},
-	{
-		key: "3",
-		name: ".js",
-		example: `let x = 10;`,
-		code: "text/javascript",
-	},
-	{
-		key: "4",
-		name: ".mp3",
-		example: `/mime/applause.mp3`,
-		code: "audio/mpeg",
-	},
-	{
-		key: "5",
-		name: ".mp4",
-		example: `/mime/video.mp4`,
-		code: "video/mp4",
-	},
-	{
-		key: "6",
-		name: ".avif",
-		example: `/mime/avif.avif`,
-		code: "video/mp4",
-	},
-	{
-		key: "7",
-		name: ".mp4",
-		example: `/mime/pdf.png`,
-		code: "video/mp4",
-	},
-];
-
-export { MIME_COLUMNS, MIME_DATA };
+export { MIME_COLUMNS };

ui/src/pages/info/Mimetype/utils/helper.ts

@@ -0,0 +1,12 @@
+import { MimeTableDataType } from "./types";
+
+function filteredMimeType(items: MimeTableDataType[], searchQuery: string) {
+	const lowercaseSearchQuery = searchQuery.toLowerCase();
+	return items.filter(
+		(item) =>
+			item.name.includes(lowercaseSearchQuery) ||
+			item?.code?.["content-type"]?.includes(lowercaseSearchQuery)
+	);
+}
+
+export { filteredMimeType };

ui/src/pages/info/Mimetype/utils/types.ts

@@ -1,8 +1,13 @@
-interface MIME_TABLE_TYPE {
-	key: string;
+interface MimeTableDataType {
 	name: string;
 	example: string;
-	code: string;
+	code: { "content-type": string };
 }
 
-export type { MIME_TABLE_TYPE };
+interface MimeSearchResultPropsType {
+	data: MimeTableDataType[];
+	isLoading: boolean;
+	isError: boolean;
+}
+
+export type { MimeTableDataType, MimeSearchResultPropsType };