notkshitij/CropCompass
1
1
Fork 0
Code Issues 8 Pull Requests Projects 1 Releases Activity

Fix:Replaced 'class' with 'className' in many files

Browse Source
This commit is contained in:
Atharva
2025-02-23 00:52:53 +05:30
parent 27955fc264
commit cbff64906b
12 changed files with 204 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Frontend/src/App.jsx
+3 -3
View File
@@ -44,11 +44,11 @@ function App() {
loader ? "block" : "hidden" loader ? "block" : "hidden"
} absolute w-full h-full bg-black opacity-50 top-0 left-0`} } absolute w-full h-full bg-black opacity-50 top-0 left-0`}
> >
<div class="text-center my-96"> <div className="text-center my-96">
<div role="status"> <div role="status">
<svg <svg
aria-hidden="true" aria-hidden="true"
class="inline w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-blue-900" className="inline w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-blue-900"
viewBox="0 0 100 101" viewBox="0 0 100 101"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -62,7 +62,7 @@ function App() {
fill="currentFill" fill="currentFill"
/> />
</svg> </svg>
<span class="sr-only">Loading...</span> <span className="sr-only">Loading...</span>
</div> </div>
</div> </div>
</div> </div>
Frontend/src/components/Logs.jsx
+22 -22
View File
@@ -3,57 +3,57 @@ import { Link } from "react-router-dom";
const Logs = () => { const Logs = () => {
return ( return (
<> <>
<div class="relative overflow-y-hidden"> <div className="relative overflow-y-hidden">
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 border"> <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 border">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"> <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr> <tr>
<th scope="col" class="px-6 py-3"> <th scope="col" className="px-6 py-3">
Product name Product name
</th> </th>
<th scope="col" class="px-6 py-3"> <th scope="col" className="px-6 py-3">
Color Color
</th> </th>
<th scope="col" class="px-6 py-3"> <th scope="col" className="px-6 py-3">
Category Category
</th> </th>
<th scope="col" class="px-6 py-3"> <th scope="col" className="px-6 py-3">
Price Price
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200"> <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200">
<th <th
scope="row" scope="row"
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
> >
Apple MacBook Pro 17" Apple MacBook Pro 17"
</th> </th>
<td class="px-6 py-4">Silver</td> <td className="px-6 py-4">Silver</td>
<td class="px-6 py-4">Laptop</td> <td className="px-6 py-4">Laptop</td>
<td class="px-6 py-4">$2999</td> <td className="px-6 py-4">$2999</td>
</tr> </tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200"> <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200">
<th <th
scope="row" scope="row"
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
> >
Microsoft Surface Pro Microsoft Surface Pro
</th> </th>
<td class="px-6 py-4">White</td> <td className="px-6 py-4">White</td>
<td class="px-6 py-4">Laptop PC</td> <td className="px-6 py-4">Laptop PC</td>
<td class="px-6 py-4">$1999</td> <td className="px-6 py-4">$1999</td>
</tr> </tr>
<tr class="bg-white dark:bg-gray-800"> <tr className="bg-white dark:bg-gray-800">
<th <th
scope="row" scope="row"
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
> >
Magic Mouse 2 Magic Mouse 2
</th> </th>
<td class="px-6 py-4">Black</td> <td className="px-6 py-4">Black</td>
<td class="px-6 py-4">Accessories</td> <td className="px-6 py-4">Accessories</td>
<td class="px-6 py-4">$99</td> <td className="px-6 py-4">$99</td>
</tr> </tr>
</tbody>{" "} </tbody>{" "}
</table>{" "} </table>{" "}
Frontend/src/pages/Home/Footer.jsx
+10 -4
View File
@@ -7,7 +7,10 @@ const Footer = () => {
<div className="mx-auto w-full max-w-screen-xl p-4 py-6 lg:py-8"> <div className="mx-auto w-full max-w-screen-xl p-4 py-6 lg:py-8">
<div className="md:flex md:justify-between"> <div className="md:flex md:justify-between">
<div className="mb-6 md:mb-0"> <div className="mb-6 md:mb-0">
<a href="https://flowbite.com/" class="flex items-center gap-2"> <a
href="https://flowbite.com/"
className="flex items-center gap-2"
>
<img <img
src="/images/logo.png" src="/images/logo.png"
className="h-9 rounded-full" className="h-9 rounded-full"
@@ -25,12 +28,15 @@ const Footer = () => {
</h2> </h2>
<ul className="text-gray-500 dark:text-gray-400 font-medium"> <ul className="text-gray-500 dark:text-gray-400 font-medium">
<li className="mb-4"> <li className="mb-4">
<a href="https://flowbite.com/" class="hover:underline"> <a href="https://flowbite.com/" className="hover:underline">
Flowbite Flowbite
</a> </a>
</li> </li>
<li> <li>
<a href="https://tailwindcss.com/" class="hover:underline"> <a
href="https://tailwindcss.com/"
className="hover:underline"
>
Tailwind CSS Tailwind CSS
</a> </a>
</li> </li>
@@ -82,7 +88,7 @@ const Footer = () => {
<div className="sm:flex sm:items-center sm:justify-between"> <div className="sm:flex sm:items-center sm:justify-between">
<span className="text-sm text-gray-500 sm:text-center dark:text-gray-400"> <span className="text-sm text-gray-500 sm:text-center dark:text-gray-400">
© 2024{" "} © 2024{" "}
<a href="https://flowbite.com/" class="hover:underline"> <a href="https://flowbite.com/" className="hover:underline">
MentorFlux™ MentorFlux™
</a> </a>
. All Rights Reserved. . All Rights Reserved.
Frontend/src/pages/Home/Hero.jsx
+7 -7
View File
@@ -15,17 +15,17 @@ const Hero = () => {
Find Your Perfect Mentor Find Your Perfect Mentor
</h1> </h1>
<div className="flex gap-4 justify-center md:justify-start"> <div className="flex gap-4 justify-center md:justify-start">
<form class="w-full md:w-3/5"> <form className="w-full md:w-3/5">
<label <label
for="default-search" for="default-search"
class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white" className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white"
> >
Search Search
</label> </label>
<div class="relative"> <div className="relative">
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none"> <div className="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
<svg <svg
class="w-4 h-4 text-gray-500 dark:text-gray-400" className="w-4 h-4 text-gray-500 dark:text-gray-400"
aria-hidden="true" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
@@ -43,14 +43,14 @@ const Hero = () => {
<input <input
type="search" type="search"
id="default-search" id="default-search"
class="block w-full p-4 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" className="block w-full p-4 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="Search for mentors" placeholder="Search for mentors"
required required
/> />
<Link <Link
to={"/mentor"} to={"/mentor"}
type="button" type="button"
class="text-white absolute end-2.5 bottom-2.5 bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800" className="text-white absolute end-2.5 bottom-2.5 bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800"
> >
Find your Mentor Find your Mentor
</Link> </Link>
Frontend/src/pages/Home/SubjectSection.jsx
+1 -1
View File
@@ -162,7 +162,7 @@ const SubjectSection = () => {
> >
<div className="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 md:w-9 md:h-9 text-gray-500 bg-gray-100 rounded-lg dark:bg-gray-800 dark:text-gray-200"> <div className="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 md:w-9 md:h-9 text-gray-500 bg-gray-100 rounded-lg dark:bg-gray-800 dark:text-gray-200">
<FaReplyAll className="text-base sm:text-xl" /> <FaReplyAll className="text-base sm:text-xl" />
<span class="sr-only">Check icon</span> <span className="sr-only">Check icon</span>
</div> </div>
<div className="ms-3 text-base sm:text-xl font-bold text-black font-sans"> <div className="ms-3 text-base sm:text-xl font-bold text-black font-sans">
See all See all
Frontend/src/pages/Home/Testimonial.jsx
+37 -30
View File
@@ -9,7 +9,9 @@ const Testimonial = () => {
<section className="bg-gray-100 py-12 px-2 md:px-32"> <section className="bg-gray-100 py-12 px-2 md:px-32">
<div className="container mx-auto"> <div className="container mx-auto">
<div className="text-center"> <div className="text-center">
<h2 className="text-xl sm:text-4xl font-bold mb-4">WHY CHOOSE US</h2> <h2 className="text-xl sm:text-4xl font-bold mb-4">
WHY CHOOSE US
</h2>
<h1 className="text-3xl sm:text-6xl font-bold mb-4"> <h1 className="text-3xl sm:text-6xl font-bold mb-4">
Benefits of online tutoring services with us Benefits of online tutoring services with us
</h1> </h1>
@@ -31,7 +33,9 @@ const Testimonial = () => {
<div className="bg-white rounded-lg p-6 text-start shadow-md flex flex-col gap-2"> <div className="bg-white rounded-lg p-6 text-start shadow-md flex flex-col gap-2">
<FaClock className=" text-4xl p-1.5 rounded-lg text-white bg-green-600 " /> <FaClock className=" text-4xl p-1.5 rounded-lg text-white bg-green-600 " />
<h3 className="text-xl font-bold mb-2">24/7 Mentor Availability</h3> <h3 className="text-xl font-bold mb-2">
24/7 Mentor Availability
</h3>
<p className="text-gray-600 text-sm"> <p className="text-gray-600 text-sm">
Our Mentors are always available to respond as quick as Our Mentors are always available to respond as quick as
possible for you possible for you
@@ -45,38 +49,41 @@ const Testimonial = () => {
<h3 className="text-xl font-bold mb-2">Interactive Session</h3> <h3 className="text-xl font-bold mb-2">Interactive Session</h3>
<p className="text-gray-600 text-sm"> <p className="text-gray-600 text-sm">
Our digital messaging with audio and video chat features give interactiveness. Our digital messaging with audio and video chat features give
interactiveness.
</p> </p>
</div> </div>
</div> </div>
{/* <div class="w-full md:w-1/3 p-4"> {/* <div className="w-full md:w-1/3 p-4">
<div class="bg-white rounded-lg p-6 text-center shadow-md"> <div className="bg-white rounded-lg p-6 text-center shadow-md">
<img <img
src="https://cdn-icons-png.flaticon.com/512/2768/2768851.png" src="https://cdn-icons-png.flaticon.com/512/2768/2768851.png"
alt="Icon" alt="Icon"
class="w-12 h-12 mb-4" className="w-12 h-12 mb-4"
/> />
<h3 class="text-2xl font-bold mb-2">Interactive Whiteboard</h3> <h3 className="text-2xl font-bold mb-2">
<p class="text-gray-600"> Interactive Whiteboard
Our digital whiteboard equipped with audio and video chat </h3>
features <p className="text-gray-600">
</p> Our digital whiteboard equipped with audio and video chat
</div> features
</div> </p>
<div class="w-full md:w-1/3 p-4"> </div>
<div class="bg-white rounded-lg p-6 text-center shadow-md"> </div>
<img <div className="w-full md:w-1/3 p-4">
src="https://cdn-icons-png.flaticon.com/512/2768/2768851.png" <div className="bg-white rounded-lg p-6 text-center shadow-md">
alt="Icon" <img
class="w-12 h-12 mb-4" src="https://cdn-icons-png.flaticon.com/512/2768/2768851.png"
/> alt="Icon"
<h3 class="text-2xl font-bold mb-2">Affordable Prices</h3> className="w-12 h-12 mb-4"
<p class="text-gray-600"> />
Choose an expert tutor based on your budget and per hour <h3 className="text-2xl font-bold mb-2">Affordable Prices</h3>
</p> <p className="text-gray-600">
</div> Choose an expert tutor based on your budget and per hour
</div> */} </p>
</div>
</div> */}
</div> </div>
</div> </div>
</section> </section>
Frontend/src/pages/Password/ResetPassword.jsx
+1 -2
View File
@@ -109,7 +109,7 @@ const ResetPassword = () => {
<button <button
type="submit" type="submit"
class="focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-base px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900" className="focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-base px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900"
> >
Reset Password Reset Password
</button> </button>
@@ -127,5 +127,4 @@ const ResetPassword = () => {
</> </>
); );
}; };
export default ResetPassword; export default ResetPassword;
Frontend/src/pages/UserPanel/Farm/AddCrop.jsx
+67
View File
@@ -0,0 +1,67 @@
import { useEffect } from "react";
const AddCrop = () => {
return (
<>
{" "}
<form onSubmit={handleAvatar}>
<div className="flex items-center justify-center w-full">
<img src={formData.avatar && `${formData.avatar}`} alt="" />
<label
for="dropzone-file"
className="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600"
>
<div className="flex flex-col items-center justify-center pt-5 pb-6 ">
<svg
className="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 20 16"
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
/>
</svg>
<p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
{avatar ? (
<span className="font-semibold">
Avatar uploaded successfulky
</span>
) : (
<span className="font-semibold">
Click to upload and press Upload button
</span>
)}
</p>
<p className="text-xs text-gray-500 dark:text-gray-400">
SVG, PNG, JPG or GIF (MAX. 800x400px)
</p>
<button
type="submit"
className="bg-gray-600 px-4 py-1 rounded-lg text-white font-semibold my-4"
>
Upload
</button>
</div>
<input
id="dropzone-file"
type="file"
className="hidden"
onChange={(e) => {
setAvatar(e.target.files[0]);
//console.log(e.target.files[0]);
}}
/>
</label>
</div>
</form>
</>
);
};
export default AddCrop;
Frontend/src/pages/UserPanel/Farm/FarmPage.jsx
+1 -1
View File
@@ -1,7 +1,7 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { useParams, useNavigate } from "react-router-dom"; import { useParams, useNavigate } from "react-router-dom";
import Farm from "./Farm"; import Farm from "./Farm";
import AddCrop from "../Crops/AddCrop"; import AddCrop from "./AddCrop";
export default function FarmPage() { export default function FarmPage() {
const { farmId } = useParams(); const { farmId } = useParams();
Frontend/src/pages/UserPanel/MainUserPanel.jsx
+11 -11
View File
@@ -198,7 +198,7 @@ const MainUserPanel = () => {
<button <button
data-collapse-toggle="navbar-user" data-collapse-toggle="navbar-user"
type="button" type="button"
class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
aria-controls="navbar-user" aria-controls="navbar-user"
aria-expanded="false" aria-expanded="false"
> >
@@ -221,30 +221,30 @@ const MainUserPanel = () => {
</button> </button>
</div> </div>
</div> </div>
<div class="mb-4"> <div className="mb-4">
<img <img
src={`${user.avatar}`} src={`${user.avatar}`}
alt="Profile Picture" alt="Profile Picture"
class="rounded-full w-24 h-24 mx-auto" className="rounded-full w-24 h-24 mx-auto"
/> />
<h4 class="text-lg font-medium mt-2">{user.name}</h4> <h4 className="text-lg font-medium mt-2">{user.name}</h4>
{/* <span class="text-gray-500 text-sm">@thomasdox</span> */} {/* <span className="text-gray-500 text-sm">@thomasdox</span> */}
<p class="text-gray-500 text-sm mt-2"> <p className="text-gray-500 text-sm mt-2">
Join on {user.createdAt && user.createdAt.substring(0, 10)} Join on {user.createdAt && user.createdAt.substring(0, 10)}
</p> </p>
<p class="text-gray-500 text-sm mt-2"> <p className="text-gray-500 text-sm mt-2">
{user.description == null && {user.description == null &&
"I am a Senior Software Engineer at Google and also mentored 50+ students to get there dream job."} "I am a Senior Software Engineer at Google and also mentored 50+ students to get there dream job."}
</p> </p>
<div class="flex justify-center mt-4"> <div className="flex justify-center mt-4">
<button class="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded mr-2"> <button className="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded mr-2">
<FaHome className="text-lg font-extrabold" /> <FaHome className="text-lg font-extrabold" />
</button> </button>
<button class="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded mr-2"> <button className="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded mr-2">
<IoMdSettings className="text-lg font-extrabold" /> <IoMdSettings className="text-lg font-extrabold" />
</button> </button>
<button <button
class="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded" className="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded"
onClick={handleLogOut} onClick={handleLogOut}
> >
<RiLogoutBoxLine className="text-lg font-extrabold" /> <RiLogoutBoxLine className="text-lg font-extrabold" />
Frontend/src/pages/UserPanel/MentorSessionCard.jsx
+33 -35
View File
@@ -55,45 +55,43 @@ const MentorSessionCard = ({ session }) => {
const realTimeString = timeStringtoRealTime(schduledTime); const realTimeString = timeStringtoRealTime(schduledTime);
return ( return (
<> <li className="flex flex-col gap-5 w-full h-auto max-h-28 px-3 py-1 rounded-md hover:bg-slate-100 border-b-2">
<li class="flex flex-col gap-5 w-full h-auto max-h-28 px-3 py-1 rounded-md hover:bg-slate-100 border-b-2"> <div className="flex items-center">
<div class="flex items-center"> <div className="flex-shrink-0">
<div class="flex-shrink-0"> <img
<img className="w-8 h-8 rounded-full"
class="w-8 h-8 rounded-full" src="/images/profile.jpeg"
src="/images/profile.jpeg" alt="Neil image"
alt="Neil image" />
/> </div>
</div> <div className="flex-1 min-w-0 ms-4">
<div class="flex-1 min-w-0 ms-4"> <p className="text-sm font-medium text-gray-900 truncate dark:text-white">
<p class="text-sm font-medium text-gray-900 truncate dark:text-white"> {user.role === "user" ? mentorName : studentName}
{user.role === "user" ? mentorName : studentName} </p>
</p> <p className="text-sm text-gray-500 truncate dark:text-gray-400">
<p class="text-sm text-gray-500 truncate dark:text-gray-400"> {user.role === "user" ? mentorMail : studentMail}
{user.role === "user" ? mentorMail : studentMail} </p>
</div>
<div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">
₹{amountPaid}
</div>
</div>
<div className="flex justify-between">
<div className="flex items-center">
<div>
<p className="text-gray-500">
{timeStringToDayName(schduledTime)},
{realTimeString.substring(21, 26) +
" " +
realTimeString.substring(30)}
</p> </p>
</div> </div>
<div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">
₹{amountPaid}
</div>
</div> </div>
<div className="flex justify-between"> <div className="flex items-center">
<div className="flex items-center"> <p className="text-gray-500">{realTimeString.substring(0, 18)}</p>
<div>
<p className="text-gray-500">
{timeStringToDayName(schduledTime)},
{realTimeString.substring(21, 26) +
" " +
realTimeString.substring(30)}
</p>
</div>
</div>
<div className="flex items-center">
<p className="text-gray-500">{realTimeString.substring(0, 18)}</p>
</div>
</div> </div>
</li> </div>
</> </li>
); );
}; };
Frontend/src/pages/UserPanel/Settings.jsx
+11 -11
View File
@@ -95,15 +95,15 @@ const Settings = () => {
</div> </div>
</div> </div>
<form onSubmit={handleAvatar}> <form onSubmit={handleAvatar}>
<div class="flex items-center justify-center w-full"> <div className="flex items-center justify-center w-full">
<img src={formData.avatar && `${formData.avatar}`} alt="" /> <img src={formData.avatar && `${formData.avatar}`} alt="" />
<label <label
for="dropzone-file" htmlFor="dropzone-file"
class="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600" className="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600"
> >
<div class="flex flex-col items-center justify-center pt-5 pb-6 "> <div className="flex flex-col items-center justify-center pt-5 pb-6">
<svg <svg
class="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400" className="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400"
aria-hidden="true" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
@@ -117,18 +117,18 @@ const Settings = () => {
d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
/> />
</svg> </svg>
<p class="mb-2 text-sm text-gray-500 dark:text-gray-400"> <p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
{avatar ? ( {avatar ? (
<span class="font-semibold"> <span className="font-semibold">
Avatar uploaded successfulky Avatar uploaded successfully
</span> </span>
) : ( ) : (
<span class="font-semibold"> <span className="font-semibold">
Click to upload and press Upload button Click to upload and press Upload button
</span> </span>
)} )}
</p> </p>
<p class="text-xs text-gray-500 dark:text-gray-400"> <p className="text-xs text-gray-500 dark:text-gray-400">
SVG, PNG, JPG or GIF (MAX. 800x400px) SVG, PNG, JPG or GIF (MAX. 800x400px)
</p> </p>
<button <button
@@ -141,7 +141,7 @@ const Settings = () => {
<input <input
id="dropzone-file" id="dropzone-file"
type="file" type="file"
class="hidden" className="hidden"
onChange={(e) => { onChange={(e) => {
setAvatar(e.target.files[0]); setAvatar(e.target.files[0]);
//console.log(e.target.files[0]); //console.log(e.target.files[0]);