add components, add route, add styles, not added work with backend

package.json

@@ -6,9 +6,15 @@
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
+    "node-sass": "^7.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.3.1",
+    "react-redux": "^7.2.6",
+    "react-router-dom": "^5.3.0",
     "react-scripts": "5.0.0",
+    "redux": "^4.1.2",
+    "redux-thunk": "^2.4.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -34,5 +40,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.2",
+    "postcss": "^8.4.6",
+    "tailwindcss": "^3.0.19"
   }
 }

src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.js

@@ -1,24 +1,18 @@
-import logo from './logo.svg';
-import './App.css';
 
+import './App.scss';
+import Header from './components/Header';
+import Main from './components/Main';
+import {Router} from 'react-router-dom';
+import createHistory from "history/createBrowserHistory";
+const history = createHistory()
 function App() {
   return (
+    <Router history={history}>
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <Header/>
+      <Main/>
     </div>
+    </Router>
   );
 }
 

src/App.scss

@@ -0,0 +1,6 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+.Header {
+  
+}

src/components/Collections.js

@@ -0,0 +1,12 @@
+
+const Collections = () => {
+
+
+    return(
+        <div>
+            Collections
+        </div>
+    )
+}
+
+export default Collections;

src/components/Feed/Feed.js

@@ -0,0 +1,12 @@
+import FeedComponent from "./FeedComponent";
+
+const Feed = () => {
+
+    return(
+        <div className="flex mx-auto px-4 justify-center items-center p-6 xl:container xls:mx-auto" >
+                <FeedComponent/>
+        </div>
+    )
+} 
+
+export default Feed;

src/components/Feed/FeedComponent.js

@@ -0,0 +1,41 @@
+
+
+const FeedComponent = () => {
+
+    return(
+        <div className="rounded-md shadow-md p-3 sm:w-96">
+            <div className="flex items-center justify-between p-3">
+                <div className="flex items-center space-x-2">
+                    <img alt="userAvatar" className="object-cover object-center w-8 h-8 rounded-full shadow-sm bg-slate-600 border-gray-500"/>
+                    <div className="-space-y-1">
+                        <h2 className="text-sm font-semibold leading-none">User_Nick</h2>
+                    </div>
+                </div>
+                
+              
+            </div>
+                <img className="object-cover object-center w-full h-72 bg-slate-500"/>
+                <div className="p-3">
+                    <div className="flex items-center justify-between">
+                        <div className="flex items-center space-x-3">
+                        <button className="flex items-center justify-center">Like</button>
+                        <button className="flex items-center justify-center">Comment</button>
+                        <button className="flex items-center justify-center">Direct</button>
+                        </div>
+                        <button className="flex items-center justify-center">Save to collection</button>
+                    </div>
+                </div>
+                <div className="space-y-3">
+                        <p className="text-sm">
+                            <span className="text-base font-semibold">User_Nick</span>
+                            description or text
+                        </p>
+                     <input type="text" placeholder="Add a comment" className="w-full py-0.5 bg-transparent border-none rounded text-sm pl-0 text-gray-400"/>   
+                </div>
+                
+        </div>
+    )
+}
+
+
+export default FeedComponent;

src/components/Header.js

@@ -0,0 +1,51 @@
+import {IoHome, IoPaperPlane} from "react-icons/io5";
+import {IoIosAddCircle, IoIosHeart} from "react-icons/io";
+import {Link} from "react-router-dom"
+const Header =  () => {
+    return(
+        <nav className="flex mx-auto px-4 justify-between p-6 xl:container xls:mx-auto dark:bg-slate-900 dark:text-white">
+            {/* left */}
+            <div className="LogoBar flex items-center space-x-2 w-1/4">
+                <div>
+                    <a>
+                       <img src={'/src/img/logo.svg'} alt="logo"/> 
+                    </a>
+                </div>
+            </div>
+            {/* middle */}
+            <div className="SearchBar  w-1/2 sm:w-1/2  md:w-1/5 lg:w-1/4 xl:w-1/3">
+                <input  className="rounded-full outline-none p-4 h-5 w-full text-grey bg-[#3A3B3C] sm:text-xs md:text-md lg:text-lg" type="text" placeholder="search"/>
+            </div>
+            {/* right */}
+            <div className="NavigationBar  flex justify-between  pl-2 w-2/5 items-center sm:w-1/2 sm:text-xs md:text-sm md:flex md:justify-between md:w-1/3 ">
+                <div  className="group">
+                     <div className="group-hover:bg-slate-800 group-hover:text-white group-hover:rounded-full" >
+                    <Link to="/"><IoHome/></Link>
+                    </div>
+                </div>
+                <div className="group">
+                    <div className="group-hover:bg-slate-800 group-hover:text-white group-hover:rounded-full">
+                    <Link to="/direct"><IoPaperPlane/></Link>
+                    </div>
+                </div>
+                <div className="group">
+                    <div className="group-hover:bg-slate-800 group-hover:text-white group-hover:rounded-full">
+                    <Link to="/"><IoIosAddCircle/></Link>
+                    </div>
+                </div>
+                <div className="group">
+                    <div className="group-hover:bg-slate-800 group-hover:text-white group-hover:rounded-full">
+                    <Link to="/collections"><IoIosHeart/></Link>
+                    </div>
+                </div>
+                <div>
+                    <Link to="/user">
+                        <img  className="rounded-full"alt="user"/>
+                    </Link>
+                </div>
+            </div>
+        </nav>
+    )
+}
+
+export default Header;

src/components/Main.js

@@ -0,0 +1,26 @@
+import {Route,Redirect, Switch} from 'react-router-dom';
+import Feed from './Feed/Feed';
+import User from './User';
+import Collections from './Collections';
+const Main = () => {
+
+
+
+    return(
+        <div className='flex mx-auto px-4 justify-between p-6 xl:container xls:mx-auto'>
+            <Switch>
+                <Route path="/" exact component={Feed}/>
+                <Route path="/user/:id" exact component={User}/>
+                <Route path="/collections" exact component={Collections}/>
+            </Switch>
+        </div>
+    )
+} 
+
+
+
+
+
+
+
+export default Main;

src/components/User.js

@@ -0,0 +1,10 @@
+const User = () => {
+    return(
+        <div>
+            User
+        </div>
+    )
+}
+
+
+export default User;

tailwind.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}