mirror of
https://github.com/chinchang/web-maker.git
synced 2025-06-06 17:45:26 +02:00
separate out fileicon comp n add more files
This commit is contained in:
Kushagra Gour
parent
9df492da9c
commit
36b9b527c7
99
src/components/FileIcon.jsx
Normal file
99
src/components/FileIcon.jsx
Normal file
@ -0,0 +1,99 @@
|
||||
import { h } from 'preact';
|
||||
|
||||
export function FileIcon({ file }) {
|
||||
let path;
|
||||
if (file.isFolder) {
|
||||
if (!file.children.length) {
|
||||
path = (
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z"
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
path = file.isCollapsed ? (
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z"
|
||||
/>
|
||||
) : (
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M19,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H10L12,6H19A2,2 0 0,1 21,8H21L4,8V18L6.14,10H23.21L20.93,18.5C20.7,19.37 19.92,20 19,20Z"
|
||||
/>
|
||||
);
|
||||
}
|
||||
} else {
|
||||
const type = file.name.match(/.(\w+)$/)[1];
|
||||
switch (type) {
|
||||
case 'html':
|
||||
path = (
|
||||
<path
|
||||
fill="rgb(225, 187, 21)"
|
||||
d="M14.6,16.6L19.2,12L14.6,7.4L16,6L22,12L16,18L14.6,16.6M9.4,16.6L4.8,12L9.4,7.4L8,6L2,12L8,18L9.4,16.6Z"
|
||||
/>
|
||||
);
|
||||
break;
|
||||
|
||||
case 'js':
|
||||
path = (
|
||||
<path
|
||||
fill="rgb(255, 165, 0)"
|
||||
d="M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86Z"
|
||||
/>
|
||||
);
|
||||
break;
|
||||
|
||||
case 'css':
|
||||
path = (
|
||||
<path
|
||||
fill="rgb(95, 158, 160)"
|
||||
d="M5,3L4.35,6.34H17.94L17.5,8.5H3.92L3.26,11.83H16.85L16.09,15.64L10.61,17.45L5.86,15.64L6.19,14H2.85L2.06,18L9.91,21L18.96,18L20.16,11.97L20.4,10.76L21.94,3H5Z"
|
||||
/>
|
||||
);
|
||||
break;
|
||||
|
||||
case 'md':
|
||||
case 'markdown':
|
||||
path = (
|
||||
<path
|
||||
fill="skyblue"
|
||||
d="M2,16V8H4L7,11L10,8H12V16H10V10.83L7,13.83L4,10.83V16H2M16,8H19V12H21.5L17.5,16.5L13.5,12H16V8Z"
|
||||
/>
|
||||
);
|
||||
break;
|
||||
|
||||
case 'jpg':
|
||||
case 'jpeg':
|
||||
case 'svg':
|
||||
case 'png':
|
||||
path = (
|
||||
<path
|
||||
fill="crimson"
|
||||
d="M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M13.96,12.29L11.21,15.83L9.25,13.47L6.5,17H17.5L13.96,12.29Z"
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case 'json':
|
||||
path = (
|
||||
<path
|
||||
fill="orange"
|
||||
d="M5,3H7V5H5V10A2,2 0 0,1 3,12A2,2 0 0,1 5,14V19H7V21H5C3.93,20.73 3,20.1 3,19V15A2,2 0 0,0 1,13H0V11H1A2,2 0 0,0 3,9V5A2,2 0 0,1 5,3M19,3A2,2 0 0,1 21,5V9A2,2 0 0,0 23,11H24V13H23A2,2 0 0,0 21,15V19A2,2 0 0,1 19,21H17V19H19V14A2,2 0 0,1 21,12A2,2 0 0,1 19,10V5H17V3H19M12,15A1,1 0 0,1 13,16A1,1 0 0,1 12,17A1,1 0 0,1 11,16A1,1 0 0,1 12,15M8,15A1,1 0 0,1 9,16A1,1 0 0,1 8,17A1,1 0 0,1 7,16A1,1 0 0,1 8,15M16,15A1,1 0 0,1 17,16A1,1 0 0,1 16,17A1,1 0 0,1 15,16A1,1 0 0,1 16,15Z"
|
||||
/>
|
||||
);
|
||||
break;
|
||||
default:
|
||||
path = (
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
return (
|
||||
<svg class="sidebar__file-icon" viewBox="0 0 24 24">
|
||||
{path}
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@ -1,90 +1,9 @@
|
||||
import { h, Component } from 'preact';
|
||||
import { FileIcon } from './FileIcon';
|
||||
|
||||
const ENTER_KEY = 13;
|
||||
const ESCAPE_KEY = 27;
|
||||
|
||||
function FileIcon({ file }) {
|
||||
let path;
|
||||
if (file.isFolder) {
|
||||
if (!file.children.length) {
|
||||
path = (
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z"
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
path = file.isCollapsed ? (
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z"
|
||||
/>
|
||||
) : (
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M19,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H10L12,6H19A2,2 0 0,1 21,8H21L4,8V18L6.14,10H23.21L20.93,18.5C20.7,19.37 19.92,20 19,20Z"
|
||||
/>
|
||||
);
|
||||
}
|
||||
} else {
|
||||
const type = file.name.match(/.(\w+)$/)[1];
|
||||
switch (type) {
|
||||
case 'html':
|
||||
path = (
|
||||
<path
|
||||
fill="rgb(225, 187, 21)"
|
||||
d="M14.6,16.6L19.2,12L14.6,7.4L16,6L22,12L16,18L14.6,16.6M9.4,16.6L4.8,12L9.4,7.4L8,6L2,12L8,18L9.4,16.6Z"
|
||||
/>
|
||||
);
|
||||
break;
|
||||
|
||||
case 'js':
|
||||
path = (
|
||||
<path
|
||||
fill="rgb(255, 165, 0)"
|
||||
d="M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86Z"
|
||||
/>
|
||||
);
|
||||
break;
|
||||
|
||||
case 'css':
|
||||
path = (
|
||||
<path
|
||||
fill="rgb(95, 158, 160)"
|
||||
d="M5,3L4.35,6.34H17.94L17.5,8.5H3.92L3.26,11.83H16.85L16.09,15.64L10.61,17.45L5.86,15.64L6.19,14H2.85L2.06,18L9.91,21L18.96,18L20.16,11.97L20.4,10.76L21.94,3H5Z"
|
||||
/>
|
||||
);
|
||||
break;
|
||||
|
||||
case 'md':
|
||||
case 'markdown':
|
||||
path = (
|
||||
<path
|
||||
fill="skyblue"
|
||||
d="M2,16V8H4L7,11L10,8H12V16H10V10.83L7,13.83L4,10.83V16H2M16,8H19V12H21.5L17.5,16.5L13.5,12H16V8Z"
|
||||
/>
|
||||
);
|
||||
break;
|
||||
|
||||
case 'jpg':
|
||||
case 'jpeg':
|
||||
case 'svg':
|
||||
case 'png':
|
||||
path = (
|
||||
<path
|
||||
fill="crimson"
|
||||
d="M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M13.96,12.29L11.21,15.83L9.25,13.47L6.5,17H17.5L13.96,12.29Z"
|
||||
/>
|
||||
);
|
||||
break;
|
||||
}
|
||||
}
|
||||
return (
|
||||
<svg class="sidebar__file-icon" viewBox="0 0 24 24">
|
||||
{path}
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function File({
|
||||
file,
|
||||
selectedFile,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user