Asc 63

src/App.tsx

@@ -14,7 +14,12 @@ import InputCodeTest from "@/routes/InputCodeTest";
 import ToastTestRoute from "@/routes/ToastTestRoute";
 import MediaUploadZoneTestRoute from "@/routes/MediaUploadZoneTestRoute";
 import ColorPickerTestRoute from "@/routes/ColorPickerTestRoute";
+import InputFieldTestRoute from "./routes/InputFieldTestRoute";
+<<<<<<< HEAD
+import MemberHeaderTestRoute from "@/routes/MemberHeaderTestRoute";
 import { MemberInformation } from "./components/MemberInformation";
+=======
+>>>>>>> ae629e90f9756ee94511bfd28caff565160a2ed9
 
 const router = createBrowserRouter([
   {
@@ -60,6 +65,19 @@ const router = createBrowserRouter([
   {
     path: "/color-picker-test",
     element: <ColorPickerTestRoute />,
+<<<<<<< HEAD
+  },
+  {
+    path: "/input-field-test",
+    element: <InputFieldTestRoute />,
+  },
+  {
+    path: "/member-header-test",
+    element: <MemberHeaderTestRoute />,
+  },
+  {
+    path: "/profile-test",
+    element: <ProfilePictureTest />,
   },
   {
     path: "/member-information-test",
@@ -68,11 +86,17 @@ const router = createBrowserRouter([
         <MemberInformation />
       </div>
     ),
+=======
+>>>>>>> ae629e90f9756ee94511bfd28caff565160a2ed9
   },
+  {
+    path:"/input-field-test",
+    element: <InputFieldTestRoute />
+  }
 ]);
 
 function App() {
   return <RouterProvider router={router}></RouterProvider>;
 }
 
-export default App;
+export default App;

src/components/InputField.tsx

@@ -0,0 +1,53 @@
+import { WarningCircle } from "@phosphor-icons/react";
+import { useRef, useState } from "react";
+
+
+export interface InputFieldProps {
+    type: string;
+    error: boolean;
+    label?: string; // Optional; Default to none.
+    required: boolean;
+}
+
+function InputField({ type, error, label, required }: InputFieldProps) {
+    // todo: functionality
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    function checkLen(event: { preventDefault: () => void; }){
+        event.preventDefault();
+        if(inputRef.current){
+            if (inputRef.current.value.trim() === "" && required === true) {
+                console.log("Required Input is empty");}
+        }
+    }
+
+    return <div className="mt-5 w-[30em]">
+        {required === false  
+        ? <label className="font-extrabold block mb-1 ml-1 text-sm text-light-500 dark:text-white">
+            {label} 
+        </label>
+        : 
+            <label className="font-extrabold block mb-1 ml-1 text-sm text-light-500 dark:text-white" > 
+                {label} <span className="text-red-500"> * </span>
+            </label>
+        }
+
+        {error !== true
+        ? <input placeholder={"Enter "+ type +"..."} type={type} ref={inputRef} onSelect={checkLen}
+        className="bg-gray-50 border border-gray-300 text-light-500 text-sm rounded-lg focus:outline-none focus:drop-shadow-[0_0px_5px_rgba(0,0,0,0.25)] hover:outline-none hover:drop-shadow-[0_0px_5px_rgba(0,0,0,0.25)] block w-full p-2.5  dark:text-white">
+        </input>
+
+        : <div><input placeholder={"Enter "+ type +"..."} type={type} ref={inputRef} onSelect={checkLen}
+            className="bg-gray-50 border border-red-500 text-light-500 text-sm rounded-lg focus:outline-none focus:drop-shadow-[0_0px_5px_rgba(0,0,0,0.25)] hover:outline-none hover:drop-shadow-[0_0px_5px_rgba(0,0,0,0.25)] block w-full p-2.5  dark:text-white">
+            </input>
+
+            <div className="flex mt-1 align-middle">
+                <WarningCircle color="red" className="mr-1" size={"1.1em"} /> 
+                <span className="text-red-500 text-xs "> Error {type} </span>
+            </div>
+           </div>
+        }
+    </div>;
+}
+
+export default InputField;

src/components/MemberHeader.tsx

@@ -0,0 +1,41 @@
+// MemberHeader.tsx
+import { ReactNode } from "react";
+import ProfilePictures from "./ProfilePictures";
+import { twMerge } from "tailwind-merge";
+
+interface MemberHeaderProp {
+  profilePicChildren: ReactNode;
+  backgroundColor:
+    | "tulip"
+    | "gold"
+    | "lime"
+    | "jade"
+    | "water"
+    | "air"
+    | "lilac"
+    | "candy";
+  username: string;
+}
+
+function MemberHeader({
+  profilePicChildren,
+  backgroundColor,
+  username,
+}: MemberHeaderProp) {
+  return (
+    <div
+      className={twMerge("flex flex-col md:flex-row items-center w-full h-36")}
+    >
+      <div className="w-32 h-32">
+        <ProfilePictures backgroundColor={backgroundColor}>
+          {profilePicChildren}
+        </ProfilePictures>
+      </div>
+      <div className=" pl-2 font-bold justify-center flex pb-2 w-20">
+        <h1>{username}</h1>
+      </div>
+    </div>
+  );
+}
+
+export default MemberHeader;

src/components/ProfilePictures.tsx

@@ -1,34 +1,32 @@
-import * as Icon from '@phosphor-icons/react'
-import { ReactNode } from 'react';
-//define the prop types for the component
-interface Props {
-    children: ReactNode; 
-    backgroundColor: 'tulip' | 'gold' | 'lime' | 'jade' | 'water' | 'air' | 'lilac' | 'candy'; 
-  }
+import * as Icon from "@phosphor-icons/react";
+import { ReactNode } from "react";
+import { twMerge } from "tailwind-merge";
 
+interface Props {
+  children: ReactNode;
+  backgroundColor:
+    | "tulip"
+    | "gold"
+    | "lime"
+    | "jade"
+    | "water"
+    | "air"
+    | "lilac"
+    | "candy";
+}
 
-const ProfilePictures=(props:Props)=>{
-
-    const backgroundColor= `bg-profile-${props.backgroundColor}`
-    // return(<div>
-    //     <div className="overflow-hidden justify-center items-center rounded-full w-32 h-32">
-    //         {props.children?
-    //         <img className="object-center w-32 h-32" src={props.children} alt="Profile Pic" />
-    //             :
-    //             <div className={`bg-profile-${props.backgroundColor} flex justify-center items-center rounded-full w-32 h-32`}>
-    //             <Icon.PawPrint size={120} color={'white'} /> 
-    //             </div>
-    //         }
-
-    //   </div>
-
-    // </div>);
+const ProfilePictures = (props: Props) => {
+  const backgroundColor = `bg-profile-${props.backgroundColor}`;
+  const className = twMerge(
+    backgroundColor,
+    "object-cover object-center flex overflow-hidden justify-center items-center rounded-full w-full h-full"
+  );
 
-    return(<div>
-        <div className={`bg-profile-${props.backgroundColor}  object-fill object-center flex overflow-hidden justify-center items-center rounded-full w-32 h-32`}>
-        {props.children}
-        </div>
-    </div>)
+  return (
+    <div className="w-full h-full">
+      <div className={className}>{props.children}</div>
+    </div>
+  );
 };
 
-export default ProfilePictures;
+export default ProfilePictures;

src/routes/InputFieldTestRoute.tsx

@@ -0,0 +1,21 @@
+import Button from "@/components/Button";
+import InputField from "@/components/InputField";
+
+function InputFieldTestRoute() {
+  return (
+    <div className="flex flex-col justify-center items-center min-h-screen bg-neutrals-dark-100">
+      {/* Required Field */}
+      <InputField type="text" error={false} label="Input Text" required={true}/>
+      {/* Optional field */}
+      <InputField type="text" error={false} label="Input Text" required={false}/>
+      {/* Error field */}
+      <InputField type="text" error={true} label="Input Text" required={true}/>
+      {/* No label */}
+      <InputField type="text" error={false} required={false}/>
+
+
+    </div>
+  );
+}
+
+export default InputFieldTestRoute;

src/routes/MemberHeaderTestRoute.tsx

@@ -0,0 +1,64 @@
+import { ReactNode } from "react";
+import MemberHeader from "@/components/MemberHeader";
+import ProfilePictures from "@/components/ProfilePictures";
+import profilePic from "@/assets/images/face2.jpg";
+import profilePic1 from "@/assets/images/face1.jpeg";
+import profilePic2 from "@/assets/images/face.jpeg";
+
+import * as Icon from "@phosphor-icons/react";
+
+function MemberHeaderTestRoute() {
+  return (
+    <div className="flex flex-col space-y-4 p-4">
+      <MemberHeader
+        backgroundColor="tulip"
+        username="User 1"
+        profilePicChildren={
+          <img
+            className=" w-32 h-32 object-cover rounded-full"
+            src={profilePic}
+            alt="Profile pic"
+          />
+        }
+      />
+
+      <MemberHeader
+        backgroundColor="gold"
+        username="User 2"
+        profilePicChildren={
+          <img
+            className=" h-32 w-32 object-cover rounded-full"
+            src={profilePic1}
+            alt="Profile pic"
+          />
+        }
+      />
+
+      <MemberHeader
+        backgroundColor="lime"
+        username="User 3"
+        profilePicChildren={
+          <img
+            className=" w-32 h-32 object-cover rounded-full"
+            src={profilePic2}
+            alt="Profile pic"
+          />
+        }
+      />
+
+      <MemberHeader
+        backgroundColor="jade"
+        username="User 4"
+        profilePicChildren={
+          <img
+            className=" h-32 w-32 object-cover rounded-full"
+            src={profilePic}
+            alt="Profile pic"
+          />
+        }
+      />
+    </div>
+  );
+}
+
+export default MemberHeaderTestRoute;

src/routes/ProfilePictureTestRoute.tsx

@@ -3,19 +3,49 @@ import profilePic from "@/assets/images/face2.jpg";
 import profilePic1 from "@/assets/images/face1.jpeg";
 import profilePic2 from "@/assets/images/face.jpeg";
 
-import * as Icon from '@phosphor-icons/react'
+import * as Icon from "@phosphor-icons/react";
 
 function ProfilePictureTest() {
-
-
   return (
     <div className="space-y-4 p-4">
-      <ProfilePictures backgroundColor="tulip"><img className="w-full h-full object-cover rounded-full" src={profilePic} alt="Profile pic" /></ProfilePictures>
-      <ProfilePictures backgroundColor="tulip"><img className="w-full h-full object-cover rounded-full" src={profilePic1} alt="Profile pic" /></ProfilePictures>
-      <ProfilePictures backgroundColor="tulip"><img className="w-full h-full object-cover rounded-full" src={profilePic2} alt="Profile pic" /></ProfilePictures>
+      <div className="w-12 h-12">
+        <ProfilePictures backgroundColor="tulip">
+          <img
+            className="w-full h-full object-cover rounded-full"
+            src={profilePic}
+            alt="Profile pic"
+          />
+        </ProfilePictures>
+      </div>
 
-      <ProfilePictures backgroundColor="tulip"><Icon.PawPrint className="w-full h-full object-cover rounded-full" size={100} color={'white'}/></ProfilePictures>    
+      <div className="w-20 h-20">
+        <ProfilePictures backgroundColor="tulip">
+          <img
+            className="w-full h-full object-cover rounded-full"
+            src={profilePic1}
+            alt="Profile pic"
+          />
+        </ProfilePictures>
+      </div>
+      <div className="w-24 h-24">
+        <ProfilePictures backgroundColor="tulip">
+          <img
+            className="w-full h-full object-cover rounded-full"
+            src={profilePic2}
+            alt="Profile pic"
+          />
+        </ProfilePictures>
+      </div>
+      <div className="w-12 h-12">
+        <ProfilePictures backgroundColor="tulip">
+          <Icon.PawPrint
+            className="w-full h-full object-cover rounded-full"
+            size={100}
+            color={"white"}
+          />
+        </ProfilePictures>
       </div>
+    </div>
   );
 }