Technigo · mimmi-eriksson · Apr 28, 2025 · Apr 28, 2025 · Apr 29, 2025 · Apr 29, 2025
diff --git a/README.md b/README.md
@@ -1 +1,2 @@
 # Happy Thoughts
+Link: https://think-happy.netlify.app/ 
diff --git a/index.html b/index.html
@@ -1,16 +1,27 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="./vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Happy Thoughts</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script
-      type="module"
-      src="./src/main.jsx">
-    </script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <link
+    rel="icon"
+    type="image/x-icon"
+    href="/favicon.ico"
+  />
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1.0"
+  />
+  <title>Happy Thoughts</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script
+    type="module"
+    src="./src/main.jsx"
+  >
+  </script>
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -10,8 +10,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tailwindcss/vite": "^4.1.4",
+    "date-fns": "^4.1.0",
+    "motion": "^12.10.4",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-router": "^7.6.2",
+    "react-router-dom": "^7.6.2",
+    "tailwindcss": "^4.1.4"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",

diff --git a/public/assets/github-btn.svg b/public/assets/github-btn.svg
diff --git a/public/assets/linkedin-btn.svg b/public/assets/linkedin-btn.svg
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,5 +1,43 @@
-export const App = () => {
+import { BrowserRouter, Routes, Route } from 'react-router'
+import { AuthProvider } from './context/AuthContext'
+import NavBar from "./sections/NavBar"
+import Footer from "./sections/Footer"
+import Home from './pages/Home'
+import LogIn from './pages/LogIn'
+import Register from './pages/Register'
+import MyThoughts from './pages/MyThoughts'
+import NotFound from './pages/NotFound'
+import ProtectedPage from './pages/ProtectedPage'
+
+const App = () => {
   return (
-    <h1>Happy Thoughts</h1>
+    <BrowserRouter>
+      <AuthProvider>
+        <div className="flex flex-col min-h-screen">
+          <NavBar />
+          <div
+            className="w-full max-w-md px-4 min-[375px]:px-10 mx-auto"
+          >
+            <Routes>
+              <Route path='/' element={<Home />} />
+              <Route path='/login' element={<LogIn />} />
+              <Route path='/register' element={<Register />} />
+              <Route
+                path='/mythoughts'
+                element={
+                  <ProtectedPage>
+                    <MyThoughts />
+                  </ProtectedPage>
+                }
+              />
+              <Route path='*' element={<NotFound />} />
+            </Routes>
+          </div>
+          <Footer />
+        </div>
+      </AuthProvider>
+    </BrowserRouter>
   )
 }
+
+export default App
diff --git a/src/components/ArrowButton.jsx b/src/components/ArrowButton.jsx
@@ -0,0 +1,16 @@
+const ArrowButton = ({ icon, isActive, onClick, ariaLabel }) => {
+  return (
+    <button
+      className={`bg-[#ffadad] w-10 aspect-square rounded-full focus:outline-2 focus:outline-(--color-primary) ${isActive ? 'hover:bg-(--color-primary) cursor-pointer' : 'opacity-50'}`}
+      type="button"
+      onClick={onClick}
+      disabled={!isActive}
+      aria-label={ariaLabel}
+    >
+      {icon}
+    </button>
+  )
+}
+
+export default ArrowButton
+
diff --git a/src/components/CancelButton.jsx b/src/components/CancelButton.jsx
@@ -0,0 +1,15 @@
+const CancelButton = ({ onClick }) => {
+  return (
+    <button
+      className="bg-[#ffadad] rounded-full focus:outline-2 focus:outline-(--color-primary) py-2 px-5 text-sm cursor-pointer"
+      type="button"
+      onClick={onClick}
+    >
+      <p>
+        Cancel
+      </p>
+    </button >
+  )
+}
+
+export default CancelButton
diff --git a/src/components/Error.jsx b/src/components/Error.jsx
@@ -0,0 +1,9 @@
+const Error = ({ text }) => {
+  return (
+    <div className="bg-white border border-black border-solid shadow-[10px_10px] shadow-black p-5 text-center text-red-500">
+      <p>{text}</p>
+    </div>
+  )
+}
+
+export default Error
diff --git a/src/components/FilterOption.jsx b/src/components/FilterOption.jsx
@@ -0,0 +1,7 @@
+const FilterOption = ({ value }) => {
+  return (
+    <option value={value}>{value}</option>
+  )
+}
+
+export default FilterOption
diff --git a/src/components/LikeButton.jsx b/src/components/LikeButton.jsx
@@ -0,0 +1,14 @@
+const LikeButton = ({ likes, onLike }) => {
+  return (
+    <button
+      className={`bg-(--color-secondary) ${likes > 0 && 'bg-[#ffadad]'} rounded-full focus:outline-2 focus:outline-(--color-primary) p-2 transition duration-300 hover:scale-115 active:scale-90 cursor-pointer`}
+      type="button"
+      onClick={onLike}
+      aria-label="Like thought"
+    >
+      ❤️
+    </button>
+  )
+}
+
+export default LikeButton
diff --git a/src/components/ListControls.jsx b/src/components/ListControls.jsx
@@ -0,0 +1,66 @@
+import { useState } from "react"
+import RadioOption from "./RadioOption"
+import FilterOption from "./FilterOption"
+
+const ListControls = ({ sortBy, filterOn, onSort, onFilter }) => {
+  const [sorting, setSorting] = useState(sortBy)
+  const [filter, setFilter] = useState(filterOn)
+
+  const sortOptions = [
+    { id: "createdAt", label: "Recent" },
+    { id: "hearts", label: "Popular" }
+  ]
+  const filterOptions = ["all", "travel", "food", "family", "friends", "humor", "nature", "wellness", "home", "entertainment", "work", "other"]
+
+  const onSortingChange = (event) => {
+    setSorting(event.target.value)
+    onSort(event.target.value)
+  }
+
+  const onFilterChange = (event) => {
+    setFilter(event.target.value)
+    onFilter(event.target.value)
+  }
+
+  return (
+    <article
+      className="px-5 text-sm"
+    >
+      <form className="flex flex-col gap-3">
+
+        <fieldset className="flex items-center gap-8">
+          <legend className="float-left" >Sort on:</legend>
+          <div className="flex gap-5">
+            {sortOptions.map(({ id, label }) => (
+              <RadioOption
+                key={id}
+                radioGroup="sortBy"
+                id={id}
+                label={label}
+                isChecked={sorting === id}
+                onChange={onSortingChange}
+              />
+            ))}
+          </div>
+        </fieldset>
+
+        <div className="flex items-center gap-6">
+          <label className="" htmlFor="tags">Filter on:</label>
+          <select
+            className="w-45 bg-[#ffeded] border border-(--color-accent) rounded-full focus:outline-2 focus:outline-(--color-primary) p-1 cursor-pointer"
+            name="tags"
+            id="tags"
+            value={filter}
+            onChange={onFilterChange}
+          >
+            {filterOptions.map((option) => (
+              <FilterOption key={option} value={option} />
+            ))}
+          </select>
+        </div>
+      </form>
+    </article>
+  )
+}
+
+export default ListControls
diff --git a/src/components/Loader.jsx b/src/components/Loader.jsx
@@ -0,0 +1,10 @@
+const Loader = () => {
+  return (
+    <div className="flex flex-col gap-2 items-center py-10">
+      <div className="w-12 h-12 rounded-full border-7 border-(--color-accent) border-t-(--color-primary) animate-spin"></div>
+      <p>Loading thoughts...</p>
+    </div>
+  )
+}
+
+export default Loader
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		# Happy Thoughts
		Link: https://think-happy.netlify.app/