reza added something

package.json

@@ -68,6 +68,7 @@
     "react-redux": "^7.2.5",
     "react-refresh": "^0.8.3",
     "react-router-dom": "^5.3.0",
+    "react-speech-recognition": "^3.8.2",
     "react-spring-3d-carousel": "^1.2.1",
     "react-toastify": "^8.0.2",
     "redux": "^4.1.1",

src/components/HomeSearchBox/index.tsx

@@ -1,36 +1,39 @@
-import React from "react";
+import React, { useState } from "react";
 import "./index.scss";
-import search from '../../assets/icons/search.png';
+import search from "../../assets/icons/search.png";
 import voice from "../../assets/icons/voice.png";
 
-export default function HomeSearchBox(props : any) {
-  const {lastItems} = props;
+export default function HomeSearchBox(props: any) {
+  const { lastItems, setVocal, inputValue, setInputValue } = props;
   return (
     <section className="home-search-box d-flex flex-column align-items-center">
       <form className="d-flex" onSubmit={(e) => e.preventDefault()}>
-        <input type="search" placeholder="نام درس یا دوره را جستجو کنید" />
+        <input
+          type="search"
+          placeholder="نام درس یا دوره را جستجو کنید"
+          onChange={(e) => setInputValue(e.target.value)}
+          value={inputValue}
+        />
         <button type="submit">
           <img src={search} />
         </button>
         <img className="home-search-box__searchIcon" src={search} />
-        <button className="home-search-box__voice"><img src={voice} /></button>
+        <button className="home-search-box__voice" onClick={() => setVocal(true)}>
+          <img src={voice} />
+        </button>
       </form>
 
       <ul className="d-flex">
-        {
-          lastItems.map((item : any, i : any) => (
-            <li key={i} style={{color : i === 0 ? '#9CDF52' : ''}}>{item}</li>
-          ))
-        }
+        {lastItems.map((item: any, i: any) => (
+          <li key={i} style={{ color: i === 0 ? "#9CDF52" : "" }}>
+            {item}
+          </li>
+        ))}
       </ul>
     </section>
   );
 }
 
 HomeSearchBox.defaultProps = {
-  lastItems : [
-    'دوره علوم تجربی',
-    'دوره علوم انسانی',
-    'تمامی دوره‌ها'
-  ]
-}
+  lastItems: ["دوره علوم تجربی", "دوره علوم انسانی", "تمامی دوره‌ها"],
+};

src/components/Vocal/Vocal.scss

@@ -0,0 +1,74 @@
+.vocal-modal{
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    top : 0px;
+    left: 0px;
+    background-color: rgba(0, 0, 0, 0.822);
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    &__back{
+        position: fixed;
+        top: 20px;
+        left: 12px;
+        z-index: 200;
+    }
+    h1,h2{
+        margin: 20px auto 0px;
+        width: fit-content;
+    }
+    h1{
+        color: white;
+        font-family: numeralLight;
+        font-size: calc(100vw / 20);
+    }
+    h2{
+        color: rgb(196, 196, 196);
+        font-family: numeralLight;
+        font-size: calc(100vw / 24);
+        position: fixed;
+        bottom: 70px;
+        left: 50%;
+        background-color: rgba(255, 255, 255, 0.062);
+        padding: 10px 15px;
+        border-radius: 10px;
+        transform: translate(-50% , 0px);
+    }
+    &__content{
+        width : calc(100% - 60px);
+        height: 320px;
+        border-radius: 5px;
+        margin-left: auto;
+        margin-right: auto;
+        padding : 4px 10px;
+        &--toggle{
+            width: 140px;
+            height: 140px;
+            align-items: center;
+            border-radius: 100px;
+            margin : 20px auto;
+            svg{
+                margin : 0px auto;
+            }
+        }
+    }
+}
+
+
+
+
+.vocal-modal__content--input .MuiFormControl-root{
+    border : none !important;
+}
+
+.vocal-modal__content--input{
+    margin-top: 20px;
+}
+
+.vocal-modal__content--input input{
+    width: 100%;
+    border : none;
+    font-size: 22px;
+    color: #707070;
+}

src/components/Vocal/Vocal.tsx

@@ -0,0 +1,71 @@
+import React, { useState, useEffect } from "react";
+import SpeechRecognition, {
+  useSpeechRecognition,
+} from "react-speech-recognition";
+import { toast } from "react-toastify";
+import MicIcon from "@material-ui/icons/Mic";
+import TextField from "@material-ui/core/TextField";
+
+import line1 from "../../assets/icons/line1.png";
+import line2 from "../../assets/icons/line2.png";
+import arrowLeft from "../../assets/icons/arrow-left.png";
+
+import "./Vocal.scss";
+import { stat } from "fs";
+
+const Vocal = (props: any) => {
+  const { transcript, resetTranscript } = useSpeechRecognition();
+  const [flag, setFlag] = useState(false);
+  const [pause, setPause] = useState(false);
+
+  const start = () => {
+    setPause(false);
+    SpeechRecognition.startListening({ language: "fa_IR" });
+    setTimeout(() => {
+      if (true) {
+        SpeechRecognition.stopListening();
+        setPause(true);
+      }
+    }, 5000);
+  };
+
+  useEffect(() => {
+    if (!flag) {
+      resetTranscript();
+      setFlag(() => true);
+      start();
+    }
+  });
+
+  useEffect(() => {
+    props.setInputValue(() => transcript);
+  }, [transcript]);
+
+  return (
+    <div className="vocal-modal d-flex">
+      <img src={arrowLeft} className="vocal-modal__back" onClick={() => props.setVocal(false)} />
+      <div className="vocal-modal__content d-flex flex-column">
+        <div className="vocal-modal__content--toggle d-flex justify-content-center aling-items-center">
+          <img src={line2} onClick={(e) => start()} />
+          <img
+            src={line1}
+            style={{ transform: "translateX(5px)" }}
+            onClick={(e) => start()}
+          />
+        </div>
+        <div className="vocal-modal__content--input">
+          {pause ? (
+            <h2>
+              چیزی نشنیدیم :(
+              <br />
+              روی آیکن موج بزنید تا دوباره امتحان کنید.
+            </h2>
+          ) : (
+            <h1>در حال گوش کردن ...</h1>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+export default Vocal;

src/types/comp.d.ts

@@ -1 +1,2 @@
 declare module '3d-react-carousal';
+declare module 'react-speech-recognition';

src/views/Home/Books/index.scss

@@ -81,6 +81,7 @@
 @media screen and (max-width: 640px) {
   .home-books {
     max-width: 500px;
+    padding: 0px 0px 20px;
     &__list{
       width: 100%;
       overflow-x: scroll;

src/views/Home/Courses/Course/index.scss

@@ -83,8 +83,8 @@
 @media screen and (max-width : 640px){
   .home-courses-course{
     img{
-      width: 250px;
-      height: 180px;
+      width: calc(100vw / 1.7);
+      height: calc(100vw / 2.2);
     }
     h2{
       font-size: calc(100vw / 25);

src/views/Home/index.scss

@@ -23,5 +23,6 @@
 @media screen and (max-width: 640px) {
   .home{
     padding: 60px 10px 0px;
+    position: relative;
   }
 }

src/views/Home/index.tsx

@@ -1,14 +1,15 @@
-import React, {useState} from "react";
+import React, { useState, useEffect } from "react";
 import "./index.scss";
 import Navbar from "../../components/Navbar/index";
 import HomeSearchBox from "../../components/HomeSearchBox/index";
 import Courses from "./Courses/index";
 import GradeFilter from "../../components/GradeFilter/index";
-import Books from './Books/index';
+import Books from "./Books/index";
 import Blogs from "./Blogs/index";
 import Footer from "./Footer/index";
 import Header from "./Header/index";
 import AppDownload from "./AppDownload/index";
+import Vocal from "../../components/Vocal/Vocal";
 
 import olum7 from "../../assets/images/olum7.jpg";
 import olum8 from "../../assets/images/olum8.jpg";
@@ -18,31 +19,42 @@ import blog1 from "../../assets/images/blog1.png";
 import blog2 from "../../assets/images/blog2.png";
 import blog3 from "../../assets/images/blog3.png";
 
-export default function Home(props : any) {
+export default function Home(props: any) {
   const [grade, setGrade] = useState(null);
-  const {courses, grades, headerData, blogs} = props;
+  const [vocal, setVocal] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const { courses, grades, headerData, blogs } = props;
+
+  useEffect(() => {
+    if (inputValue) {
+      setVocal(false);
+    }
+  }, [inputValue]);
   return (
-    <div className="home d-flex flex-column">
+    <>
+      <div
+        className="home d-flex flex-column"
+        style={{ filter: vocal ? "blur(8px)" : "" }}
+      >
         <Navbar />
-      {
-        window.innerWidth > 1007 ?
-        <Header headerData={headerData} /> : null
-      }
-      <HomeSearchBox />
+        {window.innerWidth > 1007 ? <Header headerData={headerData} /> : null}
+        <HomeSearchBox
+          setVocal={setVocal}
+          inputValue={inputValue}
+          setInputValue={setInputValue}
+        />
         <Courses courses={courses} />
         <GradeFilter grades={grades} grade={grade} setGrade={setGrade} />
         <Books courses={courses} />
         <Blogs blogs={blogs} />
-      {
-        window.innerWidth > 1007 ?
-        <AppDownload /> : null
-      }
-      {
-        window.innerWidth > 1007 ?
-        <Footer /> : null
-      }
+        {window.innerWidth > 1007 ? <AppDownload /> : null}
+        {window.innerWidth > 1007 ? <Footer /> : null}
         
       </div>
+      {vocal ? (
+          <Vocal setVocal={setVocal} setInputValue={setInputValue} />
+        ) : null}
+    </>
   );
 }
 
@@ -91,39 +103,39 @@ Home.defaultProps = {
       tags: ["دوره جدید", "تخفیف‌های هفتگی", "پایه هفتم"],
     },
   ],
-  grades : [
-    'اول',
-    'دوم',
-    'سوم',
-    'چهارم',
-    'پنجم',
-    'ششم',
-    'هفتم',
-    'هشتم',
-    'نهم',
-    'دهم',
-    'یازدهم',
-    'دوازدهم',
+  grades: [
+    "اول",
+    "دوم",
+    "سوم",
+    "چهارم",
+    "پنجم",
+    "ششم",
+    "هفتم",
+    "هشتم",
+    "نهم",
+    "دهم",
+    "یازدهم",
+    "دوازدهم",
   ],
-  headerData : [
+  headerData: [
     {
-      id : 0,
-      name : "آیا هیجان زندگی همچنان باقی است؟",
-      subTitle : "سوالاتی که پاسخی برای آنها نیست!",
-      text: 'آیا ذهن نویسنده به این سمت رفته که شما این متن را بخوانید؟ نویسنده درست حدس زده شما در حال خواندن هستید. لطفا خواندن را تمام کنید ',
-      author : 'جورج جونیور',
-      imageUrl : header,
+      id: 0,
+      name: "آیا هیجان زندگی همچنان باقی است؟",
+      subTitle: "سوالاتی که پاسخی برای آنها نیست!",
+      text: "آیا ذهن نویسنده به این سمت رفته که شما این متن را بخوانید؟ نویسنده درست حدس زده شما در حال خواندن هستید. لطفا خواندن را تمام کنید ",
+      author: "جورج جونیور",
+      imageUrl: header,
     },
     {
-      id : 1,
-      name : "آیا هیجان زندگی همچنان باقی است؟",
-      subTitle : "سوالاتی که پاسخی برای آنها نیست!",
-      text: 'آیا ذهن نویسنده به این سمت رفته که شما این متن را بخوانید؟ نویسنده درست حدس زده شما در حال خواندن هستید. لطفا خواندن را تمام کنید ',
-      author : 'جورج جونیور',
-      imageUrl : header,
+      id: 1,
+      name: "آیا هیجان زندگی همچنان باقی است؟",
+      subTitle: "سوالاتی که پاسخی برای آنها نیست!",
+      text: "آیا ذهن نویسنده به این سمت رفته که شما این متن را بخوانید؟ نویسنده درست حدس زده شما در حال خواندن هستید. لطفا خواندن را تمام کنید ",
+      author: "جورج جونیور",
+      imageUrl: header,
     },
   ],
-  blogs : [
+  blogs: [
     {
       id: 0,
       name: "فیزیک کوانتوم و موارد مشابه",
@@ -152,6 +164,5 @@ Home.defaultProps = {
       imageUrl: blog1,
       tags: ["دوره جدید", "تخفیف‌های هفتگی", "پایه هفتم"],
     },
-  ]
+  ],
 };
-

yarn.lock

@@ -9761,6 +9761,11 @@ react-router@5.2.1:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
+react-speech-recognition@^3.8.2:
+  version "3.8.2"
+  resolved "https://registry.yarnpkg.com/react-speech-recognition/-/react-speech-recognition-3.8.2.tgz#c82e187db92e32e506f0593d80a2347f2079e0fd"
+  integrity sha512-ZbA8wNNdWPAiN7tHsMc/cgfRkssAQwL3F8yMDEbuxLCT0II7YrNurNb3hAq5X58+zMn7YQO+S3OZt0mp5QA38w==
+
 react-spring-3d-carousel@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/react-spring-3d-carousel/-/react-spring-3d-carousel-1.2.1.tgz#25d5d94e76a212b6e791c2543f61c7c87763e8e9"