Skip to content

Commit

Permalink
Merge pull request #9 from akshayitzme/feat-file-icons
Browse files Browse the repository at this point in the history
feat: file icons
  • Loading branch information
MQ-xz authored Jul 12, 2023
2 parents b22092f + 60a3357 commit 6b8880f
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 2 deletions.
5 changes: 3 additions & 2 deletions src/components/explorer/File.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import PropTypes from "prop-types";
import { connect } from "react-redux";

import {
Avatar,
Card,
CardHeader,
Grid,
Expand All @@ -11,14 +12,14 @@ import {
MenuItem,
Typography,
} from "@mui/material";
import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
import MoreVertIcon from "@mui/icons-material/MoreVert";
import FileUploadIcon from "@mui/icons-material/FileUpload";
import FileDownloadIcon from "@mui/icons-material/FileDownload";

import client from "../../services/telegram";
import ProgressCircle from "../ProgressCircle";
import downloadFile from "../../utils/downloadFile";
import getFileIcon from "../../utils/getFileIcon";

// eslint-disable-next-line react-refresh/only-export-components
function File(props) {
Expand Down Expand Up @@ -55,7 +56,7 @@ function File(props) {
<Grid item key={id}>
<Card>
<CardHeader
avatar={<InsertDriveFileIcon />}
avatar={<Avatar height="48" src={getFileIcon(name)} />}
action={
<IconButton onClick={handleClick}>
<MoreVertIcon />
Expand Down
41 changes: 41 additions & 0 deletions src/utils/getFileIcon.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
export default function getFileIcon(filename) {
const fileExtension = filename.split('.').reverse()[0]

if (fileTypesMap.image.includes(fileExtension)) {
return iconsMap.image;
}

if (fileTypesMap.audio.includes(fileExtension)) {
return iconsMap.audio;
}

if (fileTypesMap.video.includes(fileExtension)) {
return iconsMap.video;
}

if (fileTypesMap.document.includes(fileExtension)) {
return iconsMap.document;
}

if (fileTypesMap.archive.includes(fileExtension)) {
return iconsMap.archive;
}
return iconsMap.misc;
}

const iconsMap = {
image: 'https://img.icons8.com/fluency/48/image.png',
audio: 'https://img.icons8.com/color/48/audio-file.png',
video: 'https://img.icons8.com/color/48/cinema---v1.png',
document: 'https://img.icons8.com/color/48/document--v1.png',
archive: 'https://img.icons8.com/color/48/archive.png',
misc: 'https://img.icons8.com/color/48/file.png'
}

const fileTypesMap = {
image: ['png', 'jpg', 'jpeg', 'gif', 'webp'],
audio: ['mp3', 'aac', 'wav'],
video: ['mp4', 'webm', 'mkv'],
document: ['pdf', 'doc', 'xls', 'xlsx'],
archive: ['iso', 'zip', 'rar', 'tar', 'tar.gz']
}

0 comments on commit 6b8880f

Please sign in to comment.