Merge branch 'canary' into 27-feature-implement-email-resend-functionality-on-build-failure

This commit is contained in:
Mauricio Siu
2024-07-18 20:39:24 -06:00
9 changed files with 630 additions and 82 deletions

View File

@@ -1,10 +1,13 @@
import { EyeIcon, EyeOffIcon } from "lucide-react";
import { useState } from "react";
import copy from "copy-to-clipboard";
import { Clipboard, EyeIcon, EyeOffIcon } from "lucide-react";
import { useRef, useState } from "react";
import { toast } from "sonner";
import { Button } from "../ui/button";
import { Input, type InputProps } from "../ui/input";
export const ToggleVisibilityInput = ({ ...props }: InputProps) => {
const [isPasswordVisible, setIsPasswordVisible] = useState(false);
const inputRef = useRef<HTMLInputElement>(null);
const togglePasswordVisibility = () => {
setIsPasswordVisible((prevVisibility) => !prevVisibility);
@@ -13,7 +16,16 @@ export const ToggleVisibilityInput = ({ ...props }: InputProps) => {
const inputType = isPasswordVisible ? "text" : "password";
return (
<div className="flex w-full items-center space-x-2">
<Input type={inputType} {...props} />
<Input ref={inputRef} type={inputType} {...props} />
<Button
variant={"secondary"}
onClick={() => {
copy(inputRef.current?.value || "");
toast.success("Value is copied to clipboard");
}}
>
<Clipboard className="size-4 text-muted-foreground" />
</Button>
<Button onClick={togglePasswordVisibility} variant={"secondary"}>
{inputType === "password" ? (
<EyeIcon className="size-4 text-muted-foreground" />