jsx ---------- <div className="file-list"> <div className="file-list-header"> {uploadedFiles.map((file: any, index) => ( <div className="file-list-item" key={index}> <div className="file-info"> {file.name} <div className="close-icon" onClick={() => removeFile(file)}> Remove </div> </div> <div className="close-icon" onClick={() => removeFile(file)}> ✖ </div> </div> ))} </div> </div> css ----- .file-list { background: #E4FDFF; border-radius: 30px; } .file-list-item { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; font-family: 'Basis Grotesque Arabic Pro'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 18px; text-transform: capitalize; color: #1B202D; } .file-info { display: flex; align-items: center; } .close-icon { cursor: pointer; font-family: 'Basis Grotesque Arabic Pro'; font-style: normal; font-weight: 500; font-size: 14px; line-height: 18px; text-decoration-line: underline; color: #1B202D; margin-left: 8px; } .close-icon:last-child { margin-left: 0; }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter