Merge pull request #8 from bookracy/fix/revert-baddev

Fix/revert baddev

.prettierignore

@@ -1 +1,2 @@
-src/routeTree.gen.ts
+src/routeTree.gen.ts
+pnpm-lock.yaml

README.md

@@ -61,7 +61,6 @@ Ensure you have the following installed on your local machine:
    pnpm install
    ```
 
-
 ### Running the Application
 
 Start the development server:

src/components/layout/clipboard-button.tsx

@@ -6,6 +6,8 @@ import { toast } from "sonner";
 
 interface ClipBoardButtonProps {
   content: string;
+  onClick?: () => void;
+  className?: string;
 }
 
 export function ClipBoardButton(props: ClipBoardButtonProps) {
@@ -14,7 +16,7 @@ export function ClipBoardButton(props: ClipBoardButtonProps) {
   const handleClick = () => {
     navigator.clipboard.writeText(props.content);
     setClickedOnClipBoard(true);
-
+    props.onClick?.();
     toast.success("Link copied to clipboard");
 
     setTimeout(() => {
@@ -23,7 +25,7 @@ export function ClipBoardButton(props: ClipBoardButtonProps) {
   };
 
   return (
-    <Button variant="outline" size="icon" onClick={handleClick}>
+    <Button variant="outline" size="icon" onClick={handleClick} className={props.className}>
       <ClipboardCheck
         className={cn("rotate-90 scale-0 transition-transform duration-500 ease-in-out", {
           "rotate-0 scale-100": clickedOnClipBoard,

src/components/ui/button.tsx

@@ -6,7 +6,7 @@ import { cn } from "@/lib/utils";
 import { Loader2 } from "lucide-react";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors hover:scale-[101%] transition-transform duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background hover:scale-[101%] transition-transform duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {

src/components/ui/input.tsx

@@ -1,25 +1,21 @@
 import * as React from "react";
 import { cn } from "@/lib/utils";
-import { LucideIcon } from "lucide-react";
 
 export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
-  iconLeft?: LucideIcon;
-  iconRight?: LucideIcon;
+  iconLeft?: React.ReactNode;
+  iconRight?: React.ReactNode;
 };
 
-const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type = "text", ...props }, ref) => {
-  const IconLeft = props.iconLeft;
-  const IconRight = props.iconRight;
-
+const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type = "text", iconLeft, iconRight, ...props }, ref) => {
   return (
     <div className="relative flex items-center">
-      {IconLeft && <IconLeft className="absolute left-3" />}
-      {IconRight && <IconRight className="absolute right-3" />}
+      {iconLeft && <div className="absolute left-3">{iconLeft}</div>}
+      {iconRight && <div className="absolute right-3">{iconRight}</div>}
       <input
         type={type}
         className={cn(
           "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
-          IconLeft && "pl-12",
+          iconLeft && "pl-12",
           className,
         )}
         ref={ref}

src/routes/index.tsx

@@ -60,7 +60,7 @@ function Index() {
         >
           <div className="relative w-full max-w-full">
             <Input
-              iconLeft={SearchIcon}
+              iconLeft={<SearchIcon />}
               placeholder="Search for books, comics, or manga..."
               value={q}
               onChange={(e) =>

src/routes/login.tsx

@@ -39,12 +39,11 @@ function InputOTPGroups() {
     return groups.map((group, i) => (i === groups.length - 1 ? null : group));
   };
 
-  return <div className="flex w-full flex-col items-center justify-center gap-2 xl:flex-row">{isMobile ? createInputOTPGroups(4) : createInputOTPGroups(6)}</div>;
+  return <div className="flex w-full flex-col items-center justify-center gap-2 lg:flex-row">{isMobile ? createInputOTPGroups(4) : createInputOTPGroups(6)}</div>;
 }
 
 function Login() {
   const { navigate } = useRouter();
-  const { isMobile } = useIsMobile();
   const setTokens = useAuthStore((state) => state.setTokens);
 
   const { mutate, isPending } = useMutation({
@@ -72,10 +71,10 @@ function Login() {
   }
 
   return (
-    <div className="flex h-full w-full justify-center items-center">
+    <div className="flex flex-1 items-center justify-center">
       <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className={`${isMobile ? ("w-full") : (null)}`}>
-          <Card className={`${isMobile ? ("w-full") : (null)}`}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="w-full lg:w-fit">
+          <Card className="w-full lg:w-fit">
             <CardHeader>
               <CardTitle>Login</CardTitle>
             </CardHeader>
@@ -104,7 +103,7 @@ function Login() {
                   here
                 </Link>
               </p>
-              <Button loading={isPending} type="submit" className={`${isMobile ? ("w-full") : (null)}`}>
+              <Button loading={isPending} type="submit" className="w-full lg:w-fit">
                 Login
               </Button>
             </CardFooter>

src/routes/register.tsx

@@ -4,17 +4,16 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { useIsMobile } from "@/hooks/use-ismobile";
 import { createFileRoute } from "@tanstack/react-router";
 import { randomWordsWithNumberQueryOptions } from "@/api/words";
 import { useMutation, useSuspenseQuery } from "@tanstack/react-query";
 import { generateUser } from "@/api/backend/auth/signup";
-import { Clipboard } from "lucide-react";
 import { z } from "zod";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { toast } from "sonner";
+import { ClipBoardButton } from "@/components/layout/clipboard-button";
 
 export const Route = createFileRoute("/register")({
   component: Register,
@@ -29,21 +28,11 @@ const displayNameSchema = z.object({
 
 function Register() {
   const navigate = useNavigate();
-  const { isMobile } = useIsMobile();
   const [isCopied, setIsCopied] = useState(false);
   const [uuid, setUuid] = useState("");
 
   const { data } = useSuspenseQuery(randomWordsWithNumberQueryOptions);
 
-  const copyToClipboard = () => {
-    navigator.clipboard.writeText("1234 5678 9000").then(() => {
-      console.log("Copied to clipboard");
-      setIsCopied(true);
-    }).catch((error) => {
-      console.error("Error copying to clipboard:", error);
-    });
-  };
-
   const { mutate, isPending } = useMutation({
     mutationKey: ["signup"],
     mutationFn: generateUser,
@@ -73,8 +62,8 @@ function Register() {
   };
 
   return (
-    <div className="flex h-full w-full justify-center items-center">
-      <Card className={`${isMobile ? ("w-full") : ("w-2/5")}`}>
+    <div className="flex flex-1 items-center justify-center">
+      <Card className="w-full lg:w-2/5">
         <CardHeader>
           <CardTitle>Register</CardTitle>
         </CardHeader>
@@ -83,19 +72,13 @@ function Register() {
             <div className="flex flex-col gap-6">
               <div className="flex flex-col gap-2">
                 <Label>Generated Identifier</Label>
-                <div className="w-full items-center justify-center relative">
-                  <Input value={uuid} readOnly />
-                  <button 
-                    onClick={copyToClipboard} 
-                    className="absolute right-2 top-1/2 transform -translate-y-1/2 hover:scale-110 transition-transform duration-200"
-                  >
-                    <Clipboard />
-                  </button>
+                <div className="relative w-full items-center justify-center">
+                  <Input value={uuid} readOnly iconRight={<ClipBoardButton content={uuid} className="h-8 w-8 border-none" onClick={() => setIsCopied(true)} />} />
                 </div>
                 <span className="text-sm">Copy the identifier above and use it to login</span>
               </div>
 
-              <Button className="w-full"  disabled={!isCopied} onClick={() => navigate({ to: "/login" })}>
+              <Button className="w-full" disabled={!isCopied} onClick={() => navigate({ to: "/login" })}>
                 Continue
               </Button>
             </div>
@@ -117,7 +100,7 @@ function Register() {
                   )}
                 />
                 <div className="flex justify-end pt-4">
-                  <Button type="submit" loading={isPending} className={`${isMobile ? ("w-full") : (null)}`}>
+                  <Button type="submit" loading={isPending} className="w-full lg:w-fit">
                     Continue
                   </Button>
                 </div>