Skip to content

Commit 1202e7a

Browse files
ppapman1ppapman1
committed
feat: add files page (WIP)
1 parent 3ce96d0 commit 1202e7a

File tree

8 files changed

+886
-49
lines changed

8 files changed

+886
-49
lines changed

‎src/App.jsx

+2
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import BanList from './routes/BanList';
2727
import Traffic from './routes/Traffic';
2828
import Console from './routes/Console';
2929
import Settings from './routes/Settings';
30+
import Files from './routes/Files';
3031
import Update from './routes/Update';
3132

3233
Sentry.init({
@@ -84,6 +85,7 @@ const App = () => {
8485
<Route path='banlist' element={<BanList />} />
8586
<Route path='traffic' element={<Traffic />} />
8687
<Route path='console' element={<Console />} />
88+
<Route path='files/*' element={<Files />} />
8789
</Route>
8890
</Route>
8991

‎src/assets/16x-icons.jsx

+41-5
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,46 @@ const XIcon = (props) => (
3636
);
3737

3838
const PlusIcon = (props) => (
39-
<svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="none" {...props}>
40-
<path d="M3 8H13" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"/>
41-
<path d="M8 3L8 13" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"/>
39+
<svg
40+
xmlns='http://www.w3.org/2000/svg'
41+
width={16}
42+
height={16}
43+
viewBox='0 0 16 16'
44+
fill='none'
45+
{...props}
46+
>
47+
<path
48+
d='M3 8H13'
49+
stroke='currentColor'
50+
strokeWidth={2}
51+
strokeLinecap='round'
52+
strokeLinejoin='round'
53+
/>
54+
<path
55+
d='M8 3L8 13'
56+
stroke='currentColor'
57+
strokeWidth={2}
58+
strokeLinecap='round'
59+
strokeLinejoin='round'
60+
/>
4261
</svg>
43-
)
62+
);
63+
64+
const ArrowRightWithoutShaftIcon = (props) => (
65+
<svg
66+
xmlns='http://www.w3.org/2000/svg'
67+
width={16}
68+
height={16}
69+
fill='none'
70+
{...props}
71+
>
72+
<path
73+
stroke='currentColor'
74+
strokeLinecap='round'
75+
strokeWidth={2}
76+
d='m6 4 3.293 3.293a1 1 0 0 1 0 1.414L6 12'
77+
/>
78+
</svg>
79+
);
4480

45-
export { ArrowRightAndLeftIcon, XIcon, PlusIcon };
81+
export { ArrowRightAndLeftIcon, XIcon, PlusIcon, ArrowRightWithoutShaftIcon };

‎src/assets/24x-icons.jsx

+280-20
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,15 @@ const HammerIcon = (props) => (
115115
xmlns='http://www.w3.org/2000/svg'
116116
{...props}
117117
>
118-
<rect x='-1.41421' width='12' height='7.00133' rx='1' transform='matrix(-0.707107 -0.707107 -0.707107 0.707107 20.5858 9.89941)' stroke='currentColor' stroke-width={2}/>
118+
<rect
119+
x='-1.41421'
120+
width='12'
121+
height='7.00133'
122+
rx='1'
123+
transform='matrix(-0.707107 -0.707107 -0.707107 0.707107 20.5858 9.89941)'
124+
stroke='currentColor'
125+
stroke-width={2}
126+
/>
119127
<path
120128
opacity='0.4'
121129
d='M10 14L3 21'
@@ -467,34 +475,278 @@ const SendAndReceiveIcon = (props) => (
467475
fill='none'
468476
{...props}
469477
>
470-
<path d='M4 7L8 3L12 7' stroke='currentColor' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round'/>
471-
<path d='M8 16L8 3' stroke='currentColor' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round'/>
478+
<path
479+
d='M4 7L8 3L12 7'
480+
stroke='currentColor'
481+
strokeWidth={2}
482+
strokeLinecap='round'
483+
strokeLinejoin='round'
484+
/>
485+
<path
486+
d='M8 16L8 3'
487+
stroke='currentColor'
488+
strokeWidth={2}
489+
strokeLinecap='round'
490+
strokeLinejoin='round'
491+
/>
472492
<g opacity={0.4}>
473-
<path d='M12 17L16 21L20 17' stroke='currentColor' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round'/>
474-
<path d='M16 8L16 21' stroke='currentColor' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round'/>
493+
<path
494+
d='M12 17L16 21L20 17'
495+
stroke='currentColor'
496+
strokeWidth={2}
497+
strokeLinecap='round'
498+
strokeLinejoin='round'
499+
/>
500+
<path
501+
d='M16 8L16 21'
502+
stroke='currentColor'
503+
strokeWidth={2}
504+
strokeLinecap='round'
505+
strokeLinejoin='round'
506+
/>
475507
</g>
476508
</svg>
477509
);
478510

479511
const SendIcon = (props) => (
480-
<svg xmlns='http://www.w3.org/2000/svg' width={24} height={24} fill='none' {...props}>
481-
<rect opacity={0.4} x={6} y={6} width={8} height={2} fill='currentColor'/>
482-
<rect opacity={0.4} x={6} y={10} width={8} height={2} fill='currentColor'/>
483-
<circle opacity={0.4} cx={10} cy={16} r={2} fill='currentColor'/>
484-
<path fillRule='evenodd' clipRule='evenodd' d='M4 4H16V9H18V4C18 2.89543 17.1046 2 16 2H4C2.89543 2 2 2.89543 2 4V20C2 21.1046 2.89543 22 4 22H14V20H4V4Z' fill='currentColor'/>
485-
<path d='M15 15L18 12L21 15' stroke='#3B86F8' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round'/>
486-
<path d='M18 13V21' stroke='#3B86F8' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round'/>
512+
<svg
513+
xmlns='http://www.w3.org/2000/svg'
514+
width={24}
515+
height={24}
516+
fill='none'
517+
{...props}
518+
>
519+
<rect opacity={0.4} x={6} y={6} width={8} height={2} fill='currentColor' />
520+
<rect opacity={0.4} x={6} y={10} width={8} height={2} fill='currentColor' />
521+
<circle opacity={0.4} cx={10} cy={16} r={2} fill='currentColor' />
522+
<path
523+
fillRule='evenodd'
524+
clipRule='evenodd'
525+
d='M4 4H16V9H18V4C18 2.89543 17.1046 2 16 2H4C2.89543 2 2 2.89543 2 4V20C2 21.1046 2.89543 22 4 22H14V20H4V4Z'
526+
fill='currentColor'
527+
/>
528+
<path
529+
d='M15 15L18 12L21 15'
530+
stroke='#3B86F8'
531+
strokeWidth={2}
532+
strokeLinecap='round'
533+
strokeLinejoin='round'
534+
/>
535+
<path
536+
d='M18 13V21'
537+
stroke='#3B86F8'
538+
strokeWidth={2}
539+
strokeLinecap='round'
540+
strokeLinejoin='round'
541+
/>
487542
</svg>
488543
);
489544

490545
const ReceiveIcon = (props) => (
491-
<svg xmlns='http://www.w3.org/2000/svg' width={24} height={24} fill='none' {...props}>
492-
<rect opacity={0.4} x={7} y={6} width={8} height={2} fill='currentColor'/>
493-
<rect opacity={0.4} x={7} y={10} width={8} height={2} fill='currentColor'/>
494-
<circle opacity={0.4} cx={11} cy={16} r={2} fill='currentColor'/>
495-
<path fillRule='evenodd' clipRule='evenodd' d='M5 4H17V9H19V4C19 2.89543 18.1046 2 17 2H5C3.89543 2 3 2.89543 3 4V20C3 21.1046 3.89543 22 5 22H13V20H5V4Z' fill='black'/>
496-
<path d='M15 18L18 21L21 18' stroke='#389287' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round'/>
497-
<path d='M18 20V12' stroke='#389287' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round'/>
546+
<svg
547+
xmlns='http://www.w3.org/2000/svg'
548+
width={24}
549+
height={24}
550+
fill='none'
551+
{...props}
552+
>
553+
<rect opacity={0.4} x={7} y={6} width={8} height={2} fill='currentColor' />
554+
<rect opacity={0.4} x={7} y={10} width={8} height={2} fill='currentColor' />
555+
<circle opacity={0.4} cx={11} cy={16} r={2} fill='currentColor' />
556+
<path
557+
fillRule='evenodd'
558+
clipRule='evenodd'
559+
d='M5 4H17V9H19V4C19 2.89543 18.1046 2 17 2H5C3.89543 2 3 2.89543 3 4V20C3 21.1046 3.89543 22 5 22H13V20H5V4Z'
560+
fill='black'
561+
/>
562+
<path
563+
d='M15 18L18 21L21 18'
564+
stroke='#389287'
565+
strokeWidth={2}
566+
strokeLinecap='round'
567+
strokeLinejoin='round'
568+
/>
569+
<path
570+
d='M18 20V12'
571+
stroke='#389287'
572+
strokeWidth={2}
573+
strokeLinecap='round'
574+
strokeLinejoin='round'
575+
/>
576+
</svg>
577+
);
578+
579+
const FolderIcon = (props) => (
580+
<svg
581+
xmlns='http://www.w3.org/2000/svg'
582+
width={24}
583+
height={24}
584+
fill='none'
585+
{...props}
586+
>
587+
<path
588+
stroke='currentColor'
589+
strokeWidth={2}
590+
d='M3 4v5h7.5l3-3a2 2 0 0 0-2-2H3Z'
591+
opacity={0.4}
592+
/>
593+
<path
594+
stroke='currentColor'
595+
strokeWidth={2}
596+
d='M10 9h.414l.293-.293L13.414 6H18a3 3 0 0 1 3 3v11H3V9h7Z'
597+
/>
598+
</svg>
599+
);
600+
601+
const FilledFolderIcon = (props) => (
602+
<svg
603+
xmlns='http://www.w3.org/2000/svg'
604+
width={24}
605+
height={24}
606+
fill='none'
607+
{...props}
608+
>
609+
<path
610+
stroke='currentColor'
611+
strokeWidth={2}
612+
d='M3 4v5h7.5l3-3a2 2 0 0 0-2-2H3Z'
613+
opacity={0.4}
614+
/>
615+
<path fill='currentColor' d='M18 5h-5l-3 3H2v13h20V9a4 4 0 0 0-4-4Z' />
616+
</svg>
617+
);
618+
619+
const FileIcon = (props) => (
620+
<svg
621+
xmlns='http://www.w3.org/2000/svg'
622+
fill='none'
623+
width={24}
624+
height={24}
625+
{...props}
626+
>
627+
<path
628+
fill='currentColor'
629+
fillRule='evenodd'
630+
d='M18 11v9H6V4h6V2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-9h-2Z'
631+
clipRule='evenodd'
632+
/>
633+
<path fill='currentColor' d='M14 9h6l-6-7v7Z' opacity={0.4} />
634+
</svg>
635+
);
636+
637+
const ArrowLeftIcon = (props) => (
638+
<svg
639+
xmlns='http://www.w3.org/2000/svg'
640+
width={24}
641+
height={24}
642+
fill='none'
643+
{...props}
644+
>
645+
<path
646+
stroke='currentColor'
647+
strokeLinecap='round'
648+
strokeWidth={2}
649+
d='m9 6-5.704 5.265a1 1 0 0 0 0 1.47L9 18'
650+
/>
651+
<rect width={19} height={2} x={3} y={11} fill='currentColor' rx={1} />
652+
</svg>
653+
);
654+
655+
const ArrowRightIcon = (props) => (
656+
<svg
657+
xmlns='http://www.w3.org/2000/svg'
658+
width={24}
659+
height={24}
660+
fill='none'
661+
{...props}
662+
>
663+
<path
664+
stroke='currentColor'
665+
strokeLinecap='round'
666+
strokeWidth={2}
667+
d='m16 18 5.704-5.265a1 1 0 0 0 0-1.47L16 6'
668+
/>
669+
<rect
670+
width={19}
671+
height={2}
672+
x={22}
673+
y={13}
674+
fill='currentColor'
675+
rx={1}
676+
transform='rotate(-180 22 13)'
677+
/>
678+
</svg>
679+
);
680+
681+
const PlusInCircleIcon = (props) => (
682+
<svg
683+
xmlns='http://www.w3.org/2000/svg'
684+
width={24}
685+
height={24}
686+
fill='none'
687+
{...props}
688+
>
689+
<circle
690+
cx={12}
691+
cy={12}
692+
r={10}
693+
stroke='currentColor'
694+
strokeWidth={2}
695+
opacity={0.4}
696+
/>
697+
<rect width={12} height={2} x={6} y={11} fill='currentColor' rx={1} />
698+
<rect
699+
width={12}
700+
height={2}
701+
x={13}
702+
y={6}
703+
fill='currentColor'
704+
rx={1}
705+
transform='rotate(90 13 6)'
706+
/>
707+
</svg>
708+
);
709+
710+
const RenameIcon = (props) => (
711+
<svg
712+
xmlns='http://www.w3.org/2000/svg'
713+
width={24}
714+
height={24}
715+
fill='none'
716+
{...props}
717+
>
718+
<path
719+
fill='currentColor'
720+
fillRule='evenodd'
721+
d='M13 6H3a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h10v-2H3V8h10V6Zm6 10h2V8h-2V6h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2v-2Z'
722+
clipRule='evenodd'
723+
opacity={0.4}
724+
/>
725+
<path fill='currentColor' d='M15 4h2v16h-2zM19 2v2h-6V2zM19 20v2h-6v-2z' />
726+
</svg>
727+
);
728+
729+
const TrashCanIcon = (props) => (
730+
<svg
731+
xmlns='http://www.w3.org/2000/svg'
732+
width={24}
733+
height={24}
734+
fill='none'
735+
{...props}
736+
>
737+
<rect width={18} height={2} x={3} y={3} fill='currentColor' rx={1} />
738+
<rect width={4} height={4} x={10} y={1} fill='currentColor' rx={2} />
739+
<path
740+
fill='currentColor'
741+
fillRule='evenodd'
742+
d='M19 20V8H5v12h14ZM5 6H3v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6H5Z'
743+
clipRule='evenodd'
744+
/>
745+
<path
746+
fill='currentColor'
747+
d='M7 10h2v8H7v-8ZM11 10h2v8h-2zM15 10h2v8h-2z'
748+
opacity={0.4}
749+
/>
498750
</svg>
499751
);
500752

@@ -516,5 +768,13 @@ export {
516768
PardonIcon,
517769
SendAndReceiveIcon,
518770
SendIcon,
519-
ReceiveIcon
771+
ReceiveIcon,
772+
FolderIcon,
773+
FilledFolderIcon,
774+
FileIcon,
775+
ArrowLeftIcon,
776+
ArrowRightIcon,
777+
PlusInCircleIcon,
778+
RenameIcon,
779+
TrashCanIcon
520780
};

0 commit comments

Comments
 (0)