diff --git a/ui/public/mime/applause.mp3 b/ui/public/mime/applause.mp3 deleted file mode 100644 index ed9c859e..00000000 Binary files a/ui/public/mime/applause.mp3 and /dev/null differ diff --git a/ui/public/mime/data.json b/ui/public/mime/data.json new file mode 100644 index 00000000..6e526f6a --- /dev/null +++ b/ui/public/mime/data.json @@ -0,0 +1,400 @@ +[ + { + "name": ".aac", + "example": "AAC audio", + "code": { "content-type": "audio/aac" } + }, + { + "name": ".abw", + "example": "AbiWord document", + "code": { "content-type": "application/x-abiword" } + }, + { + "name": ".arc", + "example": "Archive document (multiple files embedded)", + "code": { "content-type": "application/x-freearc" } + }, + { + "name": ".avif", + "example": "AVIF image", + "code": { "content-type": "image/avif" } + }, + { + "name": ".avi", + "example": "AVI: Audio Video Interleave", + "code": { "content-type": "video/x-msvideo" } + }, + { + "name": ".azw", + "example": "Amazon Kindle eBook format", + "code": { "content-type": "application/vnd.amazon.ebook" } + }, + { + "name": ".bin", + "example": "Any kind of binary data", + "code": { "content-type": "application/octet-stream" } + }, + { + "name": ".bmp", + "example": "Windows OS/2 Bitmap Graphics", + "code": { "content-type": "image/bmp" } + }, + { + "name": ".bz", + "example": "BZip archive", + "code": { "content-type": "application/x-bzip" } + }, + { + "name": ".bz2", + "example": "BZip2 archive", + "code": { "content-type": "application/x-bzip2" } + }, + { + "name": ".cda", + "example": "CD audio", + "code": { "content-type": "application/x-cdf" } + }, + { + "name": ".csh", + "example": "C-Shell script", + "code": { "content-type": "application/x-csh" } + }, + { + "name": ".css", + "example": "Cascading Style Sheets (CSS)", + "code": { "content-type": "text/css" } + }, + { + "name": ".csv", + "example": "Comma-separated values (CSV)", + "code": { "content-type": "text/csv" } + }, + { + "name": ".doc", + "example": "Microsoft Word", + "code": { "content-type": "application/msword" } + }, + { + "name": ".docx", + "example": "Microsoft Word (OpenXML)", + "code": { + "content-type": "application/vnd.openxmlformats-officedocument.wordprocessingml.document" + } + }, + { + "name": ".eot", + "example": "MS Embedded OpenType fonts", + "code": { "content-type": "application/vnd.ms-fontobject" } + }, + { + "name": ".epub", + "example": "Electronic publication (EPUB)", + "code": { "content-type": "application/epub+zip" } + }, + { + "name": ".gz", + "example": "GZip Compressed Archive", + "code": { "content-type": "application/gzip" } + }, + { + "name": ".gif", + "example": "Graphics Interchange Format (GIF)", + "code": { "content-type": "image/gif" } + }, + { + "name": ".htm", + "example": "HyperText Markup Language (HTML)", + "code": { "content-type": "text/html" } + }, + { + "name": ".html", + "example": "HyperText Markup Language (HTML)", + "code": { "content-type": "text/html" } + }, + { + "name": ".ico", + "example": "Icon format", + "code": { "content-type": "image/vnd.microsoft.icon" } + }, + { + "name": ".ics", + "example": "iCalendar format", + "code": { "content-type": "text/calendar" } + }, + { + "name": ".jar", + "example": "Java Archive (JAR)", + "code": { "content-type": "application/java-archive" } + }, + { + "name": ".jpeg", + "example": "JPEG images", + "code": { "content-type": "image/jpeg" } + }, + { + "name": ".jpg", + "example": "JPEG images", + "code": { "content-type": "image/jpeg" } + }, + { + "name": ".js", + "example": "JavaScript", + "code": { + "content-type": "text/javascript (Specifications: HTML and RFC 9239)" + } + }, + { + "name": ".json", + "example": "JSON format", + "code": { "content-type": "application/json" } + }, + { + "name": ".jsonld", + "example": "JSON-LD format", + "code": { "content-type": "application/ld+json" } + }, + { + "name": ".mid", + "example": "Musical Instrument Digital Interface (MIDI)", + "code": { "content-type": "audio/midi, audio/x-midi" } + }, + { + "name": ".midi", + "example": "Musical Instrument Digital Interface (MIDI)", + "code": { "content-type": "audio/midi, audio/x-midi" } + }, + { + "name": ".mjs", + "example": "JavaScript module", + "code": { "content-type": "text/javascript" } + }, + { + "name": ".mp3", + "example": "MP3 audio", + "code": { "content-type": "audio/mpeg" } + }, + { + "name": ".mp4", + "example": "MP4 video", + "code": { "content-type": "video/mp4" } + }, + { + "name": ".mpeg", + "example": "MPEG Video", + "code": { "content-type": "video/mpeg" } + }, + { + "name": ".mpkg", + "example": "Apple Installer Package", + "code": { "content-type": "application/vnd.apple.installer+xml" } + }, + { + "name": ".odp", + "example": "OpenDocument presentation document", + "code": { + "content-type": "application/vnd.oasis.opendocument.presentation" + } + }, + { + "name": ".ods", + "example": "OpenDocument spreadsheet document", + "code": { + "content-type": "application/vnd.oasis.opendocument.spreadsheet" + } + }, + { + "name": ".odt", + "example": "OpenDocument text document", + "code": { "content-type": "application/vnd.oasis.opendocument.text" } + }, + { + "name": ".oga", + "example": "OGG audio", + "code": { "content-type": "audio/ogg" } + }, + { + "name": ".ogv", + "example": "OGG video", + "code": { "content-type": "video/ogg" } + }, + { + "name": ".ogx", + "example": "OGG", + "code": { "content-type": "application/ogg" } + }, + { + "name": ".opus", + "example": "Opus audio", + "code": { "content-type": "audio/opus" } + }, + { + "name": ".otf", + "example": "OpenType font", + "code": { "content-type": "font/otf" } + }, + { + "name": ".png", + "example": "Portable Network Graphics", + "code": { "content-type": "image/png" } + }, + { + "name": ".pdf", + "example": "Adobe Portable Document Format (PDF)", + "code": { "content-type": "application/pdf" } + }, + { + "name": ".php", + "example": "Hypertext Preprocessor (Personal Home Page)", + "code": { "content-type": "application/x-httpd-php" } + }, + { + "name": ".ppt", + "example": "Microsoft PowerPoint", + "code": { "content-type": "application/vnd.ms-powerpoint" } + }, + { + "name": ".pptx", + "example": "Microsoft PowerPoint (OpenXML)", + "code": { + "content-type": "application/vnd.openxmlformats-officedocument.presentationml.presentation" + } + }, + { + "name": ".rar", + "example": "RAR archive", + "code": { "content-type": "application/vnd.rar" } + }, + { + "name": ".rtf", + "example": "Rich Text Format (RTF)", + "code": { "content-type": "application/rtf" } + }, + { + "name": ".sh", + "example": "Bourne shell script", + "code": { "content-type": "application/x-sh" } + }, + { + "name": ".svg", + "example": "Scalable Vector Graphics (SVG)", + "code": { "content-type": "image/svg+xml" } + }, + { + "name": ".tar", + "example": "Tape Archive (TAR)", + "code": { "content-type": "application/x-tar" } + }, + { + "name": ".tif", + "example": "Tagged Image File Format (TIFF)", + "code": { "content-type": "image/tiff" } + }, + { + "name": ".tiff", + "example": "Tagged Image File Format (TIFF)", + "code": { "content-type": "image/tiff" } + }, + { + "name": ".ts", + "example": "MPEG transport stream", + "code": { "content-type": "video/mp2t" } + }, + { + "name": ".ttf", + "example": "TrueType Font", + "code": { "content-type": "font/ttf" } + }, + { + "name": ".txt", + "example": "Text, (generally ASCII or ISO 8859-n)", + "code": { "content-type": "text/plain" } + }, + { + "name": ".vsd", + "example": "Microsoft Visio", + "code": { "content-type": "application/vnd.visio" } + }, + { + "name": ".wav", + "example": "Waveform Audio Format", + "code": { "content-type": "audio/wav" } + }, + { + "name": ".weba", + "example": "WEBM audio", + "code": { "content-type": "audio/webm" } + }, + { + "name": ".webm", + "example": "WEBM video", + "code": { "content-type": "video/webm" } + }, + { + "name": ".webp", + "example": "WEBP image", + "code": { "content-type": "image/webp" } + }, + { + "name": ".woff", + "example": "Web Open Font Format (WOFF)", + "code": { "content-type": "font/woff" } + }, + { + "name": ".woff2", + "example": "Web Open Font Format (WOFF)", + "code": { "content-type": "font/woff2" } + }, + { + "name": ".xhtml", + "example": "XHTML", + "code": { "content-type": "application/xhtml+xml" } + }, + { + "name": ".xls", + "example": "Microsoft Excel", + "code": { "content-type": "application/vnd.ms-excel" } + }, + { + "name": ".xlsx", + "example": "Microsoft Excel (OpenXML)", + "code": { + "content-type": "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" + } + }, + { + "name": ".xml", + "example": "XML", + "code": { + "content-type": "application/xml" + } + }, + { + "name": ".xul", + "example": "XUL", + "code": { "content-type": "application/vnd.mozilla.xul+xml" } + }, + { + "name": ".zip", + "example": "ZIP archive", + "code": { "content-type": "application/zip" } + }, + { + "name": ".3gp", + "example": "3GPP audio/video container", + "code": { + "content-type": "video/3gpp; audio/3gpp if it doesn't contain video" + } + }, + { + "name": ".3g2", + "example": "3GPP2 audio/video container", + "code": { + "content-type": "video/3gpp2; audio/3gpp2 if it doesn't contain video" + } + }, + { + "name": ".7z", + "example": "7-zip archive", + "code": { "content-type": "application/x-7z-compressed" } + } +] diff --git a/ui/src/components/General/CodeHighlightWithCopy/index.tsx b/ui/src/components/General/CodeHighlightWithCopy/index.tsx index d43c1b85..b4af6481 100644 --- a/ui/src/components/General/CodeHighlightWithCopy/index.tsx +++ b/ui/src/components/General/CodeHighlightWithCopy/index.tsx @@ -28,7 +28,7 @@ const CodeHighlightWithCopy: React.FC = ({ wrapLines language={language} style={isDarkMode ? obsidian : stackoverflowLight} - customStyle={{ padding: "20px 0" }} + customStyle={{ padding: "20px" }} > {codeString} diff --git a/ui/src/pages/info/Mimetype/components/MimeSearchResult.tsx b/ui/src/pages/info/Mimetype/components/MimeSearchResult.tsx new file mode 100644 index 00000000..4eeedd23 --- /dev/null +++ b/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 = ({ + data, + isError, + isLoading, +}) => { + const [searchParams] = useSearchParams(); + + const searchQuery = searchParams.get("type") || ""; + + if (isError) { + return
Something went wrong!
; + } + + const list = data + ? searchQuery + ? filteredMimeType(data, searchQuery) + : data + : []; + return ( + + + + + ); +}; + +export default MimeSearchResult; diff --git a/ui/src/pages/info/Mimetype/components/SearchBar.tsx b/ui/src/pages/info/Mimetype/components/SearchBar.tsx new file mode 100644 index 00000000..bc7fcb7d --- /dev/null +++ b/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) => { + const value = e.target.value; + setQueryParams((prevParams) => ({ ...prevParams, q: value })); + }; + + return ( +
+ + + ); +}; + +export default MimeSearch; diff --git a/ui/src/pages/info/Mimetype/index.tsx b/ui/src/pages/info/Mimetype/index.tsx index 274566ec..e0e03ca6 100644 --- a/ui/src/pages/info/Mimetype/index.tsx +++ b/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 ( -
-
"Features"} - bordered - scroll={{ x: "calc(50%)" }} - /> - + ); }; diff --git a/ui/src/pages/info/Mimetype/utils/constants.tsx b/ui/src/pages/info/Mimetype/utils/constants.tsx index bd6d240b..834c6145 100644 --- a/ui/src/pages/info/Mimetype/utils/constants.tsx +++ b/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 ( -
- -
- ); - } - - if (value.endsWith(".mp3")) { - return ( -
- -
- ); - } - if (value.endsWith(".mp4")) { - return ( -
- -
- ); - } - return {value}; -}; - -// Define MIME_COLUMNS as a constant array of column configurations -const MIME_COLUMNS: ColumnsType = [ +// Column +const MIME_COLUMNS: ColumnsType = [ { title: "Name", dataIndex: "name", key: "name", + render: (value) => { + return {value}; + }, }, { title: "Example", dataIndex: "example", key: "example", - render: renderMIMEType, + render: (value) => { + return ( +
+

{value}

+
+ ); + }, }, { title: "Code", dataIndex: "code", key: "code", + width: 200, + render: (value) => { + return ( +
+ +
+ ); + }, }, ]; -// 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 }; diff --git a/ui/src/pages/info/Mimetype/utils/helper.ts b/ui/src/pages/info/Mimetype/utils/helper.ts new file mode 100644 index 00000000..17f50c6f --- /dev/null +++ b/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 }; diff --git a/ui/src/pages/info/Mimetype/utils/types.ts b/ui/src/pages/info/Mimetype/utils/types.ts index 38f11b10..afe5a723 100644 --- a/ui/src/pages/info/Mimetype/utils/types.ts +++ b/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 };