generated from UofA-Blueprint/ScaffoldTool
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #17 from UofA-Blueprint/ASC-72
ASC-72: Member Header + Input Field
- Loading branch information
Showing
7 changed files
with
270 additions
and
36 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| 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-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-black" | ||
| ></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-black" | ||
| ></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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters