Mimetype 1.0

ui/src/components/Layouts/Menu/utils/constants.ts

@@ -222,6 +222,19 @@ export const MENU_ITEMS = [
 			},
 		],
 	},
+	{
+		name: "Info",
+		icon: "BadgeInfo",
+		show: true,
+		children: [
+			{
+				name: "Mimetype",
+				url: "/info/mimetype",
+				icon: "ArrowLeftRight",
+				show: true,
+			},
+		],
+	},
 ];
 
 const ITEMS: MenuProps["items"] = [

ui/src/pages/Converter/Base64/tests/base64.test.tsx

@@ -8,16 +8,6 @@ describe("BASE64", () => {
 		render(<Base64 />);
 	});
 
-	test("buttons", () => {
-		render(<Base64 />);
-
-		const textClearButtonElement = screen.getByRole("clear_text");
-		expect(textClearButtonElement).toBeInTheDocument();
-
-		const base64ClearButtonElement = screen.getByRole("clear_base64");
-		expect(base64ClearButtonElement).toBeInTheDocument();
-	});
-
 	test("textbox", async () => {
 		render(<Base64 />);
 
@@ -29,10 +19,5 @@ describe("BASE64", () => {
 		await user.type(textInputArea, TEXT);
 
 		expect(textInputArea).toHaveValue(TEXT);
-
-		const textClearButtonElement = screen.getByRole("clear_text");
-		await user.click(textClearButtonElement);
-
-		expect(textInputArea).toHaveValue("");
 	});
 });

ui/src/pages/Routes/utils/constant.tsx

@@ -32,6 +32,7 @@ import {
 	YouTube,
 	Avatar,
 	PageNotFound,
+	Mimetype,
 } from "pages/pages";
 
 const routes: Route[] = [
@@ -175,6 +176,11 @@ const routes: Route[] = [
 		title: "Text Editor",
 		component: TextEditor,
 	},
+	{
+		path: "/info/mimetype",
+		title: "Mimetype",
+		component: Mimetype,
+	},
 	{
 		path: "/",
 		title: "Dashboard",

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

@@ -0,0 +1,20 @@
+import { Table } from "antd";
+import React from "react";
+import { MIME_COLUMNS, MIME_DATA } from "./utils/constants";
+
+const Mimetype: React.FC = () => {
+	return (
+		<div>
+			<Table
+				columns={MIME_COLUMNS}
+				dataSource={MIME_DATA}
+				pagination={false}
+				title={() => "Features"}
+				bordered
+				scroll={{ x: "calc(50%)" }}
+			/>
+		</div>
+	);
+};
+
+export default Mimetype;

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

@@ -0,0 +1,110 @@
+import { ColumnsType } from "antd/es/table";
+import { MIME_TABLE_TYPE } from "./types";
+
+// 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> = [
+	{
+		title: "Name",
+		dataIndex: "name",
+		key: "name",
+	},
+	{
+		title: "Example",
+		dataIndex: "example",
+		key: "example",
+		render: renderMIMEType,
+	},
+	{
+		title: "Code",
+		dataIndex: "code",
+		key: "code",
+	},
+];
+
+// 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 };

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

@@ -0,0 +1,8 @@
+interface MIME_TABLE_TYPE {
+	key: string;
+	name: string;
+	example: string;
+	code: string;
+}
+
+export type { MIME_TABLE_TYPE };

ui/src/pages/pages.ts

@@ -40,6 +40,8 @@ const TableOfContent = lazy(() => import("pages/Markdown/TableOfContent"));
 
 const TextEditor = lazy(() => import("pages/Text/TextEditor"));
 
+const Mimetype = lazy(() => import("pages/info/Mimetype"));
+
 const News = lazy(() => import("pages/News"));
 
 const PageNotFound = lazy(() => import("pages/PageNotFound"));
@@ -76,5 +78,6 @@ export {
 	TvSeries,
 	UiUx,
 	YouTube,
+	Mimetype,
 	PageNotFound,
 };