From ac3a4163c1eb66ca91fc65a9c2be9610af8dc158 Mon Sep 17 00:00:00 2001
From: Pkpedram <pkpedram80@gmail.com>
Date: Mon, 7 Feb 2022 10:04:07 +0330
Subject: [PATCH] Some Fixes

---
 src/components/fileInput/index.js | 34 +++++++++++++++++++++++++++++--
 src/components/header/Header.js   |  2 +-
 src/view/register/index.js        |  2 +-
 3 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/src/components/fileInput/index.js b/src/components/fileInput/index.js
index 6b370b2..e9f778d 100644
--- a/src/components/fileInput/index.js
+++ b/src/components/fileInput/index.js
@@ -1,13 +1,42 @@
+
 import React from "react";
+import { useState, useEffect } from "react";
 
 const FileInput = ({
     title
 }) => {
+
+    const [focus, setFocus] = useState('border-gray-300');
+    const [selectedFile, setSelectedFile] = useState()
+    const [preview, setPreview] = useState();
+
+    useEffect(() => {
+        if (!selectedFile) {
+            setPreview(undefined)
+            return
+        }
+
+        const objectUrl = URL.createObjectURL(selectedFile)
+        setPreview(objectUrl)
+
+        // free memory when ever this component is unmounted
+        return () => URL.revokeObjectURL(objectUrl)
+    }, [selectedFile])
+
+    const onSelectFile = e => {
+        if (!e.target.files || e.target.files.length === 0) {
+            setSelectedFile(undefined)
+            return
+        }
+
+        // I've kept this example simple by using the first image instead of multiple
+        setSelectedFile(e.target.files[0])
+    }
     return (
         <div >
             
-            <input type='file' className="hidden" id="file"/>
-            <label for="file" className="flex flex-col items-center border-dotted border-2 border-gray-300 rounded-lg p-4 cursor-pointer">
+            <input type='file'  id="file" onFocus={() => setFocus('border-red52')} onchange={(e) => onSelectFile(e)}/>
+            <label for="file" className={`flex flex-col text-center items-center border-dotted border-2 ${focus} rounded-lg p-4 cursor-pointer`} >
             <div>
                 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path d="M9 22H7C3 22 2 21 2 17V7C2 3 3 2 7 2H8.5C10 2 10.33 2.44001 10.9 3.20001L12.4 5.20001C12.78 5.70001 13 6 14 6H17C21 6 22 7 22 11V13" stroke="rgba(110,132,159,0.3)" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
@@ -17,6 +46,7 @@ const FileInput = ({
             <h1 className="text-xl font-bold text-gray-400">{title}</h1>
             <p className="text-sm leading-7 text-gray-400">فایل خود را بکشید و اینجا رها کنید</p>
             <p className="bg-gray-200 p-2 rounded text-sm mt-1 text-gray-500">انتخاب فایل</p>
+            {selectedFile &&  <img src={preview} /> }
             </label>
         </div>
     )
diff --git a/src/components/header/Header.js b/src/components/header/Header.js
index 6a8f5d2..5ab0127 100644
--- a/src/components/header/Header.js
+++ b/src/components/header/Header.js
@@ -15,7 +15,7 @@ const Header=()=>{
   console.log("weekday:");
   console.log(weekday);
   return (
-    <div className="header w-full h-[8.5%] z-10 bg-white absolute top-0 left-0 flex items-center">
+    <div className="header w-full h-[8.5%] z-10 bg-white absolute top-0 left-0 flex items-center shadow-md	">
       <div className="header-profile  h-full flex items-center">
         <div className="header-profile-img-container w-10 h-10 bg-color2 rounded-full ml-6 overflow-hidden">
           <img src={avatar1} alt="avatar1" className='w-full' />
diff --git a/src/view/register/index.js b/src/view/register/index.js
index 70ffb17..eab6196 100644
--- a/src/view/register/index.js
+++ b/src/view/register/index.js
@@ -118,7 +118,7 @@ const Register = ({ activeLogin }) => {
     ]
 
     return (
-        <div className="w-full flex items-center justify-center" style={{ height: '100vh', direction: 'rtl' }}>
+        <div className="w-full flex justify-center" style={{ direction: 'rtl', marginTop: '8.5%' }}>
             <div className="w-11/12 flex ">
                 {/* form */}