From 447a4678b7c1f11987789f29e62a57cc94c303d5 Mon Sep 17 00:00:00 2001
From: Thea Nguyen <thea25060@gmail.com>
Date: Fri, 15 Mar 2024 16:05:52 -0600
Subject: [PATCH 1/2] Created Member Information component with basic
 functionalities

---
 src/App.tsx                          |  17 ++++
 src/components/MemberInformation.tsx | 130 +++++++++++++++++++++++++++
 2 files changed, 147 insertions(+)
 create mode 100644 src/components/MemberInformation.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 3672f69..0a01849 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -14,6 +14,7 @@ import InputCodeTest from "@/routes/InputCodeTest";
 import ToastTestRoute from "@/routes/ToastTestRoute";
 import MediaUploadZoneTestRoute from "@/routes/MediaUploadZoneTestRoute";
 import ColorPickerTestRoute from "@/routes/ColorPickerTestRoute";
+import { MemberInformation } from "./components/MemberInformation";
 
 const router = createBrowserRouter([
   {
@@ -60,6 +61,22 @@ const router = createBrowserRouter([
     path: "/color-picker-test",
     element: <ColorPickerTestRoute />,
   },
+  {
+    path: "/member-information-test",
+    element: (
+      <div className="flex flex-col gap-y-20 items-center justify-center w-full h-[100vh] bg-slate-400">
+        <MemberInformation
+          link="https://github.com/"
+          lastName="Nguyen"
+        />
+        <MemberInformation
+          link="https://github.com/"
+          lastName="Nguyen"
+          errorText="Error message"
+        />
+      </div>
+    ),
+  },
 ]);
 
 function App() {
diff --git a/src/components/MemberInformation.tsx b/src/components/MemberInformation.tsx
new file mode 100644
index 0000000..518a2a8
--- /dev/null
+++ b/src/components/MemberInformation.tsx
@@ -0,0 +1,130 @@
+//#region Imports
+import { useEffect, useState } from "react";
+import {
+  WarningCircle,
+  Copy,
+  ArrowsCounterClockwise,
+} from "@phosphor-icons/react";
+//#endregion
+
+//#region Interfaces
+interface MemberInformationProps {
+  link: string;
+  lastName: string;
+  errorText?: string;
+}
+//#endregion
+
+/**
+ * Renders a member information component.
+ * @param link - The link of the member.
+ * @param lastName - The last name of the member.
+ * @param errorText - The error text to be displayed.
+ * @returns
+ */
+const MemberInformation = ({
+  link,
+  lastName,
+  errorText,
+}: MemberInformationProps) => {
+  const [password, setPassword] = useState<string>();
+  const [copied, setCopied] = useState<boolean>(false);
+  const fields = [
+    { label: "Member Link", value: link },
+    { label: "Member Last Name", value: lastName },
+    { label: "Member Password", value: password || "" },
+  ];
+
+  //#region functions
+  useEffect(() => {
+    handleGeneratePassword();
+  }, []);
+
+  /**
+   * Handles the generate password event.
+   */
+  const handleGeneratePassword = () => {
+    const characters =
+      "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+    let result = "";
+
+    for (let i = 0; i < 6; i++) {
+      result += characters.charAt(
+        Math.floor(Math.random() * characters.length)
+      );
+    }
+    setPassword(result);
+  };
+
+  /**
+   * Handles the copy event for the text.
+   *
+   * @param {string} text - The text to be copied.
+   */
+  const handleCopy = async (text: string) => {
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+  };
+  //#endregion
+
+  setTimeout(() => {
+    setCopied(false);
+  }, 2500);
+
+  return (
+    <div className="flex flex-col gap-y-4 w-[90vw] md:w-[50vw] max-w-2xl text-sm md:text-base bg-neutrals-light-100 p-8 rounded-lg font-display">
+      {/* title */}
+      <div className="flex items-center text-xl md:text-2xl gap-x-2 font-semibold">
+        <WarningCircle size={28} />
+        <p>Member Information</p>
+      </div>
+
+      {fields.map((field, index) => (
+        <div
+          key={index}
+          className="flex items-center justify-between"
+        >
+          {/* Label */}
+          <p className="capitalize font-semibold">{field.label}</p>
+
+          {/* Value */}
+          <div className="flex gap-x-2 items-center">
+            <p className="opacity-50">{field.value}</p>
+            <div className="flex gap-x-2 items-center justify-center text-primary-main">
+              {field.label.toLowerCase() === "member password" ? (
+                <ArrowsCounterClockwise
+                  size={28}
+                  className="cursor-pointer"
+                  onClick={handleGeneratePassword}
+                />
+              ) : null}
+              <Copy
+                size={28}
+                className="cursor-pointer"
+                onClick={() => handleCopy(field.value)}
+              />
+            </div>
+          </div>
+        </div>
+      ))}
+      {/* Error */}
+      {errorText && (
+        <div className="flex items-center gap-x-2 text-status-red-main">
+          <WarningCircle size={20} />
+          <p>{errorText}</p>
+        </div>
+      )}
+
+      {/* Copied Alert*/}
+      <p
+        className={`fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-white py-2 px-3 rounded-lg transition ease-in-out ${
+          copied ? "opacity-100" : "opacity-0"
+        }`}
+      >
+        Copied
+      </p>
+    </div>
+  );
+};
+
+export { MemberInformation };

From aedcc44e668b756df71dcf30921775b5ab402113 Mon Sep 17 00:00:00 2001
From: Thea Nguyen <thea25060@gmail.com>
Date: Fri, 15 Mar 2024 17:21:14 -0600
Subject: [PATCH 2/2] Deleted redundant props for MemberInformation.tsx

---
 src/App.tsx                          | 10 +---------
 src/components/MemberInformation.tsx | 20 +++++++++-----------
 2 files changed, 10 insertions(+), 20 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 0a01849..dec0b26 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -65,15 +65,7 @@ const router = createBrowserRouter([
     path: "/member-information-test",
     element: (
       <div className="flex flex-col gap-y-20 items-center justify-center w-full h-[100vh] bg-slate-400">
-        <MemberInformation
-          link="https://github.com/"
-          lastName="Nguyen"
-        />
-        <MemberInformation
-          link="https://github.com/"
-          lastName="Nguyen"
-          errorText="Error message"
-        />
+        <MemberInformation />
       </div>
     ),
   },
diff --git a/src/components/MemberInformation.tsx b/src/components/MemberInformation.tsx
index 518a2a8..116ed1d 100644
--- a/src/components/MemberInformation.tsx
+++ b/src/components/MemberInformation.tsx
@@ -9,24 +9,20 @@ import {
 
 //#region Interfaces
 interface MemberInformationProps {
-  link: string;
-  lastName: string;
-  errorText?: string;
+  className?: string;
 }
 //#endregion
 
 /**
  * Renders a member information component.
- * @param link - The link of the member.
- * @param lastName - The last name of the member.
  * @param errorText - The error text to be displayed.
  * @returns
  */
-const MemberInformation = ({
-  link,
-  lastName,
-  errorText,
-}: MemberInformationProps) => {
+const MemberInformation = ({ className }: MemberInformationProps) => {
+  const [lastName, setLastName] = useState<string>("Lastname");
+  const [link, setLink] = useState<string>("Link");
+  const [errorText, setErrorText] = useState<string>("Error message");
+
   const [password, setPassword] = useState<string>();
   const [copied, setCopied] = useState<boolean>(false);
   const fields = [
@@ -72,7 +68,9 @@ const MemberInformation = ({
   }, 2500);
 
   return (
-    <div className="flex flex-col gap-y-4 w-[90vw] md:w-[50vw] max-w-2xl text-sm md:text-base bg-neutrals-light-100 p-8 rounded-lg font-display">
+    <div
+      className={`flex flex-col gap-y-4 w-[90vw] md:w-[50vw] max-w-2xl text-sm md:text-base bg-neutrals-light-100 p-8 rounded-lg font-display ${className}`}
+    >
       {/* title */}
       <div className="flex items-center text-xl md:text-2xl gap-x-2 font-semibold">
         <WarningCircle size={28} />