97 lines
2.7 KiB
JavaScript
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;
|