Skip to content

refactor: reestrutura e moderniza a tela de cadastro de animais com i… #10

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

Merged
rafaelhgcarlos merged 1 commit into from
Sep 13, 2025
Merged

refactor: reestrutura e moderniza a tela de cadastro de animais com i… #10

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
100 changes: 39 additions & 61 deletions src/pages/VaccineRegister.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,73 +1,37 @@
import { useState, type ChangeEvent } from "react";
import { motion } from "framer-motion";
import { Syringe, Save } from "lucide-react";
import {motion} from "framer-motion";
import {Syringe, Save} from "lucide-react";

export default function VaccineRegister() {
const [preview, setPreview] = useState<string | null>(null);

const handleImageChange = (e: ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
if (file) setPreview(URL.createObjectURL(file));
};
const inputModern =
"w-full px-4 py-3 rounded-xl bg-gray-100/70 shadow-sm " +
"focus:ring-2 focus:ring-red-500 focus:outline-none " +
"transition placeholder-gray-400 text-gray-800";

return (
<div className="min-h-screen bg-gradient-to-br from-gray-100 to-gray-200 flex flex-col items-center px-4 py-10">
<div className="min-h-screen flex flex-col items-center px-4 py-10">
<motion.h1
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
className="text-3xl font-extrabold text-gray-800 mb-10 flex items-center gap-2"
initial={{opacity: 0, y: -20}}
animate={{opacity: 1, y: 0}}
transition={{duration: 0.6}}
className="text-2xl md:text-3xl font-extrabold text-gray-800 mb-10 flex items-center gap-2 text-center"
>
<Syringe className="w-8 h-8 text-red-600" /> Cadastro de Vacinas
<Syringe className="w-7 h-7 md:w-8 md:h-8 text-red-600"/> Cadastro de Vacinas
</motion.h1>

<motion.form
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.6 }}
className="bg-white w-full max-w-4xl rounded-3xl shadow-2xl p-10 space-y-8"
initial={{opacity: 0, scale: 0.95}}
animate={{opacity: 1, scale: 1}}
transition={{duration: 0.6}}
className="bg-white w-full max-w-4xl rounded-3xl shadow-xl p-6 md:p-10 space-y-8"
>
<div className="flex flex-col items-center">
<label
className={`cursor-pointer flex flex-col items-center justify-center w-40 h-40 rounded-full
${preview ? "border-none bg-gray-100" : "border-2 border-dashed border-red-400 bg-red-50 hover:bg-red-100"}
transition`}
>
{preview ? (
<img
src={preview}
alt="Preview"
className="w-40 h-40 object-cover rounded-full"
/>
) : (
<div className="flex flex-col items-center">
<Syringe className="w-8 h-8 text-red-500 mb-2" />
<span className="text-sm text-red-600 font-medium">Foto</span>
</div>
)}
<input
type="file"
accept="image/*"
className="hidden"
onChange={handleImageChange}
/>
</label>

{!preview && (
<p className="text-xs text-gray-500 mt-2">
Clique para adicionar imagem da vacina (opcional)
</p>
)}
</div>

<section>
<h2 className="text-lg font-semibold text-gray-700 mb-4">Informações da Vacina</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<input type="text" placeholder="Nome da vacina" className="w-full px-4 py-3 rounded-2xl border border-gray-200 bg-gray-50 focus:ring-2 focus:ring-red-500 outline-none" />
<input type="text" placeholder="Fabricante" className="w-full px-4 py-3 rounded-2xl border border-gray-200 bg-gray-50 focus:ring-2 focus:ring-red-500 outline-none" />
<input type="date" placeholder="Data da aplicação" className="w-full px-4 py-3 rounded-2xl border border-gray-200 bg-gray-50 focus:ring-2 focus:ring-red-500 outline-none" />
<input type="date" placeholder="Próximo reforço" className="w-full px-4 py-3 rounded-2xl border border-gray-200 bg-gray-50 focus:ring-2 focus:ring-red-500 outline-none" />
<select className="w-full px-4 py-3 rounded-2xl border border-gray-200 bg-gray-50 focus:ring-2 focus:ring-red-500 outline-none">
<input type="text" placeholder="Nome da vacina" className={inputModern}/>
<input type="text" placeholder="Fabricante" className={inputModern}/>
<input type="date" placeholder="Data da aplicação" className={inputModern}/>
<input type="date" placeholder="Próximo reforço" className={inputModern}/>
<select className={inputModern}>
<option value="">Animal</option>
<option value="animal1">Fido</option>
<option value="animal2">Mimi</option>
Expand All @@ -77,12 +41,26 @@ export default function VaccineRegister() {

<section>
<h2 className="text-lg font-semibold text-gray-700 mb-4">Observações</h2>
<textarea rows={4} placeholder="Escreva informações adicionais sobre a vacina..." className="w-full px-4 py-3 rounded-2xl border border-gray-200 bg-gray-50 focus:ring-2 focus:ring-red-500 outline-none resize-none"></textarea>
<textarea
rows={4}
placeholder="Escreva informações adicionais sobre a vacina..."
className={`${inputModern} resize-none`}
/>
</section>

<div className="flex justify-end">
<motion.button whileTap={{ scale: 0.95 }} className="flex items-center gap-2 bg-gradient-to-r from-red-500 to-red-700 text-white px-8 py-3 rounded-2xl shadow-lg hover:from-red-600 hover:to-red-800 transition font-medium">
<Save className="w-5 h-5" /> Salvar
<div className="flex flex-col sm:flex-row justify-between gap-4">
<motion.button
whileTap={{scale: 0.95}}
className="w-full sm:w-auto px-6 py-3 rounded-2xl bg-gray-600 text-white shadow hover:bg-gray-700 transition font-medium"
type="button"
>
Vincular
</motion.button>
<motion.button
whileTap={{scale: 0.95}}
className="w-full sm:w-auto flex items-center justify-center gap-2 bg-gradient-to-r from-red-500 to-red-700 text-white px-8 py-3 rounded-2xl shadow-lg hover:from-red-600 hover:to-red-800 transition font-medium"
>
<Save className="w-5 h-5"/> Salvar
</motion.button>
</div>
</motion.form>
Expand Down