letter-werefox-cafe/archive/src/App.js

97 lines
2.7 KiB
JavaScript

import React, { useState } from "react";
import logo from "./heart-icon.png";
import "./App.css";
function MakePoem() {
return (
<div className="App Poem-statement">
<div className="pure-g">
<div className="pure-u-1-5" />
<p className="pure-u-3-5">
<code>
You are important. I wrote a small poem I hope will help you today.<br></br>
It's not very long, but I'm doing my best, and so are you.
</code>
</p>
</div>
<div className="pure-g">
<div className="pure-u-1-5" />
<p className="pure-u-3-5">
<code>
You are the moon, you are the stars<br></br>
I'm glad you're here, whomever you are.
</code>
</p>
</div>
<div className="pure-g">
<div className="pure-u-1-5" />
<p className="pure-u-3-5">
<code>
We've been through much; in this life it's true,<br></br>
But in the end, you will come through.
</code>
</p>
<div className="pure-u-1-5" />
</div>
<div className="pure-g">
<div className="pure-u-1-5" />
<p className="pure-u-3-5">
<code>
Much like life, this poem is short<br></br>
It doesn't always rhyme, or have a nice beat;<br></br>
It might seem wrong, or incomplete;<br></br>
It might go on, or so it seems;<br></br>
It might feel like you're in a dream.
</code>
</p>
<div className="pure-u-1-5" />
</div>
<div className="pure-g">
<div className="pure-u-1-5" />
<p className="pure-u-3-5">
<code>
That's not the point, I know in my heart<br></br>
I'm glad you're here, whomever you are.
</code>
</p>
<div className="pure-u-1-5" />
</div>
</div>
);
}
function App() {
let [isPoemShown, showPoem] = useState(false);
let [buttonTextString, changeButtonText] = useState("Tell me more");
const activatePoem = () => {
showPoem(!isPoemShown);
if (isPoemShown) {
changeButtonText("Tell me more");
} else {
changeButtonText("Tell me less");
}
};
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo pure-img" alt="logo" />
<p>
<code className="App-statement">You are important and loved</code>
</p>
<button
className="App-button pure-button"
autoFocus
name="Tell me more"
onClick={() => activatePoem()}
>
{buttonTextString}
</button>
{isPoemShown && <MakePoem />}
</header>
</div>
);
}
export default App;