add header

Components/DocViewer/index.tsx

@@ -1,19 +0,0 @@
-import React from "react";
-import DocViewer, { DocViewerRenderers }  from "react-doc-viewer";
-
-
-
-interface DocViewer{
-    paragraphs:string[]
-    error: string;
-    variants: string[]
-}
-
-export const MyDocViewer : React.FC<DocViewer> = () =>{
-
-
-    return(
-        <div>
-        </div>
-    );
-}

Components/ErrorViewer/index.tsx

@@ -0,0 +1,48 @@
+import React, { useState } from "react";
+import DocViewer, { DocViewerRenderers }  from "react-doc-viewer";
+import styles from "./error.module.css"
+import 'antd/dist/antd.css';
+
+
+interface ErrorViewerIE{
+    errText:string;
+    paragraph: string[];
+    variants?: string[];
+    num: number;
+}
+
+export const ErrorViewer : React.FC<ErrorViewerIE> = (props) =>{
+    const [open, setOpen] = useState(false)
+    
+
+    return(
+        <div>
+            <div>
+                <img src="/images/err.svg"></img>
+                <div>{props.num}</div>
+                <div className={styles.Text}>
+                    {props.errText}
+                </div>
+                <div onClick={()=>setOpen(!open)}>
+                    <img src="/images/arrow.svg"></img>
+                </div>
+            </div>
+            <div style={{display: open? "":"none"}}>
+                <div>
+                    {
+                        props.paragraph.map(
+                            (value)=><div className={styles.paragraph}>{value}</div>
+                        )
+                    }
+                </div>
+                <div style={{display: props.variants==undefined? "none":""}}>
+                    {
+                        props.variants?.map(
+                            (value)=><div className={styles.variant}>{value}</div>
+                        )
+                    }
+                </div>
+            </div>
+        </div>
+    );
+}

Components/ItemSelect/index.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import styles from "./itemSelect.module.css"
+
+export interface SelectItemIE{
+    name:string
+    value: string|number
+}
+
+interface SelectIE{
+    onChange: (value:string|number) => void
+    items: SelectItemIE[]
+    value?:number
+}
+
+export const ItemSelect: React.FC<SelectIE> = (props) =>{
+    let options = new Array()
+    
+    props.items.map((item:SelectItemIE)=>{
+        options.push(
+            <option>{item.name}</option> 
+            )
+    })
+    
+    const getValue = (name:string) =>{
+        let val;
+        props.items.map((item:SelectItemIE) => {
+            if (item.name == name){
+                val =  item.value
+            }
+        })
+        return val
+    }
+    const getName = (value:number) =>{
+        let name;
+        props.items.map((item:SelectItemIE) => {
+            if (item.value == value){
+                name =  item.name
+            }
+        })
+        return name
+    }
+    
+    
+    return(
+        <div>
+            {
+                props.value == undefined?
+                    <select className={styles.myselect} onChange={(e)=>props.onChange(getValue(e.target.value) as any)}>    
+                        {options}
+                    </select>
+                :
+                    <select value={getName(props.value)} className={styles.myselect} onChange={(e)=>props.onChange(getValue(e.target.value) as any)}>    
+                        {options}
+                    </select>
+            }
+        </div>
+    )
+}

Components/ItemSelect/itemSelect.module.css

@@ -0,0 +1,25 @@
+.myselect{
+    border: none;
+    font-size: 24px;
+    color: #1C85BF;
+    font-weight: 500;
+    outline: none;
+    width: inherit;
+}
+
+@media screen and (max-width: 1300px) {
+    .myselect{
+        font-size: 18px;
+    }
+}
+
+@media screen and (max-width: 900px) {
+    .myselect{
+        font-size: 14px;
+    }
+}
+@media screen and (max-width: 500px) {
+    .myselect{
+        font-size: 12px;
+    }
+}

Components/header/header.module.css

@@ -0,0 +1,48 @@
+.header{
+    position: fixed;
+    top:0px;
+    left: 0px;
+    z-index: 100;
+    background-color: #F4F7FD;
+    padding: 10px 100px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap:100px;
+    width: 100%;
+}
+
+.logo{
+    cursor: pointer;
+}
+.itemWrapper{
+    display: flex;
+    gap:50px;
+}
+.item{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 10px 24px;
+    gap: 10px;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 28px;
+    cursor: pointer;
+
+    
+    color: #13377D;
+    background: #F4F7FD;
+    border: 1px solid #13377D;
+    border-radius: 8px;
+    transition: 0.3s;
+}
+
+.item:hover{
+    color: #FFFFFF;
+    background: #13377D;
+    transition: 0.3s;
+
+}

Components/header/index.tsx

@@ -1,12 +1,31 @@
+import { useRouter } from "next/router";
 import React from "react";
 import styles from "./header.module.css"
+import 'antd/dist/antd.css';
 
 export const Header:React.FC = () =>{
+    let router = useRouter()
+
     return(
         <div className={styles.header}>
-            <div className={styles.item}>
-
+            <div className={styles.logo} onClick={()=>router.push("/")}>
+                <img src="/images/logo.svg"></img>
             </div>
+            <div className={styles.itemWrapper}>
+                <div className={styles.item} onClick={()=>router.push("about")}>
+                    Про нас
+                </div>
+                <div className={styles.item} onClick={()=>router.push("how-to-use")}>
+                    Как пользоваться
+                </div>
+                <div className={styles.item} onClick={()=>router.push("/")}>
+                    Главная
+                </div>
+                <div className={styles.item} onClick={()=>router.push("history")}>
+                    История файлов
+                </div>
+            </div>
+           
         </div>
     );
 }

pages/index.tsx

@@ -1,8 +1,10 @@
 import type { NextPage } from 'next'
 import Head from 'next/head'
-import { MyDocViewer } from '../Components/DocViewer'
+import { ErrorViewer } from '../Components/ErrorViewer'
 import { FileUploader } from '../Components/FileUploader'
+import { Header } from '../Components/header'
 import styles from '../styles/Home.module.css'
+import 'antd/dist/antd.css';
 
 const Home: NextPage = () => {
   return (
@@ -13,7 +15,14 @@ const Home: NextPage = () => {
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <main className={styles.main}>
-        <FileUploader onResponse={(res)=>console.log(res)}></FileUploader>
+        <Header></Header>
+        
+          <div className={}>
+            
+          </div>
+          <div>
+
+          </div>
       </main>
     </div>
   )

public/images/arrow.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.53557 4.35042C8.92609 3.9599 8.92609 3.32673 8.53557 2.93621C8.14504 2.54568 7.51188 2.54568 7.12135 2.93621L5.00006 5.0575L2.87874 2.93618C2.48822 2.54566 1.85505 2.54566 1.46453 2.93618C1.074 3.3267 1.074 3.95987 1.46453 4.35039L4.28684 7.17271C4.28886 7.17476 4.29089 7.17681 4.29293 7.17885C4.67735 7.56327 5.29689 7.56928 5.68866 7.19687C5.69488 7.19096 5.70104 7.18495 5.70714 7.17885C5.70715 7.17884 5.70716 7.17883 5.70717 7.17882C5.70724 7.17875 5.7073 7.17868 5.70737 7.17861L8.53557 4.35042Z" fill="black" fill-opacity="0.85"/>
+</svg>

public/images/err.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 1C4.13438 1 1 4.13438 1 8C1 11.8656 4.13438 15 8 15C11.8656 15 15 11.8656 15 8C15 4.13438 11.8656 1 8 1ZM10.5844 10.6594L9.55313 10.6547L8 8.80313L6.44844 10.6531L5.41563 10.6578C5.34688 10.6578 5.29063 10.6031 5.29063 10.5328C5.29063 10.5031 5.30156 10.475 5.32031 10.4516L7.35313 8.02969L5.32031 5.60938C5.30143 5.58647 5.29096 5.5578 5.29063 5.52812C5.29063 5.45937 5.34688 5.40312 5.41563 5.40312L6.44844 5.40781L8 7.25938L9.55156 5.40938L10.5828 5.40469C10.6516 5.40469 10.7078 5.45937 10.7078 5.52969C10.7078 5.55937 10.6969 5.5875 10.6781 5.61094L8.64844 8.03125L10.6797 10.4531C10.6984 10.4766 10.7094 10.5047 10.7094 10.5344C10.7094 10.6031 10.6531 10.6594 10.5844 10.6594Z" fill="#F5222D"/>
+</svg>

styles/globals.css

@@ -17,10 +17,10 @@ a {
 
 @media (prefers-color-scheme: dark) {
   html {
-    color-scheme: dark;
+    color-scheme: white;
   }
   body {
-    color: white;
-    background: black;
+    color: #0E1A33;
+    background: White;
   }
 }