Skip to content

Commit

Permalink
clean code - remove repeated code block settings page
Browse files Browse the repository at this point in the history
  • Loading branch information
@nightsailor
nightsailor committed Jun 2, 2022
1 parent 7a95c2f commit f74dc54
Showing 1 changed file with 110 additions and 197 deletions.
307 changes: 110 additions & 197 deletions pages/app/settings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,8 @@ export default function Settings({ profile }: Props) {
Account Settings
</h1>
<hr className="mb-5 border-t-[1.4px] border-solid border-[#C9C9C9]" />
<div className="mmd:pl-6">
{/* Image, Upload button, Social media icons */}
<div className="mlg:pl-6">
<div className="flex items-center justify-between w-[88%]">
<Avatar
image={profilePhoto ? URL.createObjectURL(profilePhoto) : profile.image}
Expand Down Expand Up @@ -123,210 +124,119 @@ export default function Settings({ profile }: Props) {
type="file"
accept="image/*"
/>
{socials ? (
<div className="flex items-center justify-between w-[51%]">
<div className="mxs:space-x-5 flex gap-5 items-center my-6">
<span className="cursor-pointer">
<GithubIcon className="mxs:w-[32px]" width={32} />
</span>
<span className="mxs:w-[32px] cursor-pointer">
<TwitterIcon width={41} height={33} />
</span>
<span className="mxs:w-[30px] cursor-pointer">
<LinkedinIcon width={35} height={31} />
</span>
</div>
<span
className="border-2 font-semibold border-[#C9C9C9] text-[#C9C9C9] px-3 py-1 rounded-md cursor-pointer hover:text-black hover:border-black dark:hover:text-white dark:hover:border-white"
onClick={() => setEditSocials(true)}>
EDIT

<div className="flex items-center justify-between w-[51%]">
<div className="mxs:space-x-5 flex gap-5 items-center my-6">
<span className="cursor-pointer">
<GithubIcon className="mxs:w-[32px]" width={32} fill={socials ? "" : "#C9C9C9"} />
</span>
{editSocials ? (
<div className="flex justify-center items-center fixed inset-0 z-50 outline-none focus:outline-none rounded-lg w-full mx-auto slide-bottom backdrop-blur-sm">
<div className="relative my-6 mx-auto w-max bg-white rounded-lg px-10 dark:bg-dark">
<div
className="flex justify-end top-0 font-bold text-36px cursor-pointer text-[#C9C9C9] hover:text-black dark:hover:text-white transition-all"
onClick={() => setEditSocials(false)}>
x
</div>
<form className=" bg-white dark:bg-dark">
<div className="grid grid-cols-2 gap-x-10 gap-y-10">
<div className="flex gap-x-5 items-center">
<span className="cursor-pointer">
<LinkedinIcon width={35} height={31} />
</span>
<input
type="text"
className="form-input pl-3 p-1 m-0 pr-10 "
placeholder="Enter your linkedin url... "
/>
</div>
<div className="flex gap-x-5 items-center">
<span className="cursor-pointer">
<Reddit className="mxs:w-[32px]" width={32} />
</span>
<input
type="text"
className="form-input pl-3 p-1 m-0 pr-10"
placeholder="Enter your reddit url..."
/>
</div>
<div className="flex gap-x-5 items-center">
<span className="cursor-pointer">
<TwitterIcon width={35} height={30} />
</span>
<input
type="text"
className="form-input pl-3 p-1 m-0 pr-10"
placeholder="Enter your twitter url..."
/>
</div>
<div className="flex gap-x-5 items-center">
<span className="cursor-pointer">
<Facebook className="mxs:w-[32px]" width={32} />
</span>
<input
type="text"
className="form-input pl-3 p-1 m-0 pr-10"
placeholder="Enter your facebook url..."
/>
</div>
<div className="flex gap-x-5 items-center">
<span className="cursor-pointer">
<GithubIcon className="mxs:w-[32px]" width={32} />
</span>
<input
type="text"
className="form-input pl-3 p-1 m-0 pr-10"
placeholder="Enter your github url..."
/>
</div>
<div className="flex gap-x-5 items-center">
<span className="cursor-pointer flex items-center">
<Instagram className="mxs:w-[32px]" width={32} />
</span>
<input
type="text"
className="form-input pl-3 p-1 m-0 w-11/12"
placeholder="Enter your instagram url..."
/>
</div>
</div>
</form>
<button
className="button-big button-deep-sky-blue mx-auto my-5 w-[230px] text-22px"
onClick={() => {}}>
Done
</button>
</div>
</div>
) : null}
</div>
) : (
<div className="flex items-center justify-between w-[51%]">
<div className="mxs:space-x-5 flex gap-5 items-center my-6">
<span className="cursor-pointer">
<GithubIcon className="mxs:w-[32px]" width={32} fill="#C9C9C9" />
</span>
<span className="mxs:w-[32px] cursor-pointer">
<TwitterIcon width={41} height={33} fill="#C9C9C9" />
</span>
<span className="mxs:w-[30px] cursor-pointer">
<LinkedinIcon width={35} height={31} fill="#C9C9C9" />
</span>
</div>
<span
className="border-2 font-semibold border-[#C9C9C9] text-[#C9C9C9] px-3 py-1 rounded-md cursor-pointer hover:text-black hover:border-black dark:hover:text-white dark:hover:border-white dark:bg-dark dark:border-none"
onClick={() => setEditSocials(true)}>
ADD SOCIALS
<span className="mxs:w-[32px] cursor-pointer">
<TwitterIcon width={41} height={33} fill={socials ? "" : "#C9C9C9"} />
</span>
{editSocials ? (
<div className="flex justify-center items-center fixed inset-0 z-50 outline-none focus:outline-none rounded-lg slide-bottom w-full mx-auto slide-bottom backdrop-blur-sm">
<div className="relative my-6 mx-auto w-max bg-white rounded-lg px-10">
<div
className="flex justify-end top-0 font-bold text-36px cursor-pointer text-[#C9C9C9] hover:text-black transition-all"
onClick={() => setEditSocials(false)}>
x
</div>
<form className=" bg-white dark:bg-white">
<div className="grid grid-cols-2 gap-x-10 gap-y-10">
<div className="flex gap-x-5 items-center">
<span className="cursor-pointer">
<LinkedinIcon width={35} height={31} />
</span>
<input
type="text"
className="form-input pl-3 p-1 m-0 pr-10 "
placeholder="Enter your linkedin url... "
/>
</div>
<div className="flex gap-x-5 items-center">
<span className="cursor-pointer">
<Reddit className="mxs:w-[32px]" width={32} />
</span>
<input
type="text"
className="form-input pl-3 p-1 m-0 pr-10"
placeholder="Enter your reddit url..."
/>
</div>
<div className="flex gap-x-5 items-center">
<span className="cursor-pointer">
<TwitterIcon width={35} height={30} />
</span>
<input
type="text"
className="form-input pl-3 p-1 m-0 pr-10"
placeholder="Enter your twitter url..."
/>
</div>
<div className="flex gap-x-5 items-center">
<span className="cursor-pointer">
<Facebook className="mxs:w-[32px]" width={32} />
</span>
<input
type="text"
className="form-input pl-3 p-1 m-0 pr-10"
placeholder="Enter your facebook url..."
/>
</div>
<div className="flex gap-x-5 items-center">
<span className="cursor-pointer">
<GithubIcon className="mxs:w-[32px]" width={32} />
</span>
<input
type="text"
className="form-input pl-3 p-1 m-0 pr-10"
placeholder="Enter your github url..."
/>
</div>
<div className="flex gap-x-5 items-center">
<span className="cursor-pointer flex items-center">
<Instagram className="mxs:w-[32px]" width={32} />
</span>
<input
type="text"
className="form-input pl-3 p-1 m-0 w-11/12"
placeholder="Enter your instagram url..."
/>
</div>
</div>
</form>
<button
className="button-big button-deep-sky-blue mx-auto my-5 w-[230px] text-22px"
onClick={() => {}}>
Done
</button>
<span className="mxs:w-[30px] cursor-pointer">
<LinkedinIcon width={35} height={31} fill={socials ? "" : "#C9C9C9"} />
</span>
</div>

{/* Edit Section */}
<span
className={`border-2 font-semibold border-[#C9C9C9] text-[#C9C9C9] px-3 py-1 rounded-md cursor-pointer hover:text-black hover:border-black dark:hover:text-white dark:hover:border-white ${
socials ? "" : "dark:bg-dark dark:border-none"
}`}
onClick={() => setEditSocials(true)}>
{socials ? "EDIT" : "ADD SOCIALS"}
</span>
{editSocials ? (
<div className="flex justify-center items-center fixed inset-0 z-50 outline-none focus:outline-none rounded-lg w-full mx-auto slide-bottom backdrop-blur-sm">
<div
className={`relative my-6 mx-auto w-max bg-white rounded-lg px-10 ${
socials ? "dark:bg-dark" : ""
}`}>
<div
className="flex justify-end top-0 font-bold text-36px cursor-pointer text-[#C9C9C9] hover:text-black dark:hover:text-white transition-all"
onClick={() => setEditSocials(false)}>
x
</div>
<form className=" bg-white dark:bg-dark">
<div className="grid grid-cols-2 gap-x-10 gap-y-10">
<div className="flex gap-x-5 items-center">
<span className="cursor-pointer">
<LinkedinIcon width={35} height={31} />
</span>
<input
type="text"
className="form-input pl-3 p-1 m-0 pr-10 "
placeholder="Enter your linkedin url... "
/>
</div>
<div className="flex gap-x-5 items-center">
<span className="cursor-pointer">
<Reddit className="mxs:w-[32px]" width={32} />
</span>
<input
type="text"
className="form-input pl-3 p-1 m-0 pr-10"
placeholder="Enter your reddit url..."
/>
</div>
<div className="flex gap-x-5 items-center">
<span className="cursor-pointer">
<TwitterIcon width={35} height={30} />
</span>
<input
type="text"
className="form-input pl-3 p-1 m-0 pr-10"
placeholder="Enter your twitter url..."
/>
</div>
<div className="flex gap-x-5 items-center">
<span className="cursor-pointer">
<Facebook className="mxs:w-[32px]" width={32} />
</span>
<input
type="text"
className="form-input pl-3 p-1 m-0 pr-10"
placeholder="Enter your facebook url..."
/>
</div>
<div className="flex gap-x-5 items-center">
<span className="cursor-pointer">
<GithubIcon className="mxs:w-[32px]" width={32} />
</span>
<input
type="text"
className="form-input pl-3 p-1 m-0 pr-10"
placeholder="Enter your github url..."
/>
</div>
<div className="flex gap-x-5 items-center">
<span className="cursor-pointer flex items-center">
<Instagram className="mxs:w-[32px]" width={32} />
</span>
<input
type="text"
className="form-input pl-3 p-1 m-0 w-11/12"
placeholder="Enter your instagram url..."
/>
</div>
</div>
</form>
<button
className="button-big button-deep-sky-blue mx-auto my-5 w-[230px] text-22px"
onClick={() => {}}>
Done
</button>
</div>
) : null}
</div>
)}
</div>
) : null}
</div>
</div>
{/* Input Form */}
<form
className="mmd:px-6 bg-transparent dark:bg-transparent pl-0 md:w-11/12"
className="mlg:px-6 bg-transparent dark:bg-transparent pl-0 lg:w-11/12"
onSubmit={handleSubmit(handleSubmission)}>
<FormProvider {...hookFormMethods}>
{/* Personal Information */}
<h2 className="mxs:text-[22px] mb-5 subheadline">Personal Information</h2>
<section className="grid grid-cols-1 sm:grid-cols-2 gap-x-10">
<div className="col-span-1">
Expand Down Expand Up @@ -412,6 +322,7 @@ export default function Settings({ profile }: Props) {
<input id="checkbox" name="receiveEmails" type="checkbox" />
<label htmlFor="checkbox">Notify me about upcoming news & events</label>
</section>
{/* Demographic Information */}
<h2 className="mxs:text-[22px] mb-5 subheadline">Demographic Information</h2>
<section className="grid grid-cols-1 sm:grid-cols-2 gap-x-10 gap-y-4 mb-10">
<div>
Expand Down Expand Up @@ -439,6 +350,7 @@ export default function Settings({ profile }: Props) {
<CountrySelect />
</div>
</section>
{/* Work and Education */}
<h2 className="mxs:text-[22px] mb-5 subheadline">Work and Education</h2>
<section className="grid grid-cols-1 sm:grid-cols-2 gap-x-10 gap-y-4 mb-5">
<div className="sm:col-span-2 lg:col-span-1">
Expand Down Expand Up @@ -503,6 +415,7 @@ export default function Settings({ profile }: Props) {
</div>
</div>
</section>
{/* Recaptcha and Save Button */}
<section className="mxs:mt-4 text-center mt-10">
<ReCAPTCHA
className="inline-block mb-3"
Expand Down

1 comment on commit f74dc54

@vercel
Copy link

@vercel vercel bot commented on f74dc54 Jun 2, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

app – ./

thedynamics.vercel.app
app-git-main-thedynamics.vercel.app
app-thedynamics.vercel.app
app.thedynamics.tech

Please sign in to comment.