Skip to content

Commit

Permalink
fear : dark mode switch
Browse files Browse the repository at this point in the history
  • Loading branch information
@Puskar-Roy
Puskar-Roy committed Jul 17, 2024
1 parent b034feb commit 12a64bf
Showing 1 changed file with 52 additions and 63 deletions.
115 changes: 52 additions & 63 deletions apps/frontend/src/components/ProfileSetup.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,64 +1,62 @@
import { useState, ChangeEvent, FormEvent } from 'react';



interface FormData {
companyName: string;
companyMail: string;
companyWebsite: string;
companyAddress: string;
location: string;
description: string;
logo: File | null;
}
companyName: string;
companyMail: string;
companyWebsite: string;
companyAddress: string;
location: string;
description: string;
logo: File | null;
}

const ProfileSetup = () => {
const [formData, setFormData] = useState<FormData>({
companyName: '',
companyMail: '',
companyWebsite: '',
companyAddress: '',
location: '',
description: '',
logo: null,
});
const handleInputChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
const { name, value } = e.target;
setFormData({ ...formData, [name]: value });
};
const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
const file = e.target.files ? e.target.files[0] : null;
setFormData({ ...formData, logo: file });
};
const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
// Handle form submission
console.log(formData);
};
const [formData, setFormData] = useState<FormData>({
companyName: '',
companyMail: '',
companyWebsite: '',
companyAddress: '',
location: '',
description: '',
logo: null,
});

const handleInputChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
const { name, value } = e.target;
setFormData({ ...formData, [name]: value });
};

const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
const file = e.target.files ? e.target.files[0] : null;
setFormData({ ...formData, logo: file });
};

const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
// Handle form submission
console.log(formData);
};

return (
<div
className="relative min-h-screen flex items-center justify-center bg-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8 bg-gray-500 bg-no-repeat bg-cover"
className="relative min-h-screen flex items-center justify-center bg-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8 bg-gray-500 bg-no-repeat bg-cover dark:bg-gray-900"
style={{
backgroundImage:
'url(https://images.unsplash.com/photo-1532423622396-10a3f979251a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1500&q=80)',
}}
>
<div className="absolute bg-black opacity-60 inset-0 z-0"></div>
<div className="max-w-md w-full space-y-8 p-10 bg-white rounded-xl shadow-lg z-10">
<div className="max-w-md w-full space-y-8 p-10 bg-white rounded-xl shadow-lg z-10 dark:bg-gray-800">
<div className="grid gap-8 grid-cols-1">
<div className="flex flex-col">
<div className="flex flex-col sm:flex-row items-center">
<h2 className="font-semibold text-lg mr-auto">Profile Setup</h2>
<h2 className="font-semibold text-lg mr-auto dark:text-white">Profile Setup</h2>
<div className="w-full sm:w-auto sm:ml-auto mt-3 sm:mt-0"></div>
</div>
<div className="mt-5">
<form onSubmit={handleSubmit}>
<div className="md:space-y-2 mb-3">
<label className="text-xs font-semibold text-gray-600 py-2">
<label className="text-xs font-semibold text-gray-600 py-2 dark:text-gray-300">
Puskar Roy<abbr className="hidden" title="required">*</abbr>
</label>
<div className="flex items-center py-6">
Expand All @@ -81,12 +79,12 @@ const ProfileSetup = () => {
</div>
<div className="md:flex flex-row md:space-x-4 w-full text-xs">
<div className="mb-3 space-y-2 w-full text-xs">
<label className="font-semibold text-gray-600 py-2">
<label className="font-semibold text-gray-600 py-2 dark:text-gray-300">
Your Name <abbr title="required">*</abbr>
</label>
<input
placeholder="Name"
className="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded-lg h-10 px-4"
className="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded-lg h-10 px-4 dark:bg-gray-700 dark:text-white"
required
type="text"
name="companyName"
Expand All @@ -95,12 +93,12 @@ const ProfileSetup = () => {
/>
</div>
<div className="mb-3 space-y-2 w-full text-xs">
<label className="font-semibold text-gray-600 py-2">
<label className="font-semibold text-gray-600 py-2 dark:text-gray-300">
Your Mail <abbr title="required">*</abbr>
</label>
<input
placeholder="Email ID"
className="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded-lg h-10 px-4"
className="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded-lg h-10 px-4 dark:bg-gray-700 dark:text-white"
required
type="email"
name="companyMail"
Expand All @@ -110,7 +108,7 @@ const ProfileSetup = () => {
</div>
</div>
<div className="mb-3 space-y-2 w-full text-xs">
<label className="font-semibold text-gray-600 py-2">Your Any Social</label>
<label className="font-semibold text-gray-600 py-2 dark:text-gray-300">Your Any Social</label>
<div className="flex flex-wrap items-stretch w-full mb-4 relative">
<div className="flex">
<span className="flex items-center leading-normal bg-grey-lighter border-1 rounded-r-none border border-r-0 border-blue-300 px-3 whitespace-no-wrap text-grey-dark text-sm w-12 h-10 bg-blue-300 justify-center items-center text-xl rounded-lg text-white">
Expand All @@ -132,7 +130,7 @@ const ProfileSetup = () => {
</div>
<input
type="url"
className="flex-shrink flex-grow flex-auto leading-normal w-px flex-1 border border-l-0 h-10 border-grey-light rounded-lg rounded-l-none px-3 relative focus:border-blue focus:shadow"
className="flex-shrink flex-grow flex-auto leading-normal w-px flex-1 border border-l-0 h-10 border-grey-light rounded-lg rounded-l-none px-3 relative focus:border-blue focus:shadow dark:bg-gray-700 dark:text-white"
placeholder="https://"
name="companyWebsite"
value={formData.companyWebsite}
Expand All @@ -142,22 +140,22 @@ const ProfileSetup = () => {
</div>
<div className="md:flex md:flex-row md:space-x-4 w-full text-xs">
<div className="w-full flex flex-col mb-3">
<label className="font-semibold text-gray-600 py-2">Your Address</label>
<label className="font-semibold text-gray-600 py-2 dark:text-gray-300">Your Address</label>
<input
placeholder="Address"
className="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded-lg h-10 px-4"
className="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded-lg h-10 px-4 dark:bg-gray-700 dark:text-white"
type="text"
name="companyAddress"
value={formData.companyAddress}
onChange={handleInputChange}
/>
</div>
<div className="w-full flex flex-col mb-3">
<label className="font-semibold text-gray-600 py-2">
<label className="font-semibold text-gray-600 py-2 dark:text-gray-300">
Your Service<abbr title="required">*</abbr>
</label>
<select
className="block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded-lg h-10 px-4 md:w-full"
className="block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded-lg h-10 px-4 md:w-full dark:bg-gray-700 dark:text-white"
required
name="location"
value={formData.location}
Expand All @@ -168,35 +166,26 @@ const ProfileSetup = () => {
<option value="ELECTRICIAN">ELECTRICIAN</option>
<option value="PLUMBER">PLUMBER</option>
<option value="CARPENTER">CARPENTER</option>


</select>
</div>
</div>
<div className="flex-auto w-full mb-1 text-xs space-y-2">
<label className="font-semibold text-gray-600 py-2">Description</label>
<label className="font-semibold text-gray-600 py-2 dark:text-gray-300">Description</label>
<textarea
required
name="description"
className="w-full min-h-[100px] max-h-[300px] h-28 appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded-lg py-4 px-4"
placeholder="Tell Me About Your Self"
spellCheck="false"
className="w-full min-h-[100px] max-h-[300px] h-28 appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded-lg py-4 px-4 dark:bg-gray-700 dark:text-white"
placeholder="Enter your description"
value={formData.description}
onChange={handleInputChange}
></textarea>
</div>
<div className="mt-5 text-right md:space-x-3 md:block flex flex-col-reverse">
<button
type="button"
className="mb-2 md:mb-0 bg-white px-5 py-2 text-sm shadow-sm font-medium tracking-wider border text-gray-600 rounded-full hover:shadow-lg hover:bg-gray-100"
>
Cancel
</button>
<button
type="submit"
className="mb-2 md:mb-0 bg-blue-400 px-5 py-2 text-sm shadow-sm font-medium tracking-wider text-white rounded-full hover:shadow-lg hover:bg-blue-500"
className="mb-2 md:mb-0 bg-blue-400 px-5 py-2 text-sm shadow-sm font-medium tracking-wider border text-white rounded-full hover:shadow-lg hover:bg-blue-500"
>
Submit
Send
</button>
</div>
</form>
Expand Down

0 comments on commit 12a64bf

Please sign in to comment.