|
| 1 | +import './supportedFormats.css'; |
| 2 | +import React from "react"; |
| 3 | +import { |
| 4 | + BsFiletypeHtml, BsFiletypePdf, BsFiletypeXml, BsFiletypePpt, |
| 5 | + BsFiletypeXls, BsFiletypeDoc, BsFileEarmark, BsFileEarmarkText, |
| 6 | + BsFileEarmarkSlides, BsFileEarmarkRichtext, BsEnvelopePaper, BsApple |
| 7 | +} from "react-icons/bs"; |
| 8 | + |
| 9 | +const formats = [ |
| 10 | + "HTML", "EML", "PDF", "ODFXML", "iWork", "OOXML", "ODT", |
| 11 | + "ODF", "PRF", "PPT", "XLSB", "DOC", "XLS", "PAGES", "KEYNOTE" |
| 12 | +]; |
| 13 | + |
| 14 | +const getIcon = (format) => { |
| 15 | + const size = 32; |
| 16 | + const props = { size }; |
| 17 | + |
| 18 | + switch (format) { |
| 19 | + case "HTML": return <BsFiletypeHtml {...props} />; |
| 20 | + case "EML": return <BsEnvelopePaper {...props} />; |
| 21 | + case "PDF": return <BsFiletypePdf {...props} />; |
| 22 | + case "ODFXML": |
| 23 | + case "OOXML": return <BsFiletypeXml {...props} />; |
| 24 | + case "iWork": return <BsApple {...props} />; |
| 25 | + case "ODT": return <BsFileEarmarkText {...props} />; |
| 26 | + case "ODF": |
| 27 | + case "PRF": return <BsFileEarmark {...props} />; |
| 28 | + case "PPT": return <BsFiletypePpt {...props} />; |
| 29 | + case "XLSB": |
| 30 | + case "XLS": return <BsFiletypeXls {...props} />; |
| 31 | + case "DOC": return <BsFiletypeDoc {...props} />; |
| 32 | + case "PAGES": return <BsFileEarmarkRichtext {...props} />; |
| 33 | + case "KEYNOTE": return <BsFileEarmarkSlides {...props} />; |
| 34 | + default: return <BsFileEarmark {...props} />; |
| 35 | + } |
| 36 | +}; |
| 37 | + |
| 38 | +function SupportedFormats() { |
| 39 | + return ( |
| 40 | + <div className='docwire__supported-formats'> |
| 41 | + <div className="docwire__supported-formats-container"> |
| 42 | + <div className="docwire__formats-grid"> |
| 43 | + {formats.map((format, index) => ( |
| 44 | + <div key={index} className="docwire__format-item"> |
| 45 | + <div className="docwire__format-icon"> |
| 46 | + {getIcon(format)} |
| 47 | + </div> |
| 48 | + <h4 className="docwire__format-name">{format}</h4> |
| 49 | + </div> |
| 50 | + ))} |
| 51 | + </div> |
| 52 | + </div> |
| 53 | + </div> |
| 54 | + ) |
| 55 | + |
| 56 | +} |
| 57 | + |
| 58 | +export default SupportedFormats; |
0 commit comments