Update

React/test-feedback/package.json

@@ -6,8 +6,12 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "framer-motion": "^11.1.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.2.0",
+    "react-router": "^6.23.0",
+    "react-router-dom": "^6.23.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

React/test-feedback/src/App.js

@@ -1,7 +1,21 @@
 import React from 'react'
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
+import { Nav } from './components/Nav'
+import { Home } from './pages/Home'
+import { About } from './pages/About'
 
 export const App = () => {
   return (
-    <div>App</div>
+    <Router>
+      <div>
+        <Nav />
+        <div className="container">
+          <Routes>
+            <Route exact path='/' element={<Home />} />
+            <Route exact path='/about' element={<About />} />
+          </Routes>
+        </div>
+      </div>
+    </Router>
   )
 }

React/test-feedback/src/components/Nav.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+
+export const Nav = ({ text }) => {
+  const headerStyles = {
+    backgroundColor: 'rgba(0, 0, 0, 0)',
+    color: '#ff6a95',
+    display: 'flex'
+  }
+
+  return (
+    <header style={headerStyles}>
+      <h2>{text}</h2>
+      <div className="container" style={{ display: 'flex', justifyContent: 'space-around', width: '100%', color: '#fff' }}>
+        <Link style={{ color: '#fff' }} to={'/'}>Home</Link>
+        <Link style={{ color: '#fff' }} to={'/about'}>About</Link>
+      </div>
+    </header>
+  )
+}
+
+// Nav.defaultProps = {
+//   text: "what"
+// }

React/test-feedback/src/components/feed/FeedForm.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export const FeedForm = () => {
+  return (
+    <div>FeedForm</div>
+  )
+}

React/test-feedback/src/components/feed/FeedItem.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export const FeedItem = () => {
+  return (
+    <div>FeedItem</div>
+  )
+}

React/test-feedback/src/components/feed/FeedList.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export const FeedList = () => {
+  return (
+    <div>FeedList</div>
+  )
+}

React/test-feedback/src/components/feed/FeedStats.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export const FeedStats = () => {
+  return (
+    <div>FeedStats</div>
+  )
+}

React/test-feedback/src/components/shared/Button.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export const Button = () => {
+  return (
+    <div>Button</div>
+  )
+}

React/test-feedback/src/components/shared/Card.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export const Card = () => {
+  return (
+    <div>Card</div>
+  )
+}