import { basename , extname } from 'path' ; import Icon from './icon' ; const customMappings = new Map < string , string > ( [ [ 'readme.md' , 'info' ] , [ 'gif' , 'image' ] , [ 'jpg' , 'image' ] , [ 'jpeg' , 'image' ] , [ 'png' , 'image' ] , [ 'svg' , 'image' ] , ] ) ; const findIconCustom = ( filename , extension ) => { const mapping = customMappings . get ( extension ) || customMappings . get ( filename ) ; return mapping && < Icon icon = { mapping } />; } ; const getIcon = ( path = '' ) => { const filename = basename ( path ) . toLowerCase ( ) ; const extension = extname ( filename ) . replace ( /^\./ , '' ) . toLowerCase ( ) ; return findIconCustom ( filename , extension ) || < Icon icon = { 'file-text' } />; } ; const featherStyle = { display : 'flex' , 'justify-content' : 'center' , 'align-items' : 'center' , 'margin-right' : '8px' , 'margin-left' : '3px' , 'font-size' : '1.1rem' , } ; export const Folder = ( < div style = { featherStyle } > < Icon icon = { 'folder' } /> < /div>); export const Terminal = ( < div style = { featherStyle } > < Icon icon = { 'terminal' } /> < /div>); export default ( fileTypeOrPath ) => ( < div style = { { display : 'flex' , color : '#ccc' , 'justify-content' : 'center' , 'align-items' : 'center' , 'margin-right' : '6px' , 'margin-top' : '2px' , 'font-size' : '1.5rem' , } } > { getIcon ( fileTypeOrPath ) } < /div>);