diff --git a/src/App.tsx b/src/App.tsx index 14ecc4a..7e99040 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -23,6 +23,9 @@ import ModalTestRoute from "@/routes/test/ModalTestRoute"; import GalleryTestRoute from "./routes/test/GalleryTestRoute"; import { MemberInformation } from "./components/MemberInformation"; import MemberProfilePictureTest from "@/routes/test/MemberProfilePictureTest"; +import AddMemberTestRoute from "@/routes/test/AddMemberTestRoute"; +import EditMemberTestRoute from "@/routes/test/EditMemberTestRoute"; +import MemberPageBackgroundTestRoute from "./routes/test/MemberPageBackgroundTestRoute"; // routes import AdminLogin from "./routes/admin/AdminLogin"; @@ -41,7 +44,7 @@ const router = createBrowserRouter([ element: , }, { - path: "/testButton", + path: "/button-test", element: , }, { @@ -128,6 +131,18 @@ const router = createBrowserRouter([ path: "/media-card-test", element: , }, + { + path: "/add-member", + element: , + }, + { + path: "/edit-member", + element: , + }, + { + path: "/member-background-test", + element: , + }, // Admin Routes { diff --git a/src/components/AddMember.tsx b/src/components/AddMember.tsx new file mode 100644 index 0000000..339290f --- /dev/null +++ b/src/components/AddMember.tsx @@ -0,0 +1,70 @@ +import { useState } from "react"; +import clsx from "clsx"; +import Modal from "@/components/Modal"; +import InputField from "@/components/InputField"; +import MemberProfilePicture from "@/components/MemberProfilePicture"; +import Button from "@/components/Button"; +import { WarningCircle } from "@phosphor-icons/react"; + +interface AddMemberProps { + /* Toggles the modal's visibility */ + isOpen: boolean; + + /* Callback to close the modal */ + onClose: () => void; +} +function AddMember({ isOpen, onClose }: AddMemberProps) { + const [nameError, setNameError] = useState(false); + const [idError, setIdError] = useState(false); + + // Content style + const content = "flex flex-col gap-6"; + + return ( + + {}} + /> + {}} + /> + + + } + actions={ +
+
+ } + > + ); +} + +export default AddMember; diff --git a/src/components/Button.tsx b/src/components/Button.tsx index aa01acc..7c3352a 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -1,68 +1,85 @@ -import { useRef } from "react"; +import { ReactNode, useRef } from "react"; import { twMerge } from "tailwind-merge"; +import clsx from "clsx"; + interface ButtonProps extends React.ButtonHTMLAttributes { - onClick?: React.MouseEventHandler; - icon?: React.ElementType; + /* Height of the button */ + shape: "small" | "medium" | "large" | "round" | "square"; + + /* The text to display on the button */ text?: string; - rounded?: boolean; - fill?: boolean; + + /* 32x32 Phosphor icon to display on the button */ + icon?: React.ReactNode; + + /* Whether the button is disabled */ disabled?: boolean; - fontSize?: string; - color?: string; + + /* The severity of the button */ + severity?: "primary" | "secondary" | "danger"; + + /* The callback to run when the button is clicked */ + onClick?: React.MouseEventHandler; } -const Button: React.FC = ({ - text = null, - icon: Icon = null, +function Button({ + shape, + text, + icon, + disabled = false, + severity = "primary", onClick, - rounded = false, - fill = true, - disabled, - fontSize = "1em", - className = null, -}) => { +}: ButtonProps) { const buttonRef = useRef(null); - const buttonClassName = twMerge( - `flex flex-row items-center justify-center p-4 ${ - disabled === true - ? "bg-neutrals-light-200 text-gray-400 cursor-default" - : fill - ? "relative overflow-hidden bg-primary-main text-white z-10 active:bg-primary-main active:text-white transition-colors hover:bg-neutrals-light-100 hover:text-primary-main border-2 border-primary-main hover:border-primary-main rounded-full w-full h-full before:absolute before:right-0 before:top-0 before:w-full before:h-full before:z-0 before:bg-primary-main before:content[''] before:transition-transform before:duration-300 hover:before:transform hover:before:translate-x-full" - : "relative overflow-hidden text-primary-dark border-primary-dark border-2 active:bg-white active:text-primary-dark transition-colors before:absolute before:left-0 before:top-0 before:-z-10 before:h-full before:w-full before:origin-top-left before:scale-x-0 before:bg-primary-dark before:transition-transform before:duration-300 before:content-[''] hover:text-white before:hover:scale-x-100" - } ${rounded ? "rounded-full" : "rounded-lg"} w-full h-full`, - className, - // change color --> change text-{color}, border-{color} and active:bg-{color}, active:text-{color}, before:bg-{color} - ); + + // Button styles + const base = + "flex flex-row items-center justify-center cursor-pointer w-full rounded-lg gap-2"; + + const small = "h-8 py-1 px-6 gap-1 text-sm"; + + const medium = "h-12 py-3 px-6 text-base"; + + const large = "h-16 py-4 px-6 text-2xl"; + + const round = " h-[60px] w-[60px] rounded-full p-4"; + + const square = "h-[60px] w-[60px] p-4"; + + const primary = "bg-primary-main text-neutrals-light-100"; + + const secondary = + "bg-transparent text-primary-dark border-2 border-primary-dark "; + + const danger = + "bg-transparent text-status-red-main border-2 border-status-red-main"; + + const disabledButton = + "bg-neutrals-light-500 text-neutrals-dark-200 border-transparent cursor-not-allowed"; return ( ); -}; +} export default Button; diff --git a/src/components/ColorPicker.tsx b/src/components/ColorPicker.tsx index 9d655b0..b73ed63 100644 --- a/src/components/ColorPicker.tsx +++ b/src/components/ColorPicker.tsx @@ -1,6 +1,6 @@ import clsx from "clsx"; import { useState, useEffect, useRef, useCallback } from "react"; -import ProfileColor from "@/types/ProfileColor"; +import { ProfileColor } from "@/types/ProfileColor"; interface ColorCircleProps { /** The color of the circle */ diff --git a/src/components/EditMember.tsx b/src/components/EditMember.tsx new file mode 100644 index 0000000..8c88c84 --- /dev/null +++ b/src/components/EditMember.tsx @@ -0,0 +1,74 @@ +import clsx from "clsx"; +import Modal from "@/components/Modal"; +import InputField from "@/components/InputField"; +import MemberProfilePicture from "@/components/MemberProfilePicture"; +import MemberPageBackground from "@/components/MemberPageBackground"; +import Button from "@/components/Button"; +import { WarningCircle, PencilSimple } from "@phosphor-icons/react"; + +interface EditMemberProps { + /* Toggles the modal's visibility */ + isOpen: boolean; + + /* Callback to close the modal */ + onClose: () => void; +} +function EditMember({ isOpen, onClose }: EditMemberProps) { + // Content style + const content = "flex flex-col gap-6"; + + return ( + } + title="Edit Member" + content={ +
+ {}} + setInput={() => {}} + /> + + +
+ } + actions={ +
+
+
+
+
+
+
+
+ + Error +
+
+ } + > + ); +} + +export default EditMember; diff --git a/src/components/IconOption.tsx b/src/components/IconOption.tsx index 9145c3f..421cdd4 100644 --- a/src/components/IconOption.tsx +++ b/src/components/IconOption.tsx @@ -1,10 +1,11 @@ import React from "react"; +import { twMerge } from "tailwind-merge"; import clsx from "clsx"; -import ProfileColor from "@/types/ProfileColor"; +import { ProfileColor } from "@/types/ProfileColor"; interface IconOptionProps { /** The phosphor icon to display in the option component */ - icon: React.ReactNode; + icon?: React.ReactNode; /** The background color of the option component */ color: ProfileColor; @@ -25,11 +26,18 @@ const IconOption = ({ const body = "flex items-center justify-center w-16 h-16 rounded cursor-pointer"; - const border = "outline outline-2 outline-primary-dark outline-offset-2"; + const border = "border border-[1px] border-neutrals-dark-200"; + + const transition = "transition transition-all duration-75 ease-in-out"; + + const outline = + "border-none outline outline-2 outline-primary-dark outline-offset-2"; return (
{icon} diff --git a/src/components/LoginModal.tsx b/src/components/LoginModal.tsx index 7eaff85..de229c7 100644 --- a/src/components/LoginModal.tsx +++ b/src/components/LoginModal.tsx @@ -125,6 +125,8 @@ const LoginModal = ({ {/* Login Button */}
+ diff --git a/src/routes/test/AddMemberTestRoute.tsx b/src/routes/test/AddMemberTestRoute.tsx new file mode 100644 index 0000000..14f6196 --- /dev/null +++ b/src/routes/test/AddMemberTestRoute.tsx @@ -0,0 +1,27 @@ +import AddMember from "@/components/AddMember"; +import { useState } from "react"; + +function AddMemberTestRoute() { + // State to toggle the modal + const [isModalOpen, setIsModalOpen] = useState(false); + + // Function to toggle the modal + const toggleModal = () => setIsModalOpen(!isModalOpen); + + return ( +
+ + +
+ ); +} + +export default AddMemberTestRoute; diff --git a/src/routes/test/ButtonTestRoute.tsx b/src/routes/test/ButtonTestRoute.tsx index b008ce8..abba5f9 100644 --- a/src/routes/test/ButtonTestRoute.tsx +++ b/src/routes/test/ButtonTestRoute.tsx @@ -2,195 +2,157 @@ import Button from "@/components/Button"; import { Plus } from "@phosphor-icons/react"; function ButtonTestRoute() { - return ( -
-
- {/* Put font size inside, depending on you */} -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ); + return ( +
+
+
+
+
+
+
+
+
+
+
+
+ ); } export default ButtonTestRoute; diff --git a/src/routes/test/EditMemberTestRoute.tsx b/src/routes/test/EditMemberTestRoute.tsx new file mode 100644 index 0000000..079e90b --- /dev/null +++ b/src/routes/test/EditMemberTestRoute.tsx @@ -0,0 +1,27 @@ +import EditMember from "@/components/EditMember"; +import { useState } from "react"; + +function EditMemberTestRoute() { + // State to toggle the modal + const [isModalOpen, setIsModalOpen] = useState(false); + + // Function to toggle the modal + const toggleModal = () => setIsModalOpen(!isModalOpen); + + return ( +
+ + +
+ ); +} + +export default EditMemberTestRoute; diff --git a/src/routes/test/MemberPageBackgroundTestRoute.tsx b/src/routes/test/MemberPageBackgroundTestRoute.tsx new file mode 100644 index 0000000..9b2c68a --- /dev/null +++ b/src/routes/test/MemberPageBackgroundTestRoute.tsx @@ -0,0 +1,20 @@ +import React from "react"; +import MemberPageBackground from "@/components/MemberPageBackground"; +import { Pencil } from "@phosphor-icons/react"; +import Modal from "@/components/Modal"; + +const MemberProfilePictureTest = () => { + return ( +
+ {}} + title="Edit Member Modal" + icon={} + content={} + /> +
+ ); +}; + +export default MemberProfilePictureTest; diff --git a/src/types/ProfileColor.tsx b/src/types/ProfileColor.tsx index 1eaa8b5..60b072a 100644 --- a/src/types/ProfileColor.tsx +++ b/src/types/ProfileColor.tsx @@ -1,4 +1,4 @@ -type ProfileColor = +export type ProfileColor = | "bg-profile-water" | "bg-profile-air" | "bg-profile-lilac" @@ -8,4 +8,13 @@ type ProfileColor = | "bg-profile-lime" | "bg-profile-jade"; -export default ProfileColor; +export const profileColors: ProfileColor[] = [ + "bg-profile-water", + "bg-profile-air", + "bg-profile-lilac", + "bg-profile-candy", + "bg-profile-tulip", + "bg-profile-gold", + "bg-profile-lime", + "bg-profile-jade", +];