Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refact: refatorado componente que envia mensagem #4

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

refact: refatorado componente que envia mensagem #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
125 changes: 10 additions & 115 deletions src/components/Form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,11 @@ import { ChangeEvent, FormEvent, useRef, useState } from "react";
import Image from "next/image";
import QRCode from "qrcode";

import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import {
LuArrowRight,
LuCopy,
LuLoader2,
LuMail,
LuMic,
LuUndo2,
LuUser,
LuZap,
} from "react-icons/lu";
import { LuCopy, LuUndo2 } from "react-icons/lu";
import FormEnvioMensagem from "./FormEnvioMensagem";

interface FormData {
name: string;
Expand Down Expand Up @@ -241,109 +231,14 @@ export default function Form({
</div>
)}
{!qrCode && !paymentStatus && (
<form onSubmit={handleSubmit} className="space-y-4">
<div className="space-y-2">
<Label htmlFor="name" className="flex items-center gap-2">
<LuUser /> Nome de Usuário
</Label>
<Input
id="name"
name="name"
value={formData.name}
onChange={handleInputChange}
/>
</div>

{options.MODELS.length > 0 && (
<>
<div className="space-y-2">
<Label className="flex items-center gap-2">
<LuMic /> Modelo de Voz
</Label>

<RadioGroup
value={formData.model}
onValueChange={handleModelChange}
className="grid grid-cols-2 gap-4"
>
{options.MODELS.map((model, index) => (
<div key={index} className="flex items-center space-x-2">
<RadioGroupItem
value={model}
id={`model-${index}`}
className="peer aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
/>
<Label
htmlFor={`model-${index}`}
className={cn(
"flex items-center justify-center p-4 bg-white rounded-lg cursor-pointer hover:bg-gray-50 w-full",
formData.model === model
? "border-2 border-primary text-primary"
: "border border-primary/50"
)}
>
{model}
</Label>
</div>
))}
</RadioGroup>
</div>
</>
)}

<div className="space-y-2">
<Label htmlFor="text" className="flex items-center gap-2">
<LuMail /> Mensagem
</Label>
<Input
id="text"
name="text"
value={formData.text}
maxLength={options.MAX_TEXT_LENGTH || 200}
onChange={handleInputChange}
required
/>
</div>

<div className="space-y-2">
<Label htmlFor="amount" className="flex items-center gap-2">
<LuZap /> Quantidade de satoshis
</Label>

<Input
id="amount"
name="amount"
type="number"
min={options.MIN_SATOSHI_QNT}
value={formData.amount}
onChange={handleInputChange}
required
/>

<p className="text-xs text-right text-card-foreground/75">
Quantidade mínima:{" "}
<span className="font-bold">{options.MIN_SATOSHI_QNT} sats</span>
</p>
</div>

<Button
type="submit"
className="text-center w-full"
disabled={isSubmitting}
>
{isSubmitting ? (
<>
{"Criando invoice..."}
<LuLoader2 className="animate-spin ml-2" />
</>
) : (
<>
{"Continuar"}
<LuArrowRight className="ml-2" />
</>
)}
</Button>
</form>
<FormEnvioMensagem
formData={formData}
options={options}
handleSubmit={handleSubmit}
handleInputChange={handleInputChange}
handleModelChange={handleModelChange}
isSubmitting={isSubmitting}
/>
)}
</>
);
Expand Down
143 changes: 143 additions & 0 deletions src/components/FormEnvioMensagem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
"use client";

import { LuArrowRight, LuLoader, LuMail, LuMic, LuUser, LuZap } from "react-icons/lu";
import { Label } from "./ui/label";
import { cn } from "@/lib/utils";
import { RadioGroup, RadioGroupItem } from "@radix-ui/react-radio-group";
import { Button } from "./ui/button";
import { Input } from "./ui/input";

export interface FormData {
name: string;
text: string;
model: string;
amount: string;
}

export interface Options {
MODELS: string[];
MAX_TEXT_LENGTH: number;
MIN_SATOSHI_QNT: number;
}

export interface Form2Props {
formData: FormData;
options: Options;
handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
handleInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
handleModelChange: (value: string) => void;
isSubmitting: boolean;
qrCode?: string;
paymentStatus?: boolean;
}

export default function FormEnvioMensagem({ formData, options, handleSubmit, handleInputChange, handleModelChange, isSubmitting }: Form2Props) {
return (
<form onSubmit={handleSubmit} className="space-y-4 max-w-md mx-auto p-4">
<div className="space-y-2">
<Label htmlFor="name" className="flex items-center gap-2 text-sm sm:text-base">
<LuUser className="w-4 h-4 sm:w-5 sm:h-5" /> Nome de Usuário
</Label>
<Input
id="name"
name="name"
value={formData.name}
onChange={handleInputChange}
className="w-full"
/>
</div>

{options.MODELS.length > 0 && (
<>
<div className="space-y-2">
<Label className="flex items-center gap-2 text-sm sm:text-base">
<LuMic className="w-4 h-4 sm:w-5 sm:h-5" /> Modelo de Voz
</Label>

<RadioGroup
value={formData.model}
onValueChange={handleModelChange}
className="grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-4"
>
{options.MODELS.map((model, index) => (
<div key={index} className="flex items-center space-x-2">
<RadioGroupItem
value={model}
id={`model-${index}`}
className="peer aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
/>
<Label
htmlFor={`model-${index}`}
className={cn(
"flex items-center justify-center p-2 sm:p-4 bg-white rounded-lg cursor-pointer hover:bg-gray-50 w-full text-xs sm:text-sm",
formData.model === model
? "border-2 border-primary text-primary"
: "border border-primary/50"
)}
>
{model}
</Label>
</div>
))}
</RadioGroup>
</div>
</>
)}

<div className="space-y-2">
<Label htmlFor="text" className="flex items-center gap-2 text-sm sm:text-base">
<LuMail /> Mensagem
</Label>
<Input
id="text"
name="text"
value={formData.text}
maxLength={options.MAX_TEXT_LENGTH || 200}
onChange={handleInputChange}
required
className="w-full"
/>
</div>

<div className="space-y-2">
<Label htmlFor="amount" className="flex items-center gap-2 text-sm sm:text-base">
<LuZap /> Quantidade de satoshis
</Label>

<Input
id="amount"
name="amount"
type="number"
min={options.MIN_SATOSHI_QNT}
value={formData.amount}
onChange={handleInputChange}
required
className="w-full"
/>

<p className="text-xs sm:text-sm text-right text-card-foreground/75">
Quantidade mínima:{" "}
<span className="font-bold">{options.MIN_SATOSHI_QNT} sats</span>
</p>
</div>

<Button
type="submit"
className="text-center w-full text-sm sm:text-base py-2 sm:py-3"
disabled={isSubmitting}
>
{isSubmitting ? (
<>
{"Criando invoice..."}
<LuLoader className="animate-spin ml-2 w-4 h-4 sm:w-5 sm:h-5" />
</>
) : (
<>
{"Continuar"}
<LuArrowRight className="ml-2 w-4 h-4 sm:w-5 sm:h-5" />
</>
)}
</Button>
</form>
);
}