From f9238acbfbc5239e4c4300e616f9fd1ab16fb1a3 Mon Sep 17 00:00:00 2001 From: Shanemel Asuncion Date: Sat, 2 Mar 2024 17:25:54 -0700 Subject: [PATCH 1/7] 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 2/7] 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 5/7] 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 6/7] 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 7/7] 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 (
-
- - } - /> -
-
- - } - /> -
-
- - } - /> -
-
- - } - /> -
+ + } + /> + + + } + /> + + + } + /> + + + } + />
); }