From f9238acbfbc5239e4c4300e616f9fd1ab16fb1a3 Mon Sep 17 00:00:00 2001 From: Shanemel Asuncion Date: Sat, 2 Mar 2024 17:25:54 -0700 Subject: [PATCH 01/10] First draft --- src/App.tsx | 5 ++++ src/components/InputField.tsx | 46 ++++++++++++++++++++++++++++++ src/routes/InputFieldTestRoute.tsx | 18 ++++++++++++ 3 files changed, 69 insertions(+) create mode 100644 src/components/InputField.tsx create mode 100644 src/routes/InputFieldTestRoute.tsx diff --git a/src/App.tsx b/src/App.tsx index 66a07c0..96012cd 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -13,6 +13,7 @@ import SortDropdownListTestRoute from "@/routes/SortDropdownListTestRoute"; import NavigationTest from "@/routes/NavigationTest"; import ToastTestRoute from "@/routes/ToastTestRoute"; import MediaUploadZoneTestRoute from "@/routes/MediaUploadZoneTestRoute"; +import InputFieldTestRoute from "./routes/InputFieldTestRoute"; const router = createBrowserRouter([ { @@ -44,6 +45,10 @@ const router = createBrowserRouter([ path: "/toast-test", element: , }, + { + path: "/input-field-test", + element: + }, ]); function App() { diff --git a/src/components/InputField.tsx b/src/components/InputField.tsx new file mode 100644 index 0000000..128ebb7 --- /dev/null +++ b/src/components/InputField.tsx @@ -0,0 +1,46 @@ +import { WarningCircle } from "@phosphor-icons/react"; + + +export interface InputFieldProps { + type: string; + error: boolean; + label: string; + required: boolean; +} + +// To do: hover should be a drak shadow +// error on the input box +// + + +function InputField({ type, error, label, required }: InputFieldProps) { + + return
+ {required === false + ? + : + + } + + {error !== true + ? + + :
+ + +
+ + +
+
+ } +
; +} + +export default InputField; diff --git a/src/routes/InputFieldTestRoute.tsx b/src/routes/InputFieldTestRoute.tsx new file mode 100644 index 0000000..fea2c5d --- /dev/null +++ b/src/routes/InputFieldTestRoute.tsx @@ -0,0 +1,18 @@ +import InputField from "@/components/InputField"; + +function InputFieldTestRoute() { + return ( +
+ {/* Required Field */} + + {/* Optional field */} + + {/* Error field */} + + {/* No label */} + +
+ ); +} + +export default InputFieldTestRoute; From 10c47c082070d185ed863aae1d1214118c544689 Mon Sep 17 00:00:00 2001 From: Shanemel Asuncion Date: Sat, 2 Mar 2024 18:02:36 -0700 Subject: [PATCH 02/10] update Implemented the frontend. Functionality not included. --- src/components/InputField.tsx | 25 +++++++++++-------------- 1 file changed, 11 insertions(+), 14 deletions(-) diff --git a/src/components/InputField.tsx b/src/components/InputField.tsx index 128ebb7..6c86f5f 100644 --- a/src/components/InputField.tsx +++ b/src/components/InputField.tsx @@ -8,35 +8,32 @@ export interface InputFieldProps { required: boolean; } -// To do: hover should be a drak shadow -// error on the input box -// - - function InputField({ type, error, label, required }: InputFieldProps) { + // todo: functionality + return
{required === false - ?
; } diff --git a/src/routes/InputFieldTestRoute.tsx b/src/routes/InputFieldTestRoute.tsx index fea2c5d..f3228c2 100644 --- a/src/routes/InputFieldTestRoute.tsx +++ b/src/routes/InputFieldTestRoute.tsx @@ -1,3 +1,4 @@ +import Button from "@/components/Button"; import InputField from "@/components/InputField"; function InputFieldTestRoute() { @@ -10,7 +11,9 @@ function InputFieldTestRoute() { {/* Error field */} {/* No label */} - + + + ); } From 2566c7e5e3f0e2cafda5813757fb18d37f772f46 Mon Sep 17 00:00:00 2001 From: Shanemel Asuncion Date: Fri, 15 Mar 2024 12:58:42 -0600 Subject: [PATCH 05/10] Update from main --- src/App.tsx | 68 +++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 64 insertions(+), 4 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 68bddf3..e27122f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -13,7 +13,6 @@ import TooltipTestRoute from "./routes/TooltipTestRoute"; import InputCodeTest from "@/routes/InputCodeTest"; import ToastTestRoute from "@/routes/ToastTestRoute"; import MediaUploadZoneTestRoute from "@/routes/MediaUploadZoneTestRoute"; -import InputFieldTestRoute from "./routes/InputFieldTestRoute"; import ColorPickerTestRoute from "@/routes/ColorPickerTestRoute"; const router = createBrowserRouter([ @@ -57,9 +56,6 @@ const router = createBrowserRouter([ path: "/toast-test", element: , }, - { - path: "/input-field-test", - element: }, { path: "/color-picker-test", element: , @@ -71,3 +67,67 @@ function App() { } export default App; +import { createBrowserRouter, RouterProvider } from "react-router-dom"; + +// routes + +import ButtonTestRoute from "@/routes/ButtonTestRoute"; +import ProfilePictureTest from "./routes/ProfilePictureTestRoute"; +import Test from "./routes/Test"; +import SearchBarTest from "./routes/SearchBarTestRoute"; +import DropdownItem from "@/components/DropdownItem"; +import SortDropdownListTestRoute from "@/routes/SortDropdownListTestRoute"; +import NavigationTest from "@/routes/NavigationTest"; +import InputCodeTest from "@/routes/InputCodeTest"; +import ToastTestRoute from "@/routes/ToastTestRoute"; +import MediaUploadZoneTestRoute from "@/routes/MediaUploadZoneTestRoute"; +import InputFieldTestRoute from "./routes/InputFieldTestRoute"; + +const router = createBrowserRouter([ + { + path: "/", + element: <>Home, + }, + { + path: "/test", + element: , + }, + { + path: "/SearchBarTestRoute", + element: , + }, + { + path: "/testButton", + element: , + }, + { + path: "/SortDropdownListTestRoute", + element: , + }, + { + path: "/nav-test", + element: , + }, + { + path: "/input-code-test", + element: , + }, + { + path: "/upload-file-test", + element: , + }, + { + path: "/toast-test", + element: , + }, + { + path: "/input-field-test", + element: + }, +]); + +function App() { + return ; +} + +export default App; From ae629e90f9756ee94511bfd28caff565160a2ed9 Mon Sep 17 00:00:00 2001 From: Shanemel Asuncion Date: Fri, 15 Mar 2024 13:04:32 -0600 Subject: [PATCH 06/10] Fix merge conflict --- src/App.tsx | 67 ++++------------------------------------------------- 1 file changed, 4 insertions(+), 63 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index e27122f..dce123b 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 InputFieldTestRoute from "./routes/InputFieldTestRoute"; const router = createBrowserRouter([ { @@ -60,74 +61,14 @@ const router = createBrowserRouter([ path: "/color-picker-test", element: , }, -]); - -function App() { - return ; -} - -export default App; -import { createBrowserRouter, RouterProvider } from "react-router-dom"; - -// routes - -import ButtonTestRoute from "@/routes/ButtonTestRoute"; -import ProfilePictureTest from "./routes/ProfilePictureTestRoute"; -import Test from "./routes/Test"; -import SearchBarTest from "./routes/SearchBarTestRoute"; -import DropdownItem from "@/components/DropdownItem"; -import SortDropdownListTestRoute from "@/routes/SortDropdownListTestRoute"; -import NavigationTest from "@/routes/NavigationTest"; -import InputCodeTest from "@/routes/InputCodeTest"; -import ToastTestRoute from "@/routes/ToastTestRoute"; -import MediaUploadZoneTestRoute from "@/routes/MediaUploadZoneTestRoute"; -import InputFieldTestRoute from "./routes/InputFieldTestRoute"; - -const router = createBrowserRouter([ { - path: "/", - element: <>Home, - }, - { - path: "/test", - element: , - }, - { - path: "/SearchBarTestRoute", - element: , - }, - { - path: "/testButton", - element: , - }, - { - path: "/SortDropdownListTestRoute", - element: , - }, - { - path: "/nav-test", - element: , - }, - { - path: "/input-code-test", - element: , - }, - { - path: "/upload-file-test", - element: , - }, - { - path: "/toast-test", - element: , - }, - { - path: "/input-field-test", + path:"/input-field-test", element: - }, + } ]); function App() { return ; } -export default App; +export default App; \ No newline at end of file From be606da205af3c07f34f6daace7b2f294330995a Mon Sep 17 00:00:00 2001 From: khanheric Date: Sun, 17 Mar 2024 10:17:06 -0600 Subject: [PATCH 07/10] changes the arrangement --- src/components/MemberHeader.tsx | 11 ++- src/components/ProfilePictures.tsx | 2 +- src/routes/MemberHeaderTestRoute.tsx | 101 +++++++++++++-------------- 3 files changed, 57 insertions(+), 57 deletions(-) diff --git a/src/components/MemberHeader.tsx b/src/components/MemberHeader.tsx index e7c8ebb..26c80f9 100644 --- a/src/components/MemberHeader.tsx +++ b/src/components/MemberHeader.tsx @@ -1,6 +1,7 @@ // MemberHeader.tsx import { ReactNode } from "react"; import ProfilePictures from "./ProfilePictures"; +import { twMerge } from "tailwind-merge"; interface MemberHeaderProp { profilePicChildren: ReactNode; @@ -22,13 +23,17 @@ function MemberHeader({ username, }: MemberHeaderProp) { return ( -
-
+
+
{profilePicChildren}
-

{username}

+
+

{username}

+
); } diff --git a/src/components/ProfilePictures.tsx b/src/components/ProfilePictures.tsx index 5a0a6aa..6c7a44a 100644 --- a/src/components/ProfilePictures.tsx +++ b/src/components/ProfilePictures.tsx @@ -19,7 +19,7 @@ const ProfilePictures = (props: Props) => { const backgroundColor = `bg-profile-${props.backgroundColor}`; const className = twMerge( backgroundColor, - "object-fill object-center flex overflow-hidden justify-center items-center rounded-full w-full h-full" + "object-cover object-center flex overflow-hidden justify-center items-center rounded-full w-full h-full" ); return ( diff --git a/src/routes/MemberHeaderTestRoute.tsx b/src/routes/MemberHeaderTestRoute.tsx index 37acb09..71257fb 100644 --- a/src/routes/MemberHeaderTestRoute.tsx +++ b/src/routes/MemberHeaderTestRoute.tsx @@ -6,62 +6,57 @@ import profilePic1 from "@/assets/images/face1.jpeg"; import profilePic2 from "@/assets/images/face.jpeg"; import * as Icon from "@phosphor-icons/react"; -// vcl luon randy (size fixed vcl) + function MemberHeaderTestRoute() { return (
-
- - } - /> -
-
- - } - /> -
-
- - } - /> -
-
- - } - /> -
+ + } + /> + + + } + /> + + + } + /> + + + } + />
); } From eac8fec3009d47a6a014cbb9e0b7cfe7fa0689b0 Mon Sep 17 00:00:00 2001 From: khanheric Date: Sun, 17 Mar 2024 19:20:09 -0600 Subject: [PATCH 08/10] set up and push branch --- src/App.tsx | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 77ac40b..a2e830e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -15,11 +15,9 @@ 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([ { @@ -65,7 +63,6 @@ const router = createBrowserRouter([ { path: "/color-picker-test", element: , -<<<<<<< HEAD }, { path: "/input-field-test", @@ -86,17 +83,15 @@ const router = createBrowserRouter([
), -======= ->>>>>>> ae629e90f9756ee94511bfd28caff565160a2ed9 }, { - path:"/input-field-test", - element: - } + path: "/input-field-test", + element: , + }, ]); function App() { return ; } -export default App; \ No newline at end of file +export default App; From cda5785676131c00f7a57eb1c98f5b77b4620c7b Mon Sep 17 00:00:00 2001 From: khanheric Date: Sun, 17 Mar 2024 19:41:32 -0600 Subject: [PATCH 09/10] fix ASC-63 comment --- src/App.tsx | 5 +- src/components/InputField.tsx | 87 ++++++++++++++++++++--------------- 2 files changed, 50 insertions(+), 42 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index a2e830e..5caee5b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -64,10 +64,7 @@ const router = createBrowserRouter([ path: "/color-picker-test", element: , }, - { - path: "/input-field-test", - element: , - }, + { path: "/member-header-test", element: , diff --git a/src/components/InputField.tsx b/src/components/InputField.tsx index 197e539..0ddfb6b 100644 --- a/src/components/InputField.tsx +++ b/src/components/InputField.tsx @@ -1,53 +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; + type: string; + error: boolean; + label?: string; // Optional; Default to none. + required: boolean; } function InputField({ type, error, label, required }: InputFieldProps) { - // todo: functionality - const inputRef = useRef(null); + // todo: functionality + const inputRef = useRef(null); - function checkLen(event: { preventDefault: () => void; }){ - event.preventDefault(); - if(inputRef.current){ - if (inputRef.current.value.trim() === "" && required === true) { - console.log("Required Input is empty");} - } + function checkLen(event: { preventDefault: () => void }) { + event.preventDefault(); + if (inputRef.current) { + if (inputRef.current.value.trim() === "" && required === true) { + console.log("Required Input is empty"); + } } + } - return
- {required === false - ?
+ ); } export default InputField; From 00de364adbba6ece06c35f4f800155c90882d753 Mon Sep 17 00:00:00 2001 From: khanheric Date: Sun, 17 Mar 2024 21:11:17 -0600 Subject: [PATCH 10/10] missing one input box fixed --- src/components/InputField.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/InputField.tsx b/src/components/InputField.tsx index 0ddfb6b..fa0bede 100644 --- a/src/components/InputField.tsx +++ b/src/components/InputField.tsx @@ -48,7 +48,7 @@ function InputField({ type, error, label, required }: InputFieldProps) { 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" + 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" >