created user profile

Author: Adonis-12

README.md

@@ -1,114 +0,0 @@
-# TASKR (A HELPER FINDER APP)
-📌 Project Overview
-A taskr web application built with:
-
-Frontend: React + Vite
-
-Routing: React Router
-
-Styling: Tailwind CSS
-
-API: JSONPlaceholder (mock data) , Robohash 
-
-Live Demo: Deployed Link (Add your deployment link here)
-
-#🚀 Features
-✅ Landing Page - Introduction to the app
-✅ Find Helper - Displays a list of helpers fetched from an API
-✅ Navigation - Smooth scrolling between sections
-✅ Authentication Pages - Login & Signup (UI only)
-
-#🛠️ Installation & Setup
-1. Clone the Repository
-bash
-git clone https://github.com/Adonis-12/taskr.git
-cd helper-finder
-2. Install Dependencies
-bash
-npm install
-3. Run the Development Server
-bash
-npm run dev
-Open http://localhost:3000 in your browser.
-
-#4. Build for Production
-bash
-npm run build
-
-
-#📂 Project Structure
-src/
-├── components/
-│   ├── navigation/       # Navigation bar
-│   ├── landingPage/      # Hero section
-│   ├── findHelper/       # Helper listing
-│   ├── footer/           # Footer
-│   ├── login/            # Login page
-│   └── signup/           # Signup page   
-├── App.jsx               # Main app & router setup
-├── main.jsx              # Vite entry point
-└── styles/               # Global CSS (if any)
-
-
-#🔧 Key Code Implementation
-1. Data Fetching (API)
-Fetches mock users from JSONPlaceholder
-
-Handles loading & error states
-
-#jsx
-// Inside Home.jsx
-useEffect(() => {
-  fetch('https://jsonplaceholder.typicode.com/users')
-    .then((res) => res.json())
-    .then((data) => setUsers(data))
-    .catch((err) => setError(err));
-}, []);
-
-
-#2. Smooth Scrolling (react-scroll)
-Navigation links scroll to sections smoothly
-
-jsx
-<Link to="findhelper-section" smooth={true} duration={500}>
-  Find Helper
-</Link>
-
-
-#3. Routing (React Router)
-Handles /, /login, /signup routes
-
-jsx
-const router = createBrowserRouter([
-  { path: "/", element: <Home /> },
-  { path: "/login", element: <LoginPage /> },
-  { path: "/signup", element: <SignupPage /> }
-]);
-
-
-#🔗 Dependencies
-Package	Usage
-react	Core library
-react-router-dom	Routing
-react-scroll	Smooth scrolling
-tailwindcss	Styling
-vite	Build tool
-📝 How to Contribute
-Fork the repository
-
-Create a new branch (git checkout -b feature/new-feature)
-
-Commit changes (git commit -m "Add new feature")
-
-Push to the branch (git push origin feature/new-feature)
-
-Open a Pull Request
-
-#📜 License
-MIT License - Free to use and modify.
-
-📬 Contact
-Mayank Banga- mayankbanga84@gmail.com
-
-
-

src/App.jsx

@@ -9,6 +9,7 @@ import SignUp from './components/signup/SignUp';
 import Home from './components/home/Home';
 import LoginNav from "./components/loginnav/LoginNav";
 import NotFound from "./components/notfound/NotFound";
+import UserDashboard from "./components/userdashboard/UserDashboard";
 
 const App = () => {
 
@@ -39,6 +40,9 @@ const App = () => {
       <Home />
     </div>
     </>},
+    {
+      path:'/dashboard/:id',element:<UserDashboard />
+    },
     {
       path:'*', element:
       <NotFound />

src/assets/fonts/Montserrat-VariableFont_wght.ttf

@@ -3,6 +3,8 @@ import Navigation from '../navigation/Navigation';
 import LandingPage from '../landingPage/LandingPage';
 import FindHelper from '../findHelper/FindHelper';
 import Footer from '../footer/Footer';
+// import UserDashboard from '../userdashboard/UserDashboard';
+
 
 function Root() {
     const [users, setUsers] = useState([]);

src/assets/fonts/OpenSans-VariableFont_wdth,wght.ttf

@@ -0,0 +1,56 @@
+import React from 'react'
+import UserProfile from './UserProfile/UserProfile'
+import { NavLink } from 'react-router-dom'
+import { ScrollArea } from '../ui/scroll-area'
+
+
+function UserDashboard() {
+  return (
+    <div className='w-screen h-screen bg-black flex font-mont'>
+    {/* sidebar */}
+    <div className='h-full w-1/6 grid  gap-2 text-gray-500 bg-inherit justify-items-center '>
+    <div className='place-self-center justify-self-center row-span-5 '>
+      <div className=' aspect-square w-3/4   rounded-full  overflow-hidden justify-items-center place-self-center shadow-md ring-2 ring-offset-white '>
+            <img alt='profile' className='w-full h-auto ' 
+            src='https://images.unsplash.com/photo-1676477208892-3a59818985bd?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8cG90cmFpdHxlbnwwfHwwfHx8MA%3D%3D'></img>
+        </div>
+        <div className='justify-self-center mt-2 '>
+          <h1 className='text-2xl text-white font-bold'>Samantha</h1>
+          <h2 className='text-md '>samantha@gmail.com</h2>
+        </div>
+    </div>
+        
+        <div className='row-span-6'>
+          <ul className='grid grid-rows-1 gap-3   font-bold tracking-wider'>
+            <NavLink to='/dashboard/profile' className={({isActive}) => {
+              return isActive? 'text-white bg-white/20 rounded-full p-3 w-full':'  w-full  p-3 hover:bg-white/20  hover:text-white  hover:rounded-full hover:duration-200 hover:animate-in '
+            }}><li>Profile</li></NavLink>
+            <NavLink to='/dashboard/bookings' className={({isActive}) => {
+              return isActive? 'text-white bg-white/20 rounded-full p-3 w-full':'  w-full  p-3 hover:bg-white/20  hover:text-white  hover:rounded-full hover:duration-200 hover:animate-in '
+            }}><li>Bookings</li></NavLink>
+            <NavLink to='/dashboard/history' className={({isActive}) => {
+              return isActive? 'text-white bg-white/20 rounded-full p-3 w-full':'  w-full  p-3 hover:bg-white/20  hover:text-white  hover:rounded-full hover:duration-200 hover:animate-in '
+            }}><li> History</li></NavLink>
+            <NavLink to='/dashboard/payments' className={({isActive}) => {
+              return isActive? 'text-white bg-white/20 rounded-full p-3 w-full':'  w-full  p-3 hover:bg-white/20  hover:text-white  hover:rounded-full hover:duration-200 hover:animate-in '
+            }}><li>Payments</li></NavLink>
+            <NavLink to='/dashboard/others' className={({isActive}) => {
+              return isActive? 'text-white bg-white/20 rounded-full p-3 w-full':'  w-full  p-3 hover:bg-white/20  hover:text-white  hover:rounded-full hover:duration-200 hover:animate-in '
+            }}><li>Other</li></NavLink>
+          </ul> 
+        </div>
+    </div>
+    {/*sidebar*/}
+
+    {/* dashboard panel */}
+    <div className=' w-full h-screen flex place-items-center'>
+    <ScrollArea className='h-9/10 w-full rounded-lg m-8  bg-white/90'>
+          <UserProfile />
+    </ScrollArea>
+    </div>
+    {/* dashboard panel */}
+    </div>
+  )
+}
+
+export default UserDashboard