Skip to content

Commit

Permalink
Refactor page, globe components add shine border
Browse files Browse the repository at this point in the history
  • Loading branch information
@amitamrutiya
amitamrutiya committed Jun 13, 2024
1 parent 928c628 commit 3968840
Show file tree
Hide file tree
Showing 10 changed files with 371 additions and 258 deletions.
2 changes: 1 addition & 1 deletion frontend/src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default function Home() {
<section className="flex-grow lg:w-2/3 flex flex-wrap justify-center items-center">
<IconCardButton />
</section>
<div className="my-10 w-1 border-r-4 bg-slate-100 lg:block hidden"></div>{" "}
<div className="my-10 w-1 border-r-4 bg-slate-100 lg:block hidden"></div>
<section className="join-room flex flex-grow lg:w-1/3 justify-center items-center">
<JoinRoomForm />
</section>
Expand Down
6 changes: 4 additions & 2 deletions frontend/src/components/ChatRoomSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@

import {
MicIcon,
PaperclipIcon, SendHorizonalIcon, SmileIcon
PaperclipIcon,
SendHorizonalIcon,
SmileIcon,
} from "lucide-react";
import { useEffect, useRef } from "react";

Expand Down Expand Up @@ -153,7 +155,7 @@ function ChatRoomSection() {
<SmileIcon className="h-6 w-6 text-gray-500 cursor-pointer" />
<PaperclipIcon className="h-6 w-6 text-gray-500 cursor-pointer" />
<MicIcon className="h-6 w-6 text-gray-500 cursor-pointer" />
</div>{" "}
</div>
</div>
);
}
Expand Down
1 change: 0 additions & 1 deletion frontend/src/components/EndMeetButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,6 @@ function EndMeetButton() {

return (
<div>
{" "}
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
Expand Down
70 changes: 39 additions & 31 deletions frontend/src/components/RoomIdForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -28,30 +29,37 @@ function RoomIdForm() {
}

return (
<Form {...roomForm}>
<form
onSubmit={roomForm.handleSubmit(onRoomFormSubmit)}
className="w-full p-8 space-y-8 bg-secondary rounded-lg shadow-md"
>
<FormField
control={roomForm.control}
name="roomId"
render={({ field }) => (
<FormItem>
<FormLabel>Join meet with room Id</FormLabel>
<FormControl>
<Input placeholder="Room Id" {...field} />
</FormControl>
<FormDescription>
Enter the room id to join the room.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<Button type="submit">Submit</Button>
</form>
</Form>
<ShineBorder
color={["#A07CFE", "#FE8FB5", "#FFBE7B"]}
duration={7}
borderWidth={4}
>
{" "}
<Form {...roomForm}>
<form
onSubmit={roomForm.handleSubmit(onRoomFormSubmit)}
className="w-full p-8 space-y-8 bg-secondary rounded-lg shadow-md"
>
<FormField
control={roomForm.control}
name="roomId"
render={({ field }) => (
<FormItem>
<FormLabel>Join meet with room Id</FormLabel>
<FormControl>
<Input placeholder="Room Id" {...field} />
</FormControl>
<FormDescription>
Enter the room id to join the room.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<Button type="submit">Submit</Button>
</form>
</Form>
</ShineBorder>
);
}

Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/ShareButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export function ShareButton() {
typeof window !== "undefined" ? window.location.href : ""
}
readOnly
/>{" "}
/>
</div>
<Button
type="submit"
Expand Down
139 changes: 75 additions & 64 deletions frontend/src/components/SignInForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import { Loader2 } from "lucide-react";
import { signIn } from "next-auth/react";
import { login } from "@/actions/login";
import { BottomGradient, LabelInputContainer } from "./Common";
import ShineBorder from "./ui/shine-border";

function SignInForm() {
const signinForm = useForm<z.infer<typeof signInSchema>>({
Expand All @@ -43,71 +44,81 @@ function SignInForm() {
};

return (
<div className="w-full max-w-md p-8 space-y-6 bg-secondary rounded-lg shadow-md">
<div className="text-center">
<h1 className="text-2xl font-extrabold mb-6">Please Login to Use</h1>
<p className="mb-4">Sign in to start your anonymous adventure</p>
</div>
<Form {...signinForm}>
<form
onSubmit={signinForm.handleSubmit(onSubmit)}
className="space-y-4 flex flex-col"
>
<FormField
name="identifier"
control={signinForm.control}
render={({ field }) => (
<FormItem>
<LabelInputContainer>
<FormLabel className="flex">Email/Username</FormLabel>
<FormControl>
<Input placeholder="Email/Username" {...field} />
</FormControl>
</LabelInputContainer>
<FormMessage />
</FormItem>
)}
/>
<FormField
name="password"
control={signinForm.control}
render={({ field }) => (
<FormItem>
<LabelInputContainer>
<FormLabel className="flex">Password</FormLabel>
<FormControl>
<Input type="password" placeholder="Password" {...field} />
</FormControl>
</LabelInputContainer>
<FormMessage />
</FormItem>
)}
/>
<Button
type="submit"
disabled={isPending}
className="relative group/btn flex space-x-2 items-center justify-center px-4 w-full rounded-md h-10 font-medium shadow-input dark:shadow-[0px_0px_1px_1px_var(--neutral-800)]"
<ShineBorder
color={["#A07CFE", "#FE8FB5", "#FFBE7B"]}
duration={7}
borderWidth={4}
>
<div className="w-full max-w-md p-8 space-y-6 bg-background rounded-lg shadow-md">
<div className="text-center">
<h1 className="text-2xl font-extrabold mb-6">Please Login to Use</h1>
<p className="mb-4">Sign in to start your anonymous adventure</p>
</div>
<Form {...signinForm}>
<form
onSubmit={signinForm.handleSubmit(onSubmit)}
className="space-y-4 flex flex-col"
>
{isPending ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" /> Please wait
</>
) : (
"Log In"
)}
<BottomGradient />
</Button>
</form>
</Form>
<Button
type="button"
variant={"link"}
onClick={() => signIn("google")}
className=" relative group/btn h-10 dark:shadow-[0px_0px_1px_1px_var(--neutral-800)]"
>
<span>Sign in with Google</span> <BottomGradient />
</Button>
</div>
<FormField
name="identifier"
control={signinForm.control}
render={({ field }) => (
<FormItem>
<LabelInputContainer>
<FormLabel className="flex">Email/Username</FormLabel>
<FormControl>
<Input placeholder="Email/Username" {...field} />
</FormControl>
</LabelInputContainer>
<FormMessage />
</FormItem>
)}
/>
<FormField
name="password"
control={signinForm.control}
render={({ field }) => (
<FormItem>
<LabelInputContainer>
<FormLabel className="flex">Password</FormLabel>
<FormControl>
<Input
type="password"
placeholder="Password"
{...field}
/>
</FormControl>
</LabelInputContainer>
<FormMessage />
</FormItem>
)}
/>
<Button
type="submit"
disabled={isPending}
className="relative group/btn flex space-x-2 items-center justify-center px-4 w-full rounded-md h-10 font-medium shadow-input dark:shadow-[0px_0px_1px_1px_var(--neutral-800)]"
>
{isPending ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" /> Please wait
</>
) : (
"Log In"
)}
<BottomGradient />
</Button>
</form>
</Form>
<Button
type="button"
variant={"link"}
onClick={() => signIn("google")}
className=" relative group/btn h-10 dark:shadow-[0px_0px_1px_1px_var(--neutral-800)]"
>
<span>Sign in with Google</span> <BottomGradient />
</Button>
</div>
</ShineBorder>
);
}

Expand Down
Loading

0 comments on commit 3968840

Please sign in to comment.