From 4a56fd30297956ede59123bab65d51a842b94cf3 Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Wed, 5 Jun 2024 16:20:51 +0300
Subject: [PATCH] Add Icons page for devs

---
 .vscode/settings.json                       |  1 +
 rsconcept/frontend/src/app/Router.tsx       |  5 +++++
 rsconcept/frontend/src/app/urls.ts          |  3 ++-
 rsconcept/frontend/src/components/Icons.tsx | 10 ++++-----
 rsconcept/frontend/src/pages/IconsPage.tsx  | 24 +++++++++++++++++++++
 5 files changed, 37 insertions(+), 6 deletions(-)
 create mode 100644 rsconcept/frontend/src/pages/IconsPage.tsx

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 222fdba3..49f80dd4 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -98,6 +98,7 @@
     "moprho",
     "multiword",
     "mypy",
+    "nocheck",
     "nomn",
     "nooverlap",
     "NPRO",
diff --git a/rsconcept/frontend/src/app/Router.tsx b/rsconcept/frontend/src/app/Router.tsx
index da3548ea..621bc3ee 100644
--- a/rsconcept/frontend/src/app/Router.tsx
+++ b/rsconcept/frontend/src/app/Router.tsx
@@ -2,6 +2,7 @@ import { createBrowserRouter } from 'react-router-dom';
 
 import CreateItemPage from '@/pages/CreateItemPage';
 import HomePage from '@/pages/HomePage';
+import IconsPage from '@/pages/IconsPage';
 import LibraryPage from '@/pages/LibraryPage';
 import LoginPage from '@/pages/LoginPage';
 import ManualsPage from '@/pages/ManualsPage';
@@ -62,6 +63,10 @@ export const Router = createBrowserRouter([
         path: `${routes.oss}/:id`,
         element: <OssPage />
       },
+      {
+        path: `${routes.icons}`,
+        element: <IconsPage />
+      },
       {
         path: routes.manuals,
         element: <ManualsPage />
diff --git a/rsconcept/frontend/src/app/urls.ts b/rsconcept/frontend/src/app/urls.ts
index 87465098..d7ff7432 100644
--- a/rsconcept/frontend/src/app/urls.ts
+++ b/rsconcept/frontend/src/app/urls.ts
@@ -18,7 +18,8 @@ export const routes = {
   manuals: 'manuals',
   help: 'manuals',
   rsforms: 'rsforms',
-  oss: 'oss'
+  oss: 'oss',
+  icons: 'icons'
 };
 
 interface SchemaProps {
diff --git a/rsconcept/frontend/src/components/Icons.tsx b/rsconcept/frontend/src/components/Icons.tsx
index ad1a2eba..425f95bf 100644
--- a/rsconcept/frontend/src/components/Icons.tsx
+++ b/rsconcept/frontend/src/components/Icons.tsx
@@ -127,7 +127,7 @@ export interface IconProps {
   className?: string;
 }
 
-function IconSVG({ viewBox, size = '1.5rem', className, props, children }: IconSVGProps) {
+function MetaIconSVG({ viewBox, size = '1.5rem', className, props, children }: IconSVGProps) {
   return (
     <svg
       width={size}
@@ -144,18 +144,18 @@ function IconSVG({ viewBox, size = '1.5rem', className, props, children }: IconS
 
 export function IconManuals(props: IconProps) {
   return (
-    <IconSVG viewBox='0 0 20 20' {...props}>
+    <MetaIconSVG viewBox='0 0 20 20' {...props}>
       <path d='M3.33 8L10 12l10-6-10-6L0 6h10v2H3.33zM0 8v8l2-2.22V9.2L0 8zm10 12l-5-3-2-1.2v-6l7 4.2 7-4.2v6L10 20z' />
-    </IconSVG>
+    </MetaIconSVG>
   );
 }
 
 export function IconLogin(props: IconProps) {
   return (
-    <IconSVG viewBox='0 0 24 24' {...props}>
+    <MetaIconSVG viewBox='0 0 24 24' {...props}>
       <path fill='none' d='M0 0h24v24H0z' />
       <path d='M10 11H4V3a1 1 0 011-1h14a1 1 0 011 1v18a1 1 0 01-1 1H5a1 1 0 01-1-1v-8h6v3l5-4-5-4v3z' />
-    </IconSVG>
+    </MetaIconSVG>
   );
 }
 
diff --git a/rsconcept/frontend/src/pages/IconsPage.tsx b/rsconcept/frontend/src/pages/IconsPage.tsx
new file mode 100644
index 00000000..9c2ebed8
--- /dev/null
+++ b/rsconcept/frontend/src/pages/IconsPage.tsx
@@ -0,0 +1,24 @@
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import * as icons from '@/components/Icons';
+
+export function IconsPage() {
+  return (
+    <div className='flex flex-col items-center px-6 py-3'>
+      <h1 className='mb-6'>Список иконок</h1>
+      <div className='grid grid-cols-4'>
+        {Object.keys(icons)
+          .filter(key => key.startsWith('Icon'))
+          .map((key, index) => (
+            <div key={`icons_list_${index}`} className='flex flex-col items-center px-3 pb-6'>
+              <p>{icons[key]({ size: '2rem' })}</p>
+              <p>{key}</p>
+            </div>
+          ))}
+      </div>
+    </div>
+  );
+}
+
+export default IconsPage;