Scribd
Upload
4 views4 pages

Editable Modal for Word Translation

The document is a React component for a modal window that allows users to edit a word's original and translation. It utilizes Framer Motion for animations and manages state for the edited word and visibility of input indicators. The modal also includes functionality for saving changes and closing the modal.

Uploaded by

illialevuoi
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
4 views4 pages

Editable Modal for Word Translation

The document is a React component for a modal window that allows users to edit a word's original and translation. It utilizes Framer Motion for animations and manages state for the edited word and visibility of input indicators. The modal also includes functionality for saving changes and closing the modal.

Uploaded by

illialevuoi
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

"use client";

import type { Word } from "@/store/useAppStore";


import { motion, AnimatePresence} from "framer-motion";
import { useEffect, useState } from "react";
import { X } from "lucide-react";
import RippleButton from "./RippleButton";

interface ModalWindowProps {
word: Word | null,
onClose: () => void,
onSave: (newWord: Word) => void,
}

export default function ModalWindow({word, onClose, onSave} : ModalWindowProps) {


const [editedWord, setEditedWord] = useState<Word>({original: "", translation:
"", id: [Link]()});

const [ishowed1, setIshowed1] = useState<boolean>(true);


const [ishowed2, setIshowed2] = useState<boolean>(true);

useEffect(() => {
if(word) setEditedWord(word);
},[word]);

useEffect(() => {
if(word) [Link] = "hidden";
else [Link] = "auto";
return () => {
[Link] = "auto";
};
}, [word]);

if(!word) return null;

return (
<AnimatePresence>
{word && (
<>
<[Link] className={`
fixed inset-0 bg-black/60 backdrop-blur-sm z-40
`} initial={{
opacity: 0,
}} animate={{
opacity: 1,
}} exit={{
opacity: 0,
}} transition={{
duration: 0.3,
ease: "easeOut",
}} onClick={onClose}>

</[Link]>

<[Link] className={`
fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-
50
flex items-center justify-center
`} initial={{
opacity: 0,
}} animate={{
opacity: 1,

}} exit={{
opacity: 0,
}}>
<[Link] className={`
flex flex-col
bg-white/50
w-120 h-80
rounded-[40px_15px_40px_15px]
p-5
`} initial={{
opacity: 0,
y: 60,
scale: 0.9,
}} animate={{
opacity: 1,
y: 0,
scale: 1,
}} exit={{
opacity: 0,
y: 40,
scale: 0.95,
}}>
<div className={`
flex flex-row items-center justify-between
border-b-2 border-b-white
`}>
<h2 className={`
text-2xl font-semibold select-none
`}>Edit Word</h2>
<button className={`
active-button

`} onClick={onClose}>
<[Link] initial={{
rotate: 0,
}} whileHover={{
rotate: 90,
color: "#ffffff",
}} transition={{
duration: 0.3,
}} className={`

`}>
<X></X>
</[Link]>
</button>
</div>
<div className={`
flex flex-col items-center
w-full h-full
mt-5 gap-4
`}>
<div className={`
flex flex-col items-center justify-center
`}>
<input type="text" placeholder="Original"
className={`
w-[80%] text-xl p-1 text-center outline-
none
rounded-[20px_5px_0px_0px]
hover:bg-white/30
focus:bg-white/30
transition duration-300
`} value={[Link]} onFocus={() =>
setIshowed1(true)} onBlur={(e) => setIshowed1([Link]() !== "" ? true :
false)} onChange={(e) => setEditedWord({...editedWord, original:
[Link]})}/>
<AnimatePresence>
<[Link] className={`
bg-white
w-[80%] h-0.5
rounded-full
`} initial={{
scaleX: 0,
}} animate={{
scaleX: ishowed1 ? 1 : 0,
}} exit={{
scaleX: 0,
}} transition={{
duration: 0.5,
ease: "easeInOut",
}}>

</[Link]>
</AnimatePresence>
</div>

<div className={`
flex flex-col items-center justify-center
mb-12
`}>
<input type="text" placeholder="Translation"
className={`
w-[80%] text-xl p-1 text-center outline-
none
rounded-[20px_5px_0px_0px]
hover:bg-white/30
focus:bg-white/30
transition duration-300
`} value={[Link]} onFocus={()
=> setIshowed2(true)} onBlur={(e) => setIshowed2([Link]() !== "" ?
true : false)} onChange={(e) => setEditedWord({...editedWord, translation:
[Link]})}/>
<AnimatePresence>
<[Link] className={`
w-[80%] h-0.5
bg-white
rounded-full
`} initial={{
scaleX: 0,
}} animate={{
scaleX: ishowed2 ? 1 : 0,
}} exit={{
scaleX: 0,
}} transition={{
duration: 0.5,
ease: "easeInOut",
}}>

</[Link]>
</AnimatePresence>
</div>

<RippleButton active={[Link]() !
== "" && [Link]() !== ""} onClick={() => onSave(editedWord)}
className={`
w-[60%] h-[20%]
${[Link]() !== "" &&
[Link]() !== "" ? "bg-[#00F58B]/50" : "bg-[#00A35C]/50"}
${[Link]() !== "" &&
[Link]() !== "" ? "active-button" : "banned-button"}
rounded-[20px_5px_20px_5px]
backdrop-blur-sm
transition duration-300
text-white text-center text-2xl
outline-none
`}>
Save Changes
</RippleButton>
</div>
</[Link]>
</[Link]>
</>
)}
</AnimatePresence>
);
}

You might also like