File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import React, { useState } from "react";
import "./FairyWorldBasicLearning.css";
const FairyWorldBasicLearning = ({ contents }) => {
const [isPlaying, setIsPlaying] = useState(false);
const toggleAudio = () => {
const audio = document.getElementById("fairy-audio");
if (isPlaying) {
audio.pause();
} else {
audio.play();
}
setIsPlaying(!isPlaying);
};
return (
<>
{contents && (
<div className="fairy-world-container" onClick={toggleAudio}>
<div className="fairy-world-image">
<img src={contents.basic.image} alt="동화이미지" />
</div>
<div className="fairy-world-sentence-container">
<div className="fairy-world-sentence">
<h2>{contents.basic.sentence}</h2>
</div>
<div className="fairy-world-sentence_meaning">
<h2>{contents.basic.sentenceMeaning}</h2>
</div>
<audio id="fairy-audio" controls style={{ display: "none" }}>
<source src={contents.basic.file} type="audio/mpeg" />
</audio>
</div>
</div>
)}
</>
);
};
export default FairyWorldBasicLearning;