mirrors/Bitmagnet-Next-Web
1
0
Fork 0
mirror of https://github.com/journey-ad/Bitmagnet-Next-Web synced 2024-11-21 17:39:35 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

✨ Add subtitles icon

Browse Source
This commit is contained in:
journey-ad 2024-06-23 01:49:33 +08:00
parent 522c7eea58
commit 2d11985c18
4 changed files with 10 additions and 331 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
components/FileTypeIcon.tsx
View File

@ -1,41 +1,16 @@
"use client";
import {
FileTypeAudioIcon,
FileTypeBookIcon,
FileTypeFileIcon,
FileTypeFolderIcon,
FileTypeImageIcon,
FileTypeVideoIcon,
FileTypeWebIcon,
FileTypeArchiveIcon,
FileTypeDiskIcon,
FileTypeExecutableIcon,
} from "@/components/icons";
const fileTypeIcons = {
folder: <FileTypeFolderIcon />, // 📁
file: <FileTypeFileIcon />, // 📄,
image: <FileTypeImageIcon />, // 🖼️,
video: <FileTypeVideoIcon />, // 🎞️,
audio: <FileTypeAudioIcon />, // 🎵,
book: <FileTypeBookIcon />, // 📚,
web: <FileTypeWebIcon />, // 🌐,
archive: <FileTypeArchiveIcon />, // 📦️,
disk: <FileTypeDiskIcon />, // 💿,
executable: <FileTypeExecutableIcon />, // ⚙️,
};
const extensionMap = {
folder: "folder",
audio: "mp3,wav,ogg,m4a,flac,wma,aac,mid,midi,cue",
image: "jpg,jpeg,png,gif,bmp,svg,webp,tiff,ico,heic,raw,psd,ai",
video: "mp4,mkv,webm,avi,mov,flv,wmv,mpeg,mpg,3gp,3g2,m4v,rm,rmvb,ts,m2ts",
video: "mp4,mkv,webm,avi,mov,flv,wmv,mpeg,mpg,3gp,m4v,rm,rmvb,ts,m2ts,pmp",
book: "pdf,epub,fb2,mobi,azw,azw3,cbr,cbz,chm",
web: "torrent,html,htm,php,url,asp,aspx,jsp",
archive: "zip,rar,7z,gz,bz2,tar,xpi,rpm,cab,lzh,dmg,z,lz,xz,tgz,tbz2",
disk: "iso,img,vmdk,vdi",
executable: "exe,msi,apk,xpi,deb,bat,sh,bin,dll,so,cmd,com,run,vbs,app",
subtitle: "srt,sub,ssa,ass,vtt,rt,rtx,smi",
};
const extensionArr = Object.fromEntries(
@ -56,12 +31,6 @@ const getFileType = (extension?: string) => {
return "file"; // Default type for unknown file extensions
};
const getFileTypeIcon = (extension?: string) => {
const type = getFileType(extension);
return fileTypeIcons[type as keyof typeof fileTypeIcons];
};
export default function FileTypeIcon({
extension,
className,
@ -70,16 +39,11 @@ export default function FileTypeIcon({
className?: string;
}) {
const type = getFileType(extension);
// const icon = getFileTypeIcon(extension);
const defaultClassName = "file-type-icon";
if (!className) className = defaultClassName;
else className = `${defaultClassName} ${className}`;
return (
<span className={className} data-icon={type}>
{/* {icon} */}
</span>
);
return <span className={className} data-icon={type} />;
}

291
components/icons.tsx
View File

@ -258,297 +258,6 @@ export const InfoFilledIcon: React.FC<IconSvgProps> = ({
</svg>
);
export const FileTypeFolderIcon: React.FC<IconSvgProps> = (
props: IconSvgProps,
) => (
<svg
fill="none"
height="1em"
viewBox="0 0 32 32"
width="1em"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M15.385 7.39062L12.9075 4.915C12.3219 4.32875 11.5275 4 10.6987 4H4.125C2.95125 4 2 4.95125 2 6.125V13.5H12.985H30V10.1375C30 8.96375 29.0488 8.0125 27.875 8.0125H16.8875C16.3237 8.0125 15.7838 7.78875 15.385 7.39062Z"
fill="#FFB02E"
/>
<path
d="M27.875 30H4.125C2.95125 30 2 29.0545 2 27.8878V13.1122C2 11.9455 2.95125 11 4.125 11H27.875C29.0488 11 30 11.9455 30 13.1122V27.8878C30 29.0545 29.0488 30 27.875 30Z"
fill="#FCD53F"
/>
</svg>
);
export const FileTypeFileIcon: React.FC<IconSvgProps> = (
props: IconSvgProps,
) => (
<svg
fill="none"
height="1em"
viewBox="0 0 32 32"
width="1em"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M20.3432 2.29289C20.1556 2.10536 19.9013 2 19.6361 2H7C5.89543 2 5 2.89543 5 4V28C5 29.1046 5.89543 30 7 30H25C26.1046 30 27 29.1046 27 28V9.36394C27 9.09872 26.8946 8.84437 26.7071 8.65683L20.3432 2.29289Z"
fill="#B4ACBC"
/>
<path
d="M19.6821 3.00001L7 3C6.44772 3 6 3.44772 6 4V28C6 28.5523 6.44772 29 7 29L25 29C25.5523 29 26 28.5523 26 28V9.45333L19.6821 3.00001Z"
fill="#F3EEF8"
/>
<path
d="M9.5 12H22.5C22.7761 12 23 12.2239 23 12.5C23 12.7761 22.7761 13 22.5 13H9.5C9.22386 13 9 12.7761 9 12.5C9 12.2239 9.22386 12 9.5 12ZM9.5 15C9.22386 15 9 15.2239 9 15.5C9 15.7761 9.22386 16 9.5 16H22.5C22.7761 16 23 15.7761 23 15.5C23 15.2239 22.7761 15 22.5 15H9.5ZM9 18.5C9 18.2239 9.22386 18 9.5 18H22.5C22.7761 18 23 18.2239 23 18.5C23 18.7761 22.7761 19 22.5 19H9.5C9.22386 19 9 18.7761 9 18.5ZM9.5 21C9.22386 21 9 21.2239 9 21.5C9 21.7761 9.22386 22 9.5 22H17.5C17.7761 22 18 21.7761 18 21.5C18 21.2239 17.7761 21 17.5 21H9.5Z"
fill="#998EA4"
/>
<path
d="M26 9.45325H21.3892C20.4464 9.45325 19.6821 8.68896 19.6821 7.74614V3L26 9.45325Z"
fill="#CDC4D6"
/>
</svg>
);
export const FileTypeImageIcon: React.FC<IconSvgProps> = (
props: IconSvgProps,
) => (
<svg
fill="none"
height="1em"
viewBox="0 0 32 32"
width="1em"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path d="M2 2L16 5L30 2V30L16 27L2 30V2Z" fill="#D3883E" />
<path d="M30 2H2L16 16L30 2Z" fill="#F3AD61" />
<path d="M30 30H2L16 16L30 30Z" fill="#B97028" />
<path
d="M5 5H27V9.16406L18 22L5 19L5.00009 16L6.5 13L5.00018 10L5 5Z"
fill="#AEDDFF"
/>
<path
d="M24.6669 10.1139C25.2169 9.43442 26.0577 9 27 9V15C26.2275 15 25.5232 14.708 24.9914 14.2284C24.8747 15.7786 23.58 17 22 17C20.3431 17 19 15.6569 19 14C19 12.3431 20.3431 11 22 11C22.088 11 22.1751 11.0038 22.2611 11.0112C22.6053 10.4072 23.2551 10 24 10C24.2339 10 24.4583 10.0401 24.6669 10.1139Z"
fill="white"
/>
<path
d="M5 16V10C5.98142 10 6.85278 10.4713 7.40011 11.1999C7.56722 11.0744 7.77493 11 8 11C8.55228 11 9 11.4477 9 12C10.1046 12 11 12.8954 11 14C11 15.1046 10.1046 16 9 16H5Z"
fill="white"
/>
<path
d="M8 17.4999L5 19V27H27V12C25.5 12 24.5 12.5 23 14L18.5 18.5C17.5 19.5001 17 20 16 19.5L12 17.4999C10.4 16.6999 8.83333 16.9999 8 17.4999Z"
fill="#14A085"
/>
<path
d="M27 26.8115V27H5V26.8114C7.56366 24.232 11.538 22.5 16 22.5C20.4619 22.5 24.4363 24.232 27 26.8115Z"
fill="#96C34A"
/>
<path
d="M19.0561 10.1849C19.3177 10.0678 19.5 9.80518 19.5 9.5C19.5 9.19482 19.3177 8.93221 19.0561 8.8151C19.2241 8.58288 19.2507 8.26431 19.0981 8.00002C18.9455 7.73571 18.6563 7.59943 18.3712 7.62883C18.4006 7.34371 18.2643 7.05454 18 6.90195C17.7357 6.74936 17.4171 6.77591 17.1849 6.94393C17.0678 6.68229 16.8052 6.5 16.5 6.5C16.1948 6.5 15.9322 6.6823 15.8151 6.94394C15.5829 6.77591 15.2643 6.74936 15 6.90195C14.7357 7.05454 14.5994 7.3437 14.6288 7.62882C14.3437 7.59945 14.0546 7.73574 13.902 8.00002C13.7494 8.2643 13.7759 8.58286 13.9439 8.81508C13.6823 8.93218 13.5 9.1948 13.5 9.5C13.5 9.8052 13.6823 10.0678 13.9439 10.1849C13.7759 10.4171 13.7494 10.7357 13.9019 11C14.0545 11.2643 14.3437 11.4006 14.6288 11.3712C14.5994 11.6563 14.7357 11.9455 15 12.0981C15.2643 12.2507 15.5829 12.2241 15.8151 12.0561C15.9322 12.3177 16.1948 12.5 16.5 12.5C16.8052 12.5 17.0678 12.3177 17.1849 12.0561C17.4171 12.2241 17.7357 12.2507 18 12.0981C18.2643 11.9455 18.4006 11.6563 18.3712 11.3712C18.6563 11.4006 18.9455 11.2643 19.0981 11C19.2507 10.7357 19.2241 10.4171 19.0561 10.1849Z"
fill="#FF822D"
/>
<path
d="M18.7049 9.49989C18.7049 10.7174 17.7179 11.7044 16.5004 11.7044C15.2829 11.7044 14.2959 10.7174 14.2959 9.49989C14.2959 8.28239 15.2829 7.29541 16.5004 7.29541C17.7179 7.29541 18.7049 8.28239 18.7049 9.49989Z"
fill="#F9C23C"
/>
</svg>
);
export const FileTypeVideoIcon: React.FC<IconSvgProps> = (
props: IconSvgProps,
) => (
<svg
fill="none"
height="1em"
viewBox="0 0 32 32"
width="1em"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path d="M30 8.91016H2V22.9802H30V8.91016Z" fill="#83CBFF" />
<path
d="M30 10.02V5.82C30 5.37 29.63 5 29.18 5H2.82C2.37 5 2 5.37 2 5.82V10.02H5.74C6.8 10.02 7.66 10.88 7.66 11.94V20C7.66 21.06 6.8 21.92 5.74 21.92H2V26.12C2 26.57 2.37 26.94 2.82 26.94H29.18C29.63 26.94 30 26.57 30 26.12V21.92H26.26C25.2 21.92 24.34 21.06 24.34 20V11.94C24.34 10.88 25.2 10.02 26.26 10.02H30ZM20.11 21.92H11.89C10.83 21.92 9.97 21.06 9.97 20V11.94C9.97 10.88 10.83 10.02 11.89 10.02H20.11C21.17 10.02 22.03 10.88 22.03 11.94V20C22.03 21.06 21.17 21.92 20.11 21.92ZM5.77001 23.39C5.95001 23.39 6.09001 23.53 6.09001 23.71V25.09C6.09001 25.27 5.95001 25.41 5.77001 25.41H4.39001C4.21001 25.41 4.07001 25.27 4.07001 25.09V23.71C4.07001 23.53 4.21001 23.39 4.39001 23.39H5.77001ZM11.23 23.39C11.41 23.39 11.55 23.53 11.55 23.71V25.09C11.55 25.27 11.41 25.41 11.23 25.41H9.85003C9.67003 25.41 9.53003 25.27 9.53003 25.09V23.71C9.53003 23.53 9.67003 23.39 9.85003 23.39H11.23ZM15.31 23.39H16.69C16.87 23.39 17.01 23.53 17.01 23.71V25.09C17.01 25.27 16.87 25.41 16.69 25.41H15.31C15.13 25.41 14.99 25.27 14.99 25.09V23.71C14.99 23.53 15.13 23.39 15.31 23.39ZM22.15 23.39C22.32 23.39 22.47 23.53 22.47 23.71V25.09C22.47 25.27 22.33 25.41 22.15 25.41H20.77C20.59 25.41 20.45 25.27 20.45 25.09V23.71C20.45 23.53 20.59 23.39 20.77 23.39H22.15ZM26.23 23.39H27.61C27.78 23.39 27.93 23.53 27.93 23.71V25.09C27.93 25.27 27.79 25.41 27.61 25.41H26.23C26.05 25.41 25.91 25.27 25.91 25.09V23.71C25.91 23.53 26.05 23.39 26.23 23.39ZM4.39001 6.47998H5.77001C5.95001 6.47998 6.09001 6.62998 6.09001 6.79998V8.17998C6.09001 8.35998 5.95001 8.49998 5.77001 8.49998H4.39001C4.21001 8.49998 4.07001 8.35998 4.07001 8.17998V6.79998C4.07001 6.61998 4.21001 6.47998 4.39001 6.47998ZM9.85003 6.47998H11.23C11.41 6.47998 11.55 6.62998 11.55 6.79998V8.17998C11.55 8.35998 11.41 8.49998 11.23 8.49998H9.85003C9.67003 8.49998 9.53003 8.35998 9.53003 8.17998V6.79998C9.53003 6.61998 9.67003 6.47998 9.85003 6.47998ZM16.69 6.47998C16.87 6.47998 17.01 6.62998 17.01 6.79998V8.17998C17.01 8.35998 16.87 8.49998 16.69 8.49998H15.31C15.13 8.49998 14.99 8.35998 14.99 8.17998V6.79998C14.99 6.61998 15.13 6.47998 15.31 6.47998H16.69ZM20.77 6.47998H22.15C22.32 6.47998 22.47 6.62998 22.47 6.79998V8.17998C22.47 8.35998 22.33 8.49998 22.15 8.49998H20.77C20.59 8.49998 20.45 8.35998 20.45 8.17998V6.79998C20.45 6.61998 20.59 6.47998 20.77 6.47998ZM27.61 6.47998C27.78 6.47998 27.93 6.62998 27.93 6.79998V8.17998C27.93 8.35998 27.79 8.49998 27.61 8.49998H26.23C26.05 8.49998 25.91 8.35998 25.91 8.17998V6.79998C25.91 6.61998 26.05 6.47998 26.23 6.47998H27.61Z"
fill="#433B6B"
/>
</svg>
);
export const FileTypeAudioIcon: React.FC<IconSvgProps> = (
props: IconSvgProps,
) => (
<svg
fill="none"
height="1em"
viewBox="0 0 32 32"
width="1em"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M29.41 2.86894C29.41 2.33894 28.95 1.93894 28.43 2.00894L11.46 4.20894C11.03 4.26894 10.7 4.63894 10.7 5.07894V18.6889C10.11 18.4889 9.47 18.3689 8.81 18.3689C5.6 18.3689 3 20.9789 3 24.1889C3 27.3989 5.6 29.9989 8.81 29.9989C12.02 29.9989 14.62 27.3989 14.62 24.1889C14.62 24.0689 14.61 23.9389 14.61 23.8189V9.91894C14.61 9.52894 14.9 9.20894 15.28 9.15894L24.63 7.94894C25.09 7.88894 25.5 8.24894 25.5 8.70894V15.2389C24.9 15.0289 24.26 14.9189 23.6 14.9189C20.39 14.9189 17.79 17.5189 17.79 20.7289C17.79 23.9389 20.39 26.5389 23.6 26.5389C26.81 26.5389 29.41 23.9389 29.41 20.7289C29.41 20.7189 29.41 20.7189 29.41 20.7089V2.86894Z"
fill="#402A32"
/>
</svg>
);
export const FileTypeBookIcon: React.FC<IconSvgProps> = (
props: IconSvgProps,
) => (
<svg
fill="none"
height="1em"
viewBox="0 0 32 32"
width="1em"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M17.0454 27.2857H30V13C30 11.8954 29.1045 11 28 11H17.0454V27.2857Z"
fill="#00A6ED"
/>
<path d="M15.6818 27.9642H30V29.3214H15.6818V27.9642Z" fill="#D3D3D3" />
<path
d="M16.0227 11C15.4579 11 15 11.4557 15 12.0179V28.6429H15.6818C15.6818 28.2681 15.9871 27.9643 16.3636 27.9643H17.0455V11H16.0227Z"
fill="#0074BA"
/>
<path
d="M16.0227 27.2858C15.4579 27.2858 15 27.7415 15 28.3036V28.9822C15 29.5443 15.4579 30.0001 16.0227 30.0001H28.9773C29.4226 30.0001 29.8014 29.7168 29.9418 29.3215H16.3636C15.9871 29.3215 15.6818 29.0177 15.6818 28.6429C15.6818 28.2681 15.9871 27.9643 16.3636 27.9643H30V27.2858H16.0227Z"
fill="#0074BA"
/>
<path
d="M10.0454 23.2857H23V9C23 7.89543 22.1045 7 21 7H10.0454V23.2857Z"
fill="#CA0B4A"
/>
<path d="M8.68182 23.9642H23V25.3214H8.68182V23.9642Z" fill="#D3D3D3" />
<path
d="M9.02273 7C8.45789 7 8 7.45571 8 8.01786V24.6429H8.68182C8.68182 24.2681 8.98708 23.9643 9.36364 23.9643H10.0455V7H9.02273Z"
fill="#990838"
/>
<path
d="M9.02273 23.2858C8.45789 23.2858 8 23.7415 8 24.3036V24.9822C8 25.5443 8.45789 26.0001 9.02273 26.0001H21.9773C22.4226 26.0001 22.8014 25.7168 22.9418 25.3215H9.36364C8.98708 25.3215 8.68182 25.0177 8.68182 24.6429C8.68182 24.2681 8.98708 23.9643 9.36364 23.9643H23V23.2858H9.02273Z"
fill="#990838"
/>
<path
d="M4.04541 20.2857H17V6C17 4.89543 16.1045 4 15 4H4.04541V20.2857Z"
fill="#86D72F"
/>
<path d="M2.68182 20.9642H17V22.3214H2.68182V20.9642Z" fill="#D3D3D3" />
<path
d="M3.02273 4C2.45789 4 2 4.45571 2 5.01786V21.6429H2.68182C2.68182 21.2681 2.98708 20.9643 3.36364 20.9643H4.04545V4H3.02273Z"
fill="#44911B"
/>
<path
d="M3.02273 20.2858C2.45789 20.2858 2 20.7415 2 21.3036V21.9822C2 22.5443 2.45789 23.0001 3.02273 23.0001H15.9773C16.4226 23.0001 16.8014 22.7168 16.9418 22.3215H3.36364C2.98708 22.3215 2.68182 22.0177 2.68182 21.6429C2.68182 21.2681 2.98708 20.9643 3.36364 20.9643H17V20.2858H3.02273Z"
fill="#008463"
/>
</svg>
);
export const FileTypeWebIcon: React.FC<IconSvgProps> = (
props: IconSvgProps,
) => (
<svg
fill="none"
height="1em"
viewBox="0 0 32 32"
width="1em"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M2 16C2 8.28 8.28 2 16 2C23.72 2 30 8.28 30 16C30 23.72 23.72 30 16 30C8.28 30 2 23.72 2 16ZM4.04121 15H8.03076C8.13807 13.2596 8.52434 11.5753 9.1599 10H5.60892C4.74358 11.4936 4.191 13.1903 4.04121 15ZM10.0353 15H15V10H11.3456C10.6097 11.5521 10.1595 13.2429 10.0353 15ZM15 17H10.0353C10.1595 18.7571 10.6097 20.4479 11.3456 22H15V17ZM15 24H12.506C13.2065 25.0055 14.0427 25.9242 15 26.73V24ZM19.0053 27.6195C21.3304 27.0184 23.3836 25.7366 24.9392 24H21.8647C21.0976 25.3284 20.1372 26.548 19.0053 27.6195ZM22.8399 22H26.39V22.0019C27.256 20.5078 27.8089 18.8105 27.9588 17H23.9692C23.8619 18.7406 23.4756 20.4251 22.8399 22ZM21.9647 17H17V22H20.6544C21.3903 20.4479 21.8405 18.7571 21.9647 17ZM23.9692 15H27.9588C27.8089 13.1895 27.256 11.4922 26.39 9.99813V10H22.8401C23.4757 11.5753 23.8619 13.2596 23.9692 15ZM20.6544 10H17V15H21.9647C21.8405 13.2429 21.3903 11.5521 20.6544 10ZM21.8655 8H24.9392C23.3853 6.26532 21.3348 4.98441 19.0129 4.38249C20.1418 5.45442 21.0999 6.67328 21.8655 8ZM17 5.27004V8H19.494C18.7934 6.99455 17.9573 6.07585 17 5.27004ZM15 5.27001C14.0427 6.07583 13.2065 6.99454 12.506 8H15V5.27001ZM17 24V26.73C17.9573 25.9242 18.7935 25.0055 19.494 24H17ZM5.60892 22H9.16297C8.52579 20.4243 8.1385 18.7398 8.03086 17H4.04121C4.191 18.8097 4.74358 20.5064 5.60892 22ZM13.0014 27.6212C11.8688 26.5485 10.9075 25.3282 10.1396 24H7.0608C8.61787 25.7382 10.6736 27.0208 13.0014 27.6212ZM10.1345 8C10.9 6.67329 11.8581 5.45443 12.987 4.3825C10.6651 4.98443 8.61466 6.26533 7.0608 8H10.1345Z"
fill="#83CBFF"
/>
</svg>
);
export const FileTypeArchiveIcon: React.FC<IconSvgProps> = (
props: IconSvgProps,
) => (
<svg
fill="none"
height="1em"
viewBox="0 0 32 32"
width="1em"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M15.35 2.1425C15.67 1.9525 16.06 1.9525 16.37 2.1425L27.29 8.7825C27.55 8.9425 27.71 9.2325 27.71 9.5325L15.86 17.5L4 9.63243V9.5325C4 9.2325 4.16 8.9425 4.42 8.7925L15.35 2.1425Z"
fill="#F3C07B"
/>
<path
d="M15.856 16.2463L27.216 9.34633C27.2658 9.31663 27.3227 9.30067 27.3807 9.30007C27.4387 9.29946 27.4958 9.31425 27.5462 9.34291C27.5966 9.37158 27.6385 9.41307 27.6676 9.46321C27.6968 9.51335 27.7121 9.57032 27.7121 9.62831V21.9683C27.7122 22.2655 27.6359 22.5577 27.4905 22.8169C27.3452 23.0761 27.1356 23.2934 26.882 23.4483L16.2421 29.9083C16.215 29.9232 16.1855 29.9334 16.155 29.9384C16.1281 29.9464 16.1001 29.9501 16.072 29.9494C15.9585 29.9812 15.8398 29.9903 15.7227 29.9761C15.6056 29.9618 15.4926 29.9245 15.39 29.8664H15.396L13 19L15.856 16.2463Z"
fill="#FFCE7C"
/>
<path
d="M15.86 29.6224V16.2524L4.51 9.35243C4.28 9.21243 4 9.37243 4 9.63243V21.9724C4 22.5824 4.32 23.1424 4.83 23.4524L15.4 29.8724C15.6 30.0024 15.86 29.8524 15.86 29.6224Z"
fill="#E19747"
/>
<path
d="M14.5 26.7824V24.8224C14.5 24.5924 14.38 24.3824 14.19 24.2624L11.39 22.5724C11.2 22.4624 10.96 22.5924 10.96 22.8124V24.7724C10.96 25.0024 11.08 25.2124 11.27 25.3324L14.07 27.0224C14.26 27.1324 14.5 27.0024 14.5 26.7824Z"
fill="#D3D3D3"
/>
<path
d="M11.76 16.5525V13.7625V11.9926L8.48001 11.7725V14.9325C8.48001 15.0325 8.53001 15.1325 8.62001 15.1925L11.3 16.8225C11.5 16.9325 11.76 16.7925 11.76 16.5525Z"
fill="#8C5543"
/>
<path
d="M20.34 4.5625L8.48001 11.7725L11.76 13.7725L23.62 6.5725L20.34 4.5625Z"
fill="#A56953"
/>
</svg>
);
export const FileTypeDiskIcon: React.FC<IconSvgProps> = (
props: IconSvgProps,
) => (
<svg
fill="none"
height="1em"
viewBox="0 0 32 32"
width="1em"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M16 30C23.732 30 30 23.732 30 16C30 8.26801 23.732 2 16 2C8.26801 2 2 8.26801 2 16C2 23.732 8.26801 30 16 30ZM16 20C13.7909 20 12 18.2091 12 16C12 13.7909 13.7909 12 16 12C18.2091 12 20 13.7909 20 16C20 18.2091 18.2091 20 16 20Z"
fill="#B4ACBC"
/>
<path
d="M19.5354 12.4645C18.6305 11.5596 17.3805 11 15.9998 11C15.0969 11 14.2499 11.2393 13.5187 11.658L10.2924 6.01207C9.88168 5.29326 10.1284 4.36866 10.8895 4.04295C12.4581 3.37164 14.1856 3 15.9998 3C19.0504 3 21.8555 4.05073 24.0731 5.81002C24.7221 6.3249 24.7173 7.28249 24.1315 7.86827L19.5354 12.4645ZM12.4643 19.5355C13.3691 20.4404 14.6191 21 15.9998 21C16.9028 21 17.7498 20.7607 18.481 20.3419L21.7072 25.9879C22.118 26.7067 21.8713 27.6313 21.1102 27.9571C19.5415 28.6284 17.8141 29 15.9998 29C12.9493 29 10.1441 27.9493 7.92657 26.19C7.27758 25.6751 7.28233 24.7175 7.86812 24.1317L12.4643 19.5355Z"
fill="#F3EEF8"
/>
</svg>
);
export const FileTypeExecutableIcon: React.FC<IconSvgProps> = (
props: IconSvgProps,
) => (
<svg
fill="none"
height="1em"
viewBox="0 0 32 32"
width="1em"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M12.8472 3.83391C12.9336 2.79732 13.8001 2 14.8403 2H17.1597C18.1999 2 19.0664 2.79732 19.1528 3.83391L19.3882 6.6587C19.422 7.06373 19.8992 7.2614 20.2095 6.99887L22.3734 5.16789C23.1674 4.49599 24.3439 4.54493 25.0795 5.28045L26.7196 6.92056C27.4551 7.65608 27.504 8.8326 26.8321 9.62666L25.0012 11.7905C24.7386 12.1008 24.9363 12.578 25.3413 12.6118L28.1661 12.8472C29.2027 12.9336 30 13.8001 30 14.8403V17.1597C30 18.1999 29.2027 19.0664 28.1661 19.1528L25.3413 19.3882C24.9363 19.422 24.7386 19.8992 25.0012 20.2095L26.8321 22.3733C27.504 23.1674 27.4551 24.3439 26.7196 25.0794L25.0795 26.7196C24.3439 27.4551 23.1674 27.504 22.3734 26.8321L20.2095 25.0011C19.8992 24.7386 19.422 24.9363 19.3882 25.3413L19.1528 28.1661C19.0664 29.2027 18.1999 30 17.1597 30H14.8403C13.8001 30 12.9336 29.2027 12.8472 28.1661L12.6118 25.3413C12.578 24.9363 12.1008 24.7386 11.7905 25.0012L9.62666 26.8321C8.8326 27.504 7.65608 27.4551 6.92056 26.7196L5.28045 25.0795C4.54493 24.3439 4.496 23.1674 5.16789 22.3734L6.99888 20.2095C7.26141 19.8992 7.06373 19.422 6.65871 19.3882L3.83391 19.1528C2.79732 19.0664 2 18.1999 2 17.1597V14.8403C2 13.8001 2.79732 12.9336 3.83391 12.8472L6.65871 12.6118C7.06373 12.578 7.2614 12.1008 6.99888 11.7905L5.16789 9.62664C4.496 8.83258 4.54493 7.65606 5.28045 6.92054L6.92056 5.28043C7.65608 4.54491 8.8326 4.49597 9.62666 5.16787L11.7905 6.99884C12.1008 7.26137 12.578 7.06369 12.6118 6.65867L12.8472 3.83391ZM21 16C21 13.2386 18.7614 11 16 11C13.2386 11 11 13.2386 11 16C11 18.7614 13.2386 21 16 21C18.7614 21 21 18.7614 21 16Z"
fill="#B4ACBC"
/>
<path
d="M24 16C24 20.4183 20.4183 24 16 24C11.5817 24 8 20.4183 8 16C8 11.5817 11.5817 8 16 8C20.4183 8 24 11.5817 24 16ZM20.5 16C20.5 13.5147 18.4853 11.5 16 11.5C13.5147 11.5 11.5 13.5147 11.5 16C11.5 18.4853 13.5147 20.5 16 20.5C18.4853 20.5 20.5 18.4853 20.5 16Z"
fill="#998EA4"
/>
<path
d="M10.5 16C10.5 12.9624 12.9624 10.5 16 10.5C19.0376 10.5 21.5 12.9624 21.5 16C21.5 19.0376 19.0376 21.5 16 21.5C12.9624 21.5 10.5 19.0376 10.5 16ZM21 16C21 13.2386 18.7614 11 16 11C13.2386 11 11 13.2386 11 16C11 18.7614 13.2386 21 16 21C18.7614 21 21 18.7614 21 16Z"
fill="#CDC4D6"
/>
</svg>
);
export const MagnetIcon: React.FC<IconSvgProps> = (props: IconSvgProps) => (
<svg
height="1em"

7
styles/file-type-icon/icons.css
View File

@ -24,6 +24,7 @@
--icon-archive: url(./package.svg);
--icon-disk: url(./optical-disk.svg);
--icon-executable: url(./gear.svg);
--icon-subtitle: url(./scroll.svg);
}
.file-type-icon[data-icon="folder"] {
@ -64,4 +65,8 @@
.file-type-icon[data-icon="executable"] {
--icon: var(--icon-executable);
}
}
.file-type-icon[data-icon="subtitle"] {
--icon: var(--icon-subtitle);
}

1
styles/file-type-icon/scroll.svg Normal file
View File

@ -0,0 +1 @@
<svg width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.51 2.01H8.6V2H4.45v3h2.5v22.07c0 1.62 1.32 2.94 2.94 2.94h15.67c.77 0 1.39-.62 1.39-1.39V5.45c0-1.9-1.54-3.44-3.44-3.44Z" fill="#FFDEA7"/><path d="M10.86 29.99s2.24-.33 2.73-2.5c.07-.3.41-.52.81-.52h14.73c.52 0 .91.36.82.74-.23.89-.6 2.29-4.37 2.29-5.57 0-14.72-.01-14.72-.01Z" fill="#E19747"/><path d="M6.95 5c0-1.66-1.12-3-2.5-3-1.19 0-2.18 1-2.44 2.33-.06.34.15.67.44.67h4.5ZM10.42 11.87a.5.5 0 1 0 0 1H23.5a.5.5 0 0 0 0-1H10.42Zm-.44 3.46a.5.5 0 0 1 .5-.5H23.5a.5.5 0 0 1 0 1H10.48a.5.5 0 0 1-.5-.5Zm.5 2.52a.5.5 0 1 0 0 1H23.5a.5.5 0 0 0 0-1H10.48Zm.03 2.98a.5.5 0 1 0 0 1h7.96a.5.5 0 1 0 0-1h-7.96Z" fill="#D3883E"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 716 B