From 3968840a82d4a16233a4a5996c365f11488f9a1b Mon Sep 17 00:00:00 2001 From: Amit Amrutiya Date: Thu, 13 Jun 2024 21:14:47 +0530 Subject: [PATCH] Refactor page, globe components add shine border --- frontend/src/app/page.tsx | 2 +- frontend/src/components/ChatRoomSection.tsx | 6 +- frontend/src/components/EndMeetButton.tsx | 1 - frontend/src/components/RoomIdForm.tsx | 70 +++-- frontend/src/components/ShareButton.tsx | 2 +- frontend/src/components/SignInForm.tsx | 139 +++++---- frontend/src/components/SignupForm.tsx | 329 ++++++++++---------- frontend/src/components/VideoDashboard.tsx | 4 +- frontend/src/components/ui/shine-border.tsx | 65 ++++ frontend/tailwind.config.ts | 11 + 10 files changed, 371 insertions(+), 258 deletions(-) create mode 100644 frontend/src/components/ui/shine-border.tsx diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx index 26e66c5..00d62c0 100644 --- a/frontend/src/app/page.tsx +++ b/frontend/src/app/page.tsx @@ -22,7 +22,7 @@ export default function Home() {
-
{" "} +
diff --git a/frontend/src/components/ChatRoomSection.tsx b/frontend/src/components/ChatRoomSection.tsx index 6b42c19..199574c 100644 --- a/frontend/src/components/ChatRoomSection.tsx +++ b/frontend/src/components/ChatRoomSection.tsx @@ -2,7 +2,9 @@ import { MicIcon, - PaperclipIcon, SendHorizonalIcon, SmileIcon + PaperclipIcon, + SendHorizonalIcon, + SmileIcon, } from "lucide-react"; import { useEffect, useRef } from "react"; @@ -153,7 +155,7 @@ function ChatRoomSection() { - {" "} + ); } diff --git a/frontend/src/components/EndMeetButton.tsx b/frontend/src/components/EndMeetButton.tsx index 7e2f394..7ff2dd5 100644 --- a/frontend/src/components/EndMeetButton.tsx +++ b/frontend/src/components/EndMeetButton.tsx @@ -44,7 +44,6 @@ function EndMeetButton() { return (
- {" "} diff --git a/frontend/src/components/RoomIdForm.tsx b/frontend/src/components/RoomIdForm.tsx index c16532f..5ee75da 100644 --- a/frontend/src/components/RoomIdForm.tsx +++ b/frontend/src/components/RoomIdForm.tsx @@ -3,17 +3,18 @@ import { useForm } from "react-hook-form"; import { z } from "zod"; import { Button } from "@/components/ui/button"; import { - Form, - FormControl, - FormDescription, - FormField, - FormItem, - FormLabel, - FormMessage, + Form, + FormControl, + FormDescription, + FormField, + FormItem, + FormLabel, + FormMessage, } from "@/components/ui/form"; import { Input } from "@/components/ui/input"; import { useRouter } from "next/navigation"; import roomSchema from "@/schemas/roomSchema"; +import ShineBorder from "./ui/shine-border"; function RoomIdForm() { const router = useRouter(); @@ -28,30 +29,37 @@ function RoomIdForm() { } return ( -
- - ( - - Join meet with room Id - - - - - Enter the room id to join the room. - - - - )} - /> - - - + + {" "} +
+ + ( + + Join meet with room Id + + + + + Enter the room id to join the room. + + + + )} + /> + + + +
); } diff --git a/frontend/src/components/ShareButton.tsx b/frontend/src/components/ShareButton.tsx index 0973a48..281934b 100644 --- a/frontend/src/components/ShareButton.tsx +++ b/frontend/src/components/ShareButton.tsx @@ -39,7 +39,7 @@ export function ShareButton() { typeof window !== "undefined" ? window.location.href : "" } readOnly - />{" "} + />
- - - - + ( + + + Email/Username + + + + + + + )} + /> + ( + + + Password + + + + + + + )} + /> + + + + + + ); } diff --git a/frontend/src/components/SignupForm.tsx b/frontend/src/components/SignupForm.tsx index e1e0bb5..1a5180e 100644 --- a/frontend/src/components/SignupForm.tsx +++ b/frontend/src/components/SignupForm.tsx @@ -27,6 +27,7 @@ import { useAuth } from "@/app/hooks/useAuth"; import { checkUsernameUnique } from "@/actions/check-username-unique"; import { cn } from "@/lib/utils"; import { BottomGradient, LabelInputContainer } from "./Common"; +import ShineBorder from "./ui/shine-border"; function SignupForm() { const { @@ -80,177 +81,193 @@ function SignupForm() { }, [username]); return sendMail ? ( -
-
-
-

Verify Your Account

-

Enter the verification code sent to your email

-
+ +
+
+
+

+ Verify Your Account +

+

+ Enter the verification code sent to your email +

+ + + onSignUpFormSubmit(signupForm.getValues(), username) + )} + className="w-full space-y-6 flex flex-col" + > + ( + + One-Time Password + + + + + + + + + + + + + + Please enter the one-time password sent to your email. + + + + )} + /> + + + +
+
+
+
+ ) : ( + +
+
+
+

+ Please SignUp to Use +

+

Sign up to start your anonymous adventure

+
+
- onSignUpFormSubmit(signupForm.getValues(), username) + onSubmit={sendVerificationEmailForm.handleSubmit( + onSendVerificationEmail )} - className="w-full space-y-6 flex flex-col" + className="space-y-4 flex-col flex" > ( + + + Full Name + + + + + + + )} + /> + ( + + + Username + + { + field.onChange(e); + debouncedUsername(e.target.value); + }} + /> + + + {isCheckingUsername && ( + + )} +

+ {username} {usernameMessage} +

+ + + )} + /> + ( - One-Time Password - - - - - - - - - - - - - - Please enter the one-time password sent to your email. - + + Email + + + + )} /> - -
-
-
- ) : ( -
-
-
-

- Please SignUp to Use -

-

Sign up to start your anonymous adventure

-
-
- signIn("google")} + className=" relative group/btn h-10 dark:shadow-[0px_0px_1px_1px_var(--neutral-800)]" > - ( - - - Full Name - - - - - - - )} - /> - ( - - - Username - - { - field.onChange(e); - debouncedUsername(e.target.value); - }} - /> - - - {isCheckingUsername && ( - - )} -

- {username} {usernameMessage} -

- - - )} - /> - ( - - - {" "} - Email - - - - - - - )} - /> - ( - - - Password - - - - - - - )} - /> - - - - + Sign in with Google + +
-
+ ); } diff --git a/frontend/src/components/VideoDashboard.tsx b/frontend/src/components/VideoDashboard.tsx index 117931f..6d3d63d 100644 --- a/frontend/src/components/VideoDashboard.tsx +++ b/frontend/src/components/VideoDashboard.tsx @@ -94,7 +94,7 @@ const Dashboard: React.FC = (props) => { )}
- {" "} +
@@ -105,7 +105,7 @@ const Dashboard: React.FC = (props) => {
- {" "} + ); }; diff --git a/frontend/src/components/ui/shine-border.tsx b/frontend/src/components/ui/shine-border.tsx new file mode 100644 index 0000000..2f24ba2 --- /dev/null +++ b/frontend/src/components/ui/shine-border.tsx @@ -0,0 +1,65 @@ +"use client"; + +import { cn } from "@/lib/utils"; + +type TColorProp = `#${string}` | `#${string}`[]; +interface ShineBorderProps { + borderRadius?: number; + borderWidth?: number; + duration?: number; + color?: TColorProp; + className?: string; + children: React.ReactNode; +} + +/** + * @name Shine Border + * @description It is an animated background border effect component with easy to use and configurable props. + * @param borderRadius defines the radius of the border. + * @param borderWidth defines the width of the border. + * @param duration defines the animation duration to be applied on the shining border + * @param color a string or string array to define border color. + * @param className defines the class name to be applied to the component + * @param children contains react node elements. + */ +export default function ShineBorder({ + borderRadius = 8, + borderWidth = 1, + duration = 14, + color = "#fff", + className, + children, +}: ShineBorderProps) { + return ( +
+
+
+ {children} +
+
+ ); +} diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts index 19eb58a..7b536b7 100644 --- a/frontend/tailwind.config.ts +++ b/frontend/tailwind.config.ts @@ -73,6 +73,17 @@ const config = { sm: "calc(var(--radius) - 4px)", }, keyframes: { + "shine-pulse": { + "0%": { + "background-position": "0% 0%", + }, + "50%": { + "background-position": "100% 100%", + }, + to: { + "background-position": "0% 0%", + }, + }, meteor: { "0%": { transform: "rotate(215deg) translateX(0)", opacity: "1" }, "70%": { opacity: "1" },